5 files changed, 309 insertions, 15 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..6e643daa 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,9 @@
                        "owner": {
                            "prototype": "js/panels/Timeline/Span.reel",
                            "properties": {
-                                "element": {"#": "spanspace"}
+                                "element": {"#": "spanspace"},
+                                "container_easing" : {"#" : "container_easing"},
+                                "easing_choice" : {"#": "easing_choice"}
                            }
                        }
@@ -23,6 +25,12 @@
        <body>
        <div data-montage-id="spanspace" class="tween_span">
+                <div class="tween_span_bar"></div>
+                <div data-montage-id="container_easing" class="container-easing-choice">
+                        <div data-montage-id="easing_choice" class="easing-choice">
+                                ease-out
+                        </div>
+                </div>
        </div>
    </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..91ce1cfb 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-var Montage = require("montage/core/core").Montage;
+var Montage = require("montage/core/core").Montage,
-var Component = require("montage/ui/component").Component;
+        Component = require("montage/ui/component").Component;
 var Span = exports.Span = Montage.create(Component, {
@@ -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,181 @@ 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;
+                }
+        }
+    },
+    
+    _easing: {
+        value: "none"
+    },
+    easing: {
+        get: function() {
+                return this._easing;
+        },
+        set: function(newVal) {
+                if (newVal !== this._easing) {
+                        if (typeof(newVal) === "undefined") {
+                                newVal = "none";
+                        }
+                        this._easing = newVal;
+                        this.parentComponent.setKeyframeEase(newVal);
+                        this.needsDraw = true;
+                }
+        }
+    },
+        
+        // BEGIN: draw cycle
+        prepareForDraw: {
+                value: function() {
+                        this.init();
+                }
+        },
+        
    draw:{
        value: function(){
            this.element.style.width = this.spanWidth + "px";
+            if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
+                var containerWidth = this.spanWidth -18,
+                        choiceWidth;
+                if (containerWidth < 0) {
+                        containerWidth = 0;
+                }
+                choiceWidth = containerWidth -3;
+                if (choiceWidth < 0) {
+                        choiceWidth = 0;
+                }
+                this.container_easing.style.width = containerWidth + "px";
+                this.easing_choice.style.width = choiceWidth + "px";
+                this.easing_choice.style.overflow = "hidden";
+            }
+                        if (this.spanWidth > 70) {
+                this.container_easing.setAttribute("style", "");
+                this.easing_choice.setAttribute("style", "");
+            }
+            
+            // 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";
+            }
+            */
+            
+            // Change easing?
+            if (this.easing_choice.innerText !== this.easing) {
+                this.easing_choice.innerText = this.easing;
+            }
+            
        }
    },
+        // 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) {
+                event.stopPropagation();
+                //this.areChoicesVisible = true;
+                this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
+                this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
+                function findPos(obj) {
+                        var objReturn = {};
+                        objReturn.top = 0;
+                        objReturn.left = 0;
+                                if (obj.offsetParent) {
+                                        do {
+                                                objReturn.left += obj.offsetLeft;
+                                                objReturn.top += obj.offsetTop;
+        
+                                        } while (obj = obj.offsetParent);
+                                }
+                                return objReturn;
+                        }
+                        var objPos = findPos(event.target);
+                this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
+                this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
+                this.application.ninja.timeline.easingMenu.show();
+                this.application.ninja.timeline.easingMenu.callingComponent = this;
+        }
+    },
+    handleEasingChoicesClick: {
+        value: function(event) {
+                event.stopPropagation();

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index 8baa141a..6e643daa 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,9 @@
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"}
17	}	19	}
18	}	20	}
19		21
@@ -23,6 +25,12 @@
23	<body>	25	<body>
24		26
25	<div data-montage-id="spanspace" class="tween_span">	27	<div data-montage-id="spanspace" class="tween_span">
		28	<div class="tween_span_bar"></div>
		29	<div data-montage-id="container_easing" class="container-easing-choice">
		30	<div data-montage-id="easing_choice" class="easing-choice">
		31	ease-out
		32	</div>
		33	</div>
