-
+
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;
-}
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 5c957619..73c5ff8d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -37,7 +37,8 @@
"checkable_relative" : {"#" : "checkable_relative"},
"checkable_absolute" : {"#" : "checkable_absolute"},
"checkable_animated" : {"#" : "checkable_animated"},
- "tl_configbutton" : {"#" : "tl-configbutton"}
+ "tl_configbutton" : {"#" : "tl-configbutton"},
+ "easingMenu" : {"@" : "easingMenu"}
}
},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8276f878..a8a4d4a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -4,9 +4,10 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var nj = require("js/lib/NJUtils").NJUtils;
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component,
+ nj = require("js/lib/NJUtils").NJUtils,
+ EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
@@ -204,6 +205,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _easingMenu: {
+ value: null
+ },
+ easingMenu: {
+ get: function() {
+ return this._easingMenu;
+ },
+ set: function(newVal) {
+ this._easingMenu = newVal;
+ }
+ },
+
// The index of the last layer that was clicked on
// (used for shift-click multiselect)
_lastLayerClicked : {
@@ -481,6 +494,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
boundObjectPropertyPath:"currentSelectedContainer",
oneway:true
});
+ this.easingMenu = EasingMenuPopup;
+ this.easingMenu.show();
}
},
--
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/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/panels')
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
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/EasingMenu.reel/EasingMenu.js | 22 +++++---
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 ++++++++++
4 files changed, 75 insertions(+), 65 deletions(-)
(limited to 'js/panels')
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index 006efd69..f0547e31 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -92,12 +92,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
}
},
+ _isShown: {
+ value: false
+ },
+
/* End: Models */
/* Begin: Draw Cycle */
willDraw: {
value: function() {
this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
}
},
@@ -131,11 +136,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
position.left = this.left;
this.popup.position = position;
this.popup.show();
+ this._isShow = true;
-
-
-
-
// Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
this.popup.content.needsDraw = true;
}
@@ -152,9 +154,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
this.callingComponent.easing = event.target.dataset.ninjaEase;
// Hide the menu.
- this.popup.hide();
+ this.popup.hide();
+ this._isShow = false;
}
- }
+ },
+ handleDocumentScroll: {
+ value: function(event) {
+ if (this._isShow = true) {
+ this.popup.hide();
+ }
+ }
+ }
/* End: Controllers */
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