diff options
| author | Eric Guzman | 2012-02-13 10:29:49 -0800 |
|---|---|---|
| committer | Eric Guzman | 2012-02-13 10:29:49 -0800 |
| commit | e4893f7d3c3b9bd7967973197c3ffb5d3a075c91 (patch) | |
| tree | f3d4fd9d96ba0dcf846fbf66153fb443bd60f767 /js/panels/Timeline/Span.reel | |
| parent | ef032412216d437ce1c7dfc9050ab41adf0594c0 (diff) | |
| parent | e142611e22718b1f1d1696902ad9161ec5f33f98 (diff) | |
| download | ninja-e4893f7d3c3b9bd7967973197c3ffb5d3a075c91.tar.gz | |
Merge branch 'refs/heads/master' into TreeComponents
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 | ||