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.html27
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js149
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css11
3 files changed, 187 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..4bb73514
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,149 @@
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 prepareForDraw:{
82 value:function(){
83 this.tweenkeyframe.addEventListener("click", this, false);
84 this.animatedProperties = new Array();
85
86 // should element mediator be used here?
87 this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
88 this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
89 }
90 },
91
92 draw:{
93 value:function(){
94 this.tweenkeyframe.style.left = (this.position - 2) + "px";
95 }
96 },
97
98 handleElementChange:{
99 value:function (event) {
100
101 if(event.detail.source && event.detail.source !== "keyframe") {
102
103 var items = this.application.ninja.selectedElements;
104
105 // update this keyframe's animated properties from the item[0] element props
106 this.animatedProperties["top"] = items[0]._element.offsetTop;
107 this.animatedProperties["left"] = items[0]._element.offsetLeft;
108 this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
109
110 this.containingTrack.updateKeyframeRule();
111 }
112
113
114 }
115 },
116
117 deselect:{
118 value:function(){
119 this.tweenkeyframe.classList.remove("keyframeSelected");
120
121 this.eventManager.removeEventListener("elementChange", this, false);
122 }
123 },
124
125 select:{
126 value:function(){
127 this.application.ninja.timeline.deselectKeyframes();
128 this.tweenkeyframe.classList.add("keyframeSelected");
129 this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
130 this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
131 this.application.ninja.timeline.selectedKeyframes.push(this);
132
133 var currentTop = this.animatedProperties["top"] + "px";
134 var currentLeft = this.animatedProperties["left"] + "px";
135
136 ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
137 ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
138
139 // turn on element change event listener
140 this.eventManager.addEventListener("elementChange", this, false);
141 }
142 },
143
144 handleClick:{
145 value:function(ev){
146 this.select();
147 }
148 }
149});
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 2024-11-06 15:19:30 +0000