third_party/WebKit/Source/devtools/front_end/ui/DropTarget.js

   1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @param {!Element} element
   8  * @param {!Array.<string>} transferTypes
   9  * @param {string} messageText
  10  * @param {function(!DataTransfer)} handleDrop
  11  */
  12 WebInspector.DropTarget = function(element, transferTypes, messageText, handleDrop)
  13 {
  14     element.addEventListener("dragenter", this._onDragEnter.bind(this), true);
  15     element.addEventListener("dragover", this._onDragOver.bind(this), true);
  16     this._element = element;
  17     this._transferTypes = transferTypes;
  18     this._messageText = messageText;
  19     this._handleDrop = handleDrop;
  20     this._enabled = true;
  21 }
  22
  23 WebInspector.DropTarget.Types = {
  24     Files: "Files",
  25     URIList: "text/uri-list"
  26 }
  27
  28 WebInspector.DropTarget.prototype = {
  29     /**
  30      * @param {boolean} enabled
  31      */
  32     setEnabled: function(enabled)
  33     {
  34         this._enabled = enabled;
  35     },
  36
  37     /**
  38      * @param {!Event} event
  39      */
  40     _onDragEnter: function(event)
  41     {
  42         if (this._enabled && this._hasMatchingType(event))
  43             event.consume(true);
  44     },
  45
  46     /**
  47      * @param {!Event} event
  48      * @return {boolean}
  49      */
  50     _hasMatchingType: function(event)
  51     {
  52         for (var type of this._transferTypes) {
  53             if (event.dataTransfer.types.indexOf(type) !== -1)
  54                 return true;
  55         }
  56         return false;
  57     },
  58
  59     /**
  60      * @param {!Event} event
  61      */
  62     _onDragOver: function(event)
  63     {
  64         if (!this._enabled || !this._hasMatchingType(event))
  65             return;
  66         event.dataTransfer.dropEffect = "copy";
  67         event.consume(true);
  68         if (this._dragMaskElement)
  69             return;
  70         this._dragMaskElement = this._element.createChild("div", "");
  71         var shadowRoot = WebInspector.createShadowRootWithCoreStyles(this._dragMaskElement);
  72         shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui/dropTarget.css"));
  73         shadowRoot.createChild("div", "drop-target-message").textContent = this._messageText;
  74         this._dragMaskElement.addEventListener("drop", this._onDrop.bind(this), true);
  75         this._dragMaskElement.addEventListener("dragleave", this._onDragLeave.bind(this), true);
  76     },
  77
  78     /**
  79      * @param {!Event} event
  80      */
  81     _onDrop: function(event)
  82     {
  83         event.consume(true);
  84         this._removeMask();
  85         if (this._enabled)
  86             this._handleDrop(event.dataTransfer);
  87     },
  88
  89     /**
  90      * @param {!Event} event
  91      */
  92     _onDragLeave: function(event)
  93     {
  94         event.consume(true);
  95         this._removeMask();
  96     },
  97
  98     _removeMask: function()
  99     {
 100         this._dragMaskElement.remove();
 101         delete this._dragMaskElement;
 102     }
 103 }