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