From 7e83bb2ac681eb1340dea0f6efaaddfcf0f2b52a Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 19:27:53 -0800
Subject: Change keyframe to use element mediator when repositioning animated
 elements on stage

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/panels/Timeline/Keyframe.reel/Keyframe.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js')

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 1259fa63..4bb73514 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,5 +1,6 @@
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Keyframe = exports.Keyframe = Montage.create(Component, {
 
@@ -82,6 +83,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             this.tweenkeyframe.addEventListener("click", this, false);
             this.animatedProperties = new Array();
 
+            // should element mediator be used here?
             this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
             this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
         }
@@ -96,7 +98,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     handleElementChange:{
         value:function (event) {
 
-            if(event.detail.source && event.detail.source !== "pi") {
+            if(event.detail.source && event.detail.source !== "keyframe") {
 
                 var items = this.application.ninja.selectedElements;
 
@@ -131,8 +133,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             var currentTop = this.animatedProperties["top"] + "px";
             var currentLeft = this.animatedProperties["left"] + "px";
 
-            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
-            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
 
             // turn on element change event listener
             this.eventManager.addEventListener("elementChange", this, false);
-- 
cgit v1.2.3


From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Tue, 7 Feb 2012 21:28:14 -0800
Subject: Add Span color highlight for animated spans and restyle keyframes

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

(limited to 'js/panels/Timeline/Keyframe.reel/Keyframe.js')

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 4bb73514..b6623dcd 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         }
     },
 
+    containingSpan:{
+        value: null
+    },
+
     prepareForDraw:{
         value:function(){
             this.tweenkeyframe.addEventListener("click", this, false);
@@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     draw:{
         value:function(){
-            this.tweenkeyframe.style.left = (this.position - 2) + "px";
+            this.tweenkeyframe.style.left = (this.position - 3) + "px";
         }
     },
 
@@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             if(event.detail.source && event.detail.source !== "keyframe") {
 
                 var items = this.application.ninja.selectedElements;
-
-                // update this keyframe's animated properties from the item[0] element props
-                this.animatedProperties["top"] = items[0]._element.offsetTop;
-                this.animatedProperties["left"] = items[0]._element.offsetLeft;
-                this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
-
-                this.containingTrack.updateKeyframeRule();
+                this.containingSpan.highlightSpan();
+                if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){
+                    // update this keyframe's animated properties from the item[0] element props
+                    this.animatedProperties["top"] = items[0]._element.offsetTop;
+                    this.animatedProperties["left"] = items[0]._element.offsetLeft;
+                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
+                    this.containingTrack.updateKeyframeRule();
+                }
             }
-
-
         }
     },
 
-- 
cgit v1.2.3