From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs
---
js/panels/Timeline/Collapser.js | 602 +++---
js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 34 +-
js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 190 +-
js/panels/Timeline/Keyframe.reel/Keyframe.html | 14 +-
js/panels/Timeline/Keyframe.reel/Keyframe.js | 60 +-
js/panels/Timeline/Layer.reel/Layer.html | 498 ++---
js/panels/Timeline/Layer.reel/Layer.js | 1192 ++++++------
js/panels/Timeline/Layer.reel/scss/Layer.scss | 192 +-
.../Timeline/PropertyTrack.reel/PropertyTrack.html | 28 +-
.../Timeline/PropertyTrack.reel/PropertyTrack.js | 28 +-
.../PropertyTrack.reel/scss/PropertyTrack.scss | 10 +-
js/panels/Timeline/Span.reel/Span.html | 26 +-
js/panels/Timeline/Span.reel/Span.js | 246 +--
js/panels/Timeline/Span.reel/scss/Span.scss | 8 +-
js/panels/Timeline/Style.reel/Style.html | 136 +-
js/panels/Timeline/Style.reel/Style.js | 538 +++---
js/panels/Timeline/Style.reel/scss/Style.scss | 64 +-
.../Timeline/TimelinePanel.reel/TimelinePanel.html | 182 +-
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 1986 ++++++++++----------
.../TimelinePanel.reel/scss/TimelinePanel.scss | 118 +-
.../Timeline/TimelineTrack.reel/TimelineTrack.html | 280 +--
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 632 +++----
.../TimelineTrack.reel/scss/TimelineTrack.scss | 14 +-
js/panels/Timeline/Track.reel/Track.html | 40 +-
js/panels/Timeline/Track.reel/Track.js | 2 +-
.../Timeline/TrackSpacer.reel/TrackSpacer.html | 14 +-
js/panels/Timeline/Tween.reel/Tween.html | 10 +-
js/panels/Timeline/Tween.reel/Tween.js | 68 +-
28 files changed, 3606 insertions(+), 3606 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 41aa8f39..d793ac88 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -31,151 +31,151 @@ POSSIBILITY OF SUCH DAMAGE.
/*
* Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
* Required properties:
- * clicker: The element that will be clicked on.
- * content: The element that will expand or collapse as the clicker is clicked on.
+ * clicker: The element that will be clicked on.
+ * content: The element that will expand or collapse as the clicker is clicked on.
* Optional properties:
- * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state.
- * Can be manually set as well.
- * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed".
- * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
- * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the
- * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions.
- * Defaults to "collapsible-transition".
- * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content
- * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded
- * the transition will not work. Subsequent collapses (and expansions) will transition as expected.
- * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to
- * false for collapsers that will only be operated remotely.
- * isToggling: Set this anually toggle the expand/collapse of the content.
- *
+ * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state.
+ * Can be manually set as well.
+ * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed".
+ * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
+ * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the
+ * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions.
+ * Defaults to "collapsible-transition".
+ * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content
+ * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded
+ * the transition will not work. Subsequent collapses (and expansions) will transition as expected.
+ * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to
+ * false for collapsers that will only be operated remotely.
+ * isToggling: Set this anually toggle the expand/collapse of the content.
+ *
*/
var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component,
- Collapser = exports.Collapser = Montage.create(Component, {
+ Component = require("montage/ui/component").Component,
+ Collapser = exports.Collapser = Montage.create(Component, {
- // This component has no template.
- hasTemplate:{
- value: false
- },
-
- /* === BEGIN: Models === */
-
- // contentHeight: Stores the height of the content just before collapse.
- _contentHeight: {
- value: 0
- },
- contentHeight: {
+ // This component has no template.
+ hasTemplate:{
+ value: false
+ },
+
+ /* === BEGIN: Models === */
+
+ // contentHeight: Stores the height of the content just before collapse.
+ _contentHeight: {
+ value: 0
+ },
+ contentHeight: {
serializable: true,
- get: function() {
- return this._contentHeight;
- },
- set: function(newVal) {
- this._contentHeight = newVal;
- }
- },
-
- // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
- _isCollapsing: {
- value: false
- },
-
- // isAnimated: boolean to apply transition to expand/collapse
- _isAnimated : {
- value: false
- },
- isAnimated: {
+ get: function() {
+ return this._contentHeight;
+ },
+ set: function(newVal) {
+ this._contentHeight = newVal;
+ }
+ },
+
+ // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
+ _isCollapsing: {
+ value: false
+ },
+
+ // isAnimated: boolean to apply transition to expand/collapse
+ _isAnimated : {
+ value: false
+ },
+ isAnimated: {
serializable: true,
- get: function() {
- return this._isAnimated;
- },
- set: function(newVal) {
- this._isAnimated = newVal;
- }
- },
-
- _bypassAnimation : {
- value: true
- },
- bypassAnimation: {
+ get: function() {
+ return this._isAnimated;
+ },
+ set: function(newVal) {
+ this._isAnimated = newVal;
+ }
+ },
+
+ _bypassAnimation : {
+ value: true
+ },
+ bypassAnimation: {
serializable: true,
- get: function() {
- return this._bypassAnimation;
- },
- set: function(newVal) {
- this._bypassAnimation= newVal;
- //console.log('bypassAnimation setter ' + newVal)
- }
- },
- _oldAnimated : {
- value: false
- },
-
- // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
- // Note that this CSS class must be defined in your style sheet with the desired transitions.
- _transitionClass : {
- value: "collapsible-transition"
- },
- transitionClass: {
- get: function() {
- return this._transitionClass;
- },
- set: function(newVal) {
- this._transitionClass = newVal;
- }
- },
-
- // isCollapsed: is the content actually collapsed at this moment
- _isCollapsed: {
- value: ""
- },
- isCollapsed : {
+ get: function() {
+ return this._bypassAnimation;
+ },
+ set: function(newVal) {
+ this._bypassAnimation= newVal;
+ //console.log('bypassAnimation setter ' + newVal)
+ }
+ },
+ _oldAnimated : {
+ value: false
+ },
+
+ // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
+ // Note that this CSS class must be defined in your style sheet with the desired transitions.
+ _transitionClass : {
+ value: "collapsible-transition"
+ },
+ transitionClass: {
+ get: function() {
+ return this._transitionClass;
+ },
+ set: function(newVal) {
+ this._transitionClass = newVal;
+ }
+ },
+
+ // isCollapsed: is the content actually collapsed at this moment
+ _isCollapsed: {
+ value: ""
+ },
+ isCollapsed : {
serializable: true,
- get: function() {
- return this._isCollapsed;
- },
- set: function(newVal) {
- if (newVal !== this._isCollapsed) {
- this._isCollapsed = newVal;
- //this.needsDraw = true;
- }
- }
- },
-
- // collapsedClass: the class to apply to the clicker and content when the content is collapsed.
- _collapsedClass : {
- value: "collapsible-collapsed"
- },
- collapsedClass: {
- get: function() {
- return this._collapsedClass;
- },
- set: function(newVal) {
- this._collapsedClass = newVal;
- }
- },
-
- // _origOverflowValue: Stores the original overflow value of the collapsible element.
- // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden.
- // But when the collapsible element is open, we will need overflow to return to its original value.
- _origOverflowValue : {
- value: false
- },
-
- // isLabelClickable: Boolean for whether or not the label is clickable. If set to false,
- // the label click listener is never applied. For collapsibles that will only be operated remotely.
- // Defaults to true.
- _isLabelClickable : {
- value: true
- },
- isLabelClickable : {
+ get: function() {
+ return this._isCollapsed;
+ },
+ set: function(newVal) {
+ if (newVal !== this._isCollapsed) {
+ this._isCollapsed = newVal;
+ //this.needsDraw = true;
+ }
+ }
+ },
+
+ // collapsedClass: the class to apply to the clicker and content when the content is collapsed.
+ _collapsedClass : {
+ value: "collapsible-collapsed"
+ },
+ collapsedClass: {
+ get: function() {
+ return this._collapsedClass;
+ },
+ set: function(newVal) {
+ this._collapsedClass = newVal;
+ }
+ },
+
+ // _origOverflowValue: Stores the original overflow value of the collapsible element.
+ // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden.
+ // But when the collapsible element is open, we will need overflow to return to its original value.
+ _origOverflowValue : {
+ value: false
+ },
+
+ // isLabelClickable: Boolean for whether or not the label is clickable. If set to false,
+ // the label click listener is never applied. For collapsibles that will only be operated remotely.
+ // Defaults to true.
+ _isLabelClickable : {
+ value: true
+ },
+ isLabelClickable : {
serializable: true,
- get: function() {
- return this._isLabelClickable;
- },
- set: function(newVal) {
- this._isLabelClickable = newVal;
- }
- },
+ get: function() {
+ return this._isLabelClickable;
+ },
+ set: function(newVal) {
+ this._isLabelClickable = newVal;
+ }
+ },
_myContent:{
value:null
@@ -205,175 +205,175 @@ var Montage = require("montage/core/core").Montage,
}
},
- // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
- _isToggling: {
- value: true
- },
- isToggling: {
- serializable: true,
- get: function() {
- return this._isToggling;
- },
- set: function(newVal) {
- if (newVal !== this._isToggling) {
- this._isToggling = newVal;
-
- if (this.bypassAnimation === true) {
- this._oldAnimated = this.isAnimated;
- this.isAnimated = false;
- }
- this.myContent.classList.remove(this.transitionClass);
- this.handleCollapserLabelClick();
- }
- }
- },
-
- /* === END: Models === */
-
- /* === BEGIN: Draw cycle === */
-
- prepareForDraw: {
- value: function() {
- // Get the original value of the overflow property:
- this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
- if (this.isCollapsed === false) {
- this.myContent.style.height = "auto";
- }
-
+ // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
+ _isToggling: {
+ value: true
+ },
+ isToggling: {
+ serializable: true,
+ get: function() {
+ return this._isToggling;
+ },
+ set: function(newVal) {
+ if (newVal !== this._isToggling) {
+ this._isToggling = newVal;
+
+ if (this.bypassAnimation === true) {
+ this._oldAnimated = this.isAnimated;
+ this.isAnimated = false;
+ }
+ this.myContent.classList.remove(this.transitionClass);
+ this.handleCollapserLabelClick();
+ }
+ }
+ },
+
+ /* === END: Models === */
+
+ /* === BEGIN: Draw cycle === */
+
+ prepareForDraw: {
+ value: function() {
+ // Get the original value of the overflow property:
+ this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
+ if (this.isCollapsed === false) {
+ this.myContent.style.height = "auto";
+ }
+
- // If the content area is supposed to start out collapsed:
- if (this.isCollapsed) {
- this.myContent.style.height = "0px";
- // Set the overflow to hidden if it's not already
- if (this._origOverflowValue !== "hidden") {
- this.myContent.style.overflow = "hidden";
- }
- this.myContent.classList.add(this.collapsedClass);
- this.clicker.classList.add(this.collapsedClass);
- } else {
- this.myContent.style.height = "auto";
- this.myContent.classList.remove(this.collapsedClass);
- this.clicker.classList.remove(this.collapsedClass);
- }
- }
- },
- draw: {
- value: function() {
- // Is the content area expanding/collapsing?
- this.myContent.classList.remove(this.transitionClass);
- if (this._isCollapsing) {
-
- if (this.isAnimated) {
- // Apply the transition class to the content.
- this.myContent.classList.add(this.transitionClass);
-
- // Add a handler for the end of the transition, so we can tidy things up after
- // the transition completes
+ // If the content area is supposed to start out collapsed:
+ if (this.isCollapsed) {
+ this.myContent.style.height = "0px";
+ // Set the overflow to hidden if it's not already
+ if (this._origOverflowValue !== "hidden") {
+ this.myContent.style.overflow = "hidden";
+ }
+ this.myContent.classList.add(this.collapsedClass);
+ this.clicker.classList.add(this.collapsedClass);
+ } else {
+ this.myContent.style.height = "auto";
+ this.myContent.classList.remove(this.collapsedClass);
+ this.clicker.classList.remove(this.collapsedClass);
+ }
+ }
+ },
+ draw: {
+ value: function() {
+ // Is the content area expanding/collapsing?
+ this.myContent.classList.remove(this.transitionClass);
+ if (this._isCollapsing) {
+
+ if (this.isAnimated) {
+ // Apply the transition class to the content.
+ this.myContent.classList.add(this.transitionClass);
+
+ // Add a handler for the end of the transition, so we can tidy things up after
+ // the transition completes
this.myContent.identifier = "myContent";
- this.myContent.addEventListener("webkitTransitionEnd", this, false);
-
- this.myContent.style.overflow = "hidden";
- }
+ this.myContent.addEventListener("webkitTransitionEnd", this, false);
+
+ this.myContent.style.overflow = "hidden";
+ }
- // Next, are we expanding or collapsing?
- if (this.myContent.classList.contains(this.collapsedClass)) {
- // It's already collapsed so we are expanding
- this.myContent.style.height = this.contentHeight + "px";
- this.isCollapsed = false;
-
- } else {
- // It's expanded so we are collapsing
- this.myContent.style.height = "0px";
- this.isCollapsed = true;
-
- // Set the overflow to hidden if it isn't already
- if (this._origOverflowValue !== "hidden") {
- this.myContent.style.overflow = "hidden";
- }
- }
-
- // Toggle the CSS class and deactivate the collapsing flag because we are now done.
- this.myContent.classList.toggle(this.collapsedClass);
- this.clicker.classList.toggle(this.collapsedClass);
- this._isCollapsing = false;
-
- // Special cases: If transition does not happen (in the case of a contentHeight of 0
- // or isAnimated = false) we need to manually fire it here to do the cleanup.
- if ((this.contentHeight < 3) || (!this.isAnimated)) {
- this.handleMyContentWebkitTransitionEnd();
- }
- }
- }
- },
-
- /* === END: Draw cycle === */
-
- /* === BEGIN: Event handlers === */
-
- // Handle a click on the label
- handleCollapserLabelClick: {
- value: function() {
+ // Next, are we expanding or collapsing?
+ if (this.myContent.classList.contains(this.collapsedClass)) {
+ // It's already collapsed so we are expanding
+ this.myContent.style.height = this.contentHeight + "px";
+ this.isCollapsed = false;
+
+ } else {
+ // It's expanded so we are collapsing
+ this.myContent.style.height = "0px";
+ this.isCollapsed = true;
+
+ // Set the overflow to hidden if it isn't already
+ if (this._origOverflowValue !== "hidden") {
+ this.myContent.style.overflow = "hidden";
+ }
+ }
+
+ // Toggle the CSS class and deactivate the collapsing flag because we are now done.
+ this.myContent.classList.toggle(this.collapsedClass);
+ this.clicker.classList.toggle(this.collapsedClass);
+ this._isCollapsing = false;
+
+ // Special cases: If transition does not happen (in the case of a contentHeight of 0
+ // or isAnimated = false) we need to manually fire it here to do the cleanup.
+ if ((this.contentHeight < 3) || (!this.isAnimated)) {
+ this.handleMyContentWebkitTransitionEnd();
+ }
+ }
+ }
+ },
+
+ /* === END: Draw cycle === */
+
+ /* === BEGIN: Event handlers === */
+
+ // Handle a click on the label
+ handleCollapserLabelClick: {
+ value: function() {
- // The user has clicked on one of the expandos. What should we do?
- // First, are we expanding or collapsing?
- if (!this.myContent.classList.contains(this.collapsedClass)) {
- // We are collapsing!
- // Save the current height of the content.
- this.contentHeight = this.myContent.offsetHeight;
- // Set the current height of the content to a pixel height instead of "auto"
- // so that the transition can happen.
- // (This doesn't actually change the appearance of the element,
- // so it's okay to do here, outside the draw cycle.)
- this.myContent.style.height = this.contentHeight + "px";
-
- this.isCollapsed = true;
- } else {
- this.isCollapsed = false;
- }
-
- // Set the collapsing flag so when the draw cycle begins
- // it will know to expand/collapse.
- this._isCollapsing = true;
-
- // Set the component to run its draw cycle.
- this.needsDraw = true;
+ // The user has clicked on one of the expandos. What should we do?
+ // First, are we expanding or collapsing?
+ if (!this.myContent.classList.contains(this.collapsedClass)) {
+ // We are collapsing!
+ // Save the current height of the content.
+ this.contentHeight = this.myContent.offsetHeight;
+ // Set the current height of the content to a pixel height instead of "auto"
+ // so that the transition can happen.
+ // (This doesn't actually change the appearance of the element,
+ // so it's okay to do here, outside the draw cycle.)
+ this.myContent.style.height = this.contentHeight + "px";
+
+ this.isCollapsed = true;
+ } else {
+ this.isCollapsed = false;
+ }
+
+ // Set the collapsing flag so when the draw cycle begins
+ // it will know to expand/collapse.
+ this._isCollapsing = true;
+
+ // Set the component to run its draw cycle.
+ this.needsDraw = true;
- }
- },
-
- // This handler is bound to the transitionEnd event. If transitions
- // are disabled, it is called manually.
+ }
+ },
+
+ // This handler is bound to the transitionEnd event. If transitions
+ // are disabled, it is called manually.
handleMyContentWebkitTransitionEnd: {
- value: function(event) {
-
- // Are we animating the transitions?
- if (this.isAnimated) {
- // Yes, transitions are animated.
- // Remove the event listener so it won't fire again.
- this.myContent.removeEventListener("webkitTransitionEnd", this, false);
-
- // remove the CSS class that supplies the transition
- this.myContent.classList.remove(this.transitionClass);
- }
-
- // Set the height of the content area to auto; this way it can expand/collapse as interactions
- // happen within.
- if (!this.myContent.classList.contains(this.collapsedClass)) {
- this.myContent.style.height = "auto";
- // Return the overflow to its original value if it wasn't hidden
- if (this._origOverflowValue !== "hidden") {
- this.myContent.style.overflow = this._origOverflowValue;
- }
-
- }
-
- if (this.bypassAnimation === true) {
- this.isAnimated = this._oldAnimated;
- } else {
- this.bypassAnimation = true;
- }
- }
- }
-
- /* === END: Event handlers === */
+ value: function(event) {
+
+ // Are we animating the transitions?
+ if (this.isAnimated) {
+ // Yes, transitions are animated.
+ // Remove the event listener so it won't fire again.
+ this.myContent.removeEventListener("webkitTransitionEnd", this, false);
+
+ // remove the CSS class that supplies the transition
+ this.myContent.classList.remove(this.transitionClass);
+ }
+
+ // Set the height of the content area to auto; this way it can expand/collapse as interactions
+ // happen within.
+ if (!this.myContent.classList.contains(this.collapsedClass)) {
+ this.myContent.style.height = "auto";
+ // Return the overflow to its original value if it wasn't hidden
+ if (this._origOverflowValue !== "hidden") {
+ this.myContent.style.overflow = this._origOverflowValue;
+ }
+
+ }
+
+ if (this.bypassAnimation === true) {
+ this.isAnimated = this._oldAnimated;
+ } else {
+ this.bypassAnimation = true;
+ }
+ }
+ }
+
+ /* === END: Event handlers === */
});
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
index dcf35d8f..b8a3f9f3 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
-->
-
-
-
-
-
-
-
-
-
none
-
ease
-
ease-out
-
ease-in
-
ease-in-out
-
linear
-
-
+
+
+
+
+
none
+
ease
+
ease-out
+
ease-in
+
ease-in-out
+
linear
+
+
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index 6d41afb0..0c105d0a 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -29,8 +29,8 @@ POSSIBILITY OF SUCH DAMAGE.
*/
var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component,
- Popup = require("montage/ui/popup/popup.reel").Popup;
+ Component = require("montage/ui/component").Component,
+ Popup = require("montage/ui/popup/popup.reel").Popup;
var EasingMenu = exports.EasingMenu = Montage.create(Component, {
@@ -38,125 +38,125 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
value: true
},
- /* Begin: Models */
-
- // popup: the initialized component.
+ /* Begin: Models */
+
+ // popup: the initialized component.
_popup: {
- value: null
+ value: null
},
popup: {
- get: function() {
- return this._popup;
- },
- set: function(newVal) {
- this._popup = newVal
- }
+ get: function() {
+ return this._popup;
+ },
+ set: function(newVal) {
+ this._popup = newVal
+ }
},
// callingComponent: pointer to the span that called for the menu
_callingComponent: {
- value: null
+ value: null
},
callingComponent: {
- get: function() {
- return this._callingComponent;
- },
- set: function(newVal) {
- this._callingComponent = newVal;
- }
+ get: function() {
+ return this._callingComponent;
+ },
+ set: function(newVal) {
+ this._callingComponent = newVal;
+ }
},
// anchor: pointer to the anchoring element
_anchor: {
- value: null
+ value: null
},
anchor: {
- get: function() {
- return this._anchor;
- },
- set: function(newVal) {
- this._anchor = newVal;
- }
+ get: function() {
+ return this._anchor;
+ },
+ set: function(newVal) {
+ this._anchor = newVal;
+ }
},
_top: {
- value: null
+ value: null
},
top: {
- get: function() {
- return this._top;
- },
- set: function(newVal) {
- this._top = newVal;
- }
+ get: function() {
+ return this._top;
+ },
+ set: function(newVal) {
+ this._top = newVal;
+ }
},
_left: {
- value: null
+ value: null
},
left: {
- get: function() {
- return this._left;
- },
- set: function(newVal) {
- this._left = newVal;
- }
+ get: function() {
+ return this._left;
+ },
+ set: function(newVal) {
+ this._left = newVal;
+ }
},
// currentChoice: The data attribute of the current choice
_currentChoice: {
- value: "none"
+ value: "none"
},
currentChoice: {
- get: function() {
- return this._currentChoice;
- },
- set: function(newVal) {
- this._currentChoice = newVal;
- }
+ get: function() {
+ return this._currentChoice;
+ },
+ set: function(newVal) {
+ this._currentChoice = newVal;
+ }
},
_isShown: {
- value: false
+ 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);
- }
+ value: function() {
+ this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
+ }
},
draw: {
- value: function() {
- // Update the selection classes.
- var easingSelected = this.element.querySelector(".easing-selected");
- if (easingSelected !== null) {
- easingSelected.classList.remove("easing-selected");
- }
+ value: function() {
+ // Update the selection classes.
+ var easingSelected = this.element.querySelector(".easing-selected");
+ if (easingSelected !== null) {
+ easingSelected.classList.remove("easing-selected");
+ }
var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
if (dataEl !== null) {
- dataEl.classList.add("easing-selected");
+ dataEl.classList.add("easing-selected");
}
- }
+ }
},
didDraw: {
- value: function() {
- }
+ value: function() {
+ }
},
- /* End Draw Cycle */
+ /* End Draw Cycle */
/* Begin: Controllers */
- show: {
- value: function() {
- // Initialize the popup if it hasn't already been done
+ show: {
+ value: function() {
+ // 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();
+ this.popup = Popup.create();
+ this.popup.modal = false;
+ this.popup.content = EasingMenu.create();
}
// Show the popup
@@ -170,34 +170,34 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
// 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();
+ }
+ },
+ handleEasingChoicesClick: {
+ value: function(event) {
+ event.stopPropagation();
- // Un-highlight the old choice and highlight the new choice
- var easingSelected = this.element.querySelector(".easing-selected");
- if (easingSelected !== null) {
- easingSelected.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();
- this._isShow = false;
- }
+ // Un-highlight the old choice and highlight the new choice
+ var easingSelected = this.element.querySelector(".easing-selected");
+ if (easingSelected !== null) {
+ easingSelected.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();
+ this._isShow = false;
+ }
},
- handleDocumentScroll: {
- value: function(event) {
- if (this._isShow = true) {
- this.popup.hide();
- }
- }
- }
+ handleDocumentScroll: {
+ value: function(event) {
+ if (this._isShow = true) {
+ this.popup.hide();
+ }
+ }
+ }
/* End: Controllers */
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index 9f8baf86..fc11e0d9 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -29,9 +29,9 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
-->
-
-
-
+
+
+
-
-
+
+
-
-
+
+
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 9ded9c76..1d79efc3 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -71,11 +71,11 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
value:function(){
this.element.addEventListener("click", this, false);
- // Drag and drop event handlers
- this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
- this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
- this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
- this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
+ // Drag and drop event handlers
+ this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
+ this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
+ this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
+ this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
}
},
@@ -125,38 +125,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
}
},
- handleMouseover: {
- value: function(event) {
- this.element.draggable = true;
- }
- },
- handleMouseout: {
- value: function(event) {
- this.element.draggable = false;
- }
- },
- handleDragstart: {
- value: function(event) {
- //this.parentComponent.parentComponent.dragLayerID = this.layerID;
+ handleMouseover: {
+ value: function(event) {
+ this.element.draggable = true;
+ }
+ },
+ handleMouseout: {
+ value: function(event) {
+ this.element.draggable = false;
+ }
+ },
+ handleDragstart: {
+ value: function(event) {
+ //this.parentComponent.parentComponent.dragLayerID = this.layerID;
event.dataTransfer.setData('Text', 'Keyframe');
// Get my index in my track's tween array
var i = 0,
- tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
- myIndex = null;
+ tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
+ myIndex = null;
for (i = 0; i < tweenRepetitionLength; i++) {
- if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
- myIndex = i;
- }
+ if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
+ myIndex = i;
+ }
}
this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
this.selectKeyframe();
- }
- },
- handleDragend: {
- value: function(event) {
- this.parentComponent.isDragging = false;
- }
- }
+ }
+ },
+ handleDragend: {
+ value: function(event) {
+ this.parentComponent.isDragging = false;
+ }
+ }
});
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 3c471952..83b73e76 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -29,24 +29,24 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
-->
-
-
-
-
-
-
+
+
-