3 files changed, 79 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..e36a25d6
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/Span.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/Span.reel",
+                            "name": "Span",
+                            "properties": {
+                                "element": {"#": "spanspace"},
+                                "tweenspan": {"#": "tweenspan"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+        <div id="spanspace">
+            <div id="tweenspan" class="tween_span"></div>
+        </div>
+    </body>
+</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..f7bd4ff0
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -0,0 +1,41 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Span = exports.Span = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+    _spanWidth:{
+        value:0
+    },
+    spanWidth:{
+        serializable:true,
+        get:function () {
+            return this._spanWidth;
+        },
+        set:function (value) {
+            this._spanWidth = value;
+        }
+    },
+    prepareForDraw:{
+        value:function(){
+        }
+    },
+    draw:{
+        value: function(){
+            this.tweenspan.style.width = this.spanWidth + "px";
+        }
+    },
+    highlightSpan:{
+        value: function(){
+            this.tweenspan.classList.add("spanHighlight");
+        }
+    }
+});
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..f239454d
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -0,0 +1,11 @@
+.tween_span{
+    position: absolute;
+    height: 16px;
+    opacity: 0.15;
+    background-color: white;
+}
+.tween_span.spanHighlight{
+    background-color: #a0c8ff;
+    opacity: 0.4;
+}
+\ No newline at end of file

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html new file mode 100644 index 00000000..e36a25d6 --- /dev/null +++ b/js/panels/Timeline/Span.reel/Span.html
@@ -0,0 +1,27 @@
	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	5	<link rel="stylesheet" type="text/css" href="css/Span.css">
	6	<script type="text/montage-serialization">
	7	{
	8	"owner": {
	9	"module": "js/panels/Timeline/Span.reel",
	10	"name": "Span",
	11	"properties": {
	12	"element": {"#": "spanspace"},
	13	"tweenspan": {"#": "tweenspan"}
	14	}
	15	}
	16
	17	}
	18	</script>
	19	</head>
	20	<body>
	21
	22	<div id="spanspace">
	23	<div id="tweenspan" class="tween_span"></div>
	24	</div>
	25
	26	</body>
	27	</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..f7bd4ff0 --- /dev/null +++ b/js/panels/Timeline/Span.reel/Span.js
@@ -0,0 +1,41 @@
	1	var Montage = require("montage/core/core").Montage;
	2	var Component = require("montage/ui/component").Component;
	3
	4	var Span = exports.Span = Montage.create(Component, {
	5
	6	hasTemplate:{
	7	value: true
	8	},
	9
	10	_spanWidth:{
	11	value:0
	12	},
	13
	14	spanWidth:{
	15	serializable:true,
	16	get:function () {
	17	return this._spanWidth;
	18	},
	19	set:function (value) {
	20	this._spanWidth = value;
	21	}
	22	},
	23
	24	prepareForDraw:{
	25	value:function(){
	26
	27	}
	28	},
	29
	30	draw:{
	31	value: function(){
	32	this.tweenspan.style.width = this.spanWidth + "px";
	33	}
	34	},
	35
	36	highlightSpan:{
	37	value: function(){
	38	this.tweenspan.classList.add("spanHighlight");
	39	}
	40	}
	41	});


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..f239454d --- /dev/null +++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -0,0 +1,11 @@
	1	.tween_span{
	2	position: absolute;
	3	height: 16px;
	4	opacity: 0.15;
	5	background-color: white;
	6	}
	7
	8	.tween_span.spanHighlight{
	9	background-color: #a0c8ff;
	10	opacity: 0.4;
	11	} \ No newline at end of file