OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer('core-drag-drop', { |
| 4 |
| 5 observe: { |
| 6 'x y': 'coordinatesChanged' |
| 7 }, |
| 8 |
| 9 ready: function() { |
| 10 if (!this.__proto__.avatar) { |
| 11 this.__proto__.avatar = document.createElement('core-drag-avatar'); |
| 12 document.body.appendChild(this.avatar); |
| 13 } |
| 14 this.dragging = false; |
| 15 }, |
| 16 |
| 17 draggingChanged: function() { |
| 18 this.avatar.style.display = this.dragging ? '' : 'none'; |
| 19 }, |
| 20 |
| 21 coordinatesChanged: function() { |
| 22 var x = this.x, y = this.y; |
| 23 this.avatar.style.transform = |
| 24 this.avatar.style.webkitTransform = |
| 25 'translate(' + x + 'px, ' + y + 'px)'; |
| 26 }, |
| 27 |
| 28 attached: function() { |
| 29 var listen = function(event, handler) { |
| 30 Polymer.addEventListener(this.parentNode, event, this[handler].bind(this
)); |
| 31 }.bind(this); |
| 32 // |
| 33 listen('trackstart', 'trackStart'); |
| 34 listen('track', 'track'); |
| 35 listen('trackend', 'trackEnd'); |
| 36 // |
| 37 var host = this.parentNode.host || this.parentNode; |
| 38 host.style.cssText += '; user-select: none; -webkit-user-select: none; -mo
z-user-select: none; -ms-user-select: none;'; |
| 39 }, |
| 40 |
| 41 trackStart: function(event) { |
| 42 this.avatar.style.cssText = ''; |
| 43 this.dragInfo = { |
| 44 event: event, |
| 45 avatar: this.avatar |
| 46 }; |
| 47 this.fire('drag-start', this.dragInfo); |
| 48 // flaw #1: what if user doesn't need `drag()`? |
| 49 this.dragging = Boolean(this.dragInfo.drag); |
| 50 }, |
| 51 |
| 52 track: function(event) { |
| 53 if (this.dragging) { |
| 54 this.x = event.pageX; |
| 55 this.y = event.pageY; |
| 56 this.dragInfo.event = event; |
| 57 this.dragInfo.p = {x : this.x, y: this.y}; |
| 58 this.dragInfo.drag(this.dragInfo); |
| 59 } |
| 60 }, |
| 61 |
| 62 trackEnd: function(event) { |
| 63 if (this.dragging) { |
| 64 this.dragging = false; |
| 65 if (this.dragInfo.drop) { |
| 66 this.dragInfo.framed = this.framed(event.relatedTarget); |
| 67 this.dragInfo.event = event; |
| 68 this.dragInfo.drop(this.dragInfo); |
| 69 } |
| 70 } |
| 71 this.dragInfo = null; |
| 72 }, |
| 73 |
| 74 framed: function(node) { |
| 75 var local = node.getBoundingClientRect(); |
| 76 return {x: this.x - local.left, y: this.y - local.top}; |
| 77 } |
| 78 |
| 79 }); |
| 80 |
OLD | NEW |