aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJonathan Duran2012-05-30 09:29:49 -0700
committerJonathan Duran2012-05-30 09:29:49 -0700
commit41754c04c5c5f3c372dc2b38a122144f8d9e1d18 (patch)
tree3a190fe9e361b9c590ef9867feb2827786bea497 /js
parent517661250fb478f460df3f57f4654bf85723ea2a (diff)
downloadninja-41754c04c5c5f3c372dc2b38a122144f8d9e1d18.tar.gz
fancy keyframe selection
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js4
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css9
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js15
3 files changed, 19 insertions, 9 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 41eb6ef1..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
42 42
43 draw:{ 43 draw:{
44 value:function(){ 44 value:function(){
45 this.element.style.left = (this.position - 6) + "px"; 45 this.element.style.left = (this.position - 5) + "px";
46 } 46 }
47 }, 47 },
48 48
49 deselectKeyframe:{ 49 deselectKeyframe:{
50 value:function(){ 50 value:function(){
51 this.element.classList.remove("keyframeSelected"); 51 this.element.classList.remove("keyframeSelected");
52 this.element.style.left = (this.position - 5) + "px";
52 } 53 }
53 }, 54 },
54 55
55 selectKeyframe:{ 56 selectKeyframe:{
56 value:function(){ 57 value:function(){
57 this.element.classList.add("keyframeSelected"); 58 this.element.classList.add("keyframeSelected");
59 this.element.style.left = (this.position - 6) + "px";
58 this.parentComponent.selectTween(); 60 this.parentComponent.selectTween();
59 } 61 }
60 }, 62 },
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index 36166c1c..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,9 +6,9 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 10px; 9 height: 8px;
10 width: 10px; 10 width: 8px;
11 top: 3px; 11 top: 4px;
12 background-color: white; 12 background-color: white;
13 z-index: 23; 13 z-index: 23;
14 border-radius: 2px; 14 border-radius: 2px;
@@ -16,6 +16,9 @@
16} 16}
17 17
18.tween_keyframe.keyframeSelected{ 18.tween_keyframe.keyframeSelected{
19 height: 10px;
20 width: 10px;
21 top: 3px;
19 background-color: #570e19; 22 background-color: #570e19;
20 border-style: solid; 23 border-style: solid;
21 border-width: thin; 24 border-width: thin;
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index af58199a..d785ea3e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -35,7 +35,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
35 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 35 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
36 if (selectedIndex !== false) { 36 if (selectedIndex !== false) {
37 if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { 37 if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
38 //this.retrieveStoredStyleTweens(); 38 this.retrieveStoredStyleTweens();
39 } 39 }
40 } 40 }
41 } 41 }
@@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
240 240
241 var newTween = {}; 241 var newTween = {};
242 newTween.tweenData = {}; 242 newTween.tweenData = {};
243 newTween.tweenData.tweenedProperties = [];
244
245 // TODO - check for color values vs px values and set the correct default
246 var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
247 if(propVal == null){
248 propVal = "1px";
249 }
250 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal;
243 251
244 if (clickPos == 0) { 252 if (clickPos == 0) {
245 newTween.tweenData.spanWidth = 0; 253 newTween.tweenData.spanWidth = 0;
@@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
247 newTween.tweenData.keyFrameMillisec = 0; 255 newTween.tweenData.keyFrameMillisec = 0;
248 newTween.tweenData.tweenID = 0; 256 newTween.tweenData.tweenID = 0;
249 newTween.tweenData.spanPosition = 0; 257 newTween.tweenData.spanPosition = 0;
250 newTween.tweenData.tweenedProperties = [];
251 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
252 258
253 this.propTweens.push(newTween); 259 this.propTweens.push(newTween);
254 260
@@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
258 newTween.tweenData.keyFrameMillisec = currentMillisec; 264 newTween.tweenData.keyFrameMillisec = currentMillisec;
259 newTween.tweenData.tweenID = this.nextKeyframe; 265 newTween.tweenData.tweenID = this.nextKeyframe;
260 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 266 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
261 newTween.tweenData.tweenedProperties = []; 267
262 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
263 this.propTweens.push(newTween); 268 this.propTweens.push(newTween);
264 269
265 this.nextKeyframe += 1; 270 this.nextKeyframe += 1;