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 +++++++++++++++++++-- js/panels/Timeline/Span.reel/Span.js | 19 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 4 +- 3 files changed, 150 insertions(+), 14 deletions(-) (limited to '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 */ + }); diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bb8fdf03..44316469 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -150,31 +150,42 @@ var Span = exports.Span = Montage.create(Component, { 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; + console.log(event); + this.application.ninja.timeline.easingMenu.top = 100; + this.application.ninja.timeline.easingMenu.left = 100; this.application.ninja.timeline.easingMenu.show(); - + this.application.ninja.timeline.easingMenu.callingComponent = this; } }, handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); + + console.log("span.handleEasingChoicesClick") // Remove the pointer to ourselves - this.application.ninja.timeline.currentOpenSpanMenu = false; + //this.application.ninja.timeline.currentOpenSpanMenu = false; // Un-highlight the old choice and highlight the new choice - this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); + this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); event.target.classList.add("easing-selected"); // Set the easing this.easing = event.target.dataset.ninjaEase; + // Unbind the event handler + this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); + // Hide the menu. this.hideEasingMenu(); } }, hideEasingMenu: { value: function() { - this.areChoicesVisible = false; + //this.areChoicesVisible = false; + this.application.ninja.timeline.easingMenu.hide(); } } }); diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a8a4d4a8..666b2816 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -494,8 +494,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { boundObjectPropertyPath:"currentSelectedContainer", oneway:true }); + + // Create the easing menu for future use. this.easingMenu = EasingMenuPopup; - this.easingMenu.show(); + //this.easingMenu.show(); } }, -- cgit v1.2.3