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