diff options
author | Ananya Sen | 2012-02-10 16:03:52 -0800 |
---|---|---|
committer | Ananya Sen | 2012-02-10 16:03:52 -0800 |
commit | c48eeb01bd726895dc577d8b843b2a75883eee07 (patch) | |
tree | 5945556f80723285396059aaecb523e27b1cbb0d /js/panels/Timeline/Keyframe.reel | |
parent | c627ebb5735d55218813b073c655dae6cded6040 (diff) | |
download | ninja-c48eeb01bd726895dc577d8b843b2a75883eee07.tar.gz |
Merge from /joseeight/ninja-internal/tree/FileIO
Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.html | 27 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 154 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 15 |
3 files changed, 196 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..c82a9086 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -0,0 +1,154 @@ | |||
1 | var Montage = require("montage/core/core").Montage; | ||
2 | var Component = require("montage/ui/component").Component; | ||
3 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
4 | |||
5 | var Keyframe = exports.Keyframe = Montage.create(Component, { | ||
6 | |||
7 | hasTemplate:{ | ||
8 | value: true | ||
9 | }, | ||
10 | |||
11 | _position:{ | ||
12 | value:0 | ||
13 | }, | ||
14 | |||
15 | position:{ | ||
16 | serializable:true, | ||
17 | get:function(){ | ||
18 | return this._position; | ||
19 | }, | ||
20 | set:function(value){ | ||
21 | this._position = value; | ||
22 | } | ||
23 | }, | ||
24 | |||
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:{ | ||
86 | value:function(){ | ||
87 | this.tweenkeyframe.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 | } | ||
92 | }, | ||
93 | |||
94 | draw:{ | ||
95 | value:function(){ | ||
96 | this.tweenkeyframe.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 | } | ||
117 | }, | ||
118 | |||
119 | deselect:{ | ||
120 | value:function(){ | ||
121 | this.tweenkeyframe.classList.remove("keyframeSelected"); | ||
122 | this.eventManager.removeEventListener("elementChange", this, false); | ||
123 | } | ||
124 | }, | ||
125 | |||
126 | select:{ | ||
127 | value:function(){ | ||
128 | this.application.ninja.timeline.deselectKeyframes(); | ||
129 | this.tweenkeyframe.classList.add("keyframeSelected"); | ||
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 | } | ||
147 | }, | ||
148 | |||
149 | handleClick:{ | ||
150 | value:function(ev){ | ||
151 | this.select(); | ||
152 | } | ||
153 | } | ||
154 | }); | ||
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..4afc1180 --- /dev/null +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css | |||
@@ -0,0 +1,15 @@ | |||
1 | .tween_keyframe{ | ||
2 | position: absolute; | ||
3 | height: 16px; | ||
4 | width: 5px; | ||
5 | background-color: white; | ||
6 | z-index: 23; | ||
7 | border-radius: 3px; | ||
8 | } | ||
9 | |||
10 | .tween_keyframe.keyframeSelected{ | ||
11 | background-color: #570e19; | ||
12 | border-style: solid; | ||
13 | border-width: thin; | ||
14 | border-color: #d6d1cf; | ||
15 | } \ No newline at end of file | ||