Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert GrabToPan to a standard class

Browse Source 
This code is the last piece[1] of the viewer that's not using standard `class`es, and by converting this code we get rid of some now unneeded boilerplate code (slightly reducing the size of the *built* `web/viewer.js` file).
Note that while this code was originally imported from a separate repository, it was last sync-ed with upstream *five years* ago which is why this re-factoring should be OK as far as I'm concerned (and we've done some other clean-up since then as well).

---
[1] Technically the `web/debugger.js` file is left as well, however that code is first of all not bundled in the *built* `web/viewer.js` file and secondly it's not even loaded by default either.
This commit is contained in:
Jonas Jenwald 2021-11-09 13:00:11 +01:00
parent ed6af0f844
commit 08d56c67ae
1 changed files with 58 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
web/grab_to_pan.js
View File

@ -14,97 +14,91 @@
* limitations under the License.
*/
/**
* Construct a GrabToPan instance for a given HTML element.
* @param options.element {Element}
* @param options.ignoreTarget {function} optional. See `ignoreTarget(node)`
* @param options.onActiveChanged {function(boolean)} optional. Called
* when grab-to-pan is (de)activated. The first argument is a boolean that
* shows whether grab-to-pan is activated.
*/
function GrabToPan(options) {
this.element = options.element;
this.document = options.element.ownerDocument;
if (typeof options.ignoreTarget === "function") {
this.ignoreTarget = options.ignoreTarget;
}
this.onActiveChanged = options.onActiveChanged;
// Class name of element which can be grabbed.
const CSS_CLASS_GRAB = "grab-to-pan-grab";
// Bind the contexts to ensure that `this` always points to
// the GrabToPan instance.
this.activate = this.activate.bind(this);
this.deactivate = this.deactivate.bind(this);
this.toggle = this.toggle.bind(this);
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.
const overlay = (this.overlay = document.createElement("div"));
overlay.className = "grab-to-pan-grabbing";
}
GrabToPan.prototype = {
class GrabToPan {
/**
* Class name of element which can be grabbed
* Construct a GrabToPan instance for a given HTML element.
* @param {Element} options.element
* @param {function} [options.ignoreTarget] - See `ignoreTarget(node)`.
* @param {function(boolean)} [options.onActiveChanged] - Called when
* grab-to-pan is (de)activated. The first argument is a boolean that
* shows whether grab-to-pan is activated.
*/
CSS_CLASS_GRAB: "grab-to-pan-grab",
constructor(options) {
this.element = options.element;
this.document = options.element.ownerDocument;
if (typeof options.ignoreTarget === "function") {
this.ignoreTarget = options.ignoreTarget;
}
this.onActiveChanged = options.onActiveChanged;
// Bind the contexts to ensure that `this` always points to
// the GrabToPan instance.
this.activate = this.activate.bind(this);
this.deactivate = this.deactivate.bind(this);
this.toggle = this.toggle.bind(this);
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.
const overlay = (this.overlay = document.createElement("div"));
overlay.className = "grab-to-pan-grabbing";
}
/**
* Bind a mousedown event to the element to enable grab-detection.
*/
activate: function GrabToPan_activate() {
activate() {
if (!this.active) {
this.active = true;
this.element.addEventListener("mousedown", this._onmousedown, true);
this.element.classList.add(this.CSS_CLASS_GRAB);
if (this.onActiveChanged) {
this.onActiveChanged(true);
}
this.element.addEventListener("mousedown", this._onMouseDown, true);
this.element.classList.add(CSS_CLASS_GRAB);
this.onActiveChanged?.(true);
}
},
}
/**
* Removes all events. Any pending pan session is immediately stopped.
*/
deactivate: function GrabToPan_deactivate() {
deactivate() {
if (this.active) {
this.active = false;
this.element.removeEventListener("mousedown", this._onmousedown, true);
this.element.removeEventListener("mousedown", this._onMouseDown, true);
this._endPan();
this.element.classList.remove(this.CSS_CLASS_GRAB);
if (this.onActiveChanged) {
this.onActiveChanged(false);
}
}
},
this.element.classList.remove(CSS_CLASS_GRAB);
toggle: function GrabToPan_toggle() {
this.onActiveChanged?.(false);
}
}
toggle() {
if (this.active) {
this.deactivate();
} else {
this.activate();
}
},
}
/**
* Whether to not pan if the target element is clicked.
* Override this method to change the default behaviour.
*
* @param node {Element} The target of the event
* @param {Element} node - The target of the event.
* @returns {boolean} Whether to not react to the click event.
*/
ignoreTarget: function GrabToPan_ignoreTarget(node) {
ignoreTarget(node) {
// Check whether the clicked element is, a child of, an input element/link.
return node.matches(
"a[href], a[href] *, input, textarea, button, button *, select, option"
);
},
}
/**
* @private
*/
_onmousedown: function GrabToPan__onmousedown(event) {
#onMouseDown(event) {
if (event.button !== 0 || this.ignoreTarget(event.target)) {
return;
}
@ -122,7 +116,7 @@ GrabToPan.prototype = {
this.scrollTopStart = this.element.scrollTop;
this.clientXStart = event.clientX;
this.clientYStart = event.clientY;
this.document.addEventListener("mousemove", this._onmousemove, true);
this.document.addEventListener("mousemove", this._onMouseMove, true);
this.document.addEventListener("mouseup", this._endPan, true);
// When a scroll event occurs before a mousemove, assume that the user
// dragged a scrollbar (necessary for Opera Presto, Safari and IE)
@ -135,12 +129,9 @@ GrabToPan.prototype = {
if (focusedElement && !focusedElement.contains(event.target)) {
focusedElement.blur();
}
},
}
/**
* @private
*/
_onmousemove: function GrabToPan__onmousemove(event) {
#onMouseMove(event) {
this.element.removeEventListener("scroll", this._endPan, true);
if (!(event.buttons & 1)) {
// The left mouse button is released.
@ -164,18 +155,15 @@ GrabToPan.prototype = {
if (!this.overlay.parentNode) {
document.body.appendChild(this.overlay);
}
},
}
/**
* @private
*/
_endPan: function GrabToPan__endPan() {
#endPan() {
this.element.removeEventListener("scroll", this._endPan, true);
this.document.removeEventListener("mousemove", this._onmousemove, true);
this.document.removeEventListener("mousemove", this._onMouseMove, true);
this.document.removeEventListener("mouseup", this._endPan, true);
// Note: ChildNode.remove doesn't throw if the parentNode is undefined.
this.overlay.remove();
},
};
}
}
export { GrabToPan };