From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 3 Jul 2012 15:47:50 -0700
Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes
propagated to PropertyTrack, TimelineTrack, and Tween classes.
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 1198 ++++++++++----------
1 file changed, 592 insertions(+), 606 deletions(-)
(limited to 'js/panels/Timeline/TimelinePanel.reel')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1df37636..17372935 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -11,103 +11,244 @@ var Montage = require("montage/core/core").Montage,
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+ /* === BEGIN: Models === */
+ _user_layers: {
+ value: null
+ },
user_layers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._user_layers;
+ },
+ set: function(newVal) {
+ this._user_layers = newVal;
+ }
},
+ _track_container: {
+ value: null
+ },
track_container: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._track_container;
+ },
+ set: function(newVal) {
+ this._track_container = newVal;
+ }
},
+ _timeline_leftpane: {
+ value: null
+ },
timeline_leftpane: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timeline_leftpane;
+ },
+ set: function(newVal) {
+ this._timeline_leftpane = newVal;
+ }
},
+ _layer_tracks: {
+ value: null
+ },
layer_tracks: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._layer_tracks;
+ },
+ set: function(newVal) {
+ this._layer_tracks = newVal;
+ }
},
+ _master_track: {
+ value: null
+ },
master_track: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._master_track;
+ },
+ set: function(newVal) {
+ this._master_track = newVal;
+ }
},
+ _time_markers: {
+ value: null
+ },
time_markers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._time_markers;
+ },
+ set: function(newVal) {
+ this._time_markers = newVal;
+ }
},
+ _playhead: {
+ value: null
+ },
playhead: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._playhead;
+ },
+ set: function(newVal) {
+ this._playhead = newVal;
+ }
},
+ _playheadmarker: {
+ value: null
+ },
playheadmarker: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._playheadmarker;
+ },
+ set: function(newVal) {
+ this._playheadmarker = newVal;
+ }
},
+ _timetext: {
+ value: null
+ },
timetext: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timetext;
+ },
+ set: function(newVal) {
+ this._timetext = newVal;
+ }
},
+ _timebar: {
+ value: null
+ },
timebar: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timebar;
+ },
+ set: function(newVal) {
+ this._timebar = newVal;
+ }
},
+ _container_tracks: {
+ value: null
+ },
container_tracks: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._container_tracks;
+ },
+ set: function(newVal) {
+ this._container_tracks = newVal;
+ }
},
+ _end_hottext: {
+ value: null
+ },
end_hottext: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._end_hottext;
+ },
+ set: function(newVal) {
+ this._end_hottext = newVal;
+ }
},
+ _container_layers: {
+ value: null
+ },
container_layers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._container_layers;
+ },
+ set: function(newVal) {
+ this._container_layers = newVal;
+ }
},
+ _timeline_disabler: {
+ value: null
+ },
timeline_disabler: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timeline_disabler;
+ },
+ set: function(newVal) {
+ this._timeline_disabler = newVal;
+ }
},
+ _checkable_relative: {
+ value: null
+ },
checkable_relative: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_relative;
+ },
+ set: function(newVal) {
+ this._checkable_relative = newVal;
+ }
},
+ _checkable_absolute: {
+ value: null
+ },
checkable_absolute: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_absolute;
+ },
+ set: function(newVal) {
+ this._checkable_absolute = newVal;
+ }
},
+ _checkable_animated: {
+ value: null
+ },
checkable_animated: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_animated;
+ },
+ set: function(newVal) {
+ this._checkable_animated = newVal;
+ }
},
+ _tl_configbutton: {
+ value: null
+ },
tl_configbutton: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._tl_configbutton;
+ },
+ set: function(newVal) {
+ this._tl_configbutton = newVal;
+ }
},
-
-
- /* === BEGIN: Models === */
_currentDocument: {
value : null
},
-
currentDocument : {
get : function() {
return this._currentDocument;
@@ -157,14 +298,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- handleChange: {
- value: function() {
- if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
- this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
- }
- }
- },
-
_currentSelectedContainer: {
value: null
},
@@ -199,7 +332,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_arrLayers:{
value:[]
},
-
arrLayers:{
serializable:true,
get:function () {
@@ -215,7 +347,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_temparrLayers:{
value:[]
},
-
temparrLayers:{
get:function () {
return this._temparrLayers;
@@ -229,7 +360,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_layerRepetition:{
value:null
},
-
layerRepetition:{
get:function () {
return this._layerRepetition;
@@ -280,7 +410,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_currentLayerNumber:{
value:0
},
-
currentLayerNumber:{
get:function () {
return this._currentLayerNumber;
@@ -293,18 +422,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- _currentLayerSelected:{
- value: false
- },
- currentLayerSelected:{
- get:function () {
- return this._currentLayerSelected;
- },
- set:function (newVal) {
- this._currentLayerSelected = newVal;
- this.cacheTimeline();
- }
- },
_currentElementsSelected: {
value: []
},
@@ -362,7 +479,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_millisecondsOffset:{
value:1000
},
-
millisecondsOffset:{
get:function () {
return this._millisecondsOffset;
@@ -379,7 +495,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_masterDuration:{
value:0
},
-
masterDuration:{
serializable:true,
get:function () {
@@ -396,7 +511,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_trackRepetition:{
value:null
},
-
trackRepetition:{
get:function () {
return this._trackRepetition;
@@ -409,7 +523,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_selectedKeyframes:{
value:[]
},
-
selectedKeyframes:{
serializable:true,
get:function () {
@@ -423,7 +536,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_selectedTweens:{
value:[]
},
-
selectedTweens:{
serializable:true,
get:function () {
@@ -437,7 +549,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_breadCrumbContainer:{
value:null
},
-
breadCrumbContainer:{
get:function () {
return this._breadCrumbContainer;
@@ -469,15 +580,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_dragAndDropHelper : {
value: false
},
+
_dragAndDropHelperCoords: {
value: false
},
+
_dragAndDropHelperOffset : {
value: false
},
- _dragLayerID : {
- value: null
- },
+
_draggingType: {
value: false
},
@@ -502,6 +613,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _dragLayerID : {
+ value: null
+ },
dragLayerID : {
get: function() {
return this._dragLayerID;
@@ -540,8 +654,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
dragAndDropDirection = -1;
}
targetIndex = dropLayerIndex + dragAndDropDirection;
-
- // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
// Get the target DOM element.
if (typeof(this.arrLayers[targetIndex]) !== "undefined") {
@@ -553,7 +665,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Splice
for (i = 0; i < dragLayerIndexesLength; i++) {
var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]];
- // Splice arrLayers
this.arrLayers.splice(this.currentLayersSelected[i], 1);
this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
}
@@ -574,15 +685,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
_needsDOMManipulation: {
value: false
},
+
_appendHelper: {
value: false
},
+
_deleteHelper: {
value: false
},
+
_scrollTracks: {
value: false
},
@@ -600,16 +715,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
-
useAbsolutePosition:{
value:true
},
+
_currentDocumentUuid: {
value: false
},
+
_ignoreSelectionChanges: {
value: false
},
+
// is the control key currently being pressed (used for multiselect)
_isControlPressed: {
value: false
@@ -619,6 +736,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_isShiftPressed: {
value: false
},
+
+ // Hack to ignore extra container change event during document switching.
+ _ignoreNextContainerChange: {
+ value: true
+ },
/* === END: Models === */
/* === BEGIN: Draw cycle === */
@@ -706,8 +828,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Do we need to scroll the layers?
if (this._areTracksCollapsing !== false) {
- //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
- //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\
this.layout_tracks.scrollTop = this._areTracksCollapsing;
this._areTracksCollapsing = false;
}
@@ -715,6 +835,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
},
/* === END: Draw cycle === */
+
/* === BEGIN: Controllers === */
// Create an empty layer template object with minimal defaults and return it for use
createLayerTemplate:{
@@ -770,7 +891,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
- this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
for (i = 0; i < hashLength; i++ ) {
if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
@@ -789,6 +909,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
// Initialize Timeline cache in currentDocument.
initTimelineCache: {
value: function() {
@@ -805,62 +926,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- // 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
-
- /* Example new style
- newStyle.styleID = styleID;
- newStyle.whichView = "propval"; // Which view do we want to show, usually property/value view (see Style)
- newStyle.editorProperty = "top"; // the style property
- newStyle.editorValue = 0; // The current value
- 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 = [];
-
- return returnArray;
-
- }
- },
-
// Bind all document-specific events (pass in true to unbind)
_bindDocumentEvents : {
value: function(boolUnbind) {
- /*
- var arrEvents = [ "stageElement",
- "deleteLayer",
- "elementAdded",
- "elementsRemoved",
- "elementReplaced",
- "selectionChange"],
- */
var arrEvents = ["elementAdded",
"elementsRemoved",
"selectionChange"],
@@ -887,12 +955,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.layout_tracks = this.element.querySelector(".layout-tracks");
this.layout_markers = this.element.querySelector(".layout_markers");
-
- // Bind the event handler for the document change events
- //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
+ // Bind the event handler for the document close events
this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
- //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
- //this.eventManager.addEventListener("breadCrumbBinding",this,false);
// Bind drag and drop event handlers
this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
@@ -908,12 +972,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
document.addEventListener("click", this.handleDocumentClick.bind(this), false);
// Add some event handlers
- this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
- //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
- //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.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);
+ this.timeline_leftpane.addEventListener("click", this.handleTimelineLeftPanelClick.bind(this), false);
+ this.layout_tracks.addEventListener("scroll", this.handleLayerScroll.bind(this), false);
+ this.user_layers.addEventListener("scroll", this.handleLayerScroll.bind(this), false);
+ this.end_hottext.addEventListener("changing", this.handleTrackContainerWidthChange.bind(this), false);
this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
@@ -923,7 +985,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
-
this.addPropertyChangeListener("currentDocument.model.domContainer", this);
// Start the panel out in disabled mode by default
@@ -937,19 +998,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Initialize the timeline for a document.
// Called when a document is opened (new or existing), or when documents are switched.
- _ignoreNextContainerChange: {
- value: true
- },
initTimelineForDocument:{
value:function () {
var myIndex;
this.drawTimeMarkers();
+
// Document switching
// Check to see if we have saved timeline information in the currentDocument.
- // console.log("TimelinePanel.initTimelineForDocument");
-
if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
- // console.log('TimelinePanel.initTimelineForDocument: new Document');
// No, we have no information stored.
// This could mean we are creating a new file, OR are opening an existing file.
@@ -977,9 +1033,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
} else if (this.application.ninja.currentDocument.setLevel) {
- // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
// Information stored, but we're moving up or down in the breadcrumb.
-
var i = 0,
hash = this.application.ninja.currentDocument.tlBreadcrumbHash,
hashLength = hash.length,
@@ -996,7 +1050,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
- // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method.
+ // Possibly nothing was in the hash, fall back to old restoreLayer method.
if (boolHashed === false) {
for (myIndex = 0; parentNode.children[myIndex]; myIndex++) {
this._openDoc = true;
@@ -1011,12 +1065,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.resetMasterDuration();
} else {
- // console.log('TimelinePanel.initTimelineForDocument: else fallback');
// we do have information stored. Use it.
var i = 0,
tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length;
-
+ // Hack to ignore next container change event
this._ignoreNextContainerChange = true;
// We're reading from the cache, not writing to it.
@@ -1029,14 +1082,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
this.arrLayers = this.application.ninja.currentDocument.tlArrLayers;
this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
- this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
-
-
- //debugger;
- if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
-// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer;
- }
this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
@@ -1067,14 +1113,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.deselectTweens();
// Reset visual appearance
- // TODO: Maybe playhead position should be stored per document, so we can persist between document switch?
this.application.ninja.timeline.playhead.style.left = "-2px";
this.application.ninja.timeline.playheadmarker.style.left = "0px";
this.application.ninja.timeline.updateTimeText(0.00);
this.timebar.style.width = "0px";
this.checkable_animated.classList.remove("checked");
this.currentLayerNumber = 0;
- this.currentLayerSelected = false;
this.currentLayersSelected = false;
this.currentElementsSelected = [];
this.selectedKeyframes = [];
@@ -1082,7 +1126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this._captureSelection = false;
this._openDoc = false;
this.end_hottext.value = 25;
- this.updateTrackContainerWidth();
+ this.handleTrackContainerWidthChange();
+
// Clear the repetitions
if (this.arrLayers.length > 0) {
this.arrLayers = [];
@@ -1091,130 +1136,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.resetMasterDuration();
}
},
-
- handleDocumentChange:{
- value:function () {
-
- }
- },
-
- handlePlayButtonClick:{
- value:function(ev){
- this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
-
- if (this.application.ninja.appModel.livePreview) {
- this.play_button.classList.remove("playbutton");
- this.play_button.classList.add("pausebutton");
-
- } else {
- this.play_button.classList.remove("pausebutton");
- this.play_button.classList.add("playbutton");
- }
- }
- },
-
- handleKeyframeShortcut:{
- value:function(action){
- var tempEv = {};
- tempEv.offsetX = this.playheadmarker.offsetLeft;
- tempEv.actionType = action;
-
- if (this.currentLayersSelected === false) {
- // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently.
- return;
- }
-
- // Okay. We need to get the correct layer(s). For each currentElementSelected,
- // loop through trackRepetition.childComponents and compare to stageElement.
- // If they match, that's one of the components that needs the event.
- var i = 0,
- j = 0,
- currentElementsSelectedLength = this.currentElementsSelected.length,
- trackRepLength = this.trackRepetition.childComponents.length,
- arrTargetIndexes = [],
- arrTargetIndexesLength = 0;
-
-
- for (i = 0; i < trackRepLength; i++) {
- var currentElement = this.trackRepetition.childComponents[i].stageElement;
- for (j = 0; j < currentElementsSelectedLength; j++) {
- if (currentElement === this.currentElementsSelected[j]) {
- arrTargetIndexes.push(i);
- }
- }
- }
- arrTargetIndexesLength = arrTargetIndexes.length;
-
- // Now we have an array of things that need to handle the event.
- for (i = 0; i < arrTargetIndexesLength; i++) {
- this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv);
- }
- }
- },
-
- updateTrackContainerWidth:{
- value:function () {
- this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
- this.master_track.style.width = (this.end_hottext.value * 80) + "px";
- this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
- if (this.timeMarkerHolder) {
- this.time_markers.removeChild(this.timeMarkerHolder);
- }
- this.drawTimeMarkers();
- }
- },
synchScrollbars: {
value: function(intScrollBy) {
- //this.updateLayerScroll();
- //this.user_layers.scrollTop = 0;
- //this.layout_tracks.scrollTop = this.user_layers.scrollTop;
- //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy;
this.needsDraw = true;
-
}
},
- updateLayerScroll:{
- value:function () {
- //console.log("TimelinePanel.updateLayerScroll")
- this._areTracksScrolling = true;
- this.needsDraw = true;
-
- }
- },
-
- startPlayheadTracking:{
- value:function () {
- this.time_markers.onmousemove = this.updatePlayhead.bind(this);
- }
- },
-
- stopPlayheadTracking:{
- value:function () {
- this.time_markers.onmousemove = null;
- }
- },
-
- updatePlayhead:{
- value:function (event) {
- var clickedPosition = event.target.offsetLeft + event.offsetX;
- this.playhead.style.left = (clickedPosition - 2) + "px";
- this.playheadmarker.style.left = clickedPosition + "px";
- var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
- var currentMillisec = currentMillisecPerPixel * clickedPosition;
- this.updateTimeText(currentMillisec);
- }
- },
-
- // Event handler for changes in stage selection.
- handleSelectionChange: {
- value:function (event) {
- this.updateLayerSelection();
- }
- },
-
// Select the layers whose indexes are passed in as arrSelectedIndexes.
// Pass in an empty array to clear all selections.
selectLayers:{
@@ -1372,152 +1301,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- timelineLeftPanelMousedown: {
- value:function (event) {
- var ptrParent = nj.queryParentSelector(event.target, ".container-layer"),
- i = 0,
- arrLayers = document.querySelectorAll(".container-layer"),
- arrLayersLength = arrLayers.length,
- targetIndex = 0,
- isAlreadySelected = false,
- indexAlreadySelected = -5,
- indexLastClicked = 0,
- ua = navigator.userAgent.toLowerCase(),
- boolCommandControlKeyIsPressed = false;
-
- // Check to see if either the Command key (macs) or Control key (windows) is being pressed
- if (ua.indexOf("mac") > -1) {
- if (event.metaKey === true) {
- boolCommandControlKeyIsPressed = true;
- }
- } else {
- if (this._isControlPressed === true) {
- boolCommandControlKeyIsPressed = true;
- }
- }
-
-
- // Did the mousedown event originate within a layer?
- if (ptrParent === false) {
- // No it did not. Do nothing.
- return;
- }
-
- // Get the targetIndex, the index in the arrLayers of the
- // layer that was just clicked on
- for (i = 0; i < arrLayersLength; i++) {
- if (arrLayers[i] == ptrParent) {
- targetIndex = i;
- }
- }
-
- // Did we just click on a layer that's already selected?
- if (this.currentLayersSelected !== false) {
- for (i = 0; i < this.currentLayersSelected.length; i++) {
- if (this.currentLayersSelected[i] === targetIndex) {
- indexAlreadySelected = i;
- }
- }
- }
- if (indexAlreadySelected > -1) {
- isAlreadySelected = true;
- }
-
- // Now, do the selection based on all of that information.
- if (this.currentLayersSelected.length === 0) {
- // Nothing selected yet, so just push the new index into the array.
- this.currentLayersSelected.push(targetIndex);
- } else {
- // Something is already selected. What do do depends on whether
- // or not other keys are pressed.
- if (boolCommandControlKeyIsPressed === true) {
- // Control or Command key is being pressed, so we need to
- // either add the current layer to selectedLayers
- // or remove it if it's already there.
- if (this.currentLayersSelected === false) {
- this.currentLayersSelected = [];
- }
- if (isAlreadySelected === false) {
- this.currentLayersSelected.push(targetIndex);
- } else {
- this.currentLayersSelected.splice(indexAlreadySelected, 1);
- }
- this.lastLayerClicked = targetIndex;
- } else if (this._isShiftPressed === true) {
- // The shift key is being pressed.
- // Start by selecting the lastLayerClicked
- if (this.currentLayersSelected === false) {
- this.currentLayersSelected = [];
- //this.currentLayerSelected = false;
- }
- this.currentLayersSelected = [this.lastLayerClicked];
- // Add all the layers between lastLayerClicked and targetIndex
- if (targetIndex > this.lastLayerClicked) {
- for (i = this.lastLayerClicked+1; i <= targetIndex; i++) {
- this.currentLayersSelected.push(i);
- }
- } else if (targetIndex < this.lastLayerClicked) {
- for (i = targetIndex; i < this.lastLayerClicked; i++) {
- this.currentLayersSelected.push(i);
- }
- }
- } else {
- // No key is pressed, so just select the element
- // and update lastLayerClicked
- this.currentLayersSelected = [targetIndex];
- this.lastLayerClicked = targetIndex;
- }
- }
- this.selectLayers(this.currentLayersSelected);
- this.updateStageSelection();
- }
- },
-
- timelineLeftPaneKeydown: {
- value: function(event) {
- var ua = navigator.userAgent.toLowerCase(),
- boolIsMac = false;
- if (ua.indexOf("mac") > -1) {
- boolIsMac = true;
- }
- if (event.keyCode === 16) {
- // Shift key has been pressed
- this._isShiftPressed = true;
- }
- if ((event.keyCode === 17) && !boolIsMac) {
- // Control key has been pressed
- this._isControlPressed = true;
- }
- /*
- if (event.metaKey === true) {
- this._isControlPressed = true;
- }
- */
- }
- },
-
- timelineLeftPaneKeyup: {
- value: function(event) {
- var ua = navigator.userAgent.toLowerCase(),
- boolIsMac = false;
- if (ua.indexOf("mac") > -1) {
- boolIsMac = true;
- }
- if (event.keyCode === 16) {
- // Shift key has been released
- this._isShiftPressed = false;
- }
- if ((event.keyCode === 17) && !boolIsMac) {
- // Control key has been released
- this._isControlPressed = false;
- }
- if (event.metaKey === false) {
- this._isControlPressed = false;
- }
- }
- },
-
-
createStageElementsAt: {
value:function (isPaste, arrElements) {
@@ -1561,14 +1344,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
if (this.checkable_animated.classList.contains("checked")) {
thingToPush.layerData.isVisible = false;
}
- //arrNewLayers.push(thingToPush);
this.arrLayers.splice(targetIndex, 0, thingToPush);
}
- //console.log(arrNewLayers);
- //console.log(thingToPush);
-
- //this.arrLayers.splice(targetIndex, 0, arrNewLayers);
-
}
},
@@ -1578,11 +1355,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush = this.createLayerTemplate();
this.currentLayerNumber = this.currentLayerNumber + 1;
-// stageElementName = "Layer " + this.currentLayerNumber;
-// if(ele.dataset.storedLayerName){
-// stageElementName = ele.dataset.storedLayerName;
-// }
if(ele.id){
thingToPush.layerData.layerName = ele.id;
}
@@ -1590,16 +1363,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
thingToPush.parentElement = this.currentDocument.model.domContainer;
if (this._openDoc) {
- //thingToPush.layerData.elementsList.push(ele);
thingToPush.layerData.stageElement = ele;
}
if (this.checkable_animated.classList.contains("checked")) {
thingToPush.layerData.isVisible = false;
}
- // Are there styles to add?
- thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
- thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
+ // Initialize arrays for styles and their associated tracks;
+ // These will be filled (if necessary) in TimelineTrack.
+ thingToPush.layerData.arrLayerStyles = [];
+ thingToPush.layerData.arrStyleTracks = [];
// Add the layer to the repetition
this.temparrLayers.splice(0, 0, thingToPush);
@@ -1607,7 +1380,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
this._openDoc = false;
-
}
},
@@ -1652,39 +1424,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- handleElementAdded:{
- value:function(event) {
- var i = 0,
- targetIndex = 0;
- // One or more elements have been added to the stage.
- // We need to add them to the timeline.
- if (typeof(event.detail.length) === "undefined") {
- // This is a standard element creation event.
- this.createStageElementsAt(false, [event.detail]);
- } else {
- // This is a paste action, because event.detail has more than one item in it.
- this.createStageElementsAt(true, event.detail);
- }
- }
- },
-
- handleElementsRemoved:{
- value:function (event) {
- this.deleteLayers(event.detail);
- }
- },
-
- handleElementReplaced:{
- value:function(event){
- // TODO: this needs to be updated. Not sure when an elementReplaced event will be fired?
- /*
- this.currentLayerSelected.layerData.elementsList.pop();
- this.currentLayerSelected.layerData.elementsList.push(event.detail.data.newChild);
- this.currentLayerSelected.layerData.animatedElement = event.detail.data.newChild;
- */
- }
- },
-
drawTimeMarkers:{
value:function () {
this.timeMarkerHolder = document.createElement("div");
@@ -1746,16 +1485,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- selectLayer:{
- value:function (layerIndex, userSelection) {
- //console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----=");
- this.selectLayers([layerIndex]);
- if (userSelection === true) {
- this.updateStageSelection();
- }
- }
- },
-
// Get the index where a layer should be inserted based on selection.
// If nothing is selected, returns false.
// Used by ElementController.addElement.
@@ -1819,46 +1548,380 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
- handleConfigButtonClick: {
- value: function(event) {
- event.stopPropagation();
- this.handleCheckableClick(event);
-
- }
- },
- handleDocumentClick: {
- value: function(event) {
- if (this.tl_configbutton.classList.contains("checked")) {
- this.tl_configbutton.classList.remove("checked");
- }
- //
- if (this.currentOpenSpanMenu !== false) {
- this.currentOpenSpanMenu.hideEasingMenu();
- this.currentOpenSpanMenu = false;
+
+ buildDragHelper: {
+ value: function() {
+ var myContainer = document.createElement("div"),
+ i = 0,
+ currentLayersSelectedLength = this.currentLayersSelected.length;
+
+ for (i = 0; i < currentLayersSelectedLength; i++) {
+ var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true);
+ currentClone.classList.add("layerSelected");
+ myContainer.appendChild(currentClone);
}
+
+ this._dragAndDropHelper = myContainer;
+ this._dragAndDropHelper.style.opacity = 0.8;
+ this._dragAndDropHelper.style.position = "absolute";
+ this._dragAndDropHelper.style.top = "0px";
+ this._dragAndDropHelper.style.left = "0px";
+ this._dragAndDropHelper.style.zIndex = 700;
+
+ this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
+ this._dragAndDropHelper.classList.add("timeline-dnd-helper");
}
},
-
- handleAnimatedClick: {
- value: function(event) {
- if (typeof(this.application.ninja.currentDocument) === "undefined") {
- return;
- }
- if (this.application.ninja.currentDocument == null) {
- return;
- }
- this.handleCheckableClick(event);
- this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked");
- var boolHide = false,
- i = 0,
- arrLayersLength = this.arrLayers.length;
- if (event.currentTarget.classList.contains("checked")) {
- // Hide layers with isAnimated = false;
- boolHide = true;
- }
-
- for (i = 0; i < arrLayersLength; i++) {
- if (boolHide) {
+
+ // Trigger the layer/track data binding
+ triggerLayerBinding : {
+ value: function(intIndex) {
+ this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding;
+ }
+ },
+
+ getActiveLayerIndex: {
+ value: function() {
+ var i = 0,
+ returnVal = false,
+ arrLayersLength = this.arrLayers.length;
+ for (i = 0; i < arrLayersLength; i++) {
+ if (this.arrLayers[i].layerData.isSelected === true) {
+ returnVal = i;
+ }
+ }
+ return returnVal;
+ }
+ },
+ /* === END: Controllers === */
+
+ /* === BEGIN: Event Handlers === */
+ handleChange: {
+ value: function() {
+ if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+ this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
+ }
+ }
+ },
+
+ handleDocumentChange:{
+ value:function () {
+
+ }
+ },
+
+ handlePlayButtonClick:{
+ value:function(ev){
+ this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
+
+ if (this.application.ninja.appModel.livePreview) {
+ this.play_button.classList.remove("playbutton");
+ this.play_button.classList.add("pausebutton");
+
+ } else {
+ this.play_button.classList.remove("pausebutton");
+ this.play_button.classList.add("playbutton");
+ }
+ }
+ },
+
+ handleKeyframeShortcut:{
+ value:function(action){
+ var tempEv = {};
+ tempEv.offsetX = this.playheadmarker.offsetLeft;
+ tempEv.actionType = action;
+
+ if (this.currentLayersSelected === false) {
+ // we do not have a layer selected. We should growl at the user. For now, this will fail silently.
+ return;
+ }
+
+ // We need to get the correct layer(s). For each currentElementSelected,
+ // loop through trackRepetition.childComponents and compare to stageElement.
+ // If they match, that's one of the components that needs the event.
+ var i = 0,
+ j = 0,
+ currentElementsSelectedLength = this.currentElementsSelected.length,
+ trackRepLength = this.trackRepetition.childComponents.length,
+ arrTargetIndexes = [],
+ arrTargetIndexesLength = 0;
+
+
+ for (i = 0; i < trackRepLength; i++) {
+ var currentElement = this.trackRepetition.childComponents[i].stageElement;
+ for (j = 0; j < currentElementsSelectedLength; j++) {
+ if (currentElement === this.currentElementsSelected[j]) {
+ arrTargetIndexes.push(i);
+ }
+ }
+ }
+ arrTargetIndexesLength = arrTargetIndexes.length;
+
+ // Now we have an array of things that need to handle the event.
+ for (i = 0; i < arrTargetIndexesLength; i++) {
+ this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv);
+ }
+ }
+ },
+
+ handleTrackContainerWidthChange:{
+ value:function () {
+ this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
+ this.master_track.style.width = (this.end_hottext.value * 80) + "px";
+ this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
+ if (this.timeMarkerHolder) {
+ this.time_markers.removeChild(this.timeMarkerHolder);
+ }
+ this.drawTimeMarkers();
+ }
+ },
+
+ handleLayerScroll: {
+ value:function () {
+ this._areTracksScrolling = true;
+ this.needsDraw = true;
+
+ }
+ },
+
+ startPlayheadTracking:{
+ value:function () {
+ this.time_markers.onmousemove = this.updatePlayhead.bind(this);
+ }
+ },
+
+ stopPlayheadTracking:{
+ value:function () {
+ this.time_markers.onmousemove = null;
+ }
+ },
+
+ updatePlayhead:{
+ value:function (event) {
+ var clickedPosition = event.target.offsetLeft + event.offsetX;
+ this.playhead.style.left = (clickedPosition - 2) + "px";
+ this.playheadmarker.style.left = clickedPosition + "px";
+ var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
+ var currentMillisec = currentMillisecPerPixel * clickedPosition;
+ this.updateTimeText(currentMillisec);
+ }
+ },
+
+ // Event handler for changes in stage selection.
+ handleSelectionChange: {
+ value:function (event) {
+ this.updateLayerSelection();
+ }
+ },
+
+ handleTimelineLeftPanelClick: {
+ value:function (event) {
+ var ptrParent = nj.queryParentSelector(event.target, ".container-layer"),
+ i = 0,
+ arrLayers = document.querySelectorAll(".container-layer"),
+ arrLayersLength = arrLayers.length,
+ targetIndex = 0,
+ isAlreadySelected = false,
+ indexAlreadySelected = -5,
+ indexLastClicked = 0,
+ ua = navigator.userAgent.toLowerCase(),
+ boolCommandControlKeyIsPressed = false;
+
+ // Check to see if either the Command key (macs) or Control key (windows) is being pressed
+ if (ua.indexOf("mac") > -1) {
+ if (event.metaKey === true) {
+ boolCommandControlKeyIsPressed = true;
+ }
+ } else {
+ if (this._isControlPressed === true) {
+ boolCommandControlKeyIsPressed = true;
+ }
+ }
+
+
+ // Did the mousedown event originate within a layer?
+ if (ptrParent === false) {
+ // No it did not. Do nothing.
+ return;
+ }
+
+ // Get the targetIndex, the index in the arrLayers of the
+ // layer that was just clicked on
+ for (i = 0; i < arrLayersLength; i++) {
+ if (arrLayers[i] == ptrParent) {
+ targetIndex = i;
+ }
+ }
+
+ // Did we just click on a layer that's already selected?
+ if (this.currentLayersSelected !== false) {
+ for (i = 0; i < this.currentLayersSelected.length; i++) {
+ if (this.currentLayersSelected[i] === targetIndex) {
+ indexAlreadySelected = i;
+ }
+ }
+ }
+ if (indexAlreadySelected > -1) {
+ isAlreadySelected = true;
+ }
+
+ // Now, do the selection based on all of that information.
+ if (this.currentLayersSelected.length === 0) {
+ // Nothing selected yet, so just push the new index into the array.
+ this.currentLayersSelected.push(targetIndex);
+ } else {
+ // Something is already selected. What do do depends on whether
+ // or not other keys are pressed.
+ if (boolCommandControlKeyIsPressed === true) {
+ // Control or Command key is being pressed, so we need to
+ // either add the current layer to selectedLayers
+ // or remove it if it's already there.
+ if (this.currentLayersSelected === false) {
+ this.currentLayersSelected = [];
+ }
+ if (isAlreadySelected === false) {
+ this.currentLayersSelected.push(targetIndex);
+ } else {
+ this.currentLayersSelected.splice(indexAlreadySelected, 1);
+ }
+ this.lastLayerClicked = targetIndex;
+ } else if (this._isShiftPressed === true) {
+ // The shift key is being pressed.
+ // Start by selecting the lastLayerClicked
+ if (this.currentLayersSelected === false) {
+ this.currentLayersSelected = [];
+ }
+ this.currentLayersSelected = [this.lastLayerClicked];
+ // Add all the layers between lastLayerClicked and targetIndex
+ if (targetIndex > this.lastLayerClicked) {
+ for (i = this.lastLayerClicked+1; i <= targetIndex; i++) {
+ this.currentLayersSelected.push(i);
+ }
+ } else if (targetIndex < this.lastLayerClicked) {
+ for (i = targetIndex; i < this.lastLayerClicked; i++) {
+ this.currentLayersSelected.push(i);
+ }
+ }
+ } else {
+ // No key is pressed, so just select the element
+ // and update lastLayerClicked
+ this.currentLayersSelected = [targetIndex];
+ this.lastLayerClicked = targetIndex;
+ }
+ }
+ this.selectLayers(this.currentLayersSelected);
+ this.updateStageSelection();
+ }
+ },
+
+ timelineLeftPaneKeydown: {
+ value: function(event) {
+ var ua = navigator.userAgent.toLowerCase(),
+ boolIsMac = false;
+ if (ua.indexOf("mac") > -1) {
+ boolIsMac = true;
+ }
+ if (event.keyCode === 16) {
+ // Shift key has been pressed
+ this._isShiftPressed = true;
+ }
+ if ((event.keyCode === 17) && !boolIsMac) {
+ // Control key has been pressed
+ this._isControlPressed = true;
+ }
+ }
+ },
+
+ timelineLeftPaneKeyup: {
+ value: function(event) {
+ var ua = navigator.userAgent.toLowerCase(),
+ boolIsMac = false;
+ if (ua.indexOf("mac") > -1) {
+ boolIsMac = true;
+ }
+ if (event.keyCode === 16) {
+ // Shift key has been released
+ this._isShiftPressed = false;
+ }
+ if ((event.keyCode === 17) && !boolIsMac) {
+ // Control key has been released
+ this._isControlPressed = false;
+ }
+ if (event.metaKey === false) {
+ this._isControlPressed = false;
+ }
+ }
+ },
+
+ handleElementAdded:{
+ value:function(event) {
+ var i = 0,
+ targetIndex = 0;
+ // One or more elements have been added to the stage.
+ // We need to add them to the timeline.
+ if (typeof(event.detail.length) === "undefined") {
+ // This is a standard element creation event.
+ this.createStageElementsAt(false, [event.detail]);
+ } else {
+ // This is a paste action, because event.detail has more than one item in it.
+ this.createStageElementsAt(true, event.detail);
+ }
+ }
+ },
+
+ handleElementsRemoved:{
+ value:function (event) {
+ this.deleteLayers(event.detail);
+ }
+ },
+
+ handleElementReplaced:{
+ value:function(event){
+ // TODO: Is this event even fired? It's in element-controller.
+ }
+ },
+
+ handleConfigButtonClick: {
+ value: function(event) {
+ event.stopPropagation();
+ this.handleCheckableClick(event);
+
+ }
+ },
+
+ handleDocumentClick: {
+ value: function(event) {
+ if (this.tl_configbutton.classList.contains("checked")) {
+ this.tl_configbutton.classList.remove("checked");
+ }
+ //
+ if (this.currentOpenSpanMenu !== false) {
+ this.currentOpenSpanMenu.hideEasingMenu();
+ this.currentOpenSpanMenu = false;
+ }
+ }
+ },
+
+ handleAnimatedClick: {
+ value: function(event) {
+ if (typeof(this.application.ninja.currentDocument) === "undefined") {
+ return;
+ }
+ if (this.application.ninja.currentDocument == null) {
+ return;
+ }
+ this.handleCheckableClick(event);
+ this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked");
+ var boolHide = false,
+ i = 0,
+ arrLayersLength = this.arrLayers.length;
+ if (event.currentTarget.classList.contains("checked")) {
+ // Hide layers with isAnimated = false;
+ boolHide = true;
+ }
+
+ for (i = 0; i < arrLayersLength; i++) {
+ if (boolHide) {
// Hide layers with isAnimated = false
if (this.arrLayers[i].layerData.isTrackAnimated === false) {
this.arrLayers[i].layerData.isVisible = false;
@@ -1872,6 +1935,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+
handleCheckableClick: {
value: function(event) {
if (event.currentTarget.classList.contains("checked")) {
@@ -1967,14 +2031,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- // Trigger the layer/track data binding
- triggerLayerBinding : {
- value: function(intIndex) {
- this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding;
- }
- },
-
-
/* Layer drag and drop */
handleLayerDragStart : {
value: function(event) {
@@ -2008,33 +2064,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- buildDragHelper: {
- value: function() {
- var myContainer = document.createElement("div"),
- i = 0,
- currentLayersSelectedLength = this.currentLayersSelected.length;
-
- for (i = 0; i < currentLayersSelectedLength; i++) {
- var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true);
- currentClone.classList.add("layerSelected");
- myContainer.appendChild(currentClone);
- }
-
- this._dragAndDropHelper = myContainer;
- this._dragAndDropHelper.style.opacity = 0.8;
- this._dragAndDropHelper.style.position = "absolute";
- this._dragAndDropHelper.style.top = "0px";
- this._dragAndDropHelper.style.left = "0px";
- this._dragAndDropHelper.style.zIndex = 700;
-
- this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
- this._dragAndDropHelper.classList.add("timeline-dnd-helper");
- }
- },
-
handleLayerDragover: {
value: function(event) {
-
// If this isn't a layer event we don't do anything.
if (this.draggingType !== "layer") {
return;
@@ -2059,9 +2090,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.needsDraw = true;
}
},
+
handleLayerDragEnd : {
value: function(event) {
-
// If this isn't a layer event we don't do anything.
if (this.draggingType !== "layer") {
return;
@@ -2071,9 +2102,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+
handleLayerDrop : {
value: function(event) {
-
// If this isn't a layer event we don't do anything.
if (this.draggingType !== "layer") {
return;
@@ -2088,7 +2119,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
/* Keyframe drag and drop */
handleKeyframeDragover: {
value: function(event) {
-
// If this isn't a keyframe drag and drop event, we don't want to do anything.
if (this.draggingType !== "keyframe") {
return;
@@ -2122,9 +2152,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
return false;
}
},
+
handleKeyframeDrop: {
value: function(event) {
-
// If this isn't a keyframe drop event, we don't want to do anything.
if (this.draggingType !== "keyframe") {
return;
@@ -2178,51 +2208,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
return false;
}
- },
-
- getActiveLayerIndex: {
- value: function() {
- var i = 0,
- returnVal = false,
- arrLayersLength = this.arrLayers.length;
- for (i = 0; i < arrLayersLength; i++) {
- if (this.arrLayers[i].layerData.isSelected === true) {
- returnVal = i;
- }
- }
- return returnVal;
- }
- },
- /* === END: Controllers === */
-
- /* === BEGIN: Logging routines === */
- _boolDebug:{
- enumerable:false,
- value:false // set to true to enable debugging to console; false for turning off all debugging.
- },
- boolDebug:{
- get:function () {
- return this._boolDebug;
- },
- set:function (boolDebugSwitch) {
- this._boolDebug = boolDebugSwitch;
- }
- },
- log:{
- value:function (strMessage) {
- if (this.boolDebug) {
- console.log(this.getLineNumber() + ": " + strMessage);
- }
- }
- },
- getLineNumber:{
- value:function () {
- try {
- throw new Error('bazinga')
- } catch (e) {
- return e.stack.split("at")[3].split(":")[2];
- }
- }
}
- /* === END: Logging routines === */
+ /* === END: Event Handlers === */
+
});
\ No newline at end of file
--
cgit v1.2.3
From a869cd3619b783e29cf320f46713b0c790edb15f Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 10:57:37 -0700
Subject: Update copyright boilerplate
---
.../Timeline/TimelinePanel.reel/TimelinePanel.html | 32 +++++++++++++++++---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 34 ++++++++++++++++++----
.../TimelinePanel.reel/css/TimelinePanel.css | 30 ++++++++++++++++++-
.../TimelinePanel.reel/scss/TimelinePanel.scss | 32 +++++++++++++++++---
4 files changed, 114 insertions(+), 14 deletions(-)
(limited to 'js/panels/Timeline/TimelinePanel.reel')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index f6fae9b8..57285704 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,9 +1,33 @@
+Copyright (c) 2012, Motorola Mobility, Inc
+All Rights Reserved.
+BSD License.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ - Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+ - Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ - Neither the name of Motorola Mobility nor the names of its contributors
+ may be used to endorse or promote products derived from this software
+ without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+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/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3d31a50b..3dc2e514 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,8 +1,32 @@
/*
- 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.
- */
+Copyright (c) 2012, Motorola Mobility, Inc
+All Rights Reserved.
+BSD License.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ - Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+ - Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ - Neither the name of Motorola Mobility nor the names of its contributors
+ may be used to endorse or promote products derived from this software
+ without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+ */
var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component,
@@ -2254,4 +2278,4 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
/* === END: Logging routines === */
-});
\ No newline at end of file
+});
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 6daedde8..f7e9234e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -1,5 +1,33 @@
@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. */
+/*
+Copyright (c) 2012, Motorola Mobility, Inc
+All Rights Reserved.
+BSD License.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ - Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+ - Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ do