diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
3 files changed, 334 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css new file mode 100644 index 00000000..7f1b0f7f --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css | |||
@@ -0,0 +1,6 @@ | |||
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 | |||
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html new file mode 100644 index 00000000..6849898b --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -0,0 +1,33 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" type="text/css" href="TimelinePanel.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module": "js/panels/Timeline/TimelinePanel.reel", | ||
15 | "name": "TimelinePanel", | ||
16 | "properties": { | ||
17 | "element": {"#": "timeline_panel"} | ||
18 | } | ||
19 | } | ||
20 | |||
21 | } | ||
22 | </script> | ||
23 | |||
24 | |||
25 | </head> | ||
26 | <body> | ||
27 | |||
28 | <div id="timeline_panel"> | ||
29 | |||
30 | </div> | ||
31 | |||
32 | </body> | ||
33 | </html> \ No newline at end of file | ||
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js new file mode 100644 index 00000000..9bf51e60 --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -0,0 +1,295 @@ | |||
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; | ||
8 | var Component = require("montage/ui/component").Component; | ||
9 | var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; | ||
10 | |||
11 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | ||
12 | |||
13 | tmpImg: { value: null}, | ||
14 | |||
15 | templateDidLoad: { | ||
16 | value: function() { | ||
17 | /* | ||
18 | this.tmpImg = document.createElement("img"); | ||
19 | this.tmpImg.width = 1879; | ||
20 | this.tmpImg.height = 440; | ||
21 | this.tmpImg.src = "images/timeline/timeline.png"; | ||
22 | */ | ||
23 | } | ||
24 | }, | ||
25 | |||
26 | prepareForDraw: { | ||
27 | value: function() { | ||
28 | this.element.style.background = "url('images/timeline/timeline.png')"; | ||
29 | this.element.style.width = "100%"; | ||
30 | this.element.style.height = "400px"; | ||
31 | this.element.style.backgroundPosition = "-5px -40px"; | ||
32 | } | ||
33 | }, | ||
34 | |||
35 | init : { | ||
36 | value : function() | ||
37 | { | ||
38 | this.buildTimelineView(); | ||
39 | |||
40 | } | ||
41 | }, | ||
42 | |||
43 | breadCrumbContainer:{ | ||
44 | value:null, | ||
45 | writable:true, | ||
46 | enumerable:true | ||
47 | }, | ||
48 | |||
49 | controlsContainer:{ | ||
50 | value:null, | ||
51 | writable:true, | ||
52 | enumerable:true | ||
53 | }, | ||
54 | |||
55 | timelineGutter:{ | ||
56 | value:null, | ||
57 | writable:true, | ||
58 | enumerable:true | ||
59 | }, | ||
60 | |||
61 | userLayerContainer:{ | ||
62 | value:null, | ||
63 | writable:true, | ||
64 | enumerable:true | ||
65 | }, | ||
66 | |||
67 | currentLayerNumber:{ | ||
68 | value:1, | ||
69 | writable:true, | ||
70 | enumerable:true | ||
71 | }, | ||
72 | |||
73 | newLayerButton:{ | ||
74 | value:null, | ||
75 | writable:true, | ||
76 | enumerable:true | ||
77 | }, | ||
78 | |||
79 | deleteLayerButton:{ | ||
80 | value:null, | ||
81 | writable:true, | ||
82 | enumerable:true | ||
83 | }, | ||
84 | |||
85 | newFolderButton:{ | ||
86 | value:null, | ||
87 | writable:true, | ||
88 | enumerable:true | ||
89 | }, | ||
90 | |||
91 | buildTimelineView : { | ||
92 | value:function(){ | ||
93 | var timeline = document.getElementById("timelinePanel"); | ||
94 | |||
95 | var mainTimelineContainer = document.createElement("div"); | ||
96 | mainTimelineContainer.style.backgroundColor = "#000000"; | ||
97 | mainTimelineContainer.style.width = "100%"; | ||
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.position = "fixed"; | ||
146 | //this.timelineGutter.style.width = "inherit"; | ||
147 | this.timelineGutter.style.height = "20px"; | ||
148 | //this.timelineGutter.style.bottom = 0; | ||
149 | this.timelineGutter.style.backgroundColor = "#000000"; | ||
150 | this.timelineGutter.style.zIndex = "100"; | ||
151 | |||
152 | var newLayerButton = document.createElement("button"); | ||
153 | newLayerButton.style.backgroundImage = "url(../MainApp/images/timeline/plus.png)"; | ||
154 | newLayerButton.style.backgroundRepeat = "no-repeat"; | ||
155 | newLayerButton.style.height = "18px"; | ||
156 | newLayerButton.style.width = "18px"; | ||
157 | //newLayerButton.textContent = "New Layer"; | ||
158 | newLayerButton.addEventListener("click", this.newLayerClickHandler.bind(this), false); | ||
159 | |||
160 | //var newFolderButton = document.createElement("button"); | ||
161 | //newFolderButton.textContent = "New Folder"; | ||
162 | |||
163 | var newTrashButton = document.createElement("button"); | ||
164 | newTrashButton.style.backgroundImage = "url(../MainApp/images/timeline/trash.png)"; | ||
165 | newTrashButton.style.backgroundRepeat = "no-repeat"; | ||
166 | newTrashButton.style.height = "18px"; | ||
167 | newTrashButton.style.width = "18px"; | ||
168 | newTrashButton.addEventListener("click", this.deleteLayerClickHandler.bind(this), false); | ||
169 | |||
170 | this.timelineGutter.appendChild(ne |