diff options
-rw-r--r-- | js/panels/Timeline/DragDrop.js | 160 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 13 | ||||
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 9 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 |
6 files changed, 24 insertions, 174 deletions
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js deleted file mode 100644 index 739eac93..00000000 --- a/js/panels/Timeline/DragDrop.js +++ /dev/null | |||
@@ -1,160 +0,0 @@ | |||
1 | /* <copyright> | ||
2 | Copyright (c) 2012, Motorola Mobility, Inc | ||
3 | All Rights Reserved. | ||
4 | BSD License. | ||
5 | |||
6 | Redistribution and use in source and binary forms, with or without | ||
7 | modification, are permitted provided that the following conditions are met: | ||
8 | |||
9 | - Redistributions of source code must retain the above copyright notice, | ||
10 | this list of conditions and the following disclaimer. | ||
11 | - Redistributions in binary form must reproduce the above copyright | ||
12 | notice, this list of conditions and the following disclaimer in the | ||
13 | documentation and/or other materials provided with the distribution. | ||
14 | - Neither the name of Motorola Mobility nor the names of its contributors | ||
15 | may be used to endorse or promote products derived from this software | ||
16 | without specific prior written permission. | ||
17 | |||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | ||
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | ||
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | ||
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | ||
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | ||
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | ||
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | ||
25 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN | ||
26 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) | ||
27 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | ||
28 | POSSIBILITY OF SUCH DAMAGE. | ||
29 | </copyright> */ | ||
30 | |||
31 | var Montage = require("montage/core/core").Montage; | ||
32 | var Composer = require("montage/ui/composer/composer").Composer; | ||
33 | |||
34 | exports.DragDropComposer = Montage.create(Composer, { | ||
35 | |||
36 | draggable: { | ||
37 | value: true | ||
38 | }, | ||
39 | |||
40 | droppable: { | ||
41 | value: true | ||
42 | }, | ||
43 | |||
44 | identifier: { | ||
45 | value: "generic" | ||
46 | }, | ||
47 | |||
48 | _dragover: { | ||
49 | value: false | ||
50 | }, | ||
51 | |||
52 | load: { | ||
53 | value: function() { | ||
54 | //TODO: to make this work even better check to see if this is a component or not | ||
55 | //right now it does not support data-montage id's | ||
56 | this.element.addEventListener("mouseover", this, true); | ||
57 | this.element.addEventListener("mouseout", this, true); | ||
58 | this.component.element.addEventListener("dragenter", this, true); | ||
59 | this.component.element.addEventListener("dragleave", this, true); | ||
60 | this.component.element.addEventListener("dragend", this, true); | ||
61 | this.component.element.addEventListener("drop", this, true); | ||
62 | this.component.element.addEventListener("dragover", this, true); | ||
63 | this.component.element.addEventListener("dragstart", this, true); | ||
64 | } | ||
65 | }, | ||
66 | |||
67 | unload: { | ||
68 | value: function() { | ||
69 | this.element.removeEventListener("mouseover", this, true); | ||
70 | this.element.removeEventListener("mouseout", this, true); | ||
71 | this.component.element.removeEventListener("dragenter", this, true); | ||
72 | this.component.element.removeEventListener("dragleave", this, true); | ||
73 | this.component.element.removeEventListener("dragend", this, true); | ||
74 | this.component.element.removeEventListener("drop", this, true); | ||
75 | this.component.element.removeEventListener("dragover", this, true); | ||
76 | this.component.element.removeEventListener("dragstart", this, true); | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | captureMouseover: { | ||
81 | value: function(e) { | ||
82 | if(this.draggable) { | ||
83 | this.component.element.draggable = true; | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | captureMouseout: { | ||
89 | value: function(e) { | ||
90 | this.component.element.draggable = false; | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | /* ------ Drag Drop Events ------- */ | ||
95 | |||
96 | // This Function will determine what is being moved | ||
97 | captureDragstart: { | ||
98 | value:function(e) { | ||
99 | e.dataTransfer.effectAllowed = 'move'; | ||
100 | e.dataTransfer.setData('Text', this.identifier); | ||
101 | this.component.element.classList.add("dragging"); | ||
102 | this.component.application.ninja.componentBeingDragged = this.component; | ||
103 | } | ||
104 | }, | ||
105 | |||
106 | captureDragenter: { | ||
107 | value: function(e) { | ||
108 | |||
109 | } | ||
110 | }, | ||
111 | |||
112 | captureDragover: { | ||
113 | value:function(e) { | ||
114 | e.preventDefault(); | ||
115 | e.stopImmediatePropagation(); | ||
116 | if (!this._dragover) { | ||
117 | this._dragover = true; | ||
118 | this.component.element.classList.add("dragOver"); | ||
119 | } | ||
120 | } | ||
121 | }, | ||
122 | |||
123 | captureDragleave: { | ||
124 | value: function(e) { | ||
125 | if (this._dragover) { | ||
126 | this._dragover = false; | ||
127 | this.component.element.classList.remove("dragOver"); | ||
128 | } | ||
129 | } | ||
130 | }, | ||
131 | |||
132 | captureDrop: { | ||
133 | value:function(e) { | ||
134 | e.stopPropagation(); // Stops some browsers from redirecting. | ||
135 | e.preventDefault(); | ||
136 | if (this._dragover) { | ||
137 | this._dragover = false; | ||
138 | this.component.element.classList.remove("dragOver"); | ||
139 | if (this.identifier === e.dataTransfer.getData("Text")) { | ||
140 | if(this.component.application.ninja.componentBeingDragged !== this.component) { | ||
141 | dropEvent = document.createEvent("CustomEvent"); | ||
142 | dropEvent.initCustomEvent("dropped", true, false, null); | ||
143 | dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged; | ||
144 | dropEvent.droppedComponent = this.component; | ||
145 | this.component.dispatchEvent(dropEvent); | ||
146 | } | ||
147 | } | ||
148 | this.component.application.ninja.componentBeingDragged = null; | ||
149 | } | ||
150 | |||
151 | } | ||
152 | }, | ||
153 | |||
154 | captureDragend: { | ||
155 | value:function(e) { | ||
156 | this.component.element.classList.remove("dragging"); | ||
157 | } | ||
158 | } | ||
159 | |||
160 | }); | ||
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index a52150af..b771f6f3 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -119,14 +119,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
119 | value: function(event) { | 119 | value: function(event) { |
120 | event.dataTransfer.setData('Text', 'Keyframe'); | 120 | event.dataTransfer.setData('Text', 'Keyframe'); |
121 | var i = 0, | 121 | var i = 0, |
122 | tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, | 122 | tweenRepetitionLength, |
123 | myTrack, | ||
123 | myIndex = null; | 124 | myIndex = null; |
125 | if (typeof(this.parentComponent.parentComponent.parentComponent.tweenRepetition) !== "undefined") { | ||
126 | myTrack = this.parentComponent.parentComponent.parentComponent; | ||
127 | } else { | ||
128 | myTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; | ||
129 | } | ||
130 | tweenRepetitionLength = myTrack.tweenRepetition.childComponents.length; | ||
124 | for (i = 0; i < tweenRepetitionLength; i++) { | 131 | for (i = 0; i < tweenRepetitionLength; i++) { |
125 | if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { | 132 | if (myTrack.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { |
126 | myIndex = i; | 133 | myIndex = i; |
127 | } | 134 | } |
128 | } | 135 | } |
129 | this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; | 136 | myTrack.draggingIndex = myIndex; |
130 | this.selectKeyframe(); | 137 | this.selectKeyframe(); |
131 | } | 138 | } |
132 | }, | 139 | }, |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8c8112ad..e5ff1e95 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -193,6 +193,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
193 | this.animatedElement = this.timelineTrack.animatedElement; | 193 | this.animatedElement = this.timelineTrack.animatedElement; |
194 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 194 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
195 | this.eventManager.addEventListener("tlZoomSlider", this, false); | 195 | this.eventManager.addEventListener("tlZoomSlider", this, false); |
196 | |||
197 | // Drag and Drop event handlers | ||
198 | this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); | ||
199 | this.element.addEventListener("dragend", this.handleKeyframeDragstart.bind(this), false); | ||
200 | this.element.addEventListener("drop", this.handleKeyframeDragstart.bind(this), false); | ||
196 | } | 201 | } |
197 | }, | 202 | }, |
198 | 203 | ||
@@ -207,6 +212,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
207 | /* End: Draw Cycle */ | 212 | /* End: Draw Cycle */ |
208 | 213 | ||
209 | /* Begin: Event Handlers */ | 214 | /* Begin: Event Handlers */ |
215 | |||
216 | handleKeyframeDragstart: { | ||
217 | value: function(event) { | ||
218 | event.stopPropagation(); | ||
219 | return false; | ||
220 | } | ||
221 | }, | ||
210 | 222 | ||