aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel
diff options
context:
space:
mode:
authorArmen Kesablyan2012-02-13 13:36:52 -0800
committerArmen Kesablyan2012-02-13 13:36:52 -0800
commitda32190d5dd91fa2c26f8cabb746980c3d06035c (patch)
treed923299208c84b1071b58e7eb9c0515b2e1c844a /js/panels/Timeline/Span.reel
parent36cefa3526988cb4dfea107fedaa954a2703260d (diff)
parent90d0c8c0e98d062c628c061fe5765ce991fda409 (diff)
downloadninja-da32190d5dd91fa2c26f8cabb746980c3d06035c.tar.gz
Merge branch 'refs/heads/master' into text-tool
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r--js/panels/Timeline/Span.reel/Span.html27
-rw-r--r--js/panels/Timeline/Span.reel/Span.js41
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css11
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 @@
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 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3
4var 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