aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1027
1 files changed, 812 insertions, 215 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9bf51e60..44129743 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,295 +1,892 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage; 1var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
9var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; 3var Layer = require("js/panels/Timeline/Layer.reel").Layer;
4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
5var nj = require("js/lib/NJUtils").NJUtils;
6var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
10 7
11var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 8var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
12 9
13 tmpImg: { value: null}, 10 hasTemplate:{
11 value:true
12 },
14 13
15 templateDidLoad: { 14 /* === BEGIN: Models === */
16 value: function() { 15 _arrLayers:{
17 /* 16 value:[]
18 this.tmpImg = document.createElement("img"); 17 },
19 this.tmpImg.width = 1879; 18
20 this.tmpImg.height = 440; 19 arrLayers:{
21 this.tmpImg.src = "images/timeline/timeline.png"; 20 get:function () {
22 */ 21 return this._arrLayers;
22 },
23 set:function (newVal) {
24 this._arrLayers = newVal;
23 } 25 }
24 }, 26 },
25 27
26 prepareForDraw: { 28 _layerRepetition:{
27 value: function() { 29 value:null
28 this.element.style.background = "url('images/timeline/timeline.png')"; 30 },
29 this.element.style.width = "100%"; 31
30 this.element.style.height = "400px"; 32 layerRepetition:{
31 this.element.style.backgroundPosition = "-5px -40px"; 33 get:function () {
34 return this._layerRepetition;
35 },
36 set:function (newVal) {
37 this._layerRepetition = newVal;
32 } 38 }
33 }, 39 },
34 40
35 init : { 41 _currentLayerNumber:{
36 value : function() 42 value:0
37 { 43 },
38 this.buildTimelineView();
39 44
45 currentLayerNumber:{
46 get:function () {
47 return this._currentLayerNumber;
48 },
49 set:function (newVal) {
50 if (newVal !== this._currentLayerNumber) {
51 this._currentLayerNumber = newVal;
52 }
40 } 53 }
41 }, 54 },
42 55
43 breadCrumbContainer:{ 56 currentLayerSelected:{
44 value:null, 57 value: null
45 writable:true,
46 enumerable:true
47 }, 58 },
48 59
49 controlsContainer:{ 60 currentTrackSelected:{
50 value:null, 61 value: null
51 writable:true,
52 enumerable:true
53 }, 62 },
54 63
55 timelineGutter:{ 64 millisecondsOffset:{
56 value:null, 65 value:1000
57 writable:true,
58 enumerable:true
59 }, 66 },
60 67
61 userLayerContainer:{ 68 _arrTracks:{
62 value:null, 69 serializable:true,
63 writable:true, 70 value:[]
64 enumerable:true
65 }, 71 },
66 72
67 currentLayerNumber:{ 73 arrTracks:{
68 value:1, 74 serializable:true,
69 writable:true, 75 get:function () {
70 enumerable:true 76 return this._arrTracks;
77 },
78 set:function (newVal) {
79 this._arrTracks = newVal;
80 }
71 }, 81 },
72 82
73 newLayerButton:{ 83 _trackRepetition:{
74 value:null, 84 serializable:true,
75 writable:true, 85 value:null
76 enumerable:true
77 }, 86 },
78 87
79 deleteLayerButton:{ 88 trackRepetition:{
80 value:null, 89 serializable:true,
81 writable:true, 90 get:function () {
82 enumerable:true 91 return this._trackRepetition;
92 },
93 set:function (newVal) {
94 this._trackRepetition = newVal;
95 }
83 }, 96 },
84 97
85 newFolderButton:{ 98 _selectedKeyframes:{
86 value:null, 99 value:[]
87 writable:true,
88 enumerable:true
89 }, 100 },
90 101
91 buildTimelineView : { 102 selectedKeyframes:{
92 value:function(){ 103 serializable:true,
93 var timeline = document.getElementById("timelinePanel"); 104 get:function () {
94 105 return this._selectedKeyframes;
95 var mainTimelineContainer = document.createElement("div"); 106 },
96 mainTimelineContainer.style.backgroundColor = "#000000"; 107 set:function (newVal) {
97 mainTimelineContainer.style.width = "100%"; 108 this._selectedKeyframes = newVal;
98 mainTimelineContainer.style.height = "100%";
99 mainTimelineContainer.style.overflow = "visible";
100
101 timeline.appendChild(mainTimelineContainer);
102
103 this.breadCrumbContainer = document.createElement("div");
104 this.breadCrumbContainer.style.width = "100%";
105 this.breadCrumbContainer.style.height = "20px";
106 this.breadCrumbContainer.style.backgroundColor = "#111111";
107
108 var timeControllerContainer = document.createElement("div");
109 timeControllerContainer.style.width = "auto";
110 timeControllerContainer.style.height = "20px";
111 timeControllerContainer.style.backgroundColor = "#000000";
112
113 this.controlsContainer = document.createElement("div");
114 this.controlsContainer.style.width = "200px";
115 this.controlsContainer.style.height = "20px";
116 this.controlsContainer.style.backgroundColor = "#440000";
117 this.controlsContainer.style.float = "left";
118 this.controlsContainer.innerText = "Timeline Controller";
119
120 var timeContainer = document.createElement("div");
121 timeContainer.style.width = "inherit";
122 timeContainer.style.height = "20px";
123 timeContainer.style.backgroundColor = "#880000";
124 timeContainer.style.float = "left";
125 timeContainer.innerText = "Time markers";
126
127 timeControllerContainer.appendChild(this.controlsContainer);
128 timeControllerContainer.appendChild(timeContainer);
129
130 var masterLayerContainer = document.createElement("div");
131 masterLayerContainer.style.width = "100%";
132 masterLayerContainer.style.height = "20px";
133 masterLayerContainer.style.backgroundColor = "#111111";
134 masterLayerContainer.style.border = "solid";
135 masterLayerContainer.style.borderWidth = "thin";
136 masterLayerContainer.style.borderColor = "#333333";
137 masterLayerContainer.innerText = "MASTER Layer";
138
139 this.userLayerContainer = document.createElement("div");
140 this.userLayerContainer.style.width = "100%";
141 this.userLayerContainer.style.height = "33px";
142 this.userLayerContainer.style.backgroundColor = "#111111";
143
144 this.timelineGutter = document.createElement("div");
145 this.timelineGutter.style.posit