aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/progress.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/progress.reel')
-rw-r--r--node_modules/montage/ui/progress.reel/progress.css29
-rw-r--r--node_modules/montage/ui/progress.reel/progress.html28
-rwxr-xr-xnode_modules/montage/ui/progress.reel/progress.js127
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
13var Montage = require("montage").Montage, 11var 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>&lt;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*/
23var Progress = exports.Progress = Montage.create(NativeControl, { 18exports.Progress = Montage.create(NativeProgress,/** @lends module:"montage/ui/bluemoon/progress.reel".Progress# */ {
24 19
25}); 20 hasTemplate: {value: true},
26
27Progress.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});