7 files changed, 270 insertions, 15 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..d6c359ad 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,10 @@
                        "owner": {
                            "prototype": "js/panels/Timeline/Span.reel",
                            "properties": {
-                                "element": {"#": "spanspace"}
+                                "element": {"#": "spanspace"},
+                                "container_easing" : {"#" : "container_easing"},
+                                "easing_choice" : {"#": "easing_choice"},
+                                "easing_choices" : {"#" : "easing_choices"}
                            }
                        }
@@ -23,6 +26,18 @@
        <body>
        <div data-montage-id="spanspace" class="tween_span">
+                <div class="tween_span_bar"></div>
+                <div data-montage-id="container_easing" class="container-easing">
+                        <div data-montage-id="easing_choice" class="easing-choice">
+                                ease-in-out
+                        </div>
+                        <ul data-montage-id="easing_choices" class="easing-choices">
+                                <li>choice 1</li>
+                                <li>choice 2</li>
+                                <li>choice 3</li>
+                                <li>choice 4</li>
+                        </ul>
+                </div>
        </div>
    </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
        value: true
    },
+        // BEGIN: Models
    _spanWidth:{
        value:0
    },
    spanWidth:{
        serializable:true,
        get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
            this.needsDraw = true;
        }
    },
+    
+    _isHighlighted: {
+        value: false
+    },
+    isHighlighted: {
+        get: function() {
+                return this._isHighlighted;
+        },
+        set: function(newVal) {
+                if (newVal !== this._isHighlighted) {
+                        this._isHighlighted = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
+    
+    _areChoicesVisible: {
+        value: false
+    },
+    areChoicesVisible: {
+        get: function() {
+                return this._areChoicesVisible;
+        },
+        set: function(newVal) {
+                if (newVal !== this._areChoicesVisible) {
+                        this._areChoicesVisible = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
+        
+        // BEGIN: draw cycle
+        prepareForDraw: {
+                value: function() {
+                        this.init();
+                }
+        },
+        
    draw:{
        value: function(){
            this.element.style.width = this.spanWidth + "px";
+            
+            // Highlight the span?
+            if (this.isHighlighted === true) {
+                this.element.classList.add("spanHighlight");
+            } else {
+                this.element.classList.remove("spanHighlight");
+            }
+            
+            // Hide or show the choices menu?
+            if (this.areChoicesVisible === true) {
+                this.easing_choices.style.display = "block";
+            } else {
+                this.easing_choices.style.display = "none";
+            }
        }
    },
+        // BEGIN: Controllers
+        init: {
+                value: function() {
+                        this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
+                        this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                }
+        },
+        
    highlightSpan:{
        value: function(){
-            this.element.classList.add("spanHighlight");
+                // Class add/remove should only be done in draw cycle.
+            // this.element.classList.add("spanHighlight");
+            this.isHighlighted = true;
        }
+    },
+    
+    handleEasingChoiceClick: {
+        value: function(event) {
+                this.areChoicesVisible = true;
+        }
+    },
+    handleEasingChoicesClick: {
+        value: function(event) {
+                this.areChoicesVisible = false;
+        }
    }
 });
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 198d71f3..16f931b2 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -1,17 +1,89 @@
+@charset "UTF-8";
 /* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+/* Span.scss
+ * Main SCSS file for Span component, compiled by SASS into the file css/Span.css.
+ */
+/* line 22, ../scss/Span.scss */
+.tween_span {
+  position: absolute;
+  height: 16px;
+}
+/* line 26, ../scss/Span.scss */
+.tween_span .tween_span_bar {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  opacity: 0.15;
+}
+/* line 33, ../scss/Span.scss */
+.tween_span.spanHighlight .tween_span_bar {
+  background-color: #a0c8ff;
+  opacity: 0.4;
+}
+/*
+ * Easing picker
+ */
+/* line 42, ../scss/Span.scss */
+.container-easing {
+  position: absolute;
+  top: 2px;
+  right: 6px;
+  font-size: 10px;
+  line-height: 8px;
+  border: 1px solid black;
+  color: white;
+  background-color: #474747;
+}
-.tween_span{
+/* line 54, ../scss/Span.scss */
-    position: absolute;
+.container-easing,
-    height: 16px;
+.container-easing .easing-choice,
-    opacity: 0.15;
+.container-easing .easing-choices {
-    background-color: white;
+  width: 70px;
 }
-.tween_span.spanHighlight{
+/* line 58, ../scss/Span.scss */
-    background-color: #a0c8ff;
+.container-easing,
-    opacity: 0.4;
+.container-easing .easing-choice {
-}
-\ No newline at end of file
+  height: 10px;
+}
+/* line 61, ../scss/Span.scss */
+.container-easing .easing-choice {
+  position: absolute;
+  top: 0px;

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index 8baa141a..d6c359ad 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,10 @@
13	"owner": {	13	"owner": {
14	"prototype": "js/panels/Timeline/Span.reel",	14	"prototype": "js/panels/Timeline/Span.reel",
15	"properties": {	15	"properties": {
16	"element": {"#": "spanspace"}	16	"element": {"#": "spanspace"},
		17	"container_easing" : {"#" : "container_easing"},
		18	"easing_choice" : {"#": "easing_choice"},
		19	"easing_choices" : {"#" : "easing_choices"}
17	}	20	}
18	}	21	}
19		22
@@ -23,6 +26,18 @@
23	<body>	26	<body>
24		27
25	<div data-montage-id="spanspace" class="tween_span">	28	<div data-montage-id="spanspace" class="tween_span">
		29	<div class="tween_span_bar"></div>
		30	<div data-montage-id="container_easing" class="container-easing">
		31	<div data-montage-id="easing_choice" class="easing-choice">
		32	ease-in-out
		33	</div>
		34	<ul data-montage-id="easing_choices" class="easing-choices">
		35	<li>choice 1</li>
		36	<li>choice 2</li>
		37	<li>choice 3</li>
		38	<li>choice 4</li>
		39	</ul>
		40	</div>
26	</div>	41	</div>
27		42
28	</body>	43	</body>


diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bfa6aab8..e5894500 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
13	value: true	13	value: true
14	},	14	},
15		15
		16	// BEGIN: Models
16	_spanWidth:{	17	_spanWidth:{
17	value:0	18	value:0
18	},	19	},
19
20	spanWidth:{	20	spanWidth:{
21	serializable:true,	21	serializable:true,
22	get:function () {	22	get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
27	this.needsDraw = true;	27	this.needsDraw = true;
28	}	28	}
29	},	29	},
30		30
		31	_isHighlighted: {
		32	value: false
		33	},
		34	isHighlighted: {
		35	get: function() {
		36	return this._isHighlighted;
		37	},
		38	set: function(newVal) {
		39	if (newVal !== this._isHighlighted) {
		40	this._isHighlighted = newVal;
		41	this.needsDraw = true;
		42	}
		43	}
		44	},
		45
		46	_areChoicesVisible: {
		47	value: false
		48	},
		49	areChoicesVisible: {
		50	get: function() {
		51	return this._areChoicesVisible;
		52	},
		53	set: function(newVal) {
		54	if (newVal !== this._areChoicesVisible) {
		55	this._areChoicesVisible = newVal;
		56	this.needsDraw = true;
		57	}
		58	}
		59	},
		60
		61	// BEGIN: draw cycle
		62	prepareForDraw: {
		63	value: function() {
		64	this.init();
		65	}
		66	},
		67
31	draw:{	68	draw:{
32	value: function(){	69	value: function(){
33	this.element.style.width = this.spanWidth + "px";	70	this.element.style.width = this.spanWidth + "px";
		71
		72	// Highlight the span?
		73	if (this.isHighlighted === true) {
		74	this.element.classList.add("spanHighlight");
		75	} else {
		76	this.element.classList.remove("spanHighlight");
		77	}
		78
		79	// Hide or show the choices menu?
		80	if (this.areChoicesVisible === true) {
		81	this.easing_choices.style.display = "block";
		82	} else {
		83	this.easing_choices.style.display = "none";
		84	}
34	}	85	}
35	},	86	},
36		87
		88	// BEGIN: Controllers
		89	init: {
		90	value: function() {
		91	this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
		92	this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
		93	}
		94	},
		95
37	highlightSpan:{	96	highlightSpan:{
38	value: function(){	97	value: function(){
39	this.element.classList.add("spanHighlight");	98	// Class add/remove should only be done in draw cycle.
		99	// this.element.classList.add("spanHighlight");
		100	this.isHighlighted = true;
40	}	101	}
		102	},
		103
		104	handleEasingChoiceClick: {
		105	value: function(event) {
		106	this.areChoicesVisible = true;
		107	}
		108	},
		109	handleEasingChoicesClick: {
		110	value: function(event) {
		111	this.areChoicesVisible = false;
		112	}
41	}	113	}
42	});	114	});


diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 198d71f3..16f931b2 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -1,17 +1,89 @@
		1	@charset "UTF-8";
1	/* <copyright>	2	/* <copyright>
2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3	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/>
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	6	</copyright> */
		7	/* Span.scss
		8	* Main SCSS file for Span component, compiled by SASS into the file css/Span.css.
		9	*/
		10	/* line 22, ../scss/Span.scss */
		11	.tween_span {
		12	position: absolute;
		13	height: 16px;
		14	}
		15
		16	/* line 26, ../scss/Span.scss */
		17	.tween_span .tween_span_bar {
		18	width: 100%;
		19	height: 100%;
		20	background-color: #fff;
		21	opacity: 0.15;
		22	}
		23
		24	/* line 33, ../scss/Span.scss */
		25	.tween_span.spanHighlight .tween_span_bar {
		26	background-color: #a0c8ff;
		27	opacity: 0.4;
		28	}
		29
		30	/*
		31	* Easing picker
		32	*/
		33	/* line 42, ../scss/Span.scss */
		34	.container-easing {
		35	position: absolute;
		36	top: 2px;
		37	right: 6px;
		38	font-size: 10px;
		39	line-height: 8px;
		40	border: 1px solid black;
		41	color: white;
		42	background-color: #474747;
		43	}
6		44
7	.tween_span{	45	/* line 54, ../scss/Span.scss */
8	position: absolute;	46	.container-easing,
9	height: 16px;	47	.container-easing .easing-choice,
10	opacity: 0.15;	48	.container-easing .easing-choices {
11	background-color: white;	49	width: 70px;
12	}	50	}
13		51
14	.tween_span.spanHighlight{	52	/* line 58, ../scss/Span.scss */
15	background-color: #a0c8ff;	53	.container-easing,
16	opacity: 0.4;	54	.container-easing .easing-choice {
17	} \ No newline at end of file	55	height: 10px;
		56	}
		57
		58	/* line 61, ../scss/Span.scss */
		59	.container-easing .easing-choice {
		60	position: absolute;
		61	top: 0px;