aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Keyframe.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html11
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js123
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css6
3 files changed, 28 insertions, 112 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index bf21994b..7e917b5a 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -1,4 +1,9 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
2<html lang="en"> 7<html lang="en">
3 <head> 8 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -9,8 +14,7 @@
9 "module": "js/panels/Timeline/Keyframe.reel", 14 "module": "js/panels/Timeline/Keyframe.reel",
10 "name": "Keyframe", 15 "name": "Keyframe",
11 "properties": { 16 "properties": {
12 "element": {"#": "keyframespace"}, 17 "element": {"#": "keyframespace"}
13 "tweenkeyframe": {"#": "tweenkeyframe"}
14 } 18 }
15 } 19 }
16 20
@@ -19,8 +23,7 @@
19 </head> 23 </head>
20 <body> 24 <body>
21 25
22 <div id="keyframespace"> 26 <div id="keyframespace" class="tween_keyframe">
23 <div id="tweenkeyframe" class="tween_keyframe"></div>
24 </div> 27 </div>
25 28
26 </body> 29 </body>
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c82a9086..859cdfb1 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,6 +1,11 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
1var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
4 9
5var Keyframe = exports.Keyframe = Montage.create(Component, { 10var Keyframe = exports.Keyframe = Montage.create(Component, {
6 11
@@ -19,136 +24,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
19 }, 24 },
20 set:function(value){ 25 set:function(value){
21 this._position = value; 26 this._position = value;
27 this.needsDraw = true;
22 } 28 }
23 }, 29 },
24 30
25 _id:{
26 value:0
27 },
28
29 id:{
30 serializable:true,
31 get:function () {
32 return this._id;
33 },
34 set:function (value) {
35 this._id = value;
36 }
37 },
38
39 _timelinePosition:{
40 value:0
41 },
42
43 timelinePosition:{
44 serializable:true,
45 get:function () {
46 return this._timelinePosition;
47 },
48 set:function (value) {
49 this._timelinePosition = value;
50 }
51 },
52
53 _containingTrack:{
54 value:{}
55 },
56
57 containingTrack:{
58 serializable:true,
59 get:function () {
60 return this._containingTrack;
61 },
62 set:function (value) {
63 this._containingTrack = value;
64 }
65 },
66
67 _animatedProperties:{
68 value:[]
69 },
70
71 animatedProperties:{
72 serializable:true,
73 get:function () {
74 return this._animatedProperties;
75 },
76 set:function (value) {
77 this._animatedProperties = value;
78 }
79 },
80
81 containingSpan:{
82 value: null
83 },
84
85 prepareForDraw:{ 31 prepareForDraw:{
86 value:function(){ 32 value:function(){
87 this.tweenkeyframe.addEventListener("click", this, false); 33 this.element.addEventListener("click", this, false);
88 this.animatedProperties = new Array();
89 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
90 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
91 } 34 }
92 }, 35 },
93 36
94 draw:{ 37 draw:{
95 value:function(){ 38 value:function(){
96 this.tweenkeyframe.style.left = (this.position - 3) + "px"; 39 this.element.style.left = (this.position - 3) + "px";
97 }
98 },
99
100 handleElementChange:{
101 value:function (event) {
102 if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
103 alert("Wrong element selected for this keyframe track");
104 return;
105 }
106
107 if(event.detail.source && event.detail.source !== "keyframe") {
108 this.containingSpan.highlightSpan();
109 if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
110 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
111 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
112 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
113 this.containingTrack.updateKeyframeRule();
114 }
115 }
116 } 40 }
117 }, 41 },
118 42
119 deselect:{ 43 deselectKeyframe:{
120 value:function(){ 44 value:function(){
121 this.tweenkeyframe.classList.remove("keyframeSelected"); 45 this.element.classList.remove("keyframeSelected");
122 this.eventManager.removeEventListener("elementChange", this, false);
123 } 46 }
124 }, 47 },
125 48
126 select:{ 49 selectKeyframe:{
127 value:function(){ 50 value:function(){
128 this.application.ninja.timeline.deselectKeyframes(); 51 this.element.classList.add("keyframeSelected");
129 this.tweenkeyframe.classList.add("keyframeSelected"); 52 this.parentComponent.selectTween();
130 this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
131 this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
132 this.application.ninja.timeline.selectedKeyframes.push(this);
133
134 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
135 var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
136 this.application.ninja.timeline.updateTimeText(currentMillisec);
137
138 var currentTop = this.animatedProperties["top"] + "px";
139 var currentLeft = this.animatedProperties["left"] + "px";
140
141 ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
142 ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
143
144 // turn on element change event listener
145 this.eventManager.addEventListener("elementChange", this, false);
146 } 53 }
147 }, 54 },
148 55
149 handleClick:{ 56 handleClick:{
150 value:function(ev){ 57 value:function(ev){
151 this.select(); 58 this.selectKeyframe();
152 } 59 }
153 } 60 }
154}); 61});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index 4afc1180..ff5dae7a 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -1,3 +1,9 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
1.tween_keyframe{ 7.tween_keyframe{
2 position: absolute; 8 position: absolute;