5 files changed, 1582 insertions, 1476 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 6c5e030c..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility LLC.
 All Rights Reserved.
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
                        "playheadmarker": {"#": "playhead_marker"},
                        "timetext" : {"#": "time_text"},
                        "timebar" : {"#": "time_bar"},
-                        "container_tracks" : {"#" : "container-tracks"},
                        "end_hottext" : {"@" : "endHottext"},
                        "container_layers" : {"#" : "container-layers"},
                        "container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
                        "checkable_animated" : {"#" : "checkable_animated"},
                        "tl_configbutton" : {"#" : "tl-configbutton"},
                        "checkable_lock" : {"#" : "checkable_lock"},
-                        "checkable_visible":{"#" : "checkable_visible"},
+                        "checkable_visible":{"#" : "checkable_visible"}
-                        "play_button" : {"#" : "play_button"}
+                    }
+                },
+                "playButton": {
+                    "prototype": "montage/ui/toggle-button.reel",
+                    "properties": {
+                        "element": {"#": "play_button"},
+                        "identifier": "playButton",
+                        "pressedClass": "pausebutton",
+                        "pressedLabel": "",
+                        "unpressedLabel": "",
+                        "pressed": false
+                    },
+                    "bindings": {
+                        "pressed": {"<->": "@owner.stage.timelinePlay"}
                    }
                },
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
                    <div data-montage-id="leftpane_inside" class="leftinside">
                        <div data-montage-id="timeline_controller" class="timelinecontroller">
                            <div data-montage-id="timeline_controls" class="timelinecontrols">
-                                <div data-montage-id="play_button" class="playbutton"></div>
+                                <button data-montage-id="play_button" class="playbutton"></button>
                                <div data-montage-id="time_text" class="timetext">00:00:00</div>
                            </div>
                        </div>
@@ -217,7 +231,9 @@ POSSIBILITY OF SUCH DAMAGE.
                        </div>
                        <div data-montage-id="timeline_gutter" class="timelinegutter">
+                            <div class="sliderClass">
                            <div data-montage-id="tl_slider" class="tl_slider"></div>
+                            </div>
                            <input data-montage-id="end_hottext" class="endhottext">
                        </div>
                    </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a1e03b35..7581d15a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -30,109 +30,265 @@ POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component,
+        Component = require("montage/ui/component").Component,
-    nj = require("js/lib/NJUtils").NJUtils,
+        nj = require("js/lib/NJUtils").NJUtils,
-    EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
+        EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+    _stage: {
+        value: null
+    },
+    stage: {
+        get: function() {
+            return this._stage;
+        },
+        set: function(value) {
+            if(value) {
+                this._stage = value;
+            }
+        }
+    },
+    /* === BEGIN: Models === */
+        _user_layers: {
+                value: null
+        },
    user_layers: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._user_layers;
+        },
+        set: function(newVal) {
+                this._user_layers = newVal;
+        }
    },
+        _track_container: {
+                value: null
+        },
    track_container: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._track_container;
+        },
+        set: function(newVal) {
+                this._track_container = newVal;
+        }
    },
+        _timeline_leftpane: {
+                value: null
+        },
    timeline_leftpane: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._timeline_leftpane;
+        },
+        set: function(newVal) {
+                this._timeline_leftpane = newVal;
+        }
    },
+        _layer_tracks: {
+                value: null
+        },
    layer_tracks: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._layer_tracks;
+        },
+        set: function(newVal) {
+                this._layer_tracks = newVal;
+        }
    },
+        _master_track: {
+                value: null
+        },
    master_track: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._master_track;
+        },
+        set: function(newVal) {
+                this._master_track = newVal;
+        }
    },
+        _time_markers: {
+                value: null
+        },
    time_markers: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._time_markers;
+        },
+        set: function(newVal) {
+                this._time_markers = newVal;
+        }
    },
