aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js5
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js31
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css8
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css4
-rw-r--r--js/panels/Timeline/Style.reel/Style.html2
-rw-r--r--js/panels/Timeline/Style.reel/Style.js2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html3
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js3
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js15
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html3
12 files changed, 57 insertions, 27 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 2fbe8e83..d286d84c 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -206,6 +206,7 @@ var Montage = require("montage/core/core").Montage,
206 206
207 // Add a handler for the end of the transition, so we can tidy things up after 207 // Add a handler for the end of the transition, so we can tidy things up after
208 // the transition completes 208 // the transition completes
209 this.myContent.identifier = "myContent";
209 this.myContent.addEventListener("webkitTransitionEnd", this, false); 210 this.myContent.addEventListener("webkitTransitionEnd", this, false);
210 211
211 this.myContent.style.overflow = "hidden"; 212 this.myContent.style.overflow = "hidden";
@@ -236,7 +237,7 @@ var Montage = require("montage/core/core").Montage,
236 // Special cases: If transition does not happen (in the case of a contentHeight of 0 237 // Special cases: If transition does not happen (in the case of a contentHeight of 0
237 // or isAnimated = false) we need to manually fire it here to do the cleanup. 238 // or isAnimated = false) we need to manually fire it here to do the cleanup.
238 if ((this.contentHeight < 3) || (!this.isAnimated)) { 239 if ((this.contentHeight < 3) || (!this.isAnimated)) {
239 this.handleWebkitTransitionEnd(); 240 this.handleMyContentWebkitTransitionEnd();
240 } 241 }
241 } 242 }
242 } 243 }
@@ -284,7 +285,7 @@ var Montage = require("montage/core/core").Montage,
284 285
285 // This handler is bound to the transitionEnd event. If transitions 286 // This handler is bound to the transitionEnd event. If transitions
286 // are disabled, it is called manually. 287 // are disabled, it is called manually.
287 handleWebkitTransitionEnd: { 288 handleMyContentWebkitTransitionEnd: {
288 value: function(event) { 289 value: function(event) {
289 290
290 // Are we animating the transitions? 291 // Are we animating the transitions?
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 1259fa63..b6623dcd 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,5 +1,6 @@
1var Montage = require("montage/core/core").Montage; 1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
3 4
4var Keyframe = exports.Keyframe = Montage.create(Component, { 5var Keyframe = exports.Keyframe = Montage.create(Component, {
5 6
@@ -77,11 +78,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
77 } 78 }
78 }, 79 },
79 80
81 containingSpan:{
82 value: null
83 },
84
80 prepareForDraw:{ 85 prepareForDraw:{
81 value:function(){ 86 value:function(){
82 this.tweenkeyframe.addEventListener("click", this, false); 87 this.tweenkeyframe.addEventListener("click", this, false);
83 this.animatedProperties = new Array(); 88 this.animatedProperties = new Array();
84 89
90 // should element mediator be used here?
85 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; 91 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
86 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; 92 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
87 } 93 }
@@ -89,26 +95,25 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
89 95
90 draw:{ 96 draw:{
91 value:function(){ 97 value:function(){
92 this.tweenkeyframe.style.left = (this.position - 2) + "px"; 98 this.tweenkeyframe.style.left = (this.position - 3) + "px";
93 } 99 }
94 }, 100 },
95 101
96 handleElementChange:{ 102 handleElementChange:{
97 value:function (event) { 103 value:function (event) {
98 104
99 if(event.detail.source && event.detail.source !== "pi") { 105 if(event.detail.source && event.detail.source !== "keyframe") {
100 106
101 var items = this.application.ninja.selectedElements; 107 var items = this.application.ninja.selectedElements;
102 108 this.containingSpan.highlightSpan();
103 // update this keyframe's animated properties from the item[0] element props 109 if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){
104 this.animatedProperties["top"] = items[0]._element.offsetTop; 110 // update this keyframe's animated properties from the item[0] element props
105 this.animatedProperties["left"] = items[0]._element.offsetLeft; 111 this.animatedProperties["top"] = items[0]._element.offsetTop;
106 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; 112 this.animatedProperties["left"] = items[0]._element.offsetLeft;
107 113 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
108 this.containingTrack.updateKeyframeRule(); 114 this.containingTrack.updateKeyframeRule();
115 }
109 } 116 }
110
111
112 } 117 }
113 }, 118 },
114 119
@@ -131,8 +136,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
131 var currentTop = this.animatedProperties["top"] + "px"; 136 var currentTop = this.animatedProperties["top"] + "px";
132 var currentLeft = this.animatedProperties["left"] + "px"; 137 var currentLeft = this.animatedProperties["left"] + "px";
133 138
134 this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop); 139 ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
135 this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft); 140 ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
136 141
137 // turn on element change event listener 142 // turn on element change event listener
138 this.eventManager.addEventListener("elementChange", this, false); 143 this.eventManager.addEventListener("elementChange", this, false);
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index e66bcf10..4afc1180 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -1,11 +1,15 @@
1.tween_keyframe{ 1.tween_keyframe{
2 position: absolute; 2 position: absolute;
3 height: 16px; 3 height: 16px;
4 width: 4px; 4 width: 5px;
5 background-color: white; 5 background-color: white;
6 z-index: 23; 6 z-index: 23;
7 border-radius: 3px;
7} 8}
8 9
9.tween_keyframe.keyframeSelected{ 10.tween_keyframe.keyframeSelected{
10 background-color: blue; 11 background-color: #570e19;
12 border-style: solid;
13 border-width: thin;
14 border-color: #d6d1cf;
11} \ No newline at end of file 15} \ No newline at end of file
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 05f56a32..f7bd4ff0 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, {
31 value: function(){ 31 value: function(){
32 this.tweenspan.style.width = this.spanWidth + "px"; 32 this.tweenspan.style.width = this.spanWidth + "px";
33 } 33 }
34 },
35
36 highlightSpan:{
37 value: function(){
38 this.tweenspan.classList.add("spanHighlight");
39 }
34 } 40 }
35}); 41});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 1583c20f..1e988c6c 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -3,4 +3,8 @@
3 height: 16px; 3 height: 16px;
4 opacity: 0.3; 4 opacity: 0.3;
5 background-color: white; 5 background-color: white;
6}
7
8.tween_span.spanHighlight{
9 background-color: #a0c8ff;
6} \ No newline at end of file 10} \ No newline at end of file
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index f10ad842..c6f29626 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -33,7 +33,7 @@
33 } 33 }
34 }, 34 },
35 "hottextunit" : { 35 "hottextunit" : {
36 "module" : "montage/ui/hottextunit.reel", 36 "module" : "js/components/hottextunit.reel",
37 "name" : "HotTextUnit", 37 "name" : "HotTextUnit",
38 "properties" : { 38 "properties" : {
39 "element" : {"#":"value-editor-hottext"} 39 "element" : {"#":"value-editor-hottext"}
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 13a5db3e..796385d0 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -521,7 +521,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
521 "property" : "text-indent", 521 "property" : "text-indent",
522 "tweener" : "hottext", 522 "tweener" : "hottext",
523 "units" : "px", 523 "units" : "px",
524 "min" : 0, 524 "min" : -9999,
525 "max" : 9999, 525 "max" : 9999,
526