diff options
Diffstat (limited to 'node_modules/montage/ui/progress.reel')
-rw-r--r-- | node_modules/montage/ui/progress.reel/progress.css | 29 | ||||
-rw-r--r-- | node_modules/montage/ui/progress.reel/progress.html | 28 | ||||
-rwxr-xr-x | node_modules/montage/ui/progress.reel/progress.js | 127 |
3 files changed, 155 insertions, 29 deletions
diff --git a/node_modules/montage/ui/progress.reel/progress.css b/node_modules/montage/ui/progress.reel/progress.css new file mode 100644 index 00000000..32afa142 --- /dev/null +++ b/node_modules/montage/ui/progress.reel/progress.css | |||
@@ -0,0 +1,29 @@ | |||
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 | .montage-progress { | ||
8 | display: inline-block; | ||
9 | position: relative; | ||
10 | width: 100px; | ||
11 | height: 10px; | ||
12 | border-radius: 3px; | ||
13 | border: 1px solid #b3b3b3; | ||
14 | background-color: #d9d9d9; | ||
15 | } | ||
16 | |||
17 | .montage-progress > .montage-progress-bar { | ||
18 | position: absolute; | ||
19 | height: inherit; | ||
20 | border-radius: 2px; | ||
21 | top: 0; | ||
22 | left: 0; | ||
23 | background-color: #f2f2f2; | ||
24 | -webkit-transition: width .3s cubic-bezier(.25,.1,.3,.9); | ||
25 | -moz-transition: width .3s cubic-bezier(.25,.1,.3,.9); | ||
26 | -ms-transition: width .3s cubic-bezier(.25,.1,.3,.9); | ||
27 | -o-transition: width .3s cubic-bezier(.25,.1,.3,.9); | ||
28 | transition: width .3s cubic-bezier(.25,.1,.3,.9); | ||
29 | } \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/progress.reel/progress.html b/node_modules/montage/ui/progress.reel/progress.html new file mode 100644 index 00000000..1dff2f61 --- /dev/null +++ b/node_modules/montage/ui/progress.reel/progress.html | |||
@@ -0,0 +1,28 @@ | |||
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 | <meta charset="utf-8"> | ||
10 | <link rel="stylesheet" href="progress.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "prototype": "ui/progress.reel", | ||
15 | "properties": { | ||
16 | "element": {"#": "progress"}, | ||
17 | "_barElement": {"#": "bar"} | ||
18 | } | ||
19 | } | ||
20 | } | ||
21 | </script> | ||
22 | </head> | ||
23 | <body> | ||
24 | <div data-montage-id="progress" class="montage-progress"> | ||
25 | <div data-montage-id="bar" class="montage-progress-bar"></div> | ||
26 | </div> | ||
27 | </body> | ||
28 | </html> \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/progress.reel/progress.js b/node_modules/montage/ui/progress.reel/progress.js index 06704f9f..d5886561 100755 --- a/node_modules/montage/ui/progress.reel/progress.js +++ b/node_modules/montage/ui/progress.reel/progress.js | |||
@@ -3,47 +3,116 @@ | |||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<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. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | |||
7 | /** | 6 | /** |
8 | @module "montage/ui/progress.reel" | 7 | @module "montage/ui/bluemoon/progress.reel" |
9 | @requires montage/ui/commponent | 8 | @requires montage/core/core |
10 | @requires montage/ui/native-control | 9 | @requires montage/ui/component |
11 | */ | 10 | */ |
12 | |||
13 | var Montage = require("montage").Montage, | 11 | var Montage = require("montage").Montage, |
14 | Component = require("ui/component").Component, | 12 | Component = require("ui/component").Component, |
15 | NativeControl = require("ui/native-control").NativeControl; | 13 | NativeProgress = require("ui/native/progress.reel").Progress; |
16 | |||
17 | /** | 14 | /** |
18 | The Progress component wraps a native <code><progress></code> element and exposes its standard attributes as bindable properties. | 15 | @class module:montage/ui/progress.Progress |
19 | @class module:"montage/ui/progress.reel".Progress | 16 | @extends module:montage/ui/component.Component |
20 | @extends module:montage/native-control.NativeControl | ||
21 | |||
22 | */ | 17 | */ |
23 | var Progress = exports.Progress = Montage.create(NativeControl, { | 18 | exports.Progress = Montage.create(NativeProgress,/** @lends module:"montage/ui/bluemoon/progress.reel".Progress# */ { |
24 | 19 | ||
25 | }); | 20 | hasTemplate: {value: true}, |
26 | |||
27 | Progress.addAttributes( /** @lends module:"montage/ui/progress.reel".Progress# */{ | ||
28 | 21 | ||
29 | /** | 22 | /** |
30 | The value of the id attribute of the form with which to associate the component's element. | 23 | Description TODO |
31 | @type string} | 24 | @private |
32 | @default null | ||
33 | */ | 25 | */ |
34 | form: null, | 26 | _barElement: { |
35 | 27 | enumerable: false, | |
28 | serializable: true, | ||
29 | value: null | ||
30 | }, | ||
36 | /** | 31 | /** |
37 | The maximum value displayed but the progress control. | 32 | Description TODO |
38 | @type {number} | 33 | @private |
39 | @default null | ||
40 | */ | 34 | */ |
41 | max: {dataType: 'number'}, | 35 | _value: { |
36 | enumerable: false, | ||
37 | serializable: true, | ||
38 | value: null | ||
39 | }, | ||
40 | /** | ||
41 | Description TODO | ||
42 | @type {Function} | ||
43 | @default {Number} 0 | ||
44 | */ | ||
45 | value: { | ||
46 | serializable: true, | ||
47 | get: function() { | ||
48 | return this._value; | ||
49 | }, | ||
50 | set: function(val) { | ||
51 | if(val !== this._value) { | ||
52 | this._value = String.isString(val) ? parseInt(val, 10) : val; | ||
42 | 53 | ||
54 | if(this._max && (this._value > this._max)) { | ||
55 | this._value = this._max; | ||
56 | } | ||
57 | if(this._value < 0) { | ||
58 | this._value = 0; | ||
59 | } | ||
60 | this.needsDraw = true; | ||
61 | } | ||
62 | } | ||
63 | }, | ||
43 | /** | 64 | /** |
44 | The current value displayed but the progress control. | 65 | Description TODO |
45 | @type {number} | 66 | @private |
46 | @default null | ||
47 | */ | 67 | */ |
48 | value: {dataType: 'number'} | 68 | _max: { |
49 | }); \ No newline at end of file | 69 | enumerable: false, |
70 | serializable: true, | ||
71 | value: null | ||
72 | }, | ||
73 | /** | ||
74 | Description TODO | ||
75 | @type {Function} | ||
76 | @default {Number} 100 | ||
77 | */ | ||
78 | max: { | ||
79 | serializable: true, | ||
80 | get: function() { | ||
81 | return this._max; | ||
82 | }, | ||
83 | set: function(val) { | ||
84 | if(val !== this._max) { | ||
85 | this._max = String.isString(val) ? parseInt(val, 10) : val; | ||
86 | if(this._max <= 0) { | ||
87 | this._max = 1; // Prevent divide by zero errors | ||
88 | } | ||
89 | this.needsDraw = true; | ||
90 | } | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | didCreate: { | ||
95 | value: function() { | ||
96 | |||
97 | if(NativeProgress.didCreate) { | ||
98 | NativeProgress.didCreate.call(this); | ||
99 | } | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | /** | ||
104 | Description TODO | ||
105 | @function | ||
106 | */ | ||
107 | draw: { | ||
108 | enumerable: false, | ||
109 | value: function() { | ||
110 | var ratio = this._value / this._max; | ||
111 | // constrain to interval [0, 1] | ||
112 | ratio = Math.min(Math.max(ratio, 0), 1); | ||
113 | // map into [0, 100] | ||
114 | var percentage = ratio * 100; | ||
115 | this._barElement.style.width = percentage + '%'; | ||
116 | } | ||
117 | } | ||
118 | }); | ||