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