aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/skeleton/range-input.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/skeleton/range-input.reel')
-rw-r--r--node_modules/montage/ui/skeleton/range-input.reel/range-input.css27
-rw-r--r--node_modules/montage/ui/skeleton/range-input.reel/range-input.html62
-rw-r--r--node_modules/montage/ui/skeleton/range-input.reel/range-input.js234
3 files changed, 323 insertions, 0 deletions
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.css b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css
new file mode 100644
index 00000000..07e6031e
--- /dev/null
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css
@@ -0,0 +1,27 @@
1 div.slider {
2 display: inline-block;
3 border-radius: 4px;
4 position: relative;
5 height: 5px;
6 background-color: #556270;
7 border: 1px solid #aaa;
8 cursor: default;
9}
10.slider-handle {
11 top: -0.6em;
12 position: absolute;
13 z-index: 2;
14 cursor: pointer;
15
16 width: 1.2em;
17 height: 1.2em;
18 background-color: #ddd;
19 color: #fff;
20 padding: 2px;
21 border: 1px solid #333;
22 border-radius: 10px;
23}
24
25.slider-handle:hover {
26 background-color: #999;
27} \ No newline at end of file
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html
new file mode 100644
index 00000000..8fc12900
--- /dev/null
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html
@@ -0,0 +1,62 @@
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 http-equiv="content-type" content="text/html; charset=utf-8"/>
10 <link rel="stylesheet" href="range-input.css" />
11
12 <script type="text/montage-serialization">
13{
14 "translateComposer1": {
15 "module": "montage/ui/composer/translate-composer",
16 "name": "TranslateComposer",
17 "properties": {
18 "component": {"@": "owner"},
19 "axis": "horizontal",
20 "hasBouncing": false,
21 "hasMomentum": false,
22 "invertAxis": true
23 },
24 "bindings": {
25 "maxTranslateX": {
26 "boundObject": {"@": "owner"},
27 "boundObjectPropertyPath": "sliderWidth",
28 "oneway": true
29 },
30 "translateX": {
31 "boundObject": {"@": "owner"},
32 "boundObjectPropertyPath": "sliderLeft",
33 "oneway": true
34 },
35 "translateX": {
36 "boundObject": {"@": "owner"},
37 "boundObjectPropertyPath": "positionX"
38 }
39 }
40 },
41 "owner": {
42 "module": "montage/ui/skeleton/range-input.reel",
43 "name": "RangeInput",
44 "properties": {
45 "element": {"#": "slider"},
46 "sliderEl": {"#": "slider"},
47 "handleEl": {"#": "slider-handle"},
48 "translateComposer": {"@": "translateComposer1"}
49 }
50
51 }
52}
53 </script>
54
55 </head>
56 <body>
57 <div id="slider" class="slider">
58 <span draggable="true" href="#" id="slider-handle" class="slider-handle"></span>
59 </div>
60
61 </body>
62</html>
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js
new file mode 100644
index 00000000..5747ccd6
--- /dev/null
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js
@@ -0,0 +1,234 @@
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
10/**
11 * The input type="range" field
12 */
13var RangeInput = exports.RangeInput = Montage.create(Component, {
14
15 DEFAULT_WIDTH: {value: 300},
16 HANDLE_ADJUST: {value: 5},
17
18 hasTemplate: {value: true},
19
20 // public API
21 _min: {value: null},
22 min: {
23 get: function() {
24 return this._min;
25 },
26 set: function(value) {
27 this._min = String.isString(value) ? parseFloat(value) : value;
28 this.needsDraw = true;
29 }
30 },
31
32 _max: {value: null},
33 max: {
34 get: function() {
35 return this._max;
36 },
37 set: function(value) {
38 this._max = String.isString(value) ? parseFloat(value) : value;
39 this.needsDraw = true;
40 }
41 },
42
43 _step: {value: null},
44 step: {
45 get: function() {
46 return this._step;
47 },
48 set: function(value) {
49 this._step = String.isString(value) ? parseFloat(value) : value;
50 this.needsDraw = true;
51 }
52 },
53
54 /** Width of the slider in px. Default = 300 */
55 _width: {value: null},
56 width: {
57 get: function() {
58 return this._width;
59 },
60 set: function(value) {
61 this._width = String.isString(value) ? parseFloat(value) : value;
62 this.needsDraw = true;
63 }
64 },
65
66
67 _sliding: {value: false},
68
69 percent: {value: null},
70 _valueSyncedWithPosition: {value: null},
71 _value: {value: null},
72 value: {
73 get: function() {
74 return this._value;
75 },
76 set: function(value, fromInput) {
77 this._value = String.isString(value) ? parseFloat(value) : value;
78
79 if(fromInput) {
80 this._valueSyncedWithPosition = true;
81 } else {
82 this._valueSyncedWithPosition = false;
83 this._calculatePositionFromValue();
84 this.needsDraw = true;
85 }
86 }
87 },
88
89 // private
90 sliderEl: {value: null, enumerable: false},
91 handleEl: {value: null, enumerable: false},
92 sliderLeft: {value: null, enumerable: false},
93 sliderWidth: {value: null, enumerable: false},
94 minX: {value: null, enumerable: false},
95 maxX: {value: null, enumerable: false},
96
97 _positionX: {value: null},
98 positionX: {
99 enumerable: false,
100 get: function() {
101 return this._positionX;
102 },
103 set: function(value, fromValue) {
104
105 if(value !== null && !isNaN(value)) {
106 this._positionX = value;
107 if(!fromValue) {
108 this._calculateValueFromPosition();
109 this._valueSyncedWithPosition = true;
110 }
111 this.needsDraw = true;
112 }
113
114 }
115 },
116
117 _calculateValueFromPosition: {
118 value: function() {