- -

- - -

00:00:00

- - - -

Master Layer

- -

- - -

- -

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 44129743..9bf51e60 100755 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1,892 +1,295 @@ +/* +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. + */ + var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var Layer = require("js/panels/Timeline/Layer.reel").Layer; -var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; -var nj = require("js/lib/NJUtils").NJUtils; -var ElementMediator = require("js/mediators/element-mediator").ElementMediator; +var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - hasTemplate:{ - value:true - }, - - /* === BEGIN: Models === */ - _arrLayers:{ - value:[] - }, - - arrLayers:{ - get:function () { - return this._arrLayers; - }, - set:function (newVal) { - this._arrLayers = newVal; - } - }, - - _layerRepetition:{ - value:null - }, + tmpImg: { value: null}, - layerRepetition:{ - get:function () { - return this._layerRepetition; - }, - set:function (newVal) { - this._layerRepetition = newVal; + templateDidLoad: { + value: function() { + /* + this.tmpImg = document.createElement("img"); + this.tmpImg.width = 1879; + this.tmpImg.height = 440; + this.tmpImg.src = "images/timeline/timeline.png"; + */ } }, - _currentLayerNumber:{ - value:0 - }, - - currentLayerNumber:{ - get:function () { - return this._currentLayerNumber; - }, - set:function (newVal) { - if (newVal !== this._currentLayerNumber) { - this._currentLayerNumber = newVal; - } + prepareForDraw: { + value: function() { + this.element.style.background = "url('images/timeline/timeline.png')"; + this.element.style.width = "100%"; + this.element.style.height = "400px"; + this.element.style.backgroundPosition = "-5px -40px"; } }, - currentLayerSelected:{ - value: null - }, - - currentTrackSelected:{ - value: null - }, - - millisecondsOffset:{ - value:1000 - }, - - _arrTracks:{ - serializable:true, - value:[] - }, + init : { + value : function() + { + this.buildTimelineView(); - arrTracks:{ - serializable:true, - get:function () { - return this._arrTracks; - }, - set:function (newVal) { - this._arrTracks = newVal; } }, - _trackRepetition:{ - serializable:true, - value:null + breadCrumbContainer:{ + value:null, + writable:true, + enumerable:true }, - trackRepetition:{ - serializable:true, - get:function () { - return this._trackRepetition; - }, - set:function (newVal) { - this._trackRepetition = newVal; - } + controlsContainer:{ + value:null, + writable:true, + enumerable:true }, - _selectedKeyframes:{ - value:[] + timelineGutter:{ + value:null, + writable:true, + enumerable:true }, - selectedKeyframes:{ - serializable:true, - get:function () { - return this._selectedKeyframes; - }, - set:function (newVal) { - this._selectedKeyframes = newVal; - } + userLayerContainer:{ + value:null, + writable:true, + enumerable:true }, - _isLayer:{ - value:false - }, - - _firstTimeLoaded:{ - value:true, - writable:true + currentLayerNumber:{ + value:1, + writable:true, + enumerable:true }, - _arrLayersNonEmpty:{ - value:true, - writable:true + newLayerButton:{ + value:null, + writable:true, + enumerable:true }, - _captureSelection:{ - value:false, - writable:true - }, - /* === END: Models === */ - - /* === BEGIN: Draw cycle === */ - prepareForDraw:{ - value:function () { - - this.eventManager.addEventListener("deleteLayerClick", this, false); - this.eventManager.addEventListener("newLayer", this, false); - this.eventManager.addEventListener("deleteLayer", this, false); - this.eventManager.addEventListener("layerBinding", this, false); - this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); - this.eventManager.addEventListener("deleteSelection", this, false); - this.eventManager.addEventListener("selectionChange", this, true); - this.hashInstance = this.createLayerHashTable(); - this.hashTrackInstance = this.createTrackHashTable(); - this.hashLayerNumber = this.createLayerNumberHash(); - this.hashElementMapToLayer = this.createElementMapToLayer(); - this.initTimelineView(); - } + deleteLayerButton:{ + value:null, + writable:true, + enumerable:true }, - willDraw:{ - value:function () { - if (this._isLayer) { - this.insertLayer(); - this._isLayer = false; - } - } - }, - /* === END: Draw cycle === */ - - /* === BEGIN: Controllers === */ - initTimelineView:{ - value:function () { - this.layout_tracks = this.element.querySelector(".layout-tracks"); - this.layout_markers = this.element.querySelector(".layout_markers"); - - this.newlayer_button.identifier = "addLayer"; - this.newlayer_button.addEventListener("click", this, false); - this.deletelayer_button.identifier = "deleteLayer"; - this.deletelayer_button.addEventListener("click", this, false); - this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); - this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - - this.drawTimeMarkers(); - - this._hashKey = "123"; - _firstLayerDraw = false; - NJevent('newLayer', this._hashKey); - _firstLayerDraw = true; - this.selectLayer(0); - } + newFolderButton:{ + value:null, + writable:true, + enumerable:true }, - updateLayerScroll:{ - value:function () { - this.user_layers.scrollTop = this.layout_tracks.scrollTop; - this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; + buildTimelineView : { + value:function(){ + var timeline = document.getElementById("timelinePanel"); + + var mainTimelineContainer = document.createElement("div"); + mainTimelineContainer.style.backgroundColor = "#000000"; + mainTimelineContainer.style.width = "100%"; + mainTimelineContainer.style.height = "100%"; + mainTimelineContainer.style.overflow = "visible"; + + timeline.appendChild(mainTimelineContainer); + + this.breadCrumbContainer = document.createElement("div"); + this.breadCrumbContainer.style.width = "100%"; + this.breadCrumbContainer.style.height = "20px"; + this.breadCrumbContainer.style.backgroundColor = "#111111"; + + var timeControllerContainer = document.createElement("div"); + timeControllerContainer.style.width = "auto"; + timeControllerContainer.style.height = "20px"; + timeControllerContainer.style.backgroundColor = "#000000"; + + this.controlsContainer = document.createElement("div"); + this.controlsContainer.style.width = "200px"; + this.controlsContainer.style.height = "20px"; + this.controlsContainer.style.backgroundColor = "#440000"; + this.controlsContainer.style.float = "left"; + this.controlsContainer.innerText = "Timeline Controller"; + + var timeContainer = document.createElement("div"); + timeContainer.style.width = "inherit"; + timeContainer.style.height = "20px"; + timeContainer.style.backgroundColor = "#880000"; + timeContainer.style.float = "left"; + timeContainer.innerText = "Time markers"; + + timeControllerContainer.appendChild(this.controlsContainer); + timeControllerContainer.appendChild(timeContainer); + + var masterLayerContainer = document.createElement("div"); + masterLayerContainer.style.width = "100%"; + masterLayerContainer.style.height = "20px"; + masterLayerContainer.style.backgroundColor = "#111111"; + masterLayerContainer.style.border = "solid"; + masterLayerContainer.style.borderWidth = "thin"; + masterLayerContainer.style.borderColor = "#333333"; + masterLayerContainer.innerText = "MASTER Layer"; + + this.userLayerContainer = document.createElement("div"); + this.userLayerContainer.style.width = "100%"; + this.userLayerContainer.style.height = "33px"; + this.userLayerContainer.style.backgroundColor = "#111111"; + + this.timelineGutter = document.createElement("div"); + this.timelineGutter.style.position = "fixed"; + //this.timelineGutter.style.width = "inherit"; + this.timelineGutter.style.height = "20px"; + //this.timelineGutter.style.bottom = 0; + this.timelineGutter.style.backgroundColor = "#000000"; + this.timelineGutter.style.zIndex = "100"; + + var newLayerButton = document.createElement("button"); + newLayerButton.style.backgroundImage = "url(../MainApp/images/timeline/plus.png)"; + newLayerButton.style.backgroundRepeat = "no-repeat"; + newLayerButton.style.height = "18px"; + newLayerButton.style.width = "18px"; + //newLayerButton.textContent = "New Layer"; + newLayerButton.addEventListener("click", this.newLayerClickHandler.bind(this), false); + + //var newFolderButton = document.createElement("button"); + //newFolderButton.textContent = "New Folder"; + + var newTrashButton = document.createElement("button"); + newTrashButton.style.backgroundImage = "url(../MainApp/images/timeline/trash.png)"; + newTrashButton.style.backgroundRepeat = "no-repeat"; + newTrashButton.style.height = "18px"; + newTrashButton.style.width = "18px"; + newTrashButton.addEventListener("click", this.deleteLayerClickHandler.bind(this), false); + + this.timelineGutter.appendChild(newLayerButton); + //this.timelineGutter.appendChild(newFolderButton); + this.timelineGutter.appendChild(newTrashButton); + + mainTimelineContainer.appendChild(this.breadCrumbContainer); + mainTimelineContainer.appendChild(timeControllerContainer); + mainTimelineContainer.appendChild(masterLayerContainer); + mainTimelineContainer.appendChild(this.userLayerContainer); + mainTimelineContainer.appendChild(this.timelineGutter); + + this.initBreadCrumb(); + + this.layerArray = new Array(); + } + }, + + newLayerClickHandler:{ + value:function(){ + this.newLayer(); } }, - captureSelectionChange:{ + deleteLayerClickHandler:{ value:function(){ - var key , switchSelectedLayer,layerIndex; - if(this.application.ninja.selectedElements[0]){ - key = this.application.ninja.selectedElements[0].uuid; - switchSelectedLayer = this.hashElementMapToLayer.getItem(key); - if(switchSelectedLayer!==undefined){ - layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID) - this._captureSelection=false; - this.selectLayer(layerIndex); - this._captureSelection=true; - - } - } + this.deleteLayer(); } }, - updateTimeText:{ - value:function (millisec) { - var timeText; - var sec = (Math.floor((millisec / 1000))) % 60; - var min = (Math.floor((millisec / 1000) / 60)) % 60; - var milliSec = String(Math.round(millisec / 10)); - var returnMillisec = milliSec.slice(milliSec.length - 2, milliSec.length); - var returnSec; - var returnMin; - if (sec < 10) { - returnSec = "0" + sec; - } else { - returnSec = sec; - } - if (min < 10) { - returnMin = "0" + min; - } else { - returnMin = min; - } - if (millisec == 0) { - returnMillisec = "00"; - } - timeText = returnMin + ":" + returnSec + ":" + returnMillisec; - this.timetext.innerHTML = timeText; - } + layerArray:{ + value:null, + writable:true, + enumerable:true }, - deselectKeyframes:{ - value:function () { - for (var i = 0; i < this.selectedKeyframes.length; i++) { - this.selectedKeyframes[i].deselect(); - } - this.selectedKeyframes = null; - this.selectedKeyframes = new Array(); - } + selectedLayer:{ + value:null, + writable:true, + enumerable:true }, - handleAddLayerClick:{ - value:function (event) { - this._isLayer = true; - this.needsDraw = true; - } - }, + newLayer:{ + value:function(){ + var newLayerDiv = document.createElement("div"); + newLayerDiv.style.width = "inherit"; + newLayerDiv.style.height = "20px"; + newLayerDiv.style.backgroundColor = "#222222"; + newLayerDiv.style.border = "solid"; + newLayerDiv.style.borderWidth = "thin"; + newLayerDiv.style.borderColor = "#444444"; - handleDeleteLayerClick:{ - value:function (event) { - this._deleteKeyDown = false; - if (this.application.ninja.currentSelectedContainer.id === "UserContent") { - this._hashKey = "123"; - } - this.removeLayer(); - } - }, + newLayerDiv.innerText = "Layer " + this.currentLayerNumber; + this.currentLayerNumber++; - handleLayerBinding:{ - value:function (event) { - var i = 0; - this.currentParentNode = this.application.ninja.currentSelectedContainer.parentNode; + newLayerDiv.addEventListener("click", this.selectLayer.bind(this), false); - if (this._firstTimeLoaded) { - this._firstTimeLoaded = false; - } else { - while (this.arrLayers.pop()) { - } - while (this.arrTracks.pop()) { - } - if (event.detail.element.id === "UserContent") { - this._hashKey = "123"; - } else { - this._hashKey = event.detail.element.uuid; - } - if (this.returnedObject = this.hashInstance.getItem(this._hashKey)) { - this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey); - this._hashFind = true; - } - this.currentLayerNumber = 0; - NJevent('newLayer', event.detail); - this.selectLayer(0); - } - } - }, + this.userLayerContainer.appendChild(newLayerDiv); - timelineLeftPaneClick:{ - value:function (event) { - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); - if (ptrParent !== false) { - var myIndex = this.getActiveLayerIndex(); - this.selectLayer(myIndex); - } + this.layerArray.push(newLayerDiv); + console.log(this.layerArray); } }, - handleNewLayer:{ - value:function (event) { - var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; - - this._arrLayersNonEmpty = true; - if (this._hashFind) { - while (layerResult = this.returnedObject[hashIndex]) { - trackResult = this.returnedTrack[hashIndex]; - if (layerResult.deleted !== true) { - this.arrLayers.push(layerResult); - this.arrTracks.push(trackResult); - } - hashIndex++; - } - this._hashFind = false; - return; - } - if (event.detail._undoStatus) { - if (this.application.ninja.currentSelectedContainer.id === "UserContent" && event.detail._el.parentElementUUID === 123) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - dLayer[hashVariable].deleted = false; - this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); - this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); - break; - - } - hashVariable++; - } - - } - - else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - dLayer[hashVariable].deleted = false; - parentNode = dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb = true; - NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb}); - } else { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - dLayer[hashVariable].deleted = false; - this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); - this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); - break; - - } - hashVariable++; - } - } - } - - - else { - var newLayerName = "", - thingToPush = {}, - newTrack = {}, - myIndex = 0; - - this.currentLayerNumber = this.hashLayerNumber.getItem(this._hashKey); - if (this.currentLayerNumber === undefined) { - this.currentLayerNumber = 0; - } - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerName = newLayerName; - thingToPush.layerID = this.currentLayerNumber; - thingToPush.isMainCollapsed = true; - thingToPush.isPositionCollapsed = true; - thingToPush.isTransformCollapsed = true; - thingToPush.isStyleCollapsed = true; - thingToPush.arrLayerStyles = []; - thingToPush.element = []; - thingToPush.deleted = false; - thingToPush.isSelected = false; - if (_firstLayerDraw) { - thingToPush.parentElementUUID = this.application.ninja.currentSelectedContainer.uuid; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - } - - - newTrack.trackID = this.currentLayerNumber; - newTrack.isMainCollapsed = true; - newTrack.isPositionCollapsed = true; - newTrack.isTransformCollapsed = true; - newTrack.isStyleCollapsed = false; - newTrack.tweens = []; - - if (_firstLayerDraw) { - if (this.application.ninja.currentSelectedContainer.id === "UserContent") { - this._hashKey = "123"; - thingToPush.parentElementUUID = 123; - } - } - - if (!!this.layerRepetition.selectedIndexes) { - myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerPosition = myIndex; - thingToPush.isSelected = true; - newTrack.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - this.arrTracks.splice(myIndex, 0, newTrack); - this._LayerUndoPosition = myIndex; - this.selectLayer(myIndex); - this.hashLayerNumber.setItem(this._hashKey, thingToPush); - this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); - this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); - } else { - this.arrLayers.splice(0, 0, thingToPush); - this.arrTracks.splice(0, 0, newTrack); - thingToPush.layerPosition = this.arrLayers.length - 1; - newTrack.trackPosition = this.arrTracks.length - 1; - this._LayerUndoPosition = this.arrLayers.length - 1; - this.hashLayerNumber.setItem(this._hashKey, thingToPush); - this.hashInstance.setItem(this._hashKey, thingToPush, thingToPush.layerPosition); - this.hashTrackInstance.setItem(this._hashKey, newTrack, newTrack.trackPosition); - - } - this._LayerUndoObject = thingToPush; - this._LayerUndoIndex = thingToPush.layerID; - this._LayerUndoStatus = true; - this._TrackUndoObject = newTrack; - if(_firstLayerDraw){ - this.application.ninja.selectionController.executeSelectElement(); - } - + selectLayer:{ + value:function(ev){ + for(var i in this.layerArray){ + this.layerArray[i].style.backgroundColor = "#222222"; } + ev.target.style.backgroundColor = "#444444"; + this.selectedLayer = ev.target; } }, - handleDeleteLayer:{ - value:function (event) { - var dLayer, dTrack, parentNode, hashVariable = 0, k = 0, index = 0, j = 0; - - if (this.arrLayers.length > 0) { - if (this.arrLayers.length === 1) { - this._arrLayersNonEmpty = false; - alert("cannot delete further"); - return; - } - if (event.detail._undoStatus) { - if (this.application.ninja.currentSelectedContainer.id === "UserContent" && event.detail._el.parentElementUUID === 123) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable].deleted === true) { - - } else if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - while (this.arrLayers.length) { - if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { - dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); - this.arrLayers.splice(k, 1); - this.arrTracks.splice(k, 1); - break; - } - k++; - } - } - hashVariable++; - } - - } else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); - parentNode = dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb = true; - NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb}); - } - else { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); - while (dLayer[hashVariable]) { - if (dLayer[hashVariable].deleted === true) { - - } else if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { - while (this.arrLayers.length) { - if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { - dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); - this.arrLayers.splice(k, 1); - this.arrTracks.splice(k, 1); - break; - } - k++; - } - } - hashVariable++; - } - } - } - else { - if (!!this.layerRepetition.selectedIndexes) { - var myIndex = this.layerRepetition.selectedIndexes[0]; - this._LayerUndoObject = this.arrLayers[myIndex]; - this._TrackUndoObject = this.arrTracks[myIndex]; - - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[myIndex].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); - - this.arrLayers.splice(myIndex, 1); - this.arrTracks.splice(myIndex, 1); - this._LayerUndoIndex = this._LayerUndoObject.layerID; - this._LayerUndoPosition = myIndex; - } else { - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[this.arrLayers.length - 1].deleted = true; - ElementMediator.deleteElements(dLayer[this.arrLayers.length - 1].element); - this._LayerUndoPosition = this.arrLayers.length - 1; - this._LayerUndoObject = this.arrLayers.pop(); - this._LayerUndoIndex = this._LayerUndoObject.layerID; - this._TrackUndoObject = this.arrTracks.pop(); - } - } + deleteLayer:{ + value:function(){ + if(this.selectedLayer){ + this.userLayerContainer.removeChild(this.selectedLayer); } - } - }, - - handleElementAdded:{ - value:function (event) { - - this.hashElementMapToLayer.setItem(event.detail.uuid , event.detail,this.currentLayerSelected) - this.currentLayerSelected.element.push(event.detail); - - } - }, - - handleElementDeleted:{ - value:function (event) { - var length; - this.deleteElement = event.detail; - length = this.currentLayerSelected.element.length - 1; - while (length >= 0) { - if (this.currentLayerSelected.element[length] === this.deleteElement) { - this.currentLayerSelected.element.splice(length, 1); - break; + for(var i in this.layerArray){ + if(this.layerArray[i] == this.selectedLayer){ + this.layerArray.splice(i,1); } - length--; } } }, - drawTimeMarkers:{ - value:function () { - var i; - var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); - for (i = 0; i < totalMarkers; i++) { - var timeMark = document.createElement("div"); - var markValue = this.calculateTimeMarkerValue(i); - timeMark.className = "timemark"; - timeMark.innerHTML = markValue; - this.time_markers.appendChild(timeMark); - } - } - }, + newFolder:{ - calculateTimeMarkerValue:{ - value:function (currentMarker) { - var timeToReturn; - var currentMilliseconds = currentMarker * this.millisecondsOffset; - var sec = (Math.floor((currentMilliseconds / 1000))) % 60; - var min = (Math.floor((currentMilliseconds / 1000) / 60)) % 60; - var milliSec = String(Math.round(currentMilliseconds / 10)); - var returnMillisec = milliSec.slice(milliSec.length - 2, milliSec.length); - var returnSec; - var returnMin; - if (sec < 10) { - returnSec = "0" + sec; - } else { - returnSec = sec; - } - if (min < 10) { - returnMin = "0" + min; - } else { - returnMin = min; - } - if (currentMarker == 0) { - returnMillisec = "00"; - } - timeToReturn = returnMin + ":" + returnSec + ":" + returnMillisec; - return timeToReturn; - } }, - createLayerHashTable:{ - value:function (key, value) { - var hashLayerObject; - - hashLayerObject = Object.create(Object.prototype, { - counter:{ - value:0, - writable:true - }, - - setItem:{ - value:function (key, value, index) { - if (hashLayerObject[key] === undefined) { - hashLayerObject[key] = {}; - } - if (hashLayerObject[key][index] !== undefined) { - - this.counter = index; - while (hashLayerObject[key][this.counter]) { - this.counter++; - } - - while (this.counter !== index) { - hashLayerObject[key][this.counter] = hashLayerObject[key][this.counter - 1]; - this.counter = this.counter - 1; - } - } - hashLayerObject[key][index] = value; - this.counter = 0; - } - }, - - getItem:{ - value:function (key) { - return hashLayerObject[key]; - } - } - }); - return hashLayerObject; - } - }, + deleteFolder:{ - createTrackHashTable:{ - value:function (key, value) { - var hashTrackObject; - hashTrackObject = Object.create(Object.prototype, { - counter:{ - value:0, - writable:true - }, - - setItem:{ - value:function (key, value, index) { - if (hashTrackObject[key] === undefined) { - hashTrackObject[key] = {}; - - } - if (hashTrackObject[key][index] !== undefined) { - this.counter = index; - while (hashTrackObject[key][this.counter]) { - this.counter++; - } - while (this.counter !== index) { - hashTrackObject[key][this.counter] = hashTrackObject[key][this.counter - 1]; - this.counter = this.counter - 1; - } - } - hashTrackObject[key][index] = value; - this.counter = 0; - } - }, - - getItem:{ - value:function (key) { - return hashTrackObject[key]; - } - } - }); - return hashTrackObject; - } }, - createLayerNumberHash:{ - value:function (key, value) { - var hashLayerNumberObject; - hashLayerNumberObject = Object.create(Object.prototype, { - setItem:{ - value:function (key, value) { - if (value !== undefined) { - hashLayerNumberObject[key] = value.layerID; - } - } - }, - - getItem:{ - value:function (key) { - if (hashLayerNumberObject[key] === undefined) { - return; - } - return hashLayerNumberObject[key]; - } - } - }); - return hashLayerNumberObject; - } - }, - - createElementMapToLayer:{ + initBreadCrumb : { value:function(){ - var hashMappingObject - hashMappingObject = Object.create(Object.prototype, { - mappingArray:{ - value:{}, - writable:true - }, - setItem: { - value: function(key,value,layer) { - if(this.mappingArray[key]===undefined){ - this.mappingArray[key]={}; - } - this.mappingArray[key]["element"] = value; - this.mappingArray[key].layerID = layer.layerID; - - } - }, - - getItem: { - value: function(key) { - return this.mappingArray[key]; - } - } - }); - return hashMappingObject; + var mainBodyButton = document.createElement("button"); + mainBodyButton.textContent = "Body"; + this.breadCrumbContainer.appendChild(mainBodyButton); } }, - - selectLayer:{ - value:function (layerIndex) { - var i = 0, - arrLayersLength = this.arrLayers.length; - - for (i = 0; i < arrLayersLength; i++) { - if (i === layerIndex) { - this.arrLayers[i].isSelected = true; - } else { - this.arrLayers[i].isSelected = false; - } - } - - if (layerIndex !== false) { - this.layerRepetition.selectedIndexes = [layerIndex]; - this.trackRepetition.selectedIndexes = [layerIndex]; - this.currentLayerSelected = this.arrLayers[layerIndex]; - this.currentTrackSelected = this.arrTracks[layerIndex]; - if(this._captureSelection){ - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element) - } - this._captureSelection = true; - } else { - this.layerRepetition.selectedIndexes = null; - this.trackRepetition.selectedIndexes = null; - this.currentLayerSelected = null; - this.currentTrackSelected = null; - } - } - }, - - getLayerIndexByID:{ - value:function (layerID) { - var i = 0, - returnVal = false, - arrLayersLength = this.arrLayers.length; - - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerID === layerID) { - returnVal = i; - } - } - return returnVal; - } - }, - - getLayerIndexByName:{ - value:function (layerName) { - var i = 0, - returnVal = false, - arrLayersLength = this.arrLayers.length; - - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerName === layerName) { - returnVal = i; - } - } - return returnVal; - } - }, - getActiveLayerIndex:{ - value:function () { - var i = 0, - returnVal = false, - arrLayersLength = this.arrLayers.length; - - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].isActive === true) { - returnVal = i; - this.arrLayers[i].isActive = false; - } - } - return returnVal; + initControlsContainer:{ + value:function(){ + // create timeline control buttons for play,stop,etc } }, - - insertLayer:{ - value:function () { - var cmd = this.addLayerCommand(); - cmd.execute(); - cmd._el = this._LayerUndoObject; - cmd._layerID = this._LayerUndoIndex; - cmd._layerPosition = this._LayerUndoPosition; - cmd._undoStatus = this._LayerUndoStatus; - cmd._track = this._TrackUndoObject; - NJevent("sendToUndo", cmd); + drawTimeMarkers:{ + value:function(){ + } }, - - removeLayer:{ - value:function () { - var cmd = this.deleteLayerCommand(); - cmd.execute(); - cmd._el = this._LayerUndoObject; - cmd._layerID = this._LayerUndoIndex; - cmd._layerPosition = this._LayerUndoPosition; - cmd._undoStatus = this._LayerUndoStatus; - cmd._track = this._TrackUndoObject; - if (this._arrLayersNonEmpty) { - NJevent("sendToUndo", cmd); - } + calculateTimeMarkerSpacing:{ + value:function(){ + } }, + initMasterLayer:{ + value:function(){ - addLayerCommand:{ - value:function () { - var command; - command = Object.create(Object.prototype, { - _el:{value:null, writable:true}, - _layerID:{value:null, writable:true}, - _layerPosition:{value:null, writable:true}, - _undoStatus:{value:false, writable:true}, - _track:{value:null, writable:true}, - description:{ value:"Add Layer"}, - receiver:{value:TimelinePanel}, - execute:{ - value:function () { - - NJevent('newLayer', this) - - } - }, - unexecute:{ - value:function () { - NJevent('deleteLayer', this) - - } - } - }); - return command; } }, - - deleteLayerCommand:{ - value:function () { - var command; - command = Object.create(Object.prototype, { - description:{ value:"Delete Layer"}, - receiver:{value:TimelinePanel}, - execute:{ - value:function () { - NJevent('deleteLayer', this) - } - }, - unexecute:{ - value:function () { - NJevent('newLayer', this) - } - } - }); - return command; + initUserLayers:{ + value:function(){ + } } - /* === END: Controllers === */ -}); +}); \ 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 deleted file mode 100644 index cbae49c8..00000000 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ /dev/null @@ -1,251 +0,0 @@ -.tl_container{ - display: -webkit-box; - -webkit-box-orient: vertical; - height: 100%; -} -.maintimeline{ - border-style: double; - -webkit-box-flex: 1; - display: -webkit-box; - -webkit-box-orient: horizontal - height : 100%; -} -.leftinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; - overflow: hidden; -} -.rightinside{ - height: 100%; - width: 100%; - display: -webkit-box; - -webkit-box-orient: vertical; - position:absolute; -} -.tl_leftpane{ - min-width: 200px; - max-width: 500px; - position: relative; - overflow: hidden; - -webkit-box-flex: 0; -} -.tl_rightpane{ - width: 100%; - position: relative; - -webkit-box-flex: 1; -} - -#bottomPanelContainer { - overflow: hidden !IMPORTANT; -} - -.layout-tracks { - width: 100%; - height: 100%; - padding-bottom: 6px; - box-sizing: border-box; - overflow: auto; - position: relative; -} -.tl_layertracks{ - background-color: #222; - height: 100%; - width: 100%; - -webkit-box-flex: 1; - padding-top: 21px; - box-sizing: border-box; -} -.layerresizer{ - height: auto; - width:6px; - border-right-style: solid; - border-right-color: #333; - border-right-width: thin; - border-left-style: solid; - border-left-color: #000; - border-left-width: thin; - background-color: #222; - cursor: col-resize; - -webkit-box-flex: 0; -} -.timelinecontroller{ - height:20px; - background-color: #222; - -webkit-box-flex: 0; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinecontrols{ - width: 100%; - padding-left: 6px; - padding-top: 2px; - height: 18px; - background-color: #222; - float: left; -} -.timetext{ - float: right; - padding-right: 10px; - color: white; -} -.rewindbutton{ - background-image: url('../images/play_prev.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.playbutton{ - background-image: url('../images/play.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.pausebutton{ - background-image: url('../images/pause.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.forwardbutton{ - background-image: url('../images/play_next.png'); - background-repeat: no-repeat; - height: 18px; - width: 18px; - float: left; - padding-right: 5px; -} -.timelinemarkers{ - height: 20px; - width: 100%; - background-color: #222; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; - -webkit-box-flex: 0; - position: absolute; - background-image: url("../images/timetick.jpg"); - overflow: visible; -} -.layout_markers { - position: absolute; - overflow: hidden; - top: 0px; - left: 0px; - height: 20px; - width: 100%; - border-bottom-style: solid; -} - -.masterlayer{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - height: 18px; - background-color: #474747; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #555; - color: white; - padding-left: 15px; - padding-top: 2px; -} -.mastertrack{ - -webkit-box-flex: 0; - color: white; - height: 20px; - width: 100%; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #444; - background-color: #222; - background-image: url("../../Track.reel/images/gridline.jpg"); -} - -.container-tracks, -.timelinemarkers, -.mastertrack { - width: 2000px; -} -.userlayers{ - width: 100%; - background-color: #222; - -webkit-box-flex: 1; - overflow: hidden; - border-bottom-style: solid; - border-bottom-width: thin; - border-bottom-color: #000; -} -.timelinegutter{ - height: 16px; - padding-top: 1px; - padding-left: 6px; - -webkit-box-flex: 0; - background-color: #222; - border-top-style: solid; - border-top-width: thin; - border-top-color: #444; -} -.newlayerbutton{ - background-image: url('../images/plus.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.deletelayerbutton{ - background-image: url('../images/trash.png'); - background-repeat: no-repeat; - height: 16px; - width: 16px; - float: left; - padding-right: 5px; -} -.tracktick{ - height: 100%; - width: 15px; - border-right-color: #444; - border-right-style: solid; - border-right-width: thin; - float: left; -} -.timemark{ - font-family: 'Droid Sans'; - font-size: 12px; - text-shadow: 1px 1px 1px black; - width: 76px; - color: #808080; - float: left; - padding-top: 6px; - padding-left: 4px; - text-align: left; -} -.playhead{ - height: 14px; - width: 6px; - position: absolute; - top: 6px; - left: -3px; - z-index: 912; - background-color: #b50003; - opacity: 0.5; -} -.playheadmarker{ - height: 100%; - width: 1px; - background-color: #cccccc; - top: 0px; - left: 0px; - position: absolute; - z-index: 913; -} \ No newline at end of file diff --git a/js/panels/Timeline/TimelinePanel.reel/images/pause.png b/js/panels/Timeline/TimelinePanel.reel/images/pause.png deleted file mode 100644 index 8da01b9a..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/pause.png and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play.png b/js/panels/Timeline/TimelinePanel.reel/images/play.png deleted file mode 100644 index 51a34bd4..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/play.png and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play_next.png b/js/panels/Timeline/TimelinePanel.reel/images/play_next.png deleted file mode 100644 index 660130e4..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/play_next.png and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png b/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png deleted file mode 100644 index 30a801b2..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/plus.png b/js/panels/Timeline/TimelinePanel.reel/images/plus.png deleted file mode 100644 index 83c5ecd9..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/plus.png and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg b/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg deleted file mode 100644 index 578298b8..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg and /dev/null differ diff --git a/js/panels/Timeline/TimelinePanel.reel/images/trash.png b/js/panels/Timeline/TimelinePanel.reel/images/trash.png deleted file mode 100644 index cfc10484..00000000 Binary files a/js/panels/Timeline/TimelinePanel.reel/images/trash.png and /dev/null differ -- cgit v1.2.3