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.html | 17 +++++- js/panels/Timeline/Span.reel/Span.js | 78 ++++++++++++++++++++++++- js/panels/Timeline/Span.reel/css/Span.css | 90 ++++++++++++++++++++++++++--- js/panels/Timeline/Span.reel/scss/Span.scss | 87 ++++++++++++++++++++++++++++ js/panels/Timeline/Span.reel/scss/config.rb | 9 +++ 5 files changed, 268 insertions(+), 13 deletions(-) create mode 100644 js/panels/Timeline/Span.reel/scss/Span.scss create mode 100644 js/panels/Timeline/Span.reel/scss/config.rb (limited to 'js/panels/Timeline/Span.reel') diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index 8baa141a..d6c359ad 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -13,7 +13,10 @@ "owner": { "prototype": "js/panels/Timeline/Span.reel", "properties": { - "element": {"#": "spanspace"} + "element": {"#": "spanspace"}, + "container_easing" : {"#" : "container_easing"}, + "easing_choice" : {"#": "easing_choice"}, + "easing_choices" : {"#" : "easing_choices"} } } @@ -23,6 +26,18 @@
+
+
+
+ ease-in-out +
+ +
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; + } } }); diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 198d71f3..16f931b2 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -1,17 +1,89 @@ +@charset "UTF-8"; /* 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. */ +/* Span.scss + * Main SCSS file for Span component, compiled by SASS into the file css/Span.css. + */ +/* line 22, ../scss/Span.scss */ +.tween_span { + position: absolute; + height: 16px; +} + +/* line 26, ../scss/Span.scss */ +.tween_span .tween_span_bar { + width: 100%; + height: 100%; + background-color: #fff; + opacity: 0.15; +} + +/* line 33, ../scss/Span.scss */ +.tween_span.spanHighlight .tween_span_bar { + background-color: #a0c8ff; + opacity: 0.4; +} + +/* + * Easing picker + */ +/* line 42, ../scss/Span.scss */ +.container-easing { + position: absolute; + top: 2px; + right: 6px; + font-size: 10px; + line-height: 8px; + border: 1px solid black; + color: white; + background-color: #474747; +} -.tween_span{ - position: absolute; - height: 16px; - opacity: 0.15; - background-color: white; +/* line 54, ../scss/Span.scss */ +.container-easing, +.container-easing .easing-choice, +.container-easing .easing-choices { + width: 70px; } -.tween_span.spanHighlight{ - background-color: #a0c8ff; - opacity: 0.4; -} \ No newline at end of file +/* line 58, ../scss/Span.scss */ +.container-easing, +.container-easing .easing-choice { + height: 10px; +} + +/* line 61, ../scss/Span.scss */ +.container-easing .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} + +/* line 68, ../scss/Span.scss */ +.container-easing .easing-choices { + position: absolute; + display: none; + bottom: -1px; + left: -1px; + z-index: 100; + height: auto; + border: 1px solid black; + color: white; + background-color: #474747; + overflow: hidden; + list-style-type: none; + margin: 0px; + padding: 0px; +} + +/* line 83, ../scss/Span.scss */ +.container-easing .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; +} diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss new file mode 100644 index 00000000..a39cf465 --- /dev/null +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -0,0 +1,87 @@ +@charset "UTF-8"; + +/* + 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. + */ + +/* Span.scss + * Main SCSS file for Span component, compiled by SASS into the file css/Span.css. + */ + +// Import theme settings +@import "../../../../../scss/imports/themes/default/colors"; +// @import "../../../../../scss/imports/themes/default/fonts"; +@import "../../../../../scss/imports/themes/default/mixins"; + +// Import generic mixins and styles +@import "../../../../../scss/imports/scss/mixins"; +// @import "../../../../../scss/imports/scss/Base"; + +.tween_span{ + position: absolute; + height: 16px; +} +.tween_span .tween_span_bar { + width: 100%; + height: 100%; + background-color: #fff; + opacity: 0.15; +} + +.tween_span.spanHighlight .tween_span_bar { + background-color: #a0c8ff; + opacity: 0.4; +} + +/* + * Easing picker + */ + +.container-easing { + position: absolute; + top: 2px; + right: 6px; + font-size: 10px; + line-height: 8px; + border: 1px solid $color-menu-border; + color: $color-menu-text; + background-color: $color-menu-bg; +} +.container-easing, +.container-easing .easing-choice, +.container-easing .easing-choices { + width: 70px; +} +.container-easing, +.container-easing .easing-choice { + height: 10px; +} +.container-easing .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} +.container-easing .easing-choices { + position: absolute; + display: none; + bottom: -1px; + left: -1px; + z-index: 100; + height: auto; + border: 1px solid $color-menu-border; + color: $color-menu-text; + background-color: $color-menu-bg; + overflow: hidden; + list-style-type: none; + margin: 0px; + padding: 0px; +} +.container-easing .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; +} diff --git a/js/panels/Timeline/Span.reel/scss/config.rb b/js/panels/Timeline/Span.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/Span.reel/scss/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "../css" +sass_dir = "" +images_dir = "../images/" +javascripts_dir = "../js" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true -- 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.html | 11 ++++--- js/panels/Timeline/Span.reel/Span.js | 49 +++++++++++++++++++++++++++++ js/panels/Timeline/Span.reel/css/Span.css | 27 +++++++++++++--- js/panels/Timeline/Span.reel/scss/Span.scss | 16 +++++++++- 4 files changed, 92 insertions(+), 11 deletions(-) (limited to 'js/panels/Timeline/Span.reel') diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index d6c359ad..a1f3afeb 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -29,13 +29,14 @@
- ease-in-out + ease-out
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; } } diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 16f931b2..e5cb4263 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -34,7 +34,7 @@ .container-easing { position: absolute; top: 2px; - right: 6px; + right: 8px; font-size: 10px; line-height: 8px; border: 1px solid black; @@ -47,15 +47,16 @@ .container-easing .easing-choice, .container-easing .easing-choices { width: 70px; + white-space: nowrap; } -/* line 58, ../scss/Span.scss */ +/* line 59, ../scss/Span.scss */ .container-easing, .container-easing .easing-choice { height: 10px; } -/* line 61, ../scss/Span.scss */ +/* line 62, ../scss/Span.scss */ .container-easing .easing-choice { position: absolute; top: 0px; @@ -64,7 +65,7 @@ cursor: pointer; } -/* line 68, ../scss/Span.scss */ +/* line 69, ../scss/Span.scss */ .container-easing .easing-choices { position: absolute; display: none; @@ -81,9 +82,25 @@ padding: 0px; } -/* line 83, ../scss/Span.scss */ +/* line 84, ../scss/Span.scss */ .container-easing .easing-choices li { list-style-type: none; margin: 0px; padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +/* line 95, ../scss/Span.scss */ +.container-easing .easing-choices li:hover, +.container-easing .easing-choices li.easing-selected { + color: #242424; + background-color: #b2b2b2; +} + +/* line 99, ../scss/Span.scss */ +.container-easing .easing-choices li.easing-selected { + cursor: default; } diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss index a39cf465..b3aff4d2 100644 --- a/js/panels/Timeline/Span.reel/scss/Span.scss +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -42,7 +42,7 @@ .container-easing { position: absolute; top: 2px; - right: 6px; + right: 8px; font-size: 10px; line-height: 8px; border: 1px solid $color-menu-border; @@ -53,6 +53,7 @@ .container-easing .easing-choice, .container-easing .easing-choices { width: 70px; + white-space: nowrap; } .container-easing, .container-easing .easing-choice { @@ -84,4 +85,17 @@ list-style-type: none; margin: 0px; padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +.container-easing .easing-choices li:hover, +.container-easing .easing-choices li.easing-selected { + color: $color-menu-hilite-text; + background-color: $color-menu-hilite-bg; +} +.container-easing .easing-choices li.easing-selected { + cursor: default; } -- 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') 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.html | 12 +----- js/panels/Timeline/Span.reel/Span.js | 20 ++++----- js/panels/Timeline/Span.reel/scss/Span.scss | 64 ----------------------------- 3 files changed, 10 insertions(+), 86 deletions(-) (limited to 'js/panels/Timeline/Span.reel') diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index a1f3afeb..6e643daa 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -15,8 +15,7 @@ "properties": { "element": {"#": "spanspace"}, "container_easing" : {"#" : "container_easing"}, - "easing_choice" : {"#": "easing_choice"}, - "easing_choices" : {"#" : "easing_choices"} + "easing_choice" : {"#": "easing_choice"} } } @@ -27,17 +26,10 @@
-
+
ease-out
-
    -
  • ease
    • -
  • ease-out
    • -
  • ease-in
    • -
  • ease-in-out
    • -
  • linear
    • -
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: { diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss index b3aff4d2..6afb4780 100644 --- a/js/panels/Timeline/Span.reel/scss/Span.scss +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -35,67 +35,3 @@ opacity: 0.4; } -/* - * Easing picker - */ - -.container-easing { - position: absolute; - top: 2px; - right: 8px; - font-size: 10px; - line-height: 8px; - border: 1px solid $color-menu-border; - color: $color-menu-text; - background-color: $color-menu-bg; -} -.container-easing, -.container-easing .easing-choice, -.container-easing .easing-choices { - width: 70px; - white-space: nowrap; -} -.container-easing, -.container-easing .easing-choice { - height: 10px; -} -.container-easing .easing-choice { - position: absolute; - top: 0px; - left: 3px; - width: 67px; - cursor: pointer; -} -.container-easing .easing-choices { - position: absolute; - display: none; - bottom: -1px; - left: -1px; - z-index: 100; - height: auto; - border: 1px solid $color-menu-border; - color: $color-menu-text; - background-color: $color-menu-bg; - overflow: hidden; - list-style-type: none; - margin: 0px; - padding: 0px; -} -.container-easing .easing-choices li { - list-style-type: none; - margin: 0px; - padding: 0px; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 3px; - cursor: pointer; -} - -.container-easing .easing-choices li:hover, -.container-easing .easing-choices li.easing-selected { - color: $color-menu-hilite-text; - background-color: $color-menu-hilite-bg; -} -.container-easing .easing-choices li.easing-selected { - cursor: default; -} -- 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') 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 ++++++++--- js/panels/Timeline/Span.reel/css/Span.css | 66 ++++++----------------------- js/panels/Timeline/Span.reel/scss/Span.scss | 28 ++++++++++++ 3 files changed, 59 insertions(+), 59 deletions(-) (limited to 'js/panels/Timeline/Span.reel') 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; diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index e5cb4263..040379ea 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -27,11 +27,8 @@ opacity: 0.4; } -/* - * Easing picker - */ -/* line 42, ../scss/Span.scss */ -.container-easing { +/* line 38, ../scss/Span.scss */ +.container-easing-choice { position: absolute; top: 2px; right: 8px; @@ -42,65 +39,26 @@ background-color: #474747; } -/* line 54, ../scss/Span.scss */ -.container-easing, -.container-easing .easing-choice, -.container-easing .easing-choices { +/* line 50, ../scss/Span.scss */ +.container-easing-choice, +.container-easing-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; width: 70px; white-space: nowrap; } -/* line 59, ../scss/Span.scss */ -.container-easing, -.container-easing .easing-choice { +/* line 56, ../scss/Span.scss */ +.container-easing-choice, +.container-easing-choice .easing-choice { height: 10px; } -/* line 62, ../scss/Span.scss */ -.container-easing .easing-choice { +/* line 59, ../scss/Span.scss */ +.container-easing-choice .easing-choice { position: absolute; top: 0px; left: 3px; width: 67px; cursor: pointer; } - -/* line 69, ../scss/Span.scss */ -.container-easing .easing-choices { - position: absolute; - display: none; - bottom: -1px; - left: -1px; - z-index: 100; - height: auto; - border: 1px solid black; - color: white; - background-color: #474747; - overflow: hidden; - list-style-type: none; - margin: 0px; - padding: 0px; -} - -/* line 84, ../scss/Span.scss */ -.container-easing .easing-choices li { - list-style-type: none; - margin: 0px; - padding: 0px; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 3px; - cursor: pointer; -} - -/* line 95, ../scss/Span.scss */ -.container-easing .easing-choices li:hover, -.container-easing .easing-choices li.easing-selected { - color: #242424; - background-color: #b2b2b2; -} - -/* line 99, ../scss/Span.scss */ -.container-easing .easing-choices li.easing-selected { - cursor: default; -} diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss index 6afb4780..31781f87 100644 --- a/js/panels/Timeline/Span.reel/scss/Span.scss +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -35,3 +35,31 @@ opacity: 0.4; } +.container-easing-choice { + position: absolute; + top: 2px; + right: 8px; + font-size: 10px; + line-height: 8px; + border: 1px solid $color-menu-border; + color: $color-menu-text; + background-color: $color-menu-bg; +} +.container-easing-choice, +.container-easing-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; + width: 70px; + white-space: nowrap; +} +.container-easing-choice, +.container-easing-choice .easing-choice { + height: 10px; +} +.container-easing-choice .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} -- 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') 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') 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') 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