aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/bluemoon/progress.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/bluemoon/progress.reel')
-rw-r--r--node_modules/montage/ui/bluemoon/progress.reel/progress.css51
-rwxr-xr-xnode_modules/montage/ui/bluemoon/progress.reel/progress.html32
-rw-r--r--node_modules/montage/ui/bluemoon/progress.reel/progress.js139
-rw-r--r--node_modules/montage/ui/bluemoon/progress.reel/rule.pngbin0 -> 956 bytes
-rw-r--r--node_modules/montage/ui/bluemoon/progress.reel/scroll.pngbin0 -> 272 bytes
5 files changed, 222 insertions, 0 deletions
diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.css b/node_modules/montage/ui/bluemoon/progress.reel/progress.css
new file mode 100644
index 00000000..cf9e6543
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.css
@@ -0,0 +1,51 @@
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.montage-progress {
7 height: 7px;
8 padding: 1px;
9 border-radius: 5px / 4px;
10 overflow: hidden;
11 background: #ccc url(rule.png);
12 -webkit-box-shadow: inset rgba(0,0,0,.2) 0 0 0 1px, rgba(255,255,255,.5) 0 1px 1px, rgba(0,0,0,.1) 0 -1px 0px;
13}
14
15.montage-progress .bar {
16 height: 7px;
17 border-radius: inherit;
18
19 background-repeat: no-repeat;
20 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
21 color-stop(12%, #35c9ff), color-stop(12%, #0cbeff),
22 color-stop(85%, #0aa5dd), color-stop(85%, #0996c9) );
23
24 -webkit-transition: width .3s cubic-bezier(0.25, 0.1, 0.3, 0.9);
25}
26
27.montage-progress.dark {
28 background: url(rule.png), -webkit-gradient(linear, 0% 0%, 0% 100%,
29 color-stop(0%, #303030), color-stop(100%, #3f3f3f) );
30
31 -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0, rgba(0,0,0,.1) 0 -1px 0px;
32}
33
34@-webkit-keyframes montage-progress-scroll {
35 from {
36 background-position: 0px top;
37 }
38 to {
39 background-position: -8px top;
40 }
41}
42
43.montage-progress .bar.scrolling {
44 background-image: url("scroll.png");
45 background-repeat: repeat-x;
46 background-position: 10px top;
47 -webkit-animation-name: montage-progress-scroll;
48 -webkit-animation-duration: 1s;
49 -webkit-animation-timing-function: linear;
50 -webkit-animation-iteration-count: infinite;
51}
diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.html b/node_modules/montage/ui/bluemoon/progress.reel/progress.html
new file mode 100755
index 00000000..025847e7
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.html
@@ -0,0 +1,32 @@
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>
8<head>
9 <title></title>
10 <link rel="stylesheet" type="text/css" href="progress.css">
11 <script type="text/montage-serialization">
12{
13 "owner": {
14 "module": "montage/ui/bluemoon/progress.reel",
15 "name": "Progress",
16 "properties": {
17 "element": {"#": "progress"},
18 "_barElement": {"#": "bar"}
19 }
20 }
21}
22 </script>
23
24</head>
25<body>
26
27 <div id="progress" class="montage-progress">
28 <div id="bar" class="bar"></div>
29 </div>
30
31</body>
32</html>
diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.js b/node_modules/montage/ui/bluemoon/progress.reel/progress.js
new file mode 100644
index 00000000..8bc68b05
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.js
@@ -0,0 +1,139 @@
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 @module "montage/ui/bluemoon/progress.reel"
8 @requires montage/core/core
9 @requires montage/ui/component
10*/
11var Montage = require("montage").Montage,
12 Component = require("ui/component").Component;
13/**
14 @class module:montage/ui/progress.Progress
15 @extends module:montage/ui/component.Component
16*/
17exports.Progress = Montage.create(Component,/** @lends module:"montage/ui/bluemoon/progress.reel".Progress# */ {
18/**
19 Description TODO
20 @private
21*/
22 _barElement: {
23 enumerable: false,
24 value: null
25 },
26/**
27 Description TODO
28 @private
29*/
30 _value: {
31 enumerable: false,
32 value: 0
33 },
34/**
35 Description TODO
36 @type {Function}
37 @default {Number} 0
38 */
39 value: {
40 get: function() {
41 return this._value;
42 },
43 set: function(val) {
44 if(val !== this._value) {
45 this._value = val;
46 if(this._value > this._maximumValue) {
47 this._value = this._maximumValue;
48 }
49 if(this._value < 0) {
50 this._value = 0;
51 }
52 this.needsDraw = true;
53 }
54 }
55 },
56/**
57 Description TODO
58 @private
59*/
60 _maximumValue: {
61 enumerable: false,
62 value: 100
63 },
64/**
65 Description TODO
66 @type {Function}
67 @default {Number} 100
68 */
69 maximumValue: {
70 get: function() {
71 return this._maximumValue;
72 },
73 set: function(val) {
74 if(val !== this._maximumValue) {
75 this._maximumValue = val;
76 if(this._maximumValue <= 0) {
77 this._maximumValue = 1; // Prevent divide by zero errors
78 }
79 this.needsDraw = true;
80 }
81 }
82 },
83/**
84 Description TODO
85 @private
86*/
87 _scrollingChanged: {
88 enumerable: false,
89 value: true
90 },
91/**
92 Description TODO
93 @private
94*/
95 _scrolling: {
96 enumerable: false,
97 value: false
98 },
99/**
100 Description TODO
101 @type {Function}
102 @default {Boolean} false
103 */
104 scrolling: {
105 get: function() {
106 return this._scrolling;
107 },
108 set: function(value) {
109 if(this._scrolling !== value) {
110 this._scrollingChanged = true;
111 this._scrolling = value;
112 this.needsDraw = true;
113 }
114 }
115 },
116/**
117 Description TODO
118 @function
119 */
120 draw: {
121 enumerable: false,
122 value: function() {
123 var ratio = this._value / this._maximumValue;
124 // constrain to interval [0, 1]
125 ratio = Math.min(Math.max(ratio, 0), 1);
126 // map into [0, 100]
127 var percentage = ratio * 100;