Adds animation on a hovered directory/volume when dragging files in Files.app

chrome/browser/resources/file_manager/js/file_transfer_controller.js

 // Copyright (c) 2012 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.
 
 /**
  * Global (placed in the window object) variable name to hold internal
  * file dragging information. Needed to show visual feedback while dragging
  * since DataTransfer object is in protected state. Reachable from other
  * file manager instances.
  */
@@ skipping 308 matching lines @@
   },
 
   /**
    * @this {FileTransferController}
    * @param {cr.ui.List} list Drop target list.
    * @param {Event} event A dragend event of DOM.
    */
   onDragEnd_: function(list, event) {
     var container = this.document_.querySelector('#drag-container');
     container.textContent = '';
-    this.setDropTarget_(null);
+    this.clearDropTarget_();
     delete window[DRAG_AND_DROP_GLOBAL_DATA];
   },
 
   /**
    * @this {FileTransferController}
    * @param {boolean} onlyIntoDirectories True if the drag is only into
    *     directoris.
    * @param {cr.ui.List} list Drop target list.
    * @param {Event} event A dragover event of DOM.
    */
@@ skipping 16 matching lines @@
     var item = list.getListItemAncestor(event.target);
     item = item && list.isItem(item) ? item : null;
     if (item == this.dropTarget_)
       return;
 
     var entry = item && list.dataModel.item(item.listIndex);
     if (entry) {
       this.setDropTarget_(item, entry.isDirectory, event.dataTransfer,
           entry.fullPath);
     } else {
-      this.setDropTarget_(null);
+      this.clearDropTarget_();
     }
   },
 
   /**
    * @this {FileTransferController}
    * @param {HTMLElement} breadcrumbsContainer Element which contains target
    *     breadcrumbs.
    * @param {Event} event A dragenter event of DOM.
    */
   onDragEnterBreadcrumbs_: function(breadcrumbsContainer, event) {
@@ skipping 12 matching lines @@
    * @param {Event} event A dragleave event of DOM.
    */
   onDragLeave_: function(list, event) {
     // If mouse moves from one element to another the 'dragenter'
     // event for the new element comes before the 'dragleave' event for
     // the old one. In this case event.target != this.lastEnteredTarget_
     // and handler of the 'dragenter' event has already caried of
     // drop target. So event.target == this.lastEnteredTarget_
     // could only be if mouse goes out of listened element.
     if (event.target == this.lastEnteredTarget_) {
-      this.setDropTarget_(null);
+      this.clearDropTarget_();
       this.lastEnteredTarget_ = null;
     }
   },
 
   /**
    * @this {FileTransferController}
    * @param {boolean} onlyIntoDirectories True if the drag is only into
    *     directories.
    * @param {Event} event A dragleave event of DOM.
    */
   onDrop_: function(onlyIntoDirectories, event) {
     if (onlyIntoDirectories && !this.dropTarget_)
       return;
     var destinationPath = this.destinationPath_ ||
                           this.directoryModel_.getCurrentDirPath();
     if (!this.canPasteOrDrop_(event.dataTransfer, destinationPath))
       return;
     event.preventDefault();
     this.paste(event.dataTransfer, destinationPath,
                this.selectDropEffect_(event, destinationPath));
-    this.setDropTarget_(null);
+    this.clearDropTarget_();
   },
 
   /**
+   * Sets the drop target.
    * @this {FileTransferController}
+   * @param {Element} domElement Target of the drop.
+   * @param {boolean} isDirectory If the target is a directory.
+   * @param {DataTransfer} dataTransfer Data transfer object.
+   * @param {string} destinationPath Destination path.
    */
-  setDropTarget_: function(domElement, isDirectory, opt_dataTransfer,
-                           opt_destinationPath) {
+  setDropTarget_: function(domElement, isDirectory, dataTransfer,
+                           destinationPath) {
     if (this.dropTarget_ == domElement)
       return;
 
     /** @type {string?} */
     this.destinationPath_ = null;
-    if (domElement) {
-      if (isDirectory &&
-          this.canPasteOrDrop_(opt_dataTransfer, opt_destinationPath)) {
-        domElement.classList.add('accepts');
-        this.destinationPath_ = opt_destinationPath;
-      }
+
+    // Add accept class if the domElement can accept the drag.
+    if (isDirectory &&
+        this.canPasteOrDrop_(dataTransfer, destinationPath)) {
+      domElement.classList.add('accepts');
+      this.destinationPath_ = destinationPath;
     }
-    if (this.dropTarget_ && this.dropTarget_.classList.contains('accepts')) {
-      var oldDropTarget = this.dropTarget_;
-      var self = this;
-      setTimeout(function() {
-        if (oldDropTarget != self.dropTarget_)
-          oldDropTarget.classList.remove('accepts');
-      }, 0);
-    }
+
+    // Remove the old drag target.
+    this.clearDropTarget_();
+
+    // Set the new drop target.
     this.dropTarget_ = domElement;
-    if (this.navigateTimer_ !== undefined) {
-      clearTimeout(this.navigateTimer_);
-      this.navigateTimer_ = undefined;
-    }
-    if (domElement && isDirectory && opt_destinationPath) {
+
+    // Start timer changing the directory.
+    if (domElement && isDirectory && destinationPath &&
+        this.canPasteOrDrop_(dataTransfer, destinationPath)) {
       this.navigateTimer_ = setTimeout(function() {
-        this.directoryModel_.changeDirectory(opt_destinationPath);
+        this.directoryModel_.changeDirectory(destinationPath);
       }.bind(this), 2000);
     }
   },
 
   /**
+   * Clears the drop target.
+   * @this {FileTransferController}
+   */
+  clearDropTarget_: function() {
+    if (this.dropTarget_ && this.dropTarget_.classList.contains('accepts'))
+      this.dropTarget_.classList.remove('accepts');
+    this.dropTarget_ = null;
+    if (this.navigateTimer_ !== undefined) {
+      clearTimeout(this.navigateTimer_);
+      this.navigateTimer_ = undefined;
+    }
+  },
+
+  /**
    * @this {FileTransferController}
    * @return {boolean} Returns false if {@code <input type="text">} element is
    *     currently active. Otherwise, returns true.
    */
   isDocumentWideEvent_: function() {
     return this.document_.activeElement.nodeName.toLowerCase() != 'input' ||
         this.document_.activeElement.type.toLowerCase() != 'text';
   },
 
   /**
@@ skipping 51 matching lines @@
    */
   onBeforeCut_: function(event) {
     if (!this.isDocumentWideEvent_())
       return;
     // queryCommandEnabled returns true if event.returnValue is false.
     event.returnValue = !this.canCutOrDrag_();
   },
 
   /**
    * @this {FileTransferController}
-   * @return {boolean}  Returns true if some files are selected and all the file
+   * @return {boolean} Returns true if some files are selected and all the file
    *     on drive is available to be cut. Otherwise, returns false.
    */
   canCutOrDrag_: function() {
     return !this.readonly && this.canCopyOrDrag_();
   },
 
   /**
    * @this {FileTransferController}
    */
   onPaste_: function(event) {
@@ skipping 20 matching lines @@
    */
   onBeforePaste_: function(event) {
     if (!this.isDocumentWideEvent_())
       return;
     // queryCommandEnabled returns true if event.returnValue is false.
     event.returnValue = !this.canPasteOrDrop_(event.clipboardData);
   },
 
   /**
    * @this {FileTransferController}
-   * @return {boolean}  Returns true if {@code opt_destinationPath} is
-   *     available to be pasted to. Otherwise, returns false.
+   * @param {DataTransfer} dataTransfer Data transfer object.
+   * @param {string=} opt_destinationPath Destination path.
+   * @return {boolean}  Returns true if items stored in {@code dataTransfer} can
+   *     be pasted to {@code opt_destinationPath}. Otherwise, returns false.
    */
   canPasteOrDrop_: function(dataTransfer, opt_destinationPath) {
     var destinationPath = opt_destinationPath ||
                           this.directoryModel_.getCurrentDirPath();
     if (this.directoryModel_.isPathReadOnly(destinationPath)) {
       return false;
     }
     if (this.directoryModel_.isSearching())
       return false;
 
@@ skipping 178 matching lines @@
         !event.ctrlKey) {
       return 'move';
     }
     if (event.dataTransfer.effectAllowed == 'copyMove' &&
         event.shiftKey) {
       return 'move';
     }
     return 'copy';
   },
 };