aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r--js/panels/Timeline/Span.reel/Span.html30
-rw-r--r--js/panels/Timeline/Span.reel/Span.js42
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css17
3 files changed, 89 insertions, 0 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
new file mode 100644
index 00000000..f7e05982
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -0,0 +1,30 @@
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="css/Span.css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module": "js/panels/Timeline/Span.reel",
15 "name": "Span",
16 "properties": {
17 "element": {"#": "spanspace"}
18 }
19 }
20
21 }
22 </script>
23 </head>
24 <body>
25
26 <div id="spanspace" class="tween_span">
27 </div>
28
29 </body>
30</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
new file mode 100644
index 00000000..bfa6aab8
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -0,0 +1,42 @@
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
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9
10var Span = exports.Span = Montage.create(Component, {
11
12 hasTemplate:{
13 value: true
14 },
15
16 _spanWidth:{
17 value:0
18 },
19
20 spanWidth:{
21 serializable:true,
22 get:function () {
23 return this._spanWidth;
24 },
25 set:function (value) {
26 this._spanWidth = value;
27 this.needsDraw = true;
28 }
29 },
30
31 draw:{
32 value: function(){
33 this.element.style.width = this.spanWidth + "px";
34 }
35 },
36
37 highlightSpan:{
38 value: function(){
39 this.element.classList.add("spanHighlight");
40 }
41 }
42});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
new file mode 100644
index 00000000..198d71f3
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -0,0 +1,17 @@
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.tween_span{
8 position: absolute;
9 height: 16px;
10 opacity: 0.15;
11 background-color: white;
12}
13
14.tween_span.spanHighlight{
15 background-color: #a0c8ff;
16 opacity: 0.4;
17} \ No newline at end of file