aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html61
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1590
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css424
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.pngbin0 -> 1083 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-gear.pngbin0 -> 1397 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss373
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/config.rb10
7 files changed, 1514 insertions, 944 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index daeb9a3c..f821ba6f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -18,11 +18,9 @@
18 "element": {"#": "timeline_panel"}, 18 "element": {"#": "timeline_panel"},
19 "user_layers": {"#": "user_layers"}, 19 "user_layers": {"#": "user_layers"},
20 "track_container": {"#": "right_inside"}, 20 "track_container": {"#": "right_inside"},
21 "timeline_leftpane" : {"#" : "timeline_leftpane"}, 21 "timeline_leftpane" : {"#" : "leftpane_inside"},
22 "layer_tracks": {"#": "layer_tracks"}, 22 "layer_tracks": {"#": "layer_tracks"},
23 "master_track": {"#": "master_track"}, 23 "master_track": {"#": "master_track"},
24 "newlayer_button": {"#": "newlayer_button"},
25 "deletelayer_button": {"#": "deletelayer_button"},
26 "time_markers" : {"#": "timeline_markers"}, 24 "time_markers" : {"#": "timeline_markers"},
27 "layerRepetition" : {"@": "repetition1"}, 25 "layerRepetition" : {"@": "repetition1"},
28 "trackRepetition" : {"@" : "repetition2"}, 26 "trackRepetition" : {"@" : "repetition2"},
@@ -33,7 +31,11 @@
33 "container_tracks" : {"#" : "container-tracks"}, 31 "container_tracks" : {"#" : "container-tracks"},
34 "end_hottext" : {"@" : "endHottext"}, 32 "end_hottext" : {"@" : "endHottext"},
35 "container_layers" : {"#" : "container-layers"}, 33 "container_layers" : {"#" : "container-layers"},
36 "timeline_disabler" : {"#" : "timeline-disabler"} 34 "timeline_disabler" : {"#" : "timeline-disabler"},
35 "checkable_relative" : {"#" : "checkable_relative"},
36 "checkable_absolute" : {"#" : "checkable_absolute"},
37 "checkable_animated" : {"#" : "checkable_animated"},
38 "tl_configbutton" : {"#" : "tl-configbutton"}
37 } 39 }
38 }, 40 },
39 41
@@ -73,7 +75,12 @@
73 "boundObject" : {"@" : "repetition1"}, 75 "boundObject" : {"@" : "repetition1"},
74 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", 76 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
75 "oneway" : false 77 "oneway" : false
76 } 78 },
79 "bindingPoint" : {
80 "boundObject" : {"@" : "repetition1"},
81 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
82 "oneway" : false
83 }
77 } 84 }
78 }, 85 },
79 86
@@ -101,9 +108,33 @@
101 "boundObject" : {"@" : "repetition2"}, 108 "boundObject" : {"@" : "repetition2"},
102 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", 109 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
103 "oneway" : false 110 "oneway" : false
111 },
112 "bindingPoint" : {
113 "boundObject" : {"@" : "repetition2"},
114 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
115 "oneway" : false
104 } 116 }
117
105 } 118 }
106 }, 119 },
120
121 "timelineZoomSlider":{
122 "module":"js/components/slider.reel",
123 "name":"Slider",
124 "properties":{
125 "element":{"#":"tl_slider"},
126 "maxValue" : 10000,
127 "minValue" : 1000
128 },
129 "bindings": {
130 "value": {
131 "boundObject": {"@": "owner"},
132 "boundObjectPropertyPath": "millisecondsOffset",
133 "oneway": false
134 }
135 }
136 },
137
107 "endHottext" : { 138 "endHottext" : {
108 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 139 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
109 "properties": { 140 "properties": {
@@ -144,16 +175,26 @@
144 175
145 <div id="user_layers" class="userlayers"> 176 <div id="user_layers" class="userlayers">
146 <div id="master_layer" class="masterlayer"> 177 <div id="master_layer" class="masterlayer">
147 <div>Master Layer</div> 178 <div class="layer-master">Master Layer
179 <div class="tl-configbutton" data-montage-id="tl-configbutton">
180 <div class="tl-dropdown">
181 <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div>
182 <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div>
183 <div class="nj-divider divider-horizontal"></div>
184 <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
185 </div>
186 </div>
187
188 </div>
189
148 </div> 190 </div>
149 <div id="container-layers"> 191 <div id="container-layers" style="position: relative;" class="container-layers">
150 <div id="container-layer"></div> 192 <div id="container-layer"></div>
151 </div> 193 </div>
152 </div> 194 </div>
153 195
154 <div id="timeline_gutter" class="timelinegutter"> 196 <div id="timeline_gutter" class="timelinegutter">
155 <div id="newlayer_button" class="newlayerbutton"></div> 197 <div id="tl_slider" class="tl_slider"></div>
156 <div id="deletelayer_button" class="deletelayerbutton"></div>
157 <input id="end_hottext" class="endhottext"> 198 <input id="end_hottext" class="endhottext">
158 </div> 199 </div>
159 </div> 200 </div>
@@ -190,4 +231,4 @@
190 </div> 231 </div>
191 232
192 </body> 233 </body>
193</html> \ No newline at end of file 234</html>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 033d0f79..70e04b4c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -6,10 +6,7 @@
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var Layer = require("js/panels/Timeline/Layer.reel").Layer;
10var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
11var nj = require("js/lib/NJUtils").NJUtils; 9var nj = require("js/lib/NJUtils").NJUtils;
12var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
13 10
14var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 11var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
15 12
@@ -19,19 +16,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
19 16
20 /* === BEGIN: Models === */ 17 /* === BEGIN: Models === */
21 _arrLayers:{ 18 _arrLayers:{
22 serializable: true, 19 serializable:true,
23 value:[] 20 value:[]
24 }, 21 },
25 22
26 arrLayers:{ 23 arrLayers:{
27 serializable: true, 24 serializable:true,
28 get:function () { 25 get:function () {
29 return this._arrLayers; 26 return this._arrLayers;
30 }, 27 },
31 set:function (newVal) { 28 set:function (newVal) {
32 this._arrLayers = newVal; 29 this._arrLayers = newVal;
33 this.needsDraw = true; 30 this.needsDraw = true;
34 this._cacheArrays(); 31 this.cacheTimeline();
35 } 32 }
36 }, 33 },
37 34
@@ -50,12 +47,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
50 47
51 48
52 _layerRepetition:{ 49 _layerRepetition:{
53 serializable: true, 50 serializable:true,
54 value:null 51 value:null
55 }, 52 },
56 53
57 layerRepetition:{ 54 layerRepetition:{
58 serializable: true, 55 serializable:true,
59 get:function () { 56 get:function () {
60 return this._layerRepetition;