26	</div>	34	</div>
27		35
28	</body>	36	</body>


diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bfa6aab8..91ce1cfb 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
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	Component = require("montage/ui/component").Component;
9		9
10	var Span = exports.Span = Montage.create(Component, {	10	var Span = exports.Span = Montage.create(Component, {
11		11
@@ -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,181 @@ 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	_easing: {
		62	value: "none"
		63	},
		64	easing: {
		65	get: function() {
		66	return this._easing;
		67	},
		68	set: function(newVal) {
		69	if (newVal !== this._easing) {
		70	if (typeof(newVal) === "undefined") {
		71	newVal = "none";
		72	}
		73	this._easing = newVal;
		74	this.parentComponent.setKeyframeEase(newVal);
		75	this.needsDraw = true;
		76	}
		77	}
		78	},
		79
		80	// BEGIN: draw cycle
		81	prepareForDraw: {
		82	value: function() {
		83	this.init();
		84	}
		85	},
		86
31	draw:{	87	draw:{
32	value: function(){	88	value: function(){
33	this.element.style.width = this.spanWidth + "px";	89	this.element.style.width = this.spanWidth + "px";
		90
		91	if ((this.spanWidth <= 70) && (this.spanWidth >0)) {
		92	var containerWidth = this.spanWidth -18,
		93	choiceWidth;
		94	if (containerWidth < 0) {
		95	containerWidth = 0;
		96	}
		97	choiceWidth = containerWidth -3;
		98	if (choiceWidth < 0) {
		99	choiceWidth = 0;
		100	}
		101	this.container_easing.style.width = containerWidth + "px";
		102	this.easing_choice.style.width = choiceWidth + "px";
		103	this.easing_choice.style.overflow = "hidden";
		104	}
		105	if (this.spanWidth > 70) {
		106	this.container_easing.setAttribute("style", "");
		107	this.easing_choice.setAttribute("style", "");
		108	}
		109
		110	// Highlight the span?
		111	if (this.isHighlighted === true) {
		112	this.element.classList.add("spanHighlight");
		113	} else {
		114	this.element.classList.remove("spanHighlight");
		115	}
		116
		117	/*
		118	// Hide or show the choices menu?
		119	if (this.areChoicesVisible === true) {
		120	this.easing_choices.style.display = "block";
		121	} else {
		122	this.easing_choices.style.display = "none";
		123	}
		124	*/
		125
		126	// Change easing?
		127	if (this.easing_choice.innerText !== this.easing) {
		128	this.easing_choice.innerText = this.easing;
		129	}
		130
34	}	131	}
35	},	132	},
36		133
		134	// BEGIN: Controllers
		135	init: {
		136	value: function() {
		137	this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
		138	//this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
		139
		140	}
		141	},
		142
37	highlightSpan:{	143	highlightSpan:{
38	value: function(){	144	value: function(){
39	this.element.classList.add("spanHighlight");	145	// Class add/remove should only be done in draw cycle.
		146	// this.element.classList.add("spanHighlight");
		147	this.isHighlighted = true;
40	}	148	}
		149	},
		150
		151	handleEasingChoiceClick: {
		152	value: function(event) {
		153	event.stopPropagation();
		154	//this.areChoicesVisible = true;
		155	this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
		156	this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
		157
		158	function findPos(obj) {
		159	var objReturn = {};
		160	objReturn.top = 0;
		161	objReturn.left = 0;
		162
		163	if (obj.offsetParent) {
		164
		165	do {
		166	objReturn.left += obj.offsetLeft;
		167	objReturn.top += obj.offsetTop;
		168
		169	} while (obj = obj.offsetParent);
		170	}
		171	return objReturn;
		172	}
		173	var objPos = findPos(event.target);
		174	this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
		175	this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
		176	this.application.ninja.timeline.easingMenu.show();
		177	this.application.ninja.timeline.easingMenu.callingComponent = this;
		178	}
		179	},
		180	handleEasingChoicesClick: {
		181	value: function(event) {
		182	event.stopPropagation();