+        _playhead: {
+                value: null
+        },
    playhead: {
-        value: null,
+        serializable: true,
-        serializable: true
+        get: function() {
+                return this._playhead;
+        },

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 6c5e030c..8a4073c9 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	Copyright (c) 2012, Motorola Mobility LLC.	3	Copyright (c) 2012, Motorola Mobility LLC.
4	All Rights Reserved.	4	All Rights Reserved.
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
54	"playheadmarker": {"#": "playhead_marker"},	54	"playheadmarker": {"#": "playhead_marker"},
55	"timetext" : {"#": "time_text"},	55	"timetext" : {"#": "time_text"},
56	"timebar" : {"#": "time_bar"},	56	"timebar" : {"#": "time_bar"},
57	"container_tracks" : {"#" : "container-tracks"},
58	"end_hottext" : {"@" : "endHottext"},	57	"end_hottext" : {"@" : "endHottext"},
59	"container_layers" : {"#" : "container-layers"},	58	"container_layers" : {"#" : "container-layers"},
60	"container_tracks" : {"#" : "container-tracks"},	59	"container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
62	"checkable_animated" : {"#" : "checkable_animated"},	61	"checkable_animated" : {"#" : "checkable_animated"},
63	"tl_configbutton" : {"#" : "tl-configbutton"},	62	"tl_configbutton" : {"#" : "tl-configbutton"},
64	"checkable_lock" : {"#" : "checkable_lock"},	63	"checkable_lock" : {"#" : "checkable_lock"},
65	"checkable_visible":{"#" : "checkable_visible"},	64	"checkable_visible":{"#" : "checkable_visible"}
66	"play_button" : {"#" : "play_button"}	65
		66	}
		67	},
		68
		69	"playButton": {
		70	"prototype": "montage/ui/toggle-button.reel",
		71	"properties": {
		72	"element": {"#": "play_button"},
		73	"identifier": "playButton",
		74	"pressedClass": "pausebutton",
		75	"pressedLabel": "",
		76	"unpressedLabel": "",
		77	"pressed": false
		78	},
		79	"bindings": {
		80	"pressed": {"<->": "@owner.stage.timelinePlay"}
67	}	81	}
68	},	82	},
69		83
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
190	<div data-montage-id="leftpane_inside" class="leftinside">	204	<div data-montage-id="leftpane_inside" class="leftinside">
191	<div data-montage-id="timeline_controller" class="timelinecontroller">	205	<div data-montage-id="timeline_controller" class="timelinecontroller">
192	<div data-montage-id="timeline_controls" class="timelinecontrols">	206	<div data-montage-id="timeline_controls" class="timelinecontrols">
193	<div data-montage-id="play_button" class="playbutton"></div>	207	<button data-montage-id="play_button" class="playbutton"></button>
194	<div data-montage-id="time_text" class="timetext">00:00:00</div>	208	<div data-montage-id="time_text" class="timetext">00:00:00</div>
195	</div>	209	</div>
196	</div>	210	</div>
@@ -217,7 +231,9 @@ POSSIBILITY OF SUCH DAMAGE.
217	</div>	231	</div>
218		232
219	<div data-montage-id="timeline_gutter" class="timelinegutter">	233	<div data-montage-id="timeline_gutter" class="timelinegutter">
		234	<div class="sliderClass">
220	<div data-montage-id="tl_slider" class="tl_slider"></div>	235	<div data-montage-id="tl_slider" class="tl_slider"></div>
		236	</div>
221	<input data-montage-id="end_hottext" class="endhottext">	237	<input data-montage-id="end_hottext" class="endhottext">
222	</div>	238	</div>
223	</div>	239	</div>


diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e03b35..7581d15a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -30,109 +30,265 @@ POSSIBILITY OF SUCH DAMAGE.
30	</copyright> */	30	</copyright> */
31		31
32	var Montage = require("montage/core/core").Montage,	32	var Montage = require("montage/core/core").Montage,
33	Component = require("montage/ui/component").Component,	33	Component = require("montage/ui/component").Component,
34	nj = require("js/lib/NJUtils").NJUtils,	34	nj = require("js/lib/NJUtils").NJUtils,
35	EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;	35	EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
36		36
37	var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {	37	var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
38		38
		39	_stage: {
		40	value: null
		41	},
		42
		43	stage: {
		44	get: function() {
		45	return this._stage;
		46	},
		47	set: function(value) {
		48	if(value) {
		49	this._stage = value;
		50	}
		51	}
		52	},
		53
		54	/* === BEGIN: Models === */
		55	_user_layers: {
		56	value: null
		57	},
39	user_layers: {	58	user_layers: {
40	value: null,	59	serializable: true,
41	serializable: true	60	get: function() {
		61	return this._user_layers;
		62	},
		63	set: function(newVal) {
		64	this._user_layers = newVal;
		65	}
42	},	66	},
43		67
		68	_track_container: {
		69	value: null
		70	},
44	track_container: {	71	track_container: {
45	value: null,	72	serializable: true,
46	serializable: true	73	get: function() {
		74	return this._track_container;
		75	},
		76	set: function(newVal) {
		77	this._track_container = newVal;
		78	}
47	},	79	},
48		80
		81	_timeline_leftpane: {
		82	value: null
		83	},
49	timeline_leftpane: {	84	timeline_leftpane: {
50	value: null,	85	serializable: true,
51	serializable: true	86	get: function() {
		87	return this._timeline_leftpane;
		88	},
		89	set: function(newVal) {
		90	this._timeline_leftpane = newVal;
		91	}
52	},	92	},
53		93
		94	_layer_tracks: {
		95	value: null
		96	},
54	layer_tracks: {	97	layer_tracks: {
55	value: null,	98	serializable: true,
56	serializable: true	99	get: function() {
		100	return this._layer_tracks;
		101	},
		102	set: function(newVal) {
		103	this._layer_tracks = newVal;
		104	}
57	},	105	},
58		106
		107	_master_track: {
		108	value: null
		109	},
59	master_track: {	110	master_track: {
60	value: null,	111	serializable: true,
61	serializable: true	112	get: function() {
		113	return this._master_track;
		114	},
		115	set: function(newVal) {
		116	this._master_track = newVal;
		117	}
62	},	118	},
63		119
		120	_time_markers: {
		121	value: null
		122	},
64	time_markers: {	123	time_markers: {
65	value: null,	124	serializable: true,
66	serializable: true	125	get: function() {
		126	return this._time_markers;
		127	},
		128	set: function(newVal) {
		129	this._time_markers = newVal;
		130	}
67	},	131	},
68		132
		133	_playhead: {
		134	value: null
		135	},
69	playhead: {	136	playhead: {
70	value: null,	137	serializable: true,
71	serializable: true	138	get: function() {
		139	return this._playhead;
		140	},