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 |