1// Copyright (c) 2011 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 * @fileoverview DragWrapper 7 * A class for simplifying HTML5 drag and drop. Classes should use this to 8 * handle the nitty gritty of nested drag enters and leaves. 9 */ 10cr.define('cr.ui', function() { 11 /** 12 * Creates a DragWrapper which listens for drag target events on |target| and 13 * delegates event handling to |handler|. The |handler| must implement: 14 * shouldAcceptDrag 15 * doDragEnter 16 * doDragLeave 17 * doDragOver 18 * doDrop 19 */ 20 function DragWrapper(target, handler) { 21 this.initialize(target, handler); 22 } 23 24 DragWrapper.prototype = { 25 initialize: function(target, handler) { 26 target.addEventListener('dragenter', 27 this.onDragEnter_.bind(this)); 28 target.addEventListener('dragover', this.onDragOver_.bind(this)); 29 target.addEventListener('drop', this.onDrop_.bind(this)); 30 target.addEventListener('dragleave', this.onDragLeave_.bind(this)); 31 32 this.target_ = target; 33 this.handler_ = handler; 34 }, 35 36 /** 37 * The number of un-paired dragenter events that have fired on |this|. This 38 * is incremented by |onDragEnter_| and decremented by |onDragLeave_|. This 39 * is necessary because dragging over child widgets will fire additional 40 * enter and leave events on |this|. A non-zero value does not necessarily 41 * indicate that |isCurrentDragTarget()| is true. 42 * @type {number} 43 * @private 44 */ 45 dragEnters_: 0, 46 47 /** 48 * Whether the tile page is currently being dragged over with data it can 49 * accept. 50 * @type {boolean} 51 */ 52 get isCurrentDragTarget() { 53 return this.target_.classList.contains('drag-target'); 54 }, 55 56 /** 57 * Handler for dragenter events fired on |target_|. 58 * @param {Event} e A MouseEvent for the drag. 59 * @private 60 */ 61 onDragEnter_: function(e) { 62 if (++this.dragEnters_ == 1) { 63 if (this.handler_.shouldAcceptDrag(e)) { 64 this.target_.classList.add('drag-target'); 65 this.handler_.doDragEnter(e); 66 } 67 } else { 68 // Sometimes we'll get an enter event over a child element without an 69 // over event following it. In this case we have to still call the 70 // drag over handler so that we make the necessary updates (one visible 71 // symptom of not doing this is that the cursor's drag state will 72 // flicker during drags). 73 this.onDragOver_(e); 74 } 75 }, 76 77 /** 78 * Thunk for dragover events fired on |target_|. 79 * @param {Event} e A MouseEvent for the drag. 80 * @private 81 */ 82 onDragOver_: function(e) { 83 if (!this.target_.classList.contains('drag-target')) 84 return; 85 this.handler_.doDragOver(e); 86 }, 87 88 /** 89 * Thunk for drop events fired on |target_|. 90 * @param {Event} e A MouseEvent for the drag. 91 * @private 92 */ 93 onDrop_: function(e) { 94 this.dragEnters_ = 0; 95 if (!this.target_.classList.contains('drag-target')) 96 return; 97 this.target_.classList.remove('drag-target'); 98 this.handler_.doDrop(e); 99 }, 100 101 /** 102 * Thunk for dragleave events fired on |target_|. 103 * @param {Event} e A MouseEvent for the drag. 104 * @private 105 */ 106 onDragLeave_: function(e) { 107 if (--this.dragEnters_ > 0) 108 return; 109 110 this.target_.classList.remove('drag-target'); 111 this.handler_.doDragLeave(e); 112 }, 113 }; 114 115 return { 116 DragWrapper: DragWrapper 117 }; 118}); 119