diff options
Diffstat (limited to 'node_modules/montage/ui/input-range.reel')
3 files changed, 428 insertions, 0 deletions
diff --git a/node_modules/montage/ui/input-range.reel/input-range.css b/node_modules/montage/ui/input-range.reel/input-range.css new file mode 100644 index 00000000..fa5279eb --- /dev/null +++ b/node_modules/montage/ui/input-range.reel/input-range.css | |||
@@ -0,0 +1,42 @@ | |||
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-inputRange { | ||
8 | position: relative; | ||
9 | display: inline-block; | ||
10 | box-sizing: border-box; | ||
11 | width: 100px; | ||
12 | height: 6px; | ||
13 | border-radius: 3px; | ||
14 | border: 1px solid #b3b3b3; | ||
15 | background-color: #d9d9d9; | ||
16 | } | ||
17 | |||
18 | .montage-inputRange-thumb { | ||
19 | position: absolute; | ||
20 | font-size: inherit; | ||
21 | box-sizing: border-box; | ||
22 | margin: -8px 0 0 -1px; | ||
23 | border-radius: 10px; | ||
24 | width: 20px; | ||
25 | height: 20px; | ||
26 | left: 0; | ||
27 | top: 0; | ||
28 | border: 1px solid #b3b3b3; | ||
29 | background-color: #f2f2f2; | ||
30 | cursor: pointer; | ||
31 | } | ||
32 | |||
33 | /* States */ | ||
34 | .montage-inputRange-thumb:hover { | ||
35 | background-color: #fff; | ||
36 | } | ||
37 | .montage-inputRange-thumb:active { | ||
38 | background-color: #e5e5e5; | ||
39 | } | ||
40 | .montage-inputRange-thumb:focus { | ||
41 | border-color: #7f7f7f; | ||
42 | } \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/input-range.reel/input-range.html b/node_modules/montage/ui/input-range.reel/input-range.html new file mode 100644 index 00000000..36a27e15 --- /dev/null +++ b/node_modules/montage/ui/input-range.reel/input-range.html | |||
@@ -0,0 +1,43 @@ | |||
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="input-range.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "translateComposer1": { | ||
14 | "prototype": "ui/composer/translate-composer", | ||
15 | "properties": { | ||
16 | "component": {"@": "owner"}, | ||
17 | "axis": "horizontal", | ||
18 | "hasMomentum": false, | ||
19 | "minTranslateX": 0 | ||
20 | }, | ||
21 | "bindings": { | ||
22 | "maxTranslateX": {"<-": "@owner._sliderWidth"}, | ||
23 | "translateX": {"<->": "@owner._positionX"} | ||
24 | } | ||
25 | }, | ||
26 | "owner": { | ||
27 | "properties": { | ||
28 | "element": {"#": "inputRange"}, | ||
29 | "_handleEl": {"#": "inputRangeThumb"}, | ||
30 | "_translateComposer": {"@": "translateComposer1"} | ||
31 | } | ||
32 | |||
33 | } | ||
34 | } | ||
35 | </script> | ||
36 | </head> | ||
37 | <body> | ||
38 | <!-- inputRange needs to be a div to work in Firefox --> | ||
39 | <div data-montage-id="inputRange" class="montage-inputRange"> | ||
40 | <div data-montage-id="inputRangeThumb" draggable="true" class="montage-inputRange-thumb"></div> | ||
41 | </div> | ||
42 | </body> | ||
43 | </html> \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/input-range.reel/input-range.js b/node_modules/montage/ui/input-range.reel/input-range.js new file mode 100644 index 00000000..faa8f2af --- /dev/null +++ b/node_modules/montage/ui/input-range.reel/input-range.js | |||
@@ -0,0 +1,343 @@ | |||
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 | /*global require,exports */ | ||
7 | var Montage = require("montage").Montage, | ||
8 | Component = require("ui/component").Component, | ||
9 | dom = require("ui/dom"); | ||
10 | |||
11 | /** | ||
12 | * The input type="range" field | ||
13 | */ | ||
14 | var InputRange = exports.InputRange = Montage.create(Component, { | ||
15 | |||
16 | DEFAULT_WIDTH: { | ||
17 | value: 100 | ||
18 | }, | ||
19 | |||
20 | HANDLE_ADJUST: { | ||
21 | value: 13 | ||
22 | }, | ||
23 | |||
24 | // public API | ||
25 | _min: { | ||
26 | value: null | ||
27 | }, | ||
28 | |||
29 | min: { | ||
30 | get: function() { | ||
31 | return this._min; | ||
32 | }, | ||
33 | set: function(value) { | ||
34 | this._min = String.isString(value) ? parseFloat(value) : value; | ||
35 | this.needsDraw = true; | ||
36 | }, | ||
37 | serializable: true | ||
38 | }, | ||
39 | |||
40 | _max: { | ||
41 | value: null | ||
42 | }, | ||
43 | |||
44 | max: { | ||
45 | get: function() { | ||
46 | return this._max; | ||
47 | }, | ||
48 | set: function(value) { | ||
49 | this._max = String.isString(value) ? parseFloat(value) : value; | ||
50 | this.needsDraw = true; | ||
51 | }, | ||
52 | serializable: true | ||
53 | }, | ||
54 | |||
55 | _step: { | ||
56 | value: null | ||
57 | }, | ||
58 | |||
59 | step: { | ||
60 | get: function() { | ||
61 | return this._step; | ||
62 | }, | ||
63 | set: function(value) { | ||
64 | this._step = String.isString(value) ? parseFloat(value) : value; | ||
65 | this.needsDraw = true; | ||
66 | }, | ||
67 | serializable: true | ||
68 | }, | ||
69 | |||
70 | /** Width of the slider in px. Default = 300 */ | ||
71 | _width: { | ||
72 | value: null | ||
73 | }, | ||
74 | |||
75 | width: { | ||
76 | get: function() { | ||
77 | return this._width; | ||
78 | }, | ||
79 | set: function(value) { | ||
80 | this._width = String.isString(value) ? parseFloat(value) : value; | ||
81 | this.needsDraw = true; | ||
82 | }, | ||
83 | serializable: true | ||
84 | }, | ||
85 | |||
86 | percent: { | ||
87 | value: null | ||
88 | }, | ||
89 | |||
90 | _valueSyncedWithPosition: { | ||
91 | value: null | ||
92 | }, | ||
93 | |||
94 | _value: { | ||
95 | value: null | ||
96 | }, | ||
97 | |||
98 | value: { | ||
99 | get: function() { | ||
100 | return this._value; | ||
101 | }, | ||
102 | set: function(value, fromInput) { | ||
103 | this._value = String.isString(value) ? parseFloat(value) : value; | ||
104 | //console.log('value set', this._value); | ||
105 | if(fromInput) { | ||
106 | this._valueSyncedWithPosition = true; | ||
107 | } else { | ||
108 | this._valueSyncedWithPosition = false; | ||
109 | this.needsDraw = true; | ||
110 | } | ||
111 | }, | ||
112 | serializable: true | ||
113 | }, | ||
114 | |||
115 | // private | ||
116 | _handleEl: { | ||
117 | value: null, | ||
118 | serializable: true | ||
119 | }, | ||
120 | |||
121 | _translateComposer: { | ||
122 | value: null, | ||
123 | serializable: true | ||
124 | }, | ||
125 | |||
126 | _sliderLeft: { | ||
127 | value: null | ||
128 | }, | ||
129 | |||
130 | _sliderWidth: { | ||
131 | value: null | ||
132 | }, | ||