aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.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/TimelineTrack.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/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html112
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js433
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css117
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/images/gridline.jpgbin0 -> 724 bytes
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss65
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/config.rb9
6 files changed, 736 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
new file mode 100644
index 00000000..b0d191c2
--- /dev/null
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -0,0 +1,112 @@
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/TimelineTrack.css">
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module": "js/panels/Timeline/TimelineTrack.reel",
10 "name": "Track",
11 "properties": {
12 "element": {"#": "track"},
13 "tweenRepetition" : {"@" : "tweenRepetition"},
14 "track_lane": {"#": "track_lanes"}
15 }
16 },
17
18 "tween" : {
19 "module" : "js/panels/timeline/Tween.reel",
20 "name" : "Tween",
21 "properties" : {
22 "element":{"#": "track_lane"}
23 },
24 "bindings" : {
25 "spanWidth" : {
26 "boundObject" : {"@": "tweenRepetition"},
27 "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth",
28 "oneway" : false
29 },
30 "keyFramePosition" : {
31 "boundObject" : {"@": "tweenRepetition"},
32 "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition",
33 "oneway" : false
34 },
35 "spanPosition" : {
36 "boundObject" : {"@": "tweenRepetition"},
37 "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition",
38 "oneway" : false
39 },
40 "timelineTrack" : {
41 "boundObject" : {"@": "tweenRepetition"},
42 "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack",
43 "oneway" : false
44 },
45 "keyFrameMillisec" : {
46 "boundObject" : {"@": "tweenRepetition"},
47 "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
48 "oneway" : false
49 },
50 "keyframeID" : {
51 "boundObject" : {"@": "tweenRepetition"},
52 "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID",
53 "oneway" : false
54 }
55 }
56 },
57
58 "tweenRepetition": {
59 "module": "montage/ui/repetition.reel",
60 "name": "Repetition",
61 "properties": {
62 "element": {"#": "track_lanes"},
63 "isSelectionEnabled" : false
64 },
65 "bindings": {
66 "objects": {
67 "boundObject": {"@": "owner"},
68 "boundObjectPropertyPath": "tweens",
69 "oneway": false
70 }
71 }
72 }
73 }
74 </script>
75 </head>
76 <body>
77
78 <div id="track" class="timeline-track">
79 <div id="track_lanes" class="tracklane">
80 <div id="track_lane"></div>
81 </div>
82 <div class="label-main collapsible-label collapsible-collapsed"></div>
83 <div class="collapsible-content collapsible-collapsed content-main">
84 <div class="label-position collapsible-label collapsible-collapsed">
85
86 </div>
87 <div class="content-position collapsible-content collapsible-collapsed">
88 <div class="timeline-track"></div>
89 <div class="timeline-track"></div>
90 <div class="timeline-track"></div>
91 </div>
92 <div class="label-transform collapsible-label collapsible-collapsed">
93
94 </div>
95 <div class="content-transform collapsible-content collapsible-collapsed">
96 <div class="timeline-track"></div>
97 <div class="timeline-track"></div>
98 <div class="timeline-track"></div>
99 <div class="timeline-track"></div>
100 <div class="timeline-track"></div>
101 </div>
102 <div class="label-styles collapsible-label collapsible-collapsed">
103
104 </div>
105 <div class="content-styles collapsible-content collapsible-collapsed">
106
107 </div>
108 </div>
109 </div>
110
111 </body>
112</html> \ No newline at end of file
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
new file mode 100644
index 00000000..62688825
--- /dev/null
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -0,0 +1,433 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var Collapser = require("js/panels/Timeline/Collapser").Collapser;
4var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
5
6var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
7
8 hasTemplate:{
9 value:true
10 },
11
12 _trackID:{
13 value:null,
14 writable:true,
15 serializable:true,
16 enumerable:true
17 },
18
19 trackID:{
20 serializable:true,
21 get:function () {
22 return this._trackID;
23 },
24 set:function (value) {
25 this._trackID = value;
26 this.needsDraw = true;
27 }
28 },
29
30 // Are the various collapsers collapsed or not
31 _isMainCollapsed:{
32 value:""
33 },
34 isMainCollapsed:{
35 get:function () {
36 return this._isMainCollapsed;
37 },
38 set:function (newVal) {
39 if (newVal !== this._isMainCollapsed) {
40 this._isMainCollapsed = newVal;
41 this.needsDraw = true;
42 }
43
44 }
45 },
46 _isTransformCollapsed:{
47 value:true
48 },
49 isTransformCollapsed:{
50 get:function () {
51 return this._isTransformCollapsed;
52 },
53 set:function (newVal) {
54 if (newVal !== this._isTransformCollapsed) {
55 this._isTransformCollapsed = newVal;
56 this.needsDraw = true;
57 }
58 }
59 },
60 _isPositionCollapsed:{
61 value:true
62 },
63 isPositionCollapsed:{
64 get:function () {
65 return this._isPositionCollapsed;
66 },
67 set:function (newVal) {
68 if (newVal !== this._isPositionCollapsed) {
69 this._isPositionCollapsed = newVal;
70 this.needsDraw = true;
71 }
72 }
73 },
74 _isStyleCollapsed:{
75 value:true
76 },
77 isStyleCollapsed:{
78 get:function () {
79 return this._isStyleCollapsed;
80 },
81 set:function (newVal) {
82 if (newVal !== this._isStyleCollapsed) {
83 this._isStyleCollapsed = newVal;
84 this.needsDraw = true;
85</