es6ify ui/file_manager/file_manager/foreground/js/ui/drag_selector.js

Bug: 778674
Change-Id: If526c9e498e804e26f0ed6d55df8a69b98714b97
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1640583
Commit-Queue: Stuart Langley <slangley@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665715}

ui/file_manager/file_manager/foreground/js/ui/drag_selector.js

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
+class DragSelector {
+  /**
    * Drag selector used on the file list or the grid table.
- * @constructor
- * @struct
    */
-function DragSelector() {
+  constructor() {
     /**
      * Target list of drag selection.
      * @type {cr.ui.List}
@@ -53,27 +52,17 @@ function DragSelector() {
     // Bind handlers to make them removable.
     this.onMouseMoveBound_ = this.onMouseMove_.bind(this);
     this.onMouseUpBound_ = this.onMouseUp_.bind(this);
-}
-
-/**
- * Flag that shows whether the item is included in the selection or not.
- * @enum {number}
- * @private
- */
-DragSelector.SelectionFlag_ = {
-  IN_LAST_SELECTION: 1 << 0,
-  IN_CURRENT_SELECTION: 1 << 1
-};
+  }
 
-/**
- * Obtains the scrolled position in the element of mouse pointer from the mouse
- * event.
+  /**
+   * Obtains the scrolled position in the element of mouse pointer from the
+   * mouse event.
    *
    * @param {HTMLElement} element Element that has the scroll bars.
    * @param {Event} event The mouse event.
    * @return {Object} Scrolled position.
    */
-DragSelector.getScrolledPosition = (element, event) => {
+  static getScrolledPosition(element, event) {
     if (!element.cachedBounds) {
       element.cachedBounds = element.getBoundingClientRect();
       if (!element.cachedBounds) {
@@ -85,9 +74,9 @@ DragSelector.getScrolledPosition = (element, event) => {
       x: event.clientX - rect.left + element.scrollLeft,
       y: event.clientY - rect.top + element.scrollTop
     };
-};
+  }
 
-/**
+  /**
    * Starts drag selection by reacting dragstart event.
    * This function must be called from handlers of dragstart event.
    *
@@ -95,7 +84,7 @@ DragSelector.getScrolledPosition = (element, event) => {
    * @param {cr.ui.List} list List where the drag selection starts.
    * @param {Event} event The dragstart event.
    */
-DragSelector.prototype.startDragSelection = function(list, event) {
+  startDragSelection(list, event) {
     // Precondition check
     if (!list.selectionModel_.multiple || this.target_) {
       return;
@@ -131,14 +120,14 @@ DragSelector.prototype.startDragSelection = function(list, event) {
         'mousemove', this.onMouseMoveBound_, true);
     this.target_.ownerDocument.addEventListener(
         'mouseup', this.onMouseUpBound_, true);
-};
+  }
 
-/**
+  /**
    * Handles the mousemove event.
    * @private
    * @param {Event} event The mousemove event.
    */
-DragSelector.prototype.onMouseMove_ = function(event) {
+  onMouseMove_(event) {
     event = /** @type {MouseEvent} */ (event);
     // Get the selection bounds.
     const pos = DragSelector.getScrolledPosition(this.target_, event);
@@ -171,8 +160,8 @@ DragSelector.prototype.onMouseMove_ = function(event) {
     for (let i = 0; i < currentSelection.length; i++) {
       const index = currentSelection[i];
       // Bit operator can be used for undefined value.
-    selectionFlag[index] =
-        selectionFlag[index] | DragSelector.SelectionFlag_.IN_CURRENT_SELECTION;
+      selectionFlag[index] = selectionFlag[index] |
+          DragSelector.SelectionFlag_.IN_CURRENT_SELECTION;
     }
 
     // Update the selection
@@ -180,7 +169,7 @@ DragSelector.prototype.onMouseMove_ = function(event) {
     for (const name in selectionFlag) {
       const index = parseInt(name, 10);
       const flag = selectionFlag[index];
-    // The flag may be one of followings:
+      // The flag may be one of following:
       // - IN_LAST_SELECTION | IN_CURRENT_SELECTION
       // - IN_LAST_SELECTION
       // - IN_CURRENT_SELECTION
@@ -192,8 +181,9 @@ DragSelector.prototype.onMouseMove_ = function(event) {
 
       if (flag == DragSelector.SelectionFlag_.IN_LAST_SELECTION) {
         // If the flag equals to IN_LAST_SELECTION,
-      // then the item is included in lastSelection but not in currentSelection.
-      // Revert the selection state to this.originalSelection_.
+        // then the item is included in lastSelection but not in
+        // currentSelection. Revert the selection state to
+        // this.originalSelection_.
         this.target_.selectionModel_.setIndexSelected(
             index, this.originalSelection_.indexOf(index) != -1);
       } else if (flag == DragSelector.SelectionFlag_.IN_CURRENT_SELECTION) {
@@ -214,14 +204,14 @@ DragSelector.prototype.onMouseMove_ = function(event) {
     this.border_.style.top = borderBounds.top + 'px';
     this.border_.style.width = borderBounds.width + 'px';
     this.border_.style.height = borderBounds.height + 'px';
-};
+  }
 
-/**
+  /**
    * Handle the mouseup event.
    * @private
    * @param {Event} event The mouseup event.
    */
-DragSelector.prototype.onMouseUp_ = function(event) {
+  onMouseUp_(event) {
     event = /** @type {MouseEvent} */ (event);
     this.onMouseMove_(event);
     this.target_.removeChild(this.border_);
@@ -234,4 +224,15 @@ DragSelector.prototype.onMouseUp_ = function(event) {
     // The target may select an item by reacting to the mouseup event.
     // This suppress to the selecting behavior.
     event.stopPropagation();
+  }
+}
+
+/**
+ * Flag that shows whether the item is included in the selection or not.
+ * @enum {number}
+ * @private
+ */
+DragSelector.SelectionFlag_ = {
+  IN_LAST_SELECTION: 1 << 0,
+  IN_CURRENT_SELECTION: 1 << 1
 };