diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
4 files changed, 328 insertions, 162 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 1b7132b9..5c957619 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <!-- <copyright> | 2 | <!-- <copyright> |
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
@@ -13,14 +13,14 @@ | |||
13 | <script type="text/montage-serialization"> | 13 | <script type="text/montage-serialization"> |
14 | { | 14 | { |
15 | "owner": { | 15 | "owner": { |
16 | "module": "js/panels/Timeline/TimelinePanel.reel", | 16 | "prototype": "js/panels/Timeline/TimelinePanel.reel", |
17 | "name": "TimelinePanel", | ||
18 | "properties": { | 17 | "properties": { |
19 | "element": {"#": "timeline_panel"}, | 18 | "element": {"#": "timeline_panel"}, |
20 | "user_layers": {"#": "user_layers"}, | 19 | "user_layers": {"#": "user_layers"}, |
21 | "track_container": {"#": "right_inside"}, | 20 | "track_container": {"#": "right_inside"}, |
22 | "timeline_leftpane" : {"#" : "leftpane_inside"}, | 21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
23 | "layer_tracks": {"#": "layer_tracks"}, | 22 | "layer_tracks": {"#": "layer_tracks"}, |
23 | "layout_tracks": {"#": "layout_tracks"}, | ||
24 | "master_track": {"#": "master_track"}, | 24 | "master_track": {"#": "master_track"}, |
25 | "time_markers" : {"#": "timeline_markers"}, | 25 | "time_markers" : {"#": "timeline_markers"}, |
26 | "layerRepetition" : {"@": "repetition1"}, | 26 | "layerRepetition" : {"@": "repetition1"}, |
@@ -32,6 +32,7 @@ | |||
32 | "container_tracks" : {"#" : "container-tracks"}, | 32 | "container_tracks" : {"#" : "container-tracks"}, |
33 | "end_hottext" : {"@" : "endHottext"}, | 33 | "end_hottext" : {"@" : "endHottext"}, |
34 | "container_layers" : {"#" : "container-layers"}, | 34 | "container_layers" : {"#" : "container-layers"}, |
35 | "container_tracks" : {"#" : "container-tracks"}, | ||
35 | "timeline_disabler" : {"#" : "timeline-disabler"}, | 36 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
36 | "checkable_relative" : {"#" : "checkable_relative"}, | 37 | "checkable_relative" : {"#" : "checkable_relative"}, |
37 | "checkable_absolute" : {"#" : "checkable_absolute"}, | 38 | "checkable_absolute" : {"#" : "checkable_absolute"}, |
@@ -41,8 +42,7 @@ | |||
41 | }, | 42 | }, |
42 | 43 | ||
43 | "timelineResize" : { | 44 | "timelineResize" : { |
44 | "module": "js/panels/Resizer", | 45 | "prototype": "js/panels/Resizer", |
45 | "name": "Resizer", | ||
46 | "properties": { | 46 | "properties": { |
47 | "element": {"#": "layer_resizer"}, | 47 | "element": {"#": "layer_resizer"}, |
48 | "panel" : {"#" : "timeline_leftpane"}, | 48 | "panel" : {"#" : "timeline_leftpane"}, |
@@ -54,8 +54,7 @@ | |||
54 | 54 | ||
55 | 55 | ||
56 | "repetition1": { | 56 | "repetition1": { |
57 | "module": "montage/ui/repetition.reel", | 57 | "prototype": "montage/ui/repetition.reel", |
58 | "name": "Repetition", | ||
59 | "properties": { | 58 | "properties": { |
60 | "element": {"#": "container-layers"}, | 59 | "element": {"#": "container-layers"}, |
61 | "isSelectionEnabled" : true | 60 | "isSelectionEnabled" : true |
@@ -69,8 +68,7 @@ | |||
69 | } | 68 | } |
70 | }, | 69 | }, |
71 | "layer" : { | 70 | "layer" : { |
72 | "module" : "js/panels/Timeline/Layer.reel", | 71 | "prototype" : "js/panels/Timeline/Layer.reel", |
73 | "name" : "Layer", | ||
74 | "properties" : { | 72 | "properties" : { |
75 | "element": {"#": "container-layer"} | 73 | "element": {"#": "container-layer"} |
76 | }, | 74 | }, |
@@ -89,8 +87,7 @@ | |||
89 | }, | 87 | }, |
90 | 88 | ||
91 | "repetition2" : { | 89 | "repetition2" : { |
92 | "module": "montage/ui/repetition.reel", | 90 | "prototype": "montage/ui/repetition.reel", |
93 | "name": "Repetition", | ||
94 | "properties": { | 91 | "properties": { |
95 | "element": {"#": "container-tracks"}, | 92 | "element": {"#": "container-tracks"}, |
96 | "isSelectionEnabled" : false | 93 | "isSelectionEnabled" : false |
@@ -104,8 +101,7 @@ | |||
104 | } | 101 | } |
105 | }, | 102 | }, |
106 | "track" : { | 103 | "track" : { |
107 | "module" : "js/panels/Timeline/TimelineTrack.reel", | 104 | "prototype" : "js/panels/Timeline/TimelineTrack.reel", |
108 | "name" : "TimelineTrack", | ||
109 | "properties" : { | 105 | "properties" : { |
110 | "element": {"#": "container-track"} | 106 | "element": {"#": "container-track"} |
111 | }, | 107 | }, |
@@ -125,8 +121,7 @@ | |||
125 | }, | 121 | }, |
126 | 122 | ||
127 | "timelineZoomSlider":{ | 123 | "timelineZoomSlider":{ |
128 | "module":"js/components/slider.reel", | 124 | "prototype":"js/components/slider.reel", |
129 | "name":"Slider", | ||
130 | "properties":{ | 125 | "properties":{ |
131 | "element":{"#":"tl_slider"}, | 126 | "element":{"#":"tl_slider"}, |
132 | "maxValue" : 10000, | 127 | "maxValue" : 10000, |
@@ -142,8 +137,7 @@ | |||
142 | }, | 137 | }, |
143 | 138 | ||
144 | "endHottext" : { | 139 | "endHottext" : { |
145 | "module": "js/components/hottextunit.reel", | 140 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
146 | "name": "HotTextUnit", | ||
147 | "properties": { | 141 | "properties": { |
148 | "element": {"#": "end_hottext"}, | 142 | "element": {"#": "end_hottext"}, |
149 | "maxValue" : 100000, | 143 | "maxValue" : 100000, |
@@ -159,29 +153,29 @@ | |||
159 | </head> | 153 | </head> |
160 | <body> | 154 | <body> |
161 | 155 | ||
162 | <div id="timeline_panel" class="tl_container"> | 156 | <div data-montage-id="timeline_panel" class="tl_container"> |
163 | 157 | ||
164 | <div id="bread_crumb"></div> | 158 | <div data-montage-id="bread_crumb"></div> |
165 | 159 | ||
166 | <div id="main_timeline" class="maintimeline"> | 160 | <div data-montage-id="main_timeline" class="maintimeline"> |
167 | 161 | ||
168 | 162 | ||
169 | <div id="timeline_leftpane" class="tl_leftpane"> | 163 | <div data-montage-id="timeline_leftpane" class="tl_leftpane"> |
170 | <div id="leftpane_inside" class="leftinside"> | 164 | <div data-montage-id="leftpane_inside" class="leftinside"> |
171 | <div id="timeline_controller" class="timelinecontroller"> | 165 | <div data-montage-id="timeline_controller" class="timelinecontroller"> |
172 | <div id="timeline_controls" class="timelinecontrols"> | 166 | <div data-montage-id="timeline_controls" class="timelinecontrols"> |
173 | <div id="rewind_button" class="rewindbutton"></div> | 167 | <div data-montage-id="rewind_button" class="rewindbutton"></div> |
174 | <div id="play_button" class="playbutton"></div> | 168 | <div data-montage-id="play_button" class="playbutton"></div> |
175 | <div id="pause_button" class="pausebutton"></div> | 169 | <div data-montage-id="pause_button" class="pausebutton"></div> |
176 | <div id="forward_button" class="forwardbutton"></div> | 170 | <div data-montage-id="forward_button" class="forwardbutton"></div> |
177 | <div id="time_text" class="timetext">00:00:00</div> | 171 | <div data-montage-id="time_text" class="timetext">00:00:00</div> |
178 | </div> | 172 | </div> |
179 | </div> | 173 | </div> |
180 | 174 | ||
181 | 175 | ||
182 | 176 | ||
183 | <div id="user_layers" class="userlayers"> | 177 | <div data-montage-id="user_layers" class="userlayers"> |
184 | <div id="master_layer" class="masterlayer"> | 178 | <div data-montage-id="master_layer" class="masterlayer"> |
185 | <div class="layer-master">Master Layer | 179 | <div class="layer-master">Master Layer |
186 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> | 180 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> |
187 | <div class="tl-dropdown"> | 181 | <div class="tl-dropdown"> |
@@ -195,36 +189,36 @@ | |||
195 | </div> | 189 | </div> |
196 | 190 | ||
197 | </div> | 191 | </div> |
198 | <div id="container-layers" style="position: relative;" class="container-layers"> | 192 | <div data-montage-id="container-layers" style="position: relative;" class="container-layers"> |
199 | <div id="container-layer"></div> | 193 | <div data-montage-id="container-layer"></div> |
200 | </div> | 194 | </div> |
201 | </div> | 195 | </div> |
202 | 196 | ||
203 | <div id="timeline_gutter" class="timelinegutter"> | 197 | <div data-montage-id="timeline_gutter" class="timelinegutter"> |
204 | <div id="tl_slider" class="tl_slider"></div> | 198 | <div data-montage-id="tl_slider" class="tl_slider"></div> |
205 | <input id="end_hottext" class="endhottext"> | 199 | <input data-montage-id="end_hottext" class="endhottext"> |
206 | </div> |