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/Span.reel/Span.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) (limited to 'js/panels/Timeline/Span.reel/Span.js') diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 8d4c25ae..bb8fdf03 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. */ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; var Span = exports.Span = Montage.create(Component, { @@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, { 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) { @@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, { init: { value: function() { this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); - this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); + //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); } }, @@ -147,15 +149,9 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoiceClick: { value: function(event) { event.stopPropagation(); - this.areChoicesVisible = true; - - // Possibly another menu is already open. If so, we need to close it. - if (this.application.ninja.timeline.currentOpenSpanMenu !== false) { - this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu(); - } - - // Now store a pointer to ourselves for possible future use. - this.application.ninja.timeline.currentOpenSpanMenu = this; + //this.areChoicesVisible = true; + this.application.ninja.timeline.easingMenu.show(); + } }, handleEasingChoicesClick: { -- 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/Span.reel/Span.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Span.reel/Span.js') 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(); } } }); -- 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/Span.reel/Span.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/Span.reel/Span.js') diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 44316469..7347ef51 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -152,9 +152,25 @@ var Span = exports.Span = Montage.create(Component, { //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; + + 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; } @@ -162,8 +178,6 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); - - console.log("span.handleEasingChoicesClick") // Remove the pointer to ourselves //this.application.ninja.timeline.currentOpenSpanMenu = false; -- cgit v1.2.3