From f97e4b6ab1db9fb7de18b2e44c1b0edcf2ba072d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 12 Jun 2012 16:47:15 -0700 Subject: Timeline: New popup menu for easing choices. --- js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 38 ++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 js/panels/Timeline/EasingMenu.reel/EasingMenu.js (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js') diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..b736ea59 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -0,0 +1,38 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +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 + }, + + draw: { + value: function() { + console.log("EasingMenu.draw") + } + }, + + show: { + value: function() { + var popup, easingMenu; + popup = Popup.create(); + this._popup = popup; + + popup.modal = false; + + easingMenu = EasingMenu.create(); + popup.content = easingMenu; + + popup.show(); + } + } + +}); -- cgit v1.2.3 From 80d1074a5e4a10da8d36c14b8d4f4e9fae47a5ec Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 13 Jun 2012 16:00:32 -0700 Subject: Timeline: More work on new easing menu. --- js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 141 +++++++++++++++++++++-- 1 file changed, 132 insertions(+), 9 deletions(-) (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js') diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index b736ea59..006efd69 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -13,26 +13,149 @@ 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; + } + }, + + /* End: Models */ + + /* Begin: Draw Cycle */ + willDraw: { + value: function() { + this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); + } + }, draw: { value: function() { - console.log("EasingMenu.draw") + // 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() { - var popup, easingMenu; - popup = Popup.create(); - this._popup = popup; + // 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(); - popup.modal = false; - easingMenu = EasingMenu.create(); - popup.content = easingMenu; - - popup.show(); + + + + // 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(); + } } + /* End: Controllers */ + }); -- cgit v1.2.3 From 53bb51a38edc6fe7cc80c43d34027590a22a1d32 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 14 Jun 2012 14:29:37 -0700 Subject: Timeline: New easing menu. --- js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js') diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index 006efd69..f0547e31 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -92,12 +92,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { } }, + _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); } }, @@ -131,11 +136,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { 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; } @@ -152,9 +154,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { this.callingComponent.easing = event.target.dataset.ninjaEase; // Hide the menu. - this.popup.hide(); + this.popup.hide(); + this._isShow = false; } - } + }, + handleDocumentScroll: { + value: function(event) { + if (this._isShow = true) { + this.popup.hide(); + } + } + } /* End: Controllers */ -- cgit v1.2.3 From 730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:12:49 -0700 Subject: Timeline: Bug Fixes - Splitting tweens now works again for shift-click interaction - Fixed visual "jump" in keyframes and spans when splitting tweens - Set default easing to "none" to match CSS standard. --- js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/EasingMenu.reel/EasingMenu.js') diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index f0547e31..ced3ae6a 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { // currentChoice: The data attribute of the current choice _currentChoice: { - value: null + value: "none" }, currentChoice: { get: function() { @@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { 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"); + var easingSelected = this.element.querySelector(".easing-selected"); + if (easingSelected !== null) { + easingSelected.classList.remove("easing-selected"); + } + var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]'); + if (dataEl !== null) { + dataEl.classList.add("easing-selected"); + } } }, didDraw: { @@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { event.stopPropagation(); // Un-highlight the old choice and highlight the new choice - this.element.querySelector(".easing-selected").classList.remove("easing-selected"); + var easingSelected = this.element.querySelector(".easing-selected"); + if (easingSelected !== null) { + easingSelected.classList.remove("easing-selected"); + } event.target.classList.add("easing-selected"); // Set the easing in the span that called us -- cgit v1.2.3