From aa2d8afb323e71ea562c74564609604e0480fde4 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Mon, 19 Mar 2012 16:53:29 -0700
Subject: Timeline: Re-enable adding/removing styles to layers. New methods in
TimelinePanel for creating new styles on document load.
---
js/panels/Timeline/Layer.reel/Layer.js | 12 +++--
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 51 ++++++++++++++++++++++
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +-
3 files changed, 57 insertions(+), 8 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 238ddae9..830d179e 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -499,11 +499,8 @@ var Layer = exports.Layer = Montage.create(Component, {
// Add event listeners to add and delete style buttons
- this.buttonAddStyle.identifier = "addStyle";
- this.buttonAddStyle.addEventListener("click", this, false);
-
- this.buttonDeleteStyle.identifier = "deleteStyle";
- this.buttonDeleteStyle.addEventListener("click", this, false);
+ this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
+ this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false);
// Add mousedown listener to set isActive
this.element.addEventListener("mousedown", this, false);
@@ -604,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, {
// Set up the event info and dispatch the event
newEvent.styleSelection = mySelection;
- //defaultEventManager.dispatchEvent(newEvent);
+ defaultEventManager.dispatchEvent(newEvent);
}
},
@@ -624,7 +621,7 @@ var Layer = exports.Layer = Montage.create(Component, {
newEvent.layerID = this.layerID;
newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
newEvent.styleSelection = selectedIndex;
- //defaultEventManager.dispatchEvent(newEvent);
+ defaultEventManager.dispatchEvent(newEvent);
// Delete the style from the view
this.arrLayerStyles.splice(selectedIndex, 1);
@@ -717,6 +714,7 @@ var Layer = exports.Layer = Montage.create(Component, {
value: function(event) {
this.layerData.isActive = true;
var ptrParent = nj.queryParentSelector(event.target, ".content-style");
+ console.log('handleMousedown called')
if (ptrParent !== false) {
this.selectStyle(this.getActiveStyleIndex());
}
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index fd297fd3..df018ee3 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -289,6 +289,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
createLayerTemplate:{
value:function () {
var returnObj = {};
+
returnObj.layerData = {};
returnObj.layerData.layerName = null;
returnObj.layerData.layerID = null;
@@ -297,6 +298,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
returnObj.layerData.isTransformCollapsed = true;
returnObj.layerData.isStyleCollapsed = true;
returnObj.layerData.arrLayerStyles = [];
+ returnObj.layerData.arrLayerStyles = [];
returnObj.layerData.elementsList = [];
returnObj.layerData.deleted = false;
returnObj.layerData.isSelected = false;
@@ -312,6 +314,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
return returnObj;
}
},
+
+ // Create an array of style objects for an element, for use
+ // in creating a new layer
+ createLayerStyles : {
+ value: function(ptrElement) {
+ // TODO: Create logic to loop through
+ // CSS properties on element and build
+ // array of layer styles for return.
+ // Right now this method just returns an array of one bogus style.
+
+ var returnArray = [],
+ newStyle = {},
+ styleID = "1@0"; // format: layerID + "@" + style counter
+
+ newStyle.styleID = styleID;
+ newStyle.whichView = "propval";
+ newStyle.editorProperty = "top";
+ newStyle.editorValue = 0;
+ newStyle.ruleTweener = false;
+ newStyle.isSelected = false;
+
+ returnArray.push(newStyle);
+
+ return returnArray;
+
+ }
+ },
+
+ // Create an array of style track objects for an element, for use
+ // in creating a new layer
+ createStyleTracks : {
+ value: function(ptrElement) {
+ // TODO: Create logic to loop through
+ // CSS properties on element and build
+ // array of layer styles for return.
+ // Right now this method just returns an array of one bogus style.
+
+ var returnArray = [];
+
+ returnArray.push("1");
+
+ return returnArray;
+
+ }
+ },
// Bind all document-specific events (pass in true to unbind)
_bindDocumentEvents:{
@@ -677,6 +724,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush.layerData.layerID = this.currentLayerNumber;
thingToPush.parentElementUUID = this.hashKey;
thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+
+ // Are there styles to add?
+ thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
+ thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
if (this._openDoc) {
ele.uuid = nj.generateRandom();
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 601788ad..e9a2115a 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.arrTransformTracks = [0, 1, 2, 3, 4];
// Register event handler for layer events.
- //defaultEventManager.addEventListener("layerEvent", this, false);
+ defaultEventManager.addEventListener("layerEvent", this, false);
}
},
--
cgit v1.2.3
From 0e24b9dc875cefb1010a9e2b507c19b77e4d9811 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 20 Mar 2012 17:37:11 -0700
Subject: Timeline: fix layer and style select problems.
---
js/panels/Timeline/Layer.reel/Layer.html | 2 +-
js/panels/Timeline/Layer.reel/Layer.js | 1 -
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 2 +-
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 6 ++++++
js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 2 +-
5 files changed, 9 insertions(+), 4 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..c8e31fad 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -301,7 +301,7 @@
"properties" : {
"element" : {"#" : "content-style"},
"myContent" : {"#":"content-style"},
- "contentHeight" : 60,
+ "contentHeight" : 0,
"isLabelClickable" : true,
"clicker" : {"#" : "clicker-style"},
"isCollapsed" : true,
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 830d179e..9334a0b4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -714,7 +714,6 @@ var Layer = exports.Layer = Montage.create(Component, {
value: function(event) {
this.layerData.isActive = true;
var ptrParent = nj.queryParentSelector(event.target, ".content-style");
- console.log('handleMousedown called')
if (ptrParent !== false) {
this.selectStyle(this.getActiveStyleIndex());
}
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 6e7d410c..2e0bf7dd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -19,7 +19,7 @@
"element": {"#": "timeline_panel"},
"user_layers": {"#": "user_layers"},
"track_container": {"#": "right_inside"},
- "timeline_leftpane" : {"#" : "timeline_leftpane"},
+ "timeline_leftpane" : {"#" : "leftpane_inside"},
"layer_tracks": {"#": "layer_tracks"},
"master_track": {"#": "master_track"},
"time_markers" : {"#": "timeline_markers"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index df018ee3..67eae45c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -913,6 +913,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
} else {
this.arrLayers[i].layerData.isSelected = false;
}
+
+ if (this.arrLayers[i].layerData.triggerBinding === true) {
+ this.arrLayers[i].layerData.triggerBinding = false;
+ } else {
+ this.arrLayers[i].layerData.triggerBinding = true;
+ }
}
this.layerRepetition.selectedIndexes = [layerIndex];
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 7e9b8a21..2d508b3c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -200,7 +200,7 @@
"properties" : {
"element" : {"#" : "content-styles"},
"myContent" : {"#":"content-styles"},
- "contentHeight" : 40,
+ "contentHeight" : 0,
"isLabelClickable" : false,
"clicker" : {"#" : "label-styles"},
"isCollapsed" : true,
--
cgit v1.2.3
From 9d7cd4d067b988a65cdea3059769617487028a22 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 21 Mar 2012 10:47:48 -0700
Subject: Fix: Change click handler to mousedown for better responsiveness in
layer selection UI.
---
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 67eae45c..03d06d98 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -389,7 +389,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
value:function () {
this.layout_tracks = this.element.querySelector(".layout-tracks");
this.layout_markers = this.element.querySelector(".layout_markers");
- this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
+ this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
@@ -495,6 +495,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Clear the repetitions
if (this.arrLayers.length > 0) {
this.arrLayers = [];
+ this.arrLayers.length = 0;
}
}
},
@@ -616,7 +617,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- timelineLeftPaneClick:{
+ timelineLeftPaneMousedown:{
value:function (event) {
var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
if (ptrParent !== false) {
--
cgit v1.2.3
From 3669eea4bde3518ce080048e9f53d2dd111fd8be Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 21 Mar 2012 11:37:48 -0700
Subject: Timeline: Bug fix: style collapsers not staying in synch. Also,
removed console.log calls in hintable component.
---
js/panels/Timeline/Layer.reel/Layer.js | 3 +++
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 +++++++++++-----
js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++--
3 files changed, 16 insertions(+), 7 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 9334a0b4..fcdbcd22 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -571,6 +571,8 @@ var Layer = exports.Layer = Montage.create(Component, {
newEvent = document.createEvent("CustomEvent");
this.isStyleCollapsed = false;
+ this.layerData.isStyleCollapsed = false;
+ this.triggerOutgoingBinding();
newEvent.initCustomEvent("layerEvent", false, true);
newEvent.layerEventLocale = "styles";
@@ -603,6 +605,7 @@ var Layer = exports.Layer = Montage.create(Component, {
newEvent.styleSelection = mySelection;
defaultEventManager.dispatchEvent(newEvent);
+
}
},
deleteStyle : {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 03d06d98..0ba49c44 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -915,11 +915,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.arrLayers[i].layerData.isSelected = false;
}
- if (this.arrLayers[i].layerData.triggerBinding === true) {
- this.arrLayers[i].layerData.triggerBinding = false;
- } else {
- this.arrLayers[i].layerData.triggerBinding = true;
- }
+ this.triggerLayerBinding(i);
}
this.layerRepetition.selectedIndexes = [layerIndex];
@@ -1077,6 +1073,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+ // Trigger the layer/track data binding
+ triggerLayerBinding : {
+ value: function(intIndex) {
+ if (this.arrLayers[intIndex].layerData.triggerBinding === true) {
+ this.arrLayers[intIndex].layerData.triggerBinding = false;
+ } else {
+ this.arrLayers[intIndex].layerData.triggerBinding = true;
+ }
+ }
+ },
/* === END: Controllers === */
/* === BEGIN: Logging routines === */
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index e9a2115a..011d991e 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -672,8 +672,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
} else if (layerEvent.layerEventType === "newStyle") {
this.arrStyleTracks.push("1");
if (this._styleCollapser.isCollapsed === true) {
- this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation;
- this._styleCollapser.handleCollapserLabelClick();
+ //this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation;
+ //this._styleCollapser.handleCollapserLabelClick();
}
} else if (layerEvent.layerEventType === "deleteStyle") {
this.arrStyleTracks.pop();
--
cgit v1.2.3
From 2d9cb9ca8f6beb661a3d904b5125afa8243661de Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 21 Mar 2012 15:40:33 -0700
Subject: Timeline: First integration of drag and drop of layers.
---
js/panels/Timeline/DragDrop.js | 136 +++++++++++++++++++++
js/panels/Timeline/Layer.reel/Layer.html | 34 +++++-
js/panels/Timeline/Layer.reel/Layer.js | 8 ++
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 22 +---
4 files changed, 178 insertions(+), 22 deletions(-)
create mode 100644 js/panels/Timeline/DragDrop.js
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js
new file mode 100644
index 00000000..55ee3ab4
--- /dev/null
+++ b/js/panels/Timeline/DragDrop.js
@@ -0,0 +1,136 @@
+/*
+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.
+