aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/input-range.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/input-range.reel')
-rw-r--r--node_modules/montage/ui/input-range.reel/input-range.css42
-rw-r--r--node_modules/montage/ui/input-range.reel/input-range.html43
-rw-r--r--node_modules/montage/ui/input-range.reel/input-range.js343
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 */
7var Montage = require("montage").Montage,
8 Component = require("ui/component").Component,
9 dom = require("ui/dom");
10
11/**
12 * The input type="range" field
13 */
14var 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 },
133