MD Settings: Display: Add mirroring and other fixes

chrome/browser/resources/settings/device_page/drag_behavior.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Behavior for handling dragging elements in a container.
  *     Draggable elements must have the 'draggable' attribute set.
  */
 
 /**
  * @typedef {{
  *   x: number,
  *   y: number
  * }}
  */
 var DragPosition;
 
 /** @polymerBehavior */
 var DragBehavior = {
+  properties: {
+    /** Whether or not drag is enabled (e.g. not mirrored). */
+    dragEnabled: Boolean,
+  },
+
   /**
    * The id of the element being dragged, or empty if not dragging.
    * @private {string}
    */
   dragId_: '',
 
-  /** @private {boolean} */
-  enabled_: false,
-
   /** @private {!HTMLDivElement|undefined} */
   container_: undefined,
 
   /** @private {?function(string, ?DragPosition):void} */
   callback_: null,
 
   /** @private {!DragPosition} */
   dragStartLocation_: {x: 0, y: 0},
 
   /**
@@ skipping 16 matching lines @@
 
   /** @private {?function(!Event)} */
   endDragListener_: null,
 
   /**
    * @param {boolean} enabled
    * @param {!HTMLDivElement=} opt_container
    * @param {!function(string, ?DragPosition):void=} opt_callback
    */
   initializeDrag: function(enabled, opt_container, opt_callback) {
-    this.enabled_ = enabled;
+    this.dragEnabled = enabled;
     if (!enabled) {
-      if (this.container) {
-        this.container.removeEventListener('mousdown', this.mouseDownListener_);
-        this.mouseDownListener_ = null;
-        this.container.removeEventListener(
-            'mousemove', this.mouseMoveListener_);
-        this.mouseMoveListener_ = null;
-        this.container.removeEventListener(
-            'touchstart', this.touchStartListener_);
-        this.touchStartListener_ = null;
-        this.container.removeEventListener(
-            'touchmove', this.touchMoveListener_);
-        this.touchMoveListener_ = null;
-        this.container.removeEventListener('touchend', this.endDragListener_);
-      }
-      if (this.mouseUpListener_)
-        window.removeEventListener('mouseup', this.endDragListener_);
-      this.endDragListener_ = null;
+      this.removeListeners_();
       return;
     }
 
     if (opt_container !== undefined)
       this.container_ = opt_container;
-    var container = this.container_;
-    assert(container);
 
-    this.mouseDownListener_ = this.onMouseDown_.bind(this);
-    container.addEventListener('mousedown', this.mouseDownListener_, true);
-
-    this.mouseMoveListener_ = this.onMouseMove_.bind(this);
-    container.addEventListener('mousemove', this.mouseMoveListener_, true);
-
-    this.touchStartListener_ = this.onTouchStart_.bind(this);
-    container.addEventListener('touchstart', this.touchStartListener_, true);
-
-    this.touchMoveListener_ = this.onTouchMove_.bind(this);
-    container.addEventListener('touchmove', this.touchMoveListener_, true);
-
-    this.endDragListener_ = this.endDrag_.bind(this);
-    window.addEventListener('mouseup', this.endDragListener_, true);
-    container.addEventListener('touchend', this.endDragListener_, true);
+    this.addListeners_();
 
     if (opt_callback !== undefined)
       this.callback_ = opt_callback;
   },
 
+  /** @private */
+  addListeners_() {
+    let container = this.container_;
+    if (!container || this.mouseDownListener_)
+      return;
+    this.mouseDownListener_ = this.onMouseDown_.bind(this);
+    container.addEventListener('mousedown', this.mouseDownListener_);
+
+    this.mouseMoveListener_ = this.onMouseMove_.bind(this);
+    container.addEventListener('mousemove', this.mouseMoveListener_);
+
+    this.touchStartListener_ = this.onTouchStart_.bind(this);
+    container.addEventListener('touchstart', this.touchStartListener_);
+
+    this.touchMoveListener_ = this.onTouchMove_.bind(this);
+    container.addEventListener('touchmove', this.touchMoveListener_);
+
+    this.endDragListener_ = this.endDrag_.bind(this);
+    window.addEventListener('mouseup', this.endDragListener_);
+    container.addEventListener('touchend', this.endDragListener_);
+  },
+
+  /** @private */
+  removeListeners_() {
+    let container = this.container_;
+    if (!container || !this.mouseDownListener_)
+      return;
+    container.removeEventListener('mousedown', this.mouseDownListener_);
+    this.mouseDownListener_ = null;
+    container.removeEventListener('mousemove', this.mouseMoveListener_);
+    this.mouseMoveListener_ = null;
+    container.removeEventListener('touchstart', this.touchStartListener_);
+    this.touchStartListener_ = null;
+    container.removeEventListener('touchmove', this.touchMoveListener_);
+    this.touchMoveListener_ = null;
+    container.removeEventListener('touchend', this.endDragListener_);
+    if (this.endDragListener_)
+      window.removeEventListener('mouseup', this.endDragListener_);

[michaelpg, 2016/07/12 22:36:48]

do we risk retaining this listener on window if this.container_ is unset? then
we may call endDrag_ when this.dragEnabled is false

[stevenjb, 2016/07/12 22:41:32]

We shouldn't be unsetting this.container_ anywhere, unless I forgot+missed
someplace? If container_ is never set, addListeners_ will never set the
listener.

[michaelpg, 2016/07/12 22:43:12]

yeah, makes sense. it helps that it's called "initializeDrag".

+    this.endDragListener_ = null;
+  },
+
   /**
    * @param {Event} e The mouse down event.
    * @return {boolean}
    * @private
    */
   onMouseDown_: function(e) {
-    if (e.button != 0)
-      return true;
-    if (!e.target.getAttribute('draggable'))
+    if (e.button != 0 || !e.target.getAttribute('draggable'))
       return true;
     e.preventDefault();
     var target = assertInstanceof(e.target, HTMLElement);
     return this.startDrag_(target, {x: e.pageX, y: e.pageY});
   },
 
   /**
    * @param {Event} e The mouse move event.
    * @return {boolean}
    * @private
@@ skipping 43 matching lines @@
     return this.processDrag_(e, touchLocation);
   },
 
   /**
    * @param {!HTMLElement} target
    * @param {!DragPosition} eventLocation
    * @return {boolean}
    * @private
    */
   startDrag_: function(target, eventLocation) {
+    assert(this.dragEnabled);
     this.dragId_ = target.id;
     this.dragStartLocation_ = eventLocation;
     return false;
   },
 
   /**
    * @param {Event} e
    * @return {boolean}
    * @private
    */
   endDrag_: function(e) {
+    assert(this.dragEnabled);
     if (this.dragId_ && this.callback_)
       this.callback_(this.dragId_, null);
     this.dragId_ = '';
     this.lastTouchLocation_ = null;
     return false;
   },
 
   /**
    * @param {Event} e The event which triggers this drag.
    * @param {DragPosition} eventLocation The location of the event.
    * @return {boolean}
    * @private
    */
   processDrag_: function(e, eventLocation) {
+    assert(this.dragEnabled);
     if (!this.dragId_)
       return true;
     if (this.callback_) {
       var delta = {
         x: eventLocation.x - this.dragStartLocation_.x,
         y: eventLocation.y - this.dragStartLocation_.y,
       };
       this.callback_(this.dragId_, delta);
     }
     return false;
   },
 };