aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/TimelineController.js13
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html33
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js295
4 files changed, 347 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelineController.js b/js/panels/Timeline/TimelineController.js
new file mode 100644
index 00000000..6602994d
--- /dev/null
+++ b/js/panels/Timeline/TimelineController.js
@@ -0,0 +1,13 @@
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;
8
9var TimelineController = exports.TimelineController = Montage.create(Montage, {
10
11
12
13}); \ No newline at end of file
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>
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;
8var Component = require("montage/ui/component").Component;
9var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController;
10
11var 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<