Convert GrabToPan to a standard class

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.

Author: Snuffleupagus

web/grab_to_pan.js

@@ -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;
-
-  // 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 name of element which can be grabbed.
+const CSS_CLASS_GRAB = "grab-to-pan-grab";
+
+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);
+
+      this.onActiveChanged?.(false);
     }
-  },
+  }
 
-  toggle: function GrabToPan_toggle() {
+  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 };