From d3f67c2e306cb1888099f4decba00a9d8727cc43 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 22 May 2012 18:23:36 -0700 Subject: Timeline: New easing selector in spans. --- js/panels/Timeline/Span.reel/Span.js | 78 ++++++++++++++++++++++++++++++++++-- 1 file changed, 75 insertions(+), 3 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 bfa6aab8..e5894500 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -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,88 @@ 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; + } + } + }, + + // BEGIN: draw cycle + prepareForDraw: { + value: function() { + this.init(); + } + }, + draw:{ value: function(){ this.element.style.width = this.spanWidth + "px"; + + // 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"; + } } }, + // 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) { + this.areChoicesVisible = true; + } + }, + handleEasingChoicesClick: { + value: function(event) { + this.areChoicesVisible = false; + } } }); -- cgit v1.2.3 From a8dff9f5cb9dec84e6805118d49903710b361275 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 23 May 2012 15:44:41 -0700 Subject: Timeline: Easing selection per keyframe. --- js/panels/Timeline/Span.reel/Span.js | 49 ++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) (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 e5894500..1ab3455c 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -57,6 +57,22 @@ var Span = exports.Span = Montage.create(Component, { } } }, + + _easing: { + value: "ease-in" + }, + easing: { + get: function() { + return this._easing; + }, + set: function(newVal) { + if (newVal !== this._easing) { + this._easing = newVal; + this.parentComponent.setKeyframeEase(newVal); + this.needsDraw = true; + } + } + }, // BEGIN: draw cycle prepareForDraw: { @@ -67,7 +83,27 @@ var Span = exports.Span = Montage.create(Component, { 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) { @@ -82,6 +118,12 @@ var Span = exports.Span = Montage.create(Component, { } else { this.easing_choices.style.display = "none"; } + + // Change easing? + if (this.easing_choice.innerText !== this.easing) { + this.easing_choice.innerText = this.easing; + } + } }, @@ -90,6 +132,7 @@ var Span = exports.Span = Montage.create(Component, { value: function() { this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); + } }, @@ -108,6 +151,12 @@ var Span = exports.Span = Montage.create(Component, { }, handleEasingChoicesClick: { value: function(event) { + + this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); + event.target.classList.add("easing-selected"); + this.easing = event.target.dataset.ninjaEase; + + // Which element was just this.areChoicesVisible = false; } } -- cgit v1.2.3 From 8e98ce012f55576ddb979969a3a1d834301af0c7 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 8 Jun 2012 18:08:38 -0700 Subject: Timeline: New feature: Only one easing menu can be open at a time. --- js/panels/Timeline/Span.reel/Span.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 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 1ab3455c..8d4c25ae 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -146,17 +146,38 @@ 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; } }, handleEasingChoicesClick: { value: function(event) { - + event.stopPropagation(); + + // Remove the pointer to ourselves + 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"); event.target.classList.add("easing-selected"); + + // Set the easing this.easing = event.target.dataset.ninjaEase; - - // Which element was just + + // Hide the menu. + this.hideEasingMenu(); + } + }, + hideEasingMenu: { + value: function() { this.areChoicesVisible = false; } } -- cgit v1.2.3 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 From 0b41d5c873b25461e2217782af1c410b89cb56de Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 15 Jun 2012 14:03:03 -0700 Subject: Timeline: Bug fix IKNINJA 1716, "Ease options are not correctly displayed in Timeline after a file is saved and re-opened." --- js/panels/Timeline/Span.reel/Span.js | 1 - 1 file changed, 1 deletion(-) (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 7347ef51..5b0f3f94 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -83,7 +83,6 @@ var Span = exports.Span = Montage.create(Component, { draw:{ value: function(){ - this.element.style.width = this.spanWidth + "px"; if ((this.spanWidth <= 70) && (this.spanWidth >0)) { -- cgit v1.2.3 From 92cca9bf067d048c57aaab85479d36cb902c96c2 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 15 Jun 2012 14:31:48 -0700 Subject: Timeline: Bug fix: Correctly maintain expand/collapse state of layers and subproperties across document switching. --- js/panels/Timeline/Span.reel/Span.js | 3 +++ 1 file changed, 3 insertions(+) (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 5b0f3f94..59cd13ed 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -67,6 +67,9 @@ var Span = exports.Span = Montage.create(Component, { }, set: function(newVal) { if (newVal !== this._easing) { + if (typeof(newVal) === "undefined") { + newVal = "ease-in"; + } this._easing = newVal; this.parentComponent.setKeyframeEase(newVal); this.needsDraw = true; -- cgit v1.2.3 From 3163108217677d7eec1c79cf6aa7525cdd6600ef Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:24:02 -0700 Subject: Timeline: Default easing for new animation keyframes set to "none" per CSS standard. --- js/panels/Timeline/Span.reel/Span.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 59cd13ed..91ce1cfb 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -59,7 +59,7 @@ var Span = exports.Span = Montage.create(Component, { }, _easing: { - value: "ease-in" + value: "none" }, easing: { get: function() { @@ -68,7 +68,7 @@ var Span = exports.Span = Montage.create(Component, { set: function(newVal) { if (newVal !== this._easing) { if (typeof(newVal) === "undefined") { - newVal = "ease-in"; + newVal = "none"; } this._easing = newVal; this.parentComponent.setKeyframeEase(newVal); -- cgit v1.2.3