diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/editable.reel/editable.js | 8 | ||||
-rw-r--r-- | js/components/hintable.reel/hintable.js | 12 | ||||
-rw-r--r-- | js/panels/Timeline/DragDrop.js | 136 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 36 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 68 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 24 |
9 files changed, 265 insertions, 45 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 9c8946c4..7a31e7fd 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js | |||
@@ -120,7 +120,7 @@ exports.Editable = Montage.create(Component, { | |||
120 | } | 120 | } |
121 | 121 | ||
122 | if(this.stopOnBlur) { | 122 | if(this.stopOnBlur) { |
123 | console.log('adding mousedown event listener'); | 123 | //console.log('adding mousedown event listener'); |
124 | ///// Simulate blur on editable node by listening to the doc | 124 | ///// Simulate blur on editable node by listening to the doc |
125 | document.addEventListener('mouseup', this, false); | 125 | document.addEventListener('mouseup', this, false); |
126 | } | 126 | } |
@@ -189,7 +189,7 @@ exports.Editable = Montage.create(Component, { | |||
189 | handleKeydown : { | 189 | handleKeydown : { |
190 | value : function(e) { | 190 | value : function(e) { |
191 | var k = e.keyCode; | 191 | var k = e.keyCode; |
192 | console.log('keyCode: ' + k); | 192 | //console.log('keyCode: ' + k); |
193 | } | 193 | } |
194 | }, | 194 | }, |
195 | ///// Text input has changed values | 195 | ///// Text input has changed values |
@@ -204,7 +204,7 @@ exports.Editable = Montage.create(Component, { | |||
204 | }, | 204 | }, |
205 | handleMouseup : { | 205 | handleMouseup : { |
206 | value : function(e) { | 206 | value : function(e) { |
207 | console.log('handle mouse down'); | 207 | //console.log('handle mouse down'); |
208 | ///// Listen for simulated blur event | 208 | ///// Listen for simulated blur event |
209 | if(this.stopOnBlur && e._event.target !== this._element) { | 209 | if(this.stopOnBlur && e._event.target !== this._element) { |
210 | this.blur(); | 210 | this.blur(); |
@@ -213,7 +213,7 @@ exports.Editable = Montage.create(Component, { | |||
213 | }, | 213 | }, |
214 | handleEvent : { | 214 | handleEvent : { |
215 | value : function(e) { | 215 | value : function(e) { |
216 | console.log("event type : " + e._event.type); | 216 | //console.log("event type : " + e._event.type); |
217 | ///// If configured, start on specified event | 217 | ///// If configured, start on specified event |
218 | if(e._event.type === this.startOnEvent) { | 218 | if(e._event.type === this.startOnEvent) { |
219 | this.start(); | 219 | this.start(); |
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 5ed46b3c..cbfe2d9b 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -90,10 +90,10 @@ exports.Hintable = Montage.create(Editable, { | |||
90 | hintNext : { | 90 | hintNext : { |
91 | value : function(e) { | 91 | value : function(e) { |
92 | if(e) { e.preventDefault(); } | 92 | if(e) { e.preventDefault(); } |
93 | console.log('next1'); | 93 | //console.log('next1'); |
94 | 94 | ||
95 | if(this._matchIndex < this.matches.length - 1) { | 95 | if(this._matchIndex < this.matches.length - 1) { |
96 | console.log('next'); | 96 | //console.log('next'); |
97 | ++this._matchIndex; | 97 | ++this._matchIndex; |
98 | this.hint = this._getHintDifference(); | 98 | this.hint = this._getHintDifference(); |
99 | } | 99 | } |
@@ -102,9 +102,9 @@ exports.Hintable = Montage.create(Editable, { | |||
102 | hintPrev : { | 102 | hintPrev : { |
103 | value : function(e) { | 103 | value : function(e) { |
104 | if(e) { e.preventDefault(); } | 104 | if(e) { e.preventDefault(); } |
105 | console.log('prev1'); | 105 | //console.log('prev1'); |
106 | if(this._matchIndex !== 0) { | 106 | if(this._matchIndex !== 0) { |
107 | console.log('prev'); | 107 | //console.log('prev'); |
108 | --this._matchIndex; | 108 | --this._matchIndex; |
109 | this.hint = this._getHintDifference(); | 109 | this.hint = this._getHintDifference(); |
110 | } | 110 | } |
@@ -135,7 +135,7 @@ exports.Hintable = Montage.create(Editable, { | |||
135 | /// revert to old value | 135 | /// revert to old value |
136 | this.value = (this._preEditValue); | 136 | this.value = (this._preEditValue); |
137 | this._sendEvent('revert'); | 137 | this._sendEvent('revert'); |
138 | console.log('reverting'); | 138 | //console.log('reverting'); |
139 | 139 | ||
140 | } | 140 | } |
141 | } | 141 | } |
@@ -180,7 +180,7 @@ exports.Hintable = Montage.create(Editable, { | |||
180 | 180 | ||
181 | var val = this.value, | 181 | var val = this.value, |
182 | matches, hint; | 182 | matches, hint; |
183 | console.log('val = "' + val + '"'); | 183 | //console.log('val = "' + val + '"'); |
184 | //// Handle auto-suggest if configured | 184 | //// Handle auto-suggest if configured |
185 | if(this.hints instanceof Array) { | 185 | if(this.hints instanceof Array) { |
186 | 186 | ||
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js new file mode 100644 index 00000000..55ee3ab4 --- /dev/null +++ b/js/panels/Timeline/DragDrop.js | |||
@@ -0,0 +1,136 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage; | ||
8 | var Composer = require("montage/ui/composer/composer").Composer; | ||
9 | |||
10 | exports.DragDropComposer = Montage.create(Composer, { | ||
11 | |||
12 | draggable: { | ||
13 | value: true | ||
14 | }, | ||
15 | |||
16 | droppable: { | ||
17 | value: true | ||
18 | }, | ||
19 | |||
20 | identifier: { | ||
21 | value: "generic" | ||
22 | }, | ||
23 | |||
24 | _dragover: { | ||
25 | value: false | ||
26 | }, | ||
27 | |||
28 | load: { | ||
29 | value: function() { | ||
30 | //TODO: to make this work even better check to see if this is a component or not | ||
31 | //right now it does not support data-montage id's | ||
32 | this.element.addEventListener("mouseover", this, true); | ||
33 | this.element.addEventListener("mouseout", this, true); | ||
34 | this.component.element.addEventListener("dragenter", this, true); | ||
35 | this.component.element.addEventListener("dragleave", this, true); | ||
36 | this.component.element.addEventListener("dragend", this, true); | ||
37 | this.component.element.addEventListener("drop", this, true); | ||
38 | this.component.element.addEventListener("dragover", this, true); | ||
39 | this.component.element.addEventListener("dragstart", this, true); | ||
40 | } | ||
41 | }, | ||
42 | |||
43 | unload: { | ||
44 | value: function() { | ||
45 | this.element.removeEventListener("mouseover", this, true); | ||
46 | this.element.removeEventListener("mouseout", this, true); | ||
47 | this.component.element.removeEventListener("dragenter", this, true); | ||
48 | this.component.element.removeEventListener("dragleave", this, true); | ||
49 | this.component.element.removeEventListener("dragend", this, true); | ||
50 | this.component.element.removeEventListener("drop", this, true); | ||
51 | this.component.element.removeEventListener("dragover", this, true); | ||
52 | this.component.element.removeEventListener("dragstart", this, true); | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | captureMouseover: { | ||
57 | value: function(e) { | ||
58 | if(this.draggable) { | ||
59 | this.component.element.draggable = true; | ||
60 | } | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | captureMouseout: { | ||
65 | value: function(e) { | ||
66 | this.component.element.draggable = false; | ||
67 | } | ||
68 | }, | ||
69 | |||
70 | /* ------ Drag Drop Events ------- */ | ||
71 | |||
72 | // This Function will determine what is being moved | ||
73 | captureDragstart: { | ||
74 | value:function(e) { | ||
75 | e.dataTransfer.effectAllowed = 'move'; | ||
76 | e.dataTransfer.setData('Text', this.identifier); | ||
77 | this.component.element.classList.add("dragging"); | ||
78 | this.component.application.ninja.componentBeingDragged = this.component; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | captureDragenter: { | ||
83 | value: function(e) { | ||
84 | |||
85 | } | ||
86 | }, | ||
87 | |||
88 | captureDragover: { | ||
89 | value:function(e) { | ||
90 | e.preventDefault(); | ||
91 | e.stopImmediatePropagation(); | ||
92 | if (!this._dragover) { | ||
93 | this._dragover = true; | ||
94 | this.component.element.classList.add("dragOver"); | ||
95 | } | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | captureDragleave: { | ||
100 | value: function(e) { | ||
101 | if (this._dragover) { | ||
102 | this._dragover = false; | ||
103 | this.component.element.classList.remove("dragOver"); | ||
104 | } | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | captureDrop: { | ||
109 | value:function(e) { | ||
110 | e.stopPropagation(); // Stops some browsers from redirecting. | ||
111 | e.preventDefault(); | ||
112 | if (this._dragover) { | ||
113 | this._dragover = false; | ||
114 | this.component.element.classList.remove("dragOver"); | ||
115 | if (this.identifier === e.dataTransfer.getData("Text")) { | ||
116 | if(this.component.application.ninja.componentBeingDragged !== this.component) { | ||
117 | dropEvent = document.createEvent("CustomEvent"); | ||
118 | dropEvent.initCustomEvent("dropped", true, false, null); | ||
119 | dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged; | ||
120 | dropEvent.droppedComponent = this.component; |