aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html48
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js109
-rw-r--r--js/panels/Timeline/Tween.reel/css/Tween.css4
3 files changed, 161 insertions, 0 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
new file mode 100644
index 00000000..307dcd02
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -0,0 +1,48 @@
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/Tween.css">
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module": "js/panels/Timeline/Tween.reel",
10 "name": "Tween",
11 "properties": {
12 "element": {"#": "tweenspace"},
13 "keyframe": {"@": "keyframe"},
14 "span": {"@": "span"},
15 "tweencontainer": {"#": "tweencontainer"}
16 }
17 },
18
19 "span": {
20 "module": "js/panels/Timeline/Span.reel",
21 "name": "Span",
22 "properties": {
23 "element": {"#": "span_container"}
24 }
25 },
26
27 "keyframe": {
28 "module": "js/panels/Timeline/Keyframe.reel",
29 "name": "Keyframe",
30 "properties": {
31 "element": {"#": "keyframe_container"},
32 "containingSpan": {"@": "span"}
33 }
34 }
35 }
36 </script>
37 </head>
38 <body>
39
40 <div id="tweenspace">
41 <div id="tweencontainer" class="tween_container">
42 <div id="span_container"></div>
43 <div id="keyframe_container"></div>
44 </div>
45 </div>
46
47 </body>
48</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
new file mode 100644
index 00000000..eddf1b17
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -0,0 +1,109 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3
4var Tween = exports.Tween = Montage.create(Component, {
5
6 hasTemplate:{
7 value: true
8 },
9
10 _spanWidth: {
11 value: 0
12 },
13
14 spanWidth: {
15 serializable:true,
16 get: function(){
17 return this._spanWidth;
18 },
19 set: function(value){
20 this._spanWidth = value;
21 }
22 },
23
24 _spanPosition:{
25 value: 0
26 },
27
28 spanPosition:{
29 serializable:true,
30 get:function () {
31 return this._spanPosition;
32 },
33 set:function (value) {
34 this._spanPosition = value;
35 }
36 },
37
38 _keyFramePosition:{
39 value:0
40 },
41
42 keyFramePosition:{
43 serializable:true,
44 get:function () {
45 return this._keyFramePosition;
46 },
47 set:function (value) {
48 this._keyFramePosition = value;
49 }
50 },
51
52 _keyFrameMillisec:{
53 value:0
54 },
55
56 keyFrameMillisec:{
57 serializable:true,
58 get:function () {
59 return this._keyFrameMillisec;
60 },
61 set:function (value) {
62 this._keyFrameMillisec = value;
63 }
64 },
65
66 _keyframeID:{
67 value:0
68 },
69
70 keyframeID:{
71 serializable:true,
72 get:function () {
73 return this._keyframeID;
74 },
75 set:function (value) {
76 this._keyframeID = value;
77 }
78 },
79
80 _timelineTrack:{
81 value:0
82 },
83
84 timelineTrack:{
85 serializable:true,
86 get:function () {
87 return this._timelineTrack;
88 },
89 set:function (value) {
90 this._timelineTrack = value;
91 }
92 },
93
94 prepareForDraw:{
95 value:function () {
96 this.keyframe.containingTrack = this.timelineTrack;
97 this.keyframe.position = this.spanWidth;
98 this.keyframe.timelinePosition = this.keyFramePosition;
99 this.keyframe.id = this.keyframeID;
100 }
101 },
102
103 draw:{
104 value:function () {
105 this.span.spanWidth = this.spanWidth;
106 this.tweencontainer.style.left = this.spanPosition + "px";
107 }
108 }
109});
diff --git a/js/panels/Timeline/Tween.reel/css/Tween.css b/js/panels/Timeline/Tween.reel/css/Tween.css
new file mode 100644
index 00000000..942f9fc9
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/css/Tween.css
@@ -0,0 +1,4 @@
1.tween_container{
2 height: 16px;
3 position: absolute;
4} \ No newline at end of file