Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('ntp4', function() { | 5 cr.define('ntp4', function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 // We can't pass the currently dragging tile via dataTransfer because of | 8 // We can't pass the currently dragging tile via dataTransfer because of |
| 9 // http://crbug.com/31037 | 9 // http://crbug.com/31037 |
| 10 var currentlyDraggingTile = null; | 10 var currentlyDraggingTile = null; |
| 11 function getCurrentlyDraggingTile() { | 11 function getCurrentlyDraggingTile() { |
| 12 return currentlyDraggingTile; | 12 return currentlyDraggingTile; |
| 13 } | 13 } |
| 14 function setCurrentlyDraggingTile(tile) { | 14 function setCurrentlyDraggingTile(tile) { |
| 15 currentlyDraggingTile = tile; | 15 currentlyDraggingTile = tile; |
| 16 if (tile) | 16 if (tile) |
| 17 ntp4.enterRearrangeMode(); | 17 ntp4.enterRearrangeMode(); |
| 18 else | 18 else |
| 19 ntp4.leaveRearrangeMode(); | 19 ntp4.leaveRearrangeMode(); |
| 20 } | 20 } |
| 21 | 21 |
| 22 /** | 22 /** |
| 23 * Changes the current dropEffect of a drag. This modifies the native cursor | |
|
Evan Stade
2011/09/21 21:58:29
one space after .
Dan Beam
2011/09/21 23:28:38
Done. (damn my English teachers)
| |
| 24 * and serves as an indicator of what we should do at the end of the drag as | |
| 25 * well as give indication to the user if a drop would succeed if they let go. | |
| 26 * @param {DataTransfer} dataTransfer A dataTransfer object from a drag event. | |
| 27 * @param {string} effect A drop effect to change to (i.e. copy, move, none). | |
| 28 */ | |
| 29 function setCurrentDropEffect(dataTransfer, effect) { | |
| 30 dataTransfer.dropEffect = effect; | |
| 31 if (currentlyDraggingTile) | |
| 32 currentlyDraggingTile.lastDropEffect = dataTransfer.dropEffect; | |
| 33 } | |
| 34 | |
| 35 /** | |
| 23 * Creates a new Tile object. Tiles wrap content on a TilePage, providing | 36 * Creates a new Tile object. Tiles wrap content on a TilePage, providing |
| 24 * some styling and drag functionality. | 37 * some styling and drag functionality. |
| 25 * @constructor | 38 * @constructor |
| 26 * @extends {HTMLDivElement} | 39 * @extends {HTMLDivElement} |
| 27 */ | 40 */ |
| 28 function Tile(contents) { | 41 function Tile(contents) { |
| 29 var tile = cr.doc.createElement('div'); | 42 var tile = cr.doc.createElement('div'); |
| 30 tile.__proto__ = Tile.prototype; | 43 tile.__proto__ = Tile.prototype; |
| 31 tile.initialize(contents); | 44 tile.initialize(contents); |
| 32 | 45 |
| (...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 154 var tilePage = this.tilePage; | 167 var tilePage = this.tilePage; |
| 155 if (tilePage) | 168 if (tilePage) |
| 156 tilePage.positionTile_(this.index); | 169 tilePage.positionTile_(this.index); |
| 157 | 170 |
| 158 // Take an appropriate action with the drag clone. | 171 // Take an appropriate action with the drag clone. |
| 159 if (this.landedOnTrash) { | 172 if (this.landedOnTrash) { |
| 160 this.dragClone.classList.add('deleting'); | 173 this.dragClone.classList.add('deleting'); |
| 161 } else if (tilePage) { | 174 } else if (tilePage) { |
| 162 // TODO(dbeam): Until we fix dropEffect to the correct behavior it will | 175 // TODO(dbeam): Until we fix dropEffect to the correct behavior it will |
| 163 // differ on windows - crbug.com/39399. That's why we use the custom | 176 // differ on windows - crbug.com/39399. That's why we use the custom |
| 164 // tilePage.lastDropEffect_ instead of e.dataTransfer.dropEffect. | 177 // this.lastDropEffect instead of e.dataTransfer.dropEffect. |
| 165 if (tilePage.selected && tilePage.lastDropEffect_ != 'copy') { | 178 if (tilePage.selected && this.lastDropEffect != 'copy') { |
| 166 // The drag clone can still be hidden from the last drag move event. | 179 // The drag clone can still be hidden from the last drag move event. |
| 167 this.dragClone.hidden = false; | 180 this.dragClone.hidden = false; |
| 168 // The tile's contents may have moved following the respositioning; | 181 // The tile's contents may have moved following the respositioning; |
| 169 // adjust for that. | 182 // adjust for that. |
| 170 var contentDiffX = this.dragClone.firstChild.offsetLeft - | 183 var contentDiffX = this.dragClone.firstChild.offsetLeft - |
| 171 this.firstChild.offsetLeft; | 184 this.firstChild.offsetLeft; |
| 172 var contentDiffY = this.dragClone.firstChild.offsetTop - | 185 var contentDiffY = this.dragClone.firstChild.offsetTop - |
| 173 this.firstChild.offsetTop; | 186 this.firstChild.offsetTop; |
| 174 this.dragClone.style.left = (this.gridX + this.parentNode.offsetLeft - | 187 this.dragClone.style.left = (this.gridX + this.parentNode.offsetLeft - |
| 175 contentDiffX) + 'px'; | 188 contentDiffX) + 'px'; |
| 176 this.dragClone.style.top = | 189 this.dragClone.style.top = |
| 177 (this.gridY + this.parentNode.getBoundingClientRect().top - | 190 (this.gridY + this.parentNode.getBoundingClientRect().top - |
| 178 contentDiffY) + 'px'; | 191 contentDiffY) + 'px'; |
| 179 } else if (this.dragClone.hidden) { | 192 } else if (this.dragClone.hidden) { |
| 180 this.finalizeDrag_(); | 193 this.finalizeDrag_(); |
| 181 } else { | 194 } else { |
| 182 this.dragClone.classList.add('dropped-on-other-page'); | 195 this.dragClone.classList.add('dropped-on-other-page'); |
| 183 } | 196 } |
| 184 } | 197 } |
| 185 | 198 |
| 199 delete this.lastDropEffect; | |
| 186 this.landedOnTrash = false; | 200 this.landedOnTrash = false; |
| 187 }, | 201 }, |
| 188 | 202 |
| 189 /** | 203 /** |
| 190 * Creates a clone of this node offset by the coordinates. Used for the | 204 * Creates a clone of this node offset by the coordinates. Used for the |
| 191 * dragging effect where a tile appears to float off one side of the grid | 205 * dragging effect where a tile appears to float off one side of the grid |
| 192 * and re-appear on the other. | 206 * and re-appear on the other. |
| 193 * @param {number} x x-axis offset, in pixels. | 207 * @param {number} x x-axis offset, in pixels. |
| 194 * @param {number} y y-axis offset, in pixels. | 208 * @param {number} y y-axis offset, in pixels. |
| 195 */ | 209 */ |
| (...skipping 731 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 927 * @param {Event} e A mouseover event for the drag over. | 941 * @param {Event} e A mouseover event for the drag over. |
| 928 */ | 942 */ |
| 929 doDragOver: function(e) { | 943 doDragOver: function(e) { |
| 930 e.preventDefault(); | 944 e.preventDefault(); |
| 931 | 945 |
| 932 this.setDropEffect(e.dataTransfer); | 946 this.setDropEffect(e.dataTransfer); |
| 933 var newDragIndex = this.getWouldBeIndexForPoint_(e.pageX, e.pageY); | 947 var newDragIndex = this.getWouldBeIndexForPoint_(e.pageX, e.pageY); |
| 934 if (newDragIndex < 0 || newDragIndex >= this.tileElements_.length) | 948 if (newDragIndex < 0 || newDragIndex >= this.tileElements_.length) |
| 935 newDragIndex = this.dragItemIndex_; | 949 newDragIndex = this.dragItemIndex_; |
| 936 this.updateDropIndicator_(newDragIndex); | 950 this.updateDropIndicator_(newDragIndex); |
| 937 | |
| 938 this.lastDropEffect_ = e.dataTransfer.dropEffect; | |
| 939 }, | 951 }, |
| 940 | 952 |
| 941 /** | 953 /** |
| 942 * Performs all actions necessary when the user completes a drop. | 954 * Performs all actions necessary when the user completes a drop. |
| 943 * @param {Event} e A mouseover event for the drag drop. | 955 * @param {Event} e A mouseover event for the drag drop. |
| 944 */ | 956 */ |
| 945 doDrop: function(e) { | 957 doDrop: function(e) { |
| 946 e.stopPropagation(); | 958 e.stopPropagation(); |
| 947 | 959 |
| 948 var index = this.currentDropIndex_; | 960 var index = this.currentDropIndex_; |
| (...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 1067 * 'copy'). | 1079 * 'copy'). |
| 1068 * @param {Object} dataTransfer The drag event dataTransfer object. | 1080 * @param {Object} dataTransfer The drag event dataTransfer object. |
| 1069 */ | 1081 */ |
| 1070 setDropEffect: function(dataTransfer) { | 1082 setDropEffect: function(dataTransfer) { |
| 1071 assert(false); | 1083 assert(false); |
| 1072 }, | 1084 }, |
| 1073 }; | 1085 }; |
| 1074 | 1086 |
| 1075 return { | 1087 return { |
| 1076 getCurrentlyDraggingTile: getCurrentlyDraggingTile, | 1088 getCurrentlyDraggingTile: getCurrentlyDraggingTile, |
| 1089 setCurrentDropEffect: setCurrentDropEffect, | |
| 1077 TilePage: TilePage, | 1090 TilePage: TilePage, |
| 1078 }; | 1091 }; |
| 1079 }); | 1092 }); |
| OLD | NEW |