diff options
author | Nivesh Rajbhandari | 2012-02-10 15:14:35 -0800 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-02-10 15:14:35 -0800 |
commit | de65f73c0f129a26aa9007b69e8fce31d0e92d00 (patch) | |
tree | e0fd4bbc44b96909d7619593b29d9b063209a7ce /js/panels/Timeline/Span.reel | |
parent | 9e40945a5bf4330d1088b56b8011ee625b1adab9 (diff) | |
parent | 48977780443d97b9e97b047066639c9056788041 (diff) | |
download | ninja-de65f73c0f129a26aa9007b69e8fce31d0e92d00.tar.gz |
Merge branch 'refs/heads/ninja-internal' into WebGLFixes
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 27 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 41 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 11 |
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 @@ | |||
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 | ||