aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Keyframe.reel
diff options
context:
space:
mode:
authorJonathan Duran2012-02-06 13:30:49 -0800
committerJonathan Duran2012-02-06 13:30:49 -0800
commita39bad832722a10f6556f91e94c3301a41f59bd5 (patch)
treee436e919f9f67c56e8bce462aab95ff3804813cc /js/panels/Timeline/Keyframe.reel
parent671a27069db6a121507c2b342653aede685cff67 (diff)
downloadninja-a39bad832722a10f6556f91e94c3301a41f59bd5.tar.gz
merge new timeline
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html27
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js147
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css11
3 files changed, 185 insertions, 0 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
new file mode 100644
index 00000000..bf21994b
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,27 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" type="text/css" href="css/Keyframe.css">
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module": "js/panels/Timeline/Keyframe.reel",
10 "name": "Keyframe",
11 "properties": {
12 "element": {"#": "keyframespace"},
13 "tweenkeyframe": {"#": "tweenkeyframe"}
14 }
15 }
16
17 }
18 </script>
19 </head>
20 <body>
21
22 <div id="keyframespace">
23 <div id="tweenkeyframe" class="tween_keyframe"></div>
24 </div>
25
26 </body>
27</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
new file mode 100644
index 00000000..1259fa63
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,147 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3
4var Keyframe = exports.Keyframe = Montage.create(Component, {
5
6 hasTemplate:{
7 value: true
8 },
9
10 _position:{
11 value:0
12 },
13
14 position:{
15 serializable:true,
16 get:function(){
17 return this._position;
18 },
19 set:function(value){
20 this._position = value;
21 }
22 },
23
24 _id:{
25 value:0
26 },
27
28 id:{
29 serializable:true,
30 get:function () {
31 return this._id;
32 },
33 set:function (value) {
34 this._id = value;
35 }
36 },
37
38 _timelinePosition:{
39 value:0
40 },
41
42 timelinePosition:{
43 serializable:true,
44 get:function () {
45 return this._timelinePosition;
46 },
47 set:function (value) {
48 this._timelinePosition = value;
49 }
50 },
51
52 _containingTrack:{
53 value:{}
54 },
55
56 containingTrack:{
57 serializable:true,
58 get:function () {
59 return this._containingTrack;
60 },
61 set:function (value) {
62 this._containingTrack = value;
63 }
64 },
65
66 _animatedProperties:{
67 value:[]
68 },
69
70 animatedProperties:{
71 serializable:true,
72 get:function () {
73 return this._animatedProperties;
74 },
75 set:function (value) {
76 this._animatedProperties = value;
77 }
78 },
79
80 prepareForDraw:{
81 value:function(){
82 this.tweenkeyframe.addEventListener("click", this, false);
83 this.animatedProperties = new Array();
84
85 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
86 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
87 }
88 },
89
90 draw:{
91 value:function(){
92 this.tweenkeyframe.style.left = (this.position - 2) + "px";
93 }
94 },
95
96 handleElementChange:{
97 value:function (event) {
98
99 if(event.detail.source && event.detail.source !== "pi") {
100
101 var items = this.application.ninja.selectedElements;
102
103 // update this keyframe's animated properties from the item[0] element props
104 this.animatedProperties["top"] = items[0]._element.offsetTop;
105 this.animatedProperties["left"] = items[0]._element.offsetLeft;
106 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
107
108 this.containingTrack.updateKeyframeRule();
109 }
110
111
112 }
113 },
114
115 deselect:{
116 value:function(){
117 this.tweenkeyframe.classList.remove("keyframeSelected");
118
119 this.eventManager.removeEventListener("elementChange", this, false);
120 }
121 },
122
123 select:{
124 value:function(){
125 this.application.ninja.timeline.deselectKeyframes();
126 this.tweenkeyframe.classList.add("keyframeSelected");
127 this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
128 this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
129 this.application.ninja.timeline.selectedKeyframes.push(this);
130
131 var currentTop = this.animatedProperties["top"] + "px";
132 var currentLeft = this.animatedProperties["left"] + "px";
133
134 this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
135 this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
136
137 // turn on element change event listener
138 this.eventManager.addEventListener("elementChange", this, false);
139 }
140 },
141
142 handleClick:{
143 value:function(ev){
144 this.select();
145 }
146 }
147});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
new file mode 100644
index 00000000..e66bcf10
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,11 @@
1.tween_keyframe{
2 position: absolute;
3 height: 16px;
4 width: 4px;
5 background-color: white;
6 z-index: 23;
7}
8
9.tween_keyframe.keyframeSelected{
10 background-color: blue;
11} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 06:58:16 +0000