diff options
author | Eric Guzman | 2012-02-13 15:48:37 -0800 |
---|---|---|
committer | Eric Guzman | 2012-02-13 15:48:37 -0800 |
commit | b2672478decd3ee3bfacf86b525551c997f9604d (patch) | |
tree | 79a88684406d3adf00350246a4da884b97fb0eac /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |
parent | a738121a921e4c721b280434952b415b9ab3b1a8 (diff) | |
parent | 0620e2f788861e824d6e49fa319da4d20b18a556 (diff) | |
download | ninja-b2672478decd3ee3bfacf86b525551c997f9604d.tar.gz |
Merge branch 'refs/heads/master' into StylesControllerUpdates
Conflicts:
js/controllers/styles-controller.js
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1027 |
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> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No 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 | |||
7 | var Montage = require("montage/core/core").Montage; | 1 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
9 | var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; | 3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | ||
5 | var nj = require("js/lib/NJUtils").NJUtils; | ||
6 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | ||
10 | 7 | ||
11 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 8 | var 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 |