diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 61 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1590 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 424 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png | bin | 0 -> 1083 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png | bin | 0 -> 1397 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 373 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/config.rb | 10 |
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 14c5f1c8..1b7132b9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -19,11 +19,9 @@ | |||
19 | "element": {"#": "timeline_panel"}, | 19 | "element": {"#": "timeline_panel"}, |
20 | "user_layers": {"#": "user_layers"}, | 20 | "user_layers": {"#": "user_layers"}, |
21 | "track_container": {"#": "right_inside"}, | 21 | "track_container": {"#": "right_inside"}, |
22 | "timeline_leftpane" : {"#" : "timeline_leftpane"}, | 22 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
23 | "layer_tracks": {"#": "layer_tracks"}, | 23 | "layer_tracks": {"#": "layer_tracks"}, |
24 | "master_track": {"#": "master_track"}, | 24 | "master_track": {"#": "master_track"}, |
25 | "newlayer_button": {"#": "newlayer_button"}, | ||
26 | "deletelayer_button": {"#": "deletelayer_button"}, | ||
27 | "time_markers" : {"#": "timeline_markers"}, | 25 | "time_markers" : {"#": "timeline_markers"}, |
28 | "layerRepetition" : {"@": "repetition1"}, | 26 | "layerRepetition" : {"@": "repetition1"}, |
29 | "trackRepetition" : {"@" : "repetition2"}, | 27 | "trackRepetition" : {"@" : "repetition2"}, |
@@ -34,7 +32,11 @@ | |||
34 | "container_tracks" : {"#" : "container-tracks"}, | 32 | "container_tracks" : {"#" : "container-tracks"}, |
35 | "end_hottext" : {"@" : "endHottext"}, | 33 | "end_hottext" : {"@" : "endHottext"}, |
36 | "container_layers" : {"#" : "container-layers"}, | 34 | "container_layers" : {"#" : "container-layers"}, |
37 | "timeline_disabler" : {"#" : "timeline-disabler"} | 35 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
36 | "checkable_relative" : {"#" : "checkable_relative"}, | ||
37 | "checkable_absolute" : {"#" : "checkable_absolute"}, | ||
38 | "checkable_animated" : {"#" : "checkable_animated"}, | ||
39 | "tl_configbutton" : {"#" : "tl-configbutton"} | ||
38 | } | 40 | } |
39 | }, | 41 | }, |
40 | 42 | ||
@@ -77,7 +79,12 @@ | |||
77 | "boundObject" : {"@" : "repetition1"}, | 79 | "boundObject" : {"@" : "repetition1"}, |
78 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 80 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
79 | "oneway" : false | 81 | "oneway" : false |
80 | } | 82 | }, |
83 | "bindingPoint" : { | ||
84 | "boundObject" : {"@" : "repetition1"}, | ||
85 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
86 | "oneway" : false | ||
87 | } | ||
81 | } | 88 | } |
82 | }, | 89 | }, |
83 | 90 | ||
@@ -107,9 +114,33 @@ | |||
107 | "boundObject" : {"@" : "repetition2"}, | 114 | "boundObject" : {"@" : "repetition2"}, |
108 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 115 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
109 | "oneway" : false | 116 | "oneway" : false |
117 | }, | ||
118 | "bindingPoint" : { | ||
119 | "boundObject" : {"@" : "repetition2"}, | ||
120 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
121 | "oneway" : false | ||
110 | } | 122 | } |
123 | |||
111 | } | 124 | } |
112 | }, | 125 | }, |
126 | |||
127 | "timelineZoomSlider":{ | ||
128 | "module":"js/components/slider.reel", | ||
129 | "name":"Slider", | ||
130 | "properties":{ | ||
131 | "element":{"#":"tl_slider"}, | ||
132 | "maxValue" : 10000, | ||
133 | "minValue" : 1000 | ||
134 | }, | ||
135 | "bindings": { | ||
136 | "value": { | ||
137 | "boundObject": {"@": "owner"}, | ||
138 | "boundObjectPropertyPath": "millisecondsOffset", | ||
139 | "oneway": false | ||
140 | } | ||
141 | } | ||
142 | }, | ||
143 | |||
113 | "endHottext" : { | 144 | "endHottext" : { |
114 | "module": "js/components/hottextunit.reel", | 145 | "module": "js/components/hottextunit.reel", |
115 | "name": "HotTextUnit", | 146 | "name": "HotTextUnit", |
@@ -151,16 +182,26 @@ | |||
151 | 182 | ||
152 | <div id="user_layers" class="userlayers"> | 183 | <div id="user_layers" class="userlayers"> |
153 | <div id="master_layer" class="masterlayer"> | 184 | <div id="master_layer" class="masterlayer"> |
154 | <div>Master Layer</div> | 185 | <div class="layer-master">Master Layer |
186 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> | ||
187 | <div class="tl-dropdown"> | ||
188 | <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div> | ||
189 | <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div> | ||
190 | <div class="nj-divider divider-horizontal"></div> | ||
191 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> | ||
192 | </div> | ||
193 | </div> | ||
194 | |||
195 | </div> | ||
196 | |||
155 | </div> | 197 | </div> |
156 | <div id="container-layers"> | 198 | <div id="container-layers" style="position: relative;" class="container-layers"> |
157 | <div id="container-layer"></div> | 199 | <div id="container-layer"></div> |
158 | </div> | 200 | </div> |
159 | </div> | 201 | </div> |
160 | 202 | ||
161 | <div id="timeline_gutter" class="timelinegutter"> | 203 | <div id="timeline_gutter" class="timelinegutter"> |
162 | <div id="newlayer_button" class="newlayerbutton"></div> | 204 | <div id="tl_slider" class="tl_slider"></div> |
163 | <div id="deletelayer_button" class="deletelayerbutton"></div> | ||
164 | <input id="end_hottext" class="endhottext"> | 205 | <input id="end_hottext" class="endhottext"> |
165 | </div> | 206 | </div> |
166 | </div> | 207 | </div> |
@@ -197,4 +238,4 @@ | |||
197 | </div> | 238 | </div> |
198 | 239 | ||
199 | </body> | 240 | </body> |
200 | </html> \ No newline at end of file | 241 | </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 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | ||
10 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | ||
11 | var nj = require("js/lib/NJUtils").NJUtils; | 9 | var nj = require("js/lib/NJUtils").NJUtils; |
12 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | ||
13 | 10 | ||
14 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 11 | var 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; | 57 | return this._layerRepetition; |
61 | }, | 58 | }, |
@@ -64,18 +61,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
64 | } | 61 | } |
65 | }, | 62 | <