aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Keyframe.reel
diff options
context:
space:
mode:
authorJohn Mayhew2012-02-10 16:04:19 -0800
committerJohn Mayhew2012-02-10 16:04:19 -0800
commit730c1e191e36b8ab8dba576c481a6585e0dfa69e (patch)
treec86445ff8d1981e97096ec5e9f6cc5301dc9ea40 /js/panels/Timeline/Keyframe.reel
parentcde1dd9a9156b9682fdf85ce2cd4acdd94124c37 (diff)
parent48977780443d97b9e97b047066639c9056788041 (diff)
downloadninja-730c1e191e36b8ab8dba576c481a6585e0dfa69e.tar.gz
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into WorkingBranch
Conflicts: js/ninja.reel/ninja.html
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.js154
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css15
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 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
4
5var 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 12:41:34 +0000