aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/PropertyTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js120
1 files changed, 42 insertions, 78 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 72d26e78..c4571e9d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component;
9 9
10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { 10var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
11 11
12 /* ===- Begin Models ==== */
12 hasTemplate:{ 13 hasTemplate:{
13 value: true 14 value: true
14 }, 15 },
15 16
16 prepareForDraw:{
17 value:function(){
18 this.element.addEventListener("click", this, false);
19 this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 }
23 },
24
25 draw:{
26 value:function(){
27
28 }
29 },
30
31 didDraw:{
32 value:function () {
33 if(this.currentKeyframeRule){
34 this.retrieveStoredStyleTweens();
35 }
36 }
37 },
38
39 trackEditorProperty:{ 17 trackEditorProperty:{
40 value:"" 18 value:""
41 }, 19 },
@@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
51 _propTweenRepetition:{ 29 _propTweenRepetition:{
52 value:null 30 value:null
53 }, 31 },
54
55 propTweenRepetition:{ 32 propTweenRepetition:{
56 get:function () { 33 get:function () {
57 return this._propTweenRepetition; 34 return this._propTweenRepetition;
@@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
64 _propTweens:{ 41 _propTweens:{
65 value:[] 42 value:[]
66 }, 43 },
67
68 propTweens:{ 44 propTweens:{
69 serializable:true, 45 serializable:true,
70 get:function () { 46 get:function () {
@@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
78 _propTrackData:{ 54 _propTrackData:{
79 value:false 55 value:false
80 }, 56 },
81
82 propTrackData:{ 57 propTrackData:{
83 serializable:true, 58 serializable:true,
84 get:function () { 59 get:function () {
@@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
115 _trackID:{ 90 _trackID:{
116 value:null 91 value:null
117 }, 92 },
118
119 trackID:{ 93 trackID:{
120 serializable:true, 94 serializable:true,
121 get:function () { 95 get:function () {
@@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
131 _trackType:{ 105 _trackType:{
132 value:null 106 value:null
133 }, 107 },
134
135 trackType:{ 108 trackType:{
136 serializable:true, 109 serializable:true,
137 get:function () { 110 get:function () {
@@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
147 _styleIndex:{ 120 _styleIndex:{
148 value:null 121 value:null
149 }, 122 },
150
151 styleIndex:{ 123 styleIndex:{
152 serializable:true, 124 serializable:true,
153 get:function () { 125 get:function () {
@@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
174 this.needsDraw = true; 146 this.needsDraw = true;
175 } 147 }
176 }, 148 },
149 /* ===- End Models ==== */
150
151 /* ===- Begin Draw Cycle ==== */
152 prepareForDraw:{
153 value:function () {
154 this.element.addEventListener("click", this, false);
155 this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
156 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
157 this.ninjaStylesContoller = this.application.ninja.stylesController;
158 }
159 },
160
161 didDraw:{
162 value:function () {
163 if (this.currentKeyframeRule) {
164 this.retrieveStoredStyleTweens();
165 }
166 }
167 },
168 /* ===- End Draw Cycle ==== */
177 169
170 /* ===- Begin Event Handlers ==== */
178 handleClick:{ 171 handleClick:{
179 value:function (ev) { 172 value:function (ev) {
180 if (ev.shiftKey) { 173 if (ev.shiftKey) {
181
182 if (this.trackType == "position") { 174 if (this.trackType == "position") {
183 this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); 175 this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
184 } 176 }
185
186 if (this.propTweens.length < 1) { 177 if (this.propTweens.length < 1) {
187
188 // check if there is an editor property assigned yet
189 // get this property track's editor prop name from layer data arrays
190 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), 178 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID),
191 currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); 179 currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex);
192 180
193 if (this.trackType == "style") { 181 if (this.trackType == "style") {
194 //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) 182 if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) {
195 if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) {
196 console.log("Please enter a style property for this track before adding keyframes."); 183 console.log("Please enter a style property for this track before adding keyframes.");
197 return; 184 return;
198 } else { 185 } else {
199 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; 186 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty;
200 //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
201 } 187 }
202 this.insertPropTween(0); 188 this.insertPropTween(0);
203 this.addPropAnimationRuleToElement(ev); 189 this.addPropAnimationRuleToElement(ev);
204 this.updatePropKeyframeRule(); 190 this.updatePropKeyframeRule();
205 } else if (this.trackType == "position") { 191 } else if (this.trackType == "position") {
206 //console.log("Property track editorProperty set to: " + this.trackEditorProperty); 192
207 } 193 }
208 } else { 194 } else {
209 this.handleNewPropTween(ev); 195 this.handleNewPropTween(ev);
@@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
214 } 200 }
215 } 201 }
216 }, 202 },
217
218 getCurrentSelectedStyleIndex: {
219 value: function(layerIndex) {
220 var returnVal = false,
221 i = 0,
222 arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length;
223 for (i = 0; i < arrLayerStylesLength; i++) {
224 var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i];
225 if (currItem.isSelected === true) {
226 returnVal = i;
227 }
228 }
229 return returnVal;
230 }
231 },
232 203
233 handleNewPropTween:{ 204 handleNewPropTween:{
234 value:function (ev) { 205 value:function (ev) {
235 if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { 206 if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) {
236 this.insertPropTween(ev.offsetX); 207 this.insertPropTween(ev.offsetX);
237 } else { 208 } else {
238 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
239 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
240
241 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
242 var findXOffset = function (obj) { 209 var findXOffset = function (obj) {
243 var curleft = 0; 210 var curleft = 0;
244 if (obj.offsetParent) { 2