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