DropTarget.js 1.8 KB

123456789101112
  1. export default class DropTarget{constructor(element,transferTypes,messageText,handleDrop){element.addEventListener('dragenter',this._onDragEnter.bind(this),true);element.addEventListener('dragover',this._onDragOver.bind(this),true);this._element=element;this._transferTypes=transferTypes;this._messageText=messageText;this._handleDrop=handleDrop;this._enabled=true;}
  2. setEnabled(enabled){this._enabled=enabled;}
  3. _onDragEnter(event){if(this._enabled&&this._hasMatchingType(event)){event.consume(true);}}
  4. _hasMatchingType(event){for(const transferType of this._transferTypes){const found=Array.from(event.dataTransfer.items).find(item=>{return transferType.kind===item.kind&&!!transferType.type.exec(item.type);});if(found){return true;}}
  5. return false;}
  6. _onDragOver(event){if(!this._enabled||!this._hasMatchingType(event)){return;}
  7. event.dataTransfer.dropEffect='copy';event.consume(true);if(this._dragMaskElement){return;}
  8. this._dragMaskElement=this._element.createChild('div','');const shadowRoot=UI.createShadowRootWithCoreStyles(this._dragMaskElement,'ui/dropTarget.css');shadowRoot.createChild('div','drop-target-message').textContent=this._messageText;this._dragMaskElement.addEventListener('drop',this._onDrop.bind(this),true);this._dragMaskElement.addEventListener('dragleave',this._onDragLeave.bind(this),true);}
  9. _onDrop(event){event.consume(true);this._removeMask();if(this._enabled){this._handleDrop(event.dataTransfer);}}
  10. _onDragLeave(event){event.consume(true);this._removeMask();}
  11. _removeMask(){this._dragMaskElement.remove();delete this._dragMaskElement;}}
  12. export const Type={URI:{kind:'string',type:/text\/uri-list/},Folder:{kind:'file',type:/$^/},File:{kind:'file',type:/.*/},WebFile:{kind:'file',type:/[\w]+/},ImageFile:{kind:'file',type:/image\/.*/},};self.UI=self.UI||{};UI=UI||{};UI.DropTarget=DropTarget;UI.DropTarget.Type=Type;