Merge branch 'new-easing-menu' into timeline-local

author: Jon Reid 2012-06-14 14:30:16 -0700
committer: Jon Reid 2012-06-14 14:30:16 -0700
commit: 0bb16b6a7aa392b9e26eb9787542da9a274c4960 (patch)
tree: 72cf5f580f32c5f21f573c7812a3a387917ab01e /js
parent: 0d080d97141cd08855e14a63fa3fee062663cd7d (diff)
parent: 53bb51a38edc6fe7cc80c43d34027590a22a1d32 (diff)
download: ninja-0bb16b6a7aa392b9e26eb9787542da9a274c4960.tar.gz
11 files changed, 481 insertions, 143 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
new file mode 100644
index 00000000..82218b45
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/EasingMenu.css">
+                <script type="text/montage-serialization">
+            {
+                "owner": {
+                    "prototype": "js/panels/Timeline/EasingMenu.reel",
+                    "properties": {
+                        "element": {"#": "container-easing-menu"}
+                        
+                    }
+                                }
+            }
+        </script>
+        </head>
+        <body>
+                <div data-montage-id="container-easing-menu" class="container-easing-choices">
+                        <ul data-montage-id="easing_choices" class="easing-choices">
+                                <li data-ninja-ease="ease">ease</li>
+                                <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
+                                <li data-ninja-ease="ease-in">ease-in</li>
+                                <li data-ninja-ease="ease-in-out">ease-in-out</li>
+                                <li data-ninja-ease="linear">linear</li>
+                        </ul>
+                </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
new file mode 100644
index 00000000..f0547e31
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -0,0 +1,171 @@
+/* <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> */
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component,
+        Popup = require("montage/ui/popup/popup.reel").Popup;
+var EasingMenu = exports.EasingMenu = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+        /* Begin: Models */
+        
+        // popup: the initialized component.
+    _popup: {
+                value: null
+    },
+    popup: {
+        get: function() {
+                return this._popup;
+        },
+        set: function(newVal) {
+                this._popup = newVal
+        }
+    },
+    
+    // callingComponent: pointer to the span that called for the menu
+    _callingComponent: {
+        value: null
+    },
+    callingComponent: {
+        get: function() {
+                return this._callingComponent;
+        },
+        set: function(newVal) {
+                this._callingComponent = newVal;
+        }
+    },
+    
+    // anchor: pointer to the anchoring element
+    _anchor: {
+        value: null
+    },
+    anchor: {
+        get: function() {
+                return this._anchor;
+        },
+        set: function(newVal) {
+                this._anchor = newVal;
+        }
+    },
+    
+    
+    _top: {
+        value: null
+    },
+    top: {
+        get: function() {
+                return this._top;
+        },
+        set: function(newVal) {
+                this._top = newVal;
+        }
+    },
+    _left: {
+        value: null
+    },
+    left: {
+        get: function() {
+                return this._left;
+        },
+        set: function(newVal) {
+                this._left = newVal;
+        }
+    },
+    
+    // currentChoice: The data attribute of the current choice
+    _currentChoice: {
+        value: null
+    },
+    currentChoice: {
+        get: function() {
+                return this._currentChoice;
+        },
+        set: function(newVal) {
+                this._currentChoice = newVal;
+        }
+    },
+    
+    _isShown: {
+        value: false
+    },
+    
+    /* End: Models */
+    
+    /* Begin: Draw Cycle */
+    willDraw: {
+        value: function() {
+                this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
+        }
+    },
+    
+    draw: {
+        value: function() {
+                // Update the selection classes.
+            this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+            this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+        }
+    },
+    didDraw: {
+        value: function() {
+        }
+    },
+        /* End Draw Cycle */
+    
+    /* Begin: Controllers */
+        show: {
+                value: function() {
+                        // Initialize the popup if it hasn't already been done
+            if (this.popup == null) {
+                this.popup = Popup.create();
+                    this.popup.modal = false;
+                    this.popup.content = EasingMenu.create();
+            }
+            
+            // Show the popup
+            this.popup.anchor = this.anchor;
+            var position = {};
+            position.top = this.top;
+            position.left = this.left;
+            this.popup.position = position;
+            this.popup.show();
+            this._isShow = true;
+            // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
+            this.popup.content.needsDraw = true;
+                }
+        },
+        handleEasingChoicesClick: {
+        value: function(event) {
+                event.stopPropagation();
+                        // Un-highlight the old choice and highlight the new choice
+                this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+                event.target.classList.add("easing-selected");
+                
+                // Set the easing in the span that called us
+                this.callingComponent.easing = event.target.dataset.ninjaEase;
+                
+                // Hide the menu.
+                this.popup.hide();
+                this._isShow = false;
+        }
+   },
+        handleDocumentScroll: {
+                value: function(event) {
+                        if (this._isShow = true) {
+                                this.popup.hide();
+                        }
+                }
+        }
+    
+    /* End: Controllers */
author	Jon Reid	2012-06-14 14:30:16 -0700
committer	Jon Reid	2012-06-14 14:30:16 -0700
commit	0bb16b6a7aa392b9e26eb9787542da9a274c4960 (patch)
tree	72cf5f580f32c5f21f573c7812a3a387917ab01e /js
parent	0d080d97141cd08855e14a63fa3fee062663cd7d (diff)
parent	53bb51a38edc6fe7cc80c43d34027590a22a1d32 (diff)
download	ninja-0bb16b6a7aa392b9e26eb9787542da9a274c4960.tar.gz

diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html new file mode 100644 index 00000000..82218b45 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -0,0 +1,34 @@
	1	<!DOCTYPE html>
	2	<!-- <copyright>
	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/>
	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	6	</copyright> -->
	7	<html lang="en">
	8	<head>
	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	10	<link rel="stylesheet" type="text/css" href="css/EasingMenu.css">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"prototype": "js/panels/Timeline/EasingMenu.reel",
	15	"properties": {
	16	"element": {"#": "container-easing-menu"}
	17
	18	}
	19	}
	20	}
	21	</script>
	22	</head>
	23	<body>
	24	<div data-montage-id="container-easing-menu" class="container-easing-choices">
	25	<ul data-montage-id="easing_choices" class="easing-choices">
	26	<li data-ninja-ease="ease">ease</li>
	27	<li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
	28	<li data-ninja-ease="ease-in">ease-in</li>
	29	<li data-ninja-ease="ease-in-out">ease-in-out</li>
	30	<li data-ninja-ease="linear">linear</li>
	31	</ul>
	32	</div>
	33	</body>
	34	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..f0547e31 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -0,0 +1,171 @@
	1	/* <copyright>
	2	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	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	var Montage = require("montage/core/core").Montage,
	8	Component = require("montage/ui/component").Component,
	9	Popup = require("montage/ui/popup/popup.reel").Popup;
	10
	11	var EasingMenu = exports.EasingMenu = Montage.create(Component, {
	12
	13	hasTemplate:{
	14	value: true
	15	},
	16
	17	/* Begin: Models */
	18
	19	// popup: the initialized component.
	20	_popup: {
	21	value: null
	22	},
	23	popup: {
	24	get: function() {
	25	return this._popup;
	26	},
	27	set: function(newVal) {
	28	this._popup = newVal
	29	}
	30	},
	31
	32	// callingComponent: pointer to the span that called for the menu
	33	_callingComponent: {
	34	value: null
	35	},
	36	callingComponent: {
	37	get: function() {
	38	return this._callingComponent;
	39	},
	40	set: function(newVal) {
	41	this._callingComponent = newVal;
	42	}
	43	},
	44
	45	// anchor: pointer to the anchoring element
	46	_anchor: {
	47	value: null
	48	},
	49	anchor: {
	50	get: function() {
	51	return this._anchor;
	52	},
	53	set: function(newVal) {
	54	this._anchor = newVal;
	55	}
	56	},
	57
	58
	59	_top: {
	60	value: null
	61	},
	62	top: {
	63	get: function() {
	64	return this._top;
	65	},
	66	set: function(newVal) {
	67	this._top = newVal;
	68	}
	69	},
	70	_left: {
	71	value: null
	72	},
	73	left: {
	74	get: function() {
	75	return this._left;
	76	},
	77	set: function(newVal) {
	78	this._left = newVal;
	79	}
	80	},
	81
	82	// currentChoice: The data attribute of the current choice
	83	_currentChoice: {
	84	value: null
	85	},
	86	currentChoice: {
	87	get: function() {
	88	return this._currentChoice;
	89	},
	90	set: function(newVal) {
	91	this._currentChoice = newVal;
	92	}
	93	},
	94
	95	_isShown: {
	96	value: false
	97	},
	98
	99	/* End: Models */
	100
	101	/* Begin: Draw Cycle */
	102	willDraw: {
	103	value: function() {
	104	this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
	105	document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
	106	}
	107	},
	108
	109	draw: {
	110	value: function() {
	111	// Update the selection classes.
	112	this.element.querySelector(".easing-selected").classList.remove("easing-selected");
	113	this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
	114	}
	115	},
	116	didDraw: {
	117	value: function() {
	118	}
	119	},
	120	/* End Draw Cycle */
	121
	122	/* Begin: Controllers */
	123	show: {
	124	value: function() {
	125	// Initialize the popup if it hasn't already been done
	126	if (this.popup == null) {
	127	this.popup = Popup.create();
	128	this.popup.modal = false;
	129	this.popup.content = EasingMenu.create();
	130	}
	131
	132	// Show the popup
	133	this.popup.anchor = this.anchor;
	134	var position = {};
	135	position.top = this.top;
	136	position.left = this.left;
	137	this.popup.position = position;
	138	this.popup.show();
	139	this._isShow = true;
	140
	141	// Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
	142	this.popup.content.needsDraw = true;
	143	}
	144	},
	145	handleEasingChoicesClick: {
	146	value: function(event) {
	147	event.stopPropagation();
	148
	149	// Un-highlight the old choice and highlight the new choice
	150	this.element.querySelector(".easing-selected").classList.remove("easing-selected");
	151	event.target.classList.add("easing-selected");
	152
	153	// Set the easing in the span that called us
	154	this.callingComponent.easing = event.target.dataset.ninjaEase;
	155
	156	// Hide the menu.
	157	this.popup.hide();
	158	this._isShow = false;
	159	}
	160	},
	161	handleDocumentScroll: {
	162	value: function(event) {
	163	if (this._isShow = true) {
	164	this.popup.hide();
	165	}
	166	}
	167	}
	168
	169	/* End: Controllers */