diff --git a/web/grab_to_pan.js b/web/grab_to_pan.js index 8332e4604..a3917347c 100644 --- a/web/grab_to_pan.js +++ b/web/grab_to_pan.js @@ -41,16 +41,17 @@ var GrabToPan = (function GrabToPanClosure() { this._onmousedown = this._onmousedown.bind(this); this._onmousemove = this._onmousemove.bind(this); this._endPan = this._endPan.bind(this); + + // This overlay will be inserted in the document when the mouse moves during + // a grab operation, to ensure that the cursor has the desired appearance. + var overlay = this.overlay = document.createElement('div'); + overlay.className = 'grab-to-pan-grabbing'; } GrabToPan.prototype = { /** * Class name of element which can be grabbed */ CSS_CLASS_GRAB: 'grab-to-pan-grab', - /** - * Class name of element which is being dragged & panned - */ - CSS_CLASS_GRABBING: 'grab-to-pan-grabbing', /** * Bind a mousedown event to the element to enable grab-detection. @@ -133,7 +134,6 @@ var GrabToPan = (function GrabToPanClosure() { this.element.addEventListener('scroll', this._endPan, true); event.preventDefault(); event.stopPropagation(); - this.element.classList.remove(this.CSS_CLASS_GRAB); this.document.documentElement.classList.add(this.CSS_CLASS_GRABBING); }, @@ -143,13 +143,16 @@ var GrabToPan = (function GrabToPanClosure() { _onmousemove: function GrabToPan__onmousemove(event) { this.element.removeEventListener('scroll', this._endPan, true); if (isLeftMouseReleased(event)) { - this.document.removeEventListener('mousemove', this._onmousemove, true); + this._endPan(); return; } var xDiff = event.clientX - this.clientXStart; var yDiff = event.clientY - this.clientYStart; this.element.scrollTop = this.scrollTopStart - yDiff; this.element.scrollLeft = this.scrollLeftStart - xDiff; + if (!this.overlay.parentNode) { + document.body.appendChild(this.overlay); + } }, /** @@ -159,8 +162,9 @@ var GrabToPan = (function GrabToPanClosure() { this.element.removeEventListener('scroll', this._endPan, true); this.document.removeEventListener('mousemove', this._onmousemove, true); this.document.removeEventListener('mouseup', this._endPan, true); - this.document.documentElement.classList.remove(this.CSS_CLASS_GRABBING); - this.element.classList.add(this.CSS_CLASS_GRAB); + if (this.overlay.parentNode) { + this.overlay.parentNode.removeChild(this.overlay); + } } }; diff --git a/web/viewer.css b/web/viewer.css index 58bdc791b..54d6d2805 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1577,30 +1577,31 @@ html[dir='rtl'] #documentPropertiesContainer .row > * { color: black; } -.grab-to-pan-grab * { +.grab-to-pan-grab { cursor: url("images/grab.cur"), move !important; cursor: -webkit-grab !important; cursor: -moz-grab !important; cursor: grab !important; } -.grab-to-pan-grabbing, -.grab-to-pan-grabbing * { +.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) { + cursor: inherit !important; +} +.grab-to-pan-grab:active, +.grab-to-pan-grabbing { cursor: url("images/grabbing.cur"), move !important; cursor: -webkit-grabbing !important; cursor: -moz-grabbing !important; cursor: grabbing !important; -} -.grab-to-pan-grab input, -.grab-to-pan-grab textarea, -.grab-to-pan-grab button, -.grab-to-pan-grab button *, -.grab-to-pan-grab select, -.grab-to-pan-grab option { - cursor: auto !important; -} -.grab-to-pan-grab a[href], -.grab-to-pan-grab a[href] * { - cursor: pointer !important; + + position: fixed; + background: transparent; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 50000; /* should be higher than anything else in PDF.js! */ } @page {