aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/text-slider.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/text-slider.reel')
-rw-r--r--node_modules/montage/ui/text-slider.reel/text-slider.css15
-rw-r--r--node_modules/montage/ui/text-slider.reel/text-slider.html102
-rw-r--r--node_modules/montage/ui/text-slider.reel/text-slider.js473
3 files changed, 590 insertions, 0 deletions
diff --git a/node_modules/montage/ui/text-slider.reel/text-slider.css b/node_modules/montage/ui/text-slider.reel/text-slider.css
new file mode 100644
index 00000000..de63381e
--- /dev/null
+++ b/node_modules/montage/ui/text-slider.reel/text-slider.css
@@ -0,0 +1,15 @@
1.montage-text-slider-input {
2 display: none;
3}
4
5.montage-text-slider-editing .montage-text-slider-input {
6 display: inherit;
7}
8
9.montage-text-slider-value {
10 border-bottom: 1px dotted #000;
11}
12
13.montage-text-slider-editing .montage-text-slider-value, .montage-text-slider-editing .montage-text-slider-label {
14 display: none;
15} \ No newline at end of file
diff --git a/node_modules/montage/ui/text-slider.reel/text-slider.html b/node_modules/montage/ui/text-slider.reel/text-slider.html
new file mode 100644
index 00000000..0b7a6993
--- /dev/null
+++ b/node_modules/montage/ui/text-slider.reel/text-slider.html
@@ -0,0 +1,102 @@
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 <title>TextSlider</title>
10 <link rel="stylesheet" href="text-slider.css" />
11
12 <script type="text/montage-serialization">
13 {
14 "value": {
15 "prototype": "ui/dynamic-text.reel",
16 "properties": {
17 "element": {"#": "value"}
18 },
19 "bindings": {
20 "value": {"<-": "@owner.convertedValue"}
21 }
22 },
23 "units": {
24 "prototype": "ui/dynamic-text.reel",
25 "properties": {
26 "element": {"#": "units"}
27 },
28 "bindings": {
29 "value": {"<-": "@owner.unit"}
30 }
31 },
32
33 "translateComposer": {
34 "prototype": "ui/composer/translate-composer",
35 "properties": {
36 "component": {"@": "owner"},
37 "hasMomentum": false,
38 "invertYAxis": true,
39 "allowFloats": true,
40 "startTranslateSpeed": 1
41 },
42 "bindings": {
43 "minTranslateX": {"<-": "@owner.minValue"},
44 "minTranslateY": {"<-": "@owner.minValue"},
45 "maxTranslateX": {"<-": "@owner.maxValue"},
46 "maxTranslateY": {"<-": "@owner.maxValue"}
47 },
48 "listeners": [
49 {
50 "type": "translateStart",
51 "listener": {"@": "owner"}
52 },
53 {
54 "type": "translate",
55 "listener": {"@": "owner"}
56 },
57 {
58 "type": "translateEnd",
59 "listener": {"@": "owner"}
60 }
61 ]
62 },
63
64 "pressComposer": {
65 "prototype": "ui/composer/press-composer",
66 "properties": {
67 "component": {"@": "owner"},
68 "delegate": {"@": "owner"}
69 },
70 "listeners": [
71 {
72 "type": "press",
73 "listener": {"@": "owner"}
74 }
75 ]
76 },
77
78 "numberConverter": {
79 "prototype": "core/converter/number-converter"
80 },
81
82 "owner": {
83 "prototype": "ui/dynamic-text.reel",
84 "properties": {
85 "element": {"#": "text-slider"},
86
87 "_inputElement": {"#": "input"},
88 "_pressComposer": {"@": "pressComposer"},
89 "_translateComposer": {"@": "translateComposer"}
90 }
91 }
92 }
93 </script>
94</head>
95<body>
96 <span data-montage-id="text-slider" class="montage-text-slider" tabindex="0">
97 <input type="text" data-montage-id="input" class="montage-text-slider-input"/>
98 <span data-montage-id="value" class="montage-text-slider-value"></span>
99 <span data-montage-id="units" class="montage-text-slider-label"></span>
100 </span>
101</body>
102</html>
diff --git a/node_modules/montage/ui/text-slider.reel/text-slider.js b/node_modules/montage/ui/text-slider.reel/text-slider.js
new file mode 100644
index 00000000..6582bbf2
--- /dev/null
+++ b/node_modules/montage/ui/text-slider.reel/text-slider.js
@@ -0,0 +1,473 @@
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
8/**
9 @module "montage/ui/text-slider.reel"
10 @requires montage/core/core
11 @requires montage/ui/component
12 @requires montage/ui/composer/press-composer
13 */
14var Montage = require("montage").Montage,
15 Component = require("ui/component").Component,
16 PressComposer = require("ui/composer/press-composer").PressComposer;
17
18/**
19 <p>Provides a way for users to quickly and easily manipulate numeric values.
20 It takes the form of a numeric value with a dotted underline, optionally
21 followed by a unit.
22
23 <p>When the user clicks and drags on the numeric value
24 it increases when dragged up or right, and decreases when dragged down or
25 left. If the user holds Control or Shift while dragging the value will
26 change by a smaller or larger amount respectively.</p>
27
28 <p>If the user clicks without dragging then the component enters "edit mode"
29 and turns into a textfield where the user can directly edit the value. If
30 user presses the Up or Down arrows in edit mode the value will increase or
31 decrease respectively. If the user holds Control or Shift while pressing an
32 arrow the value will change by a smaller or larger amount respectively.</p>
33
34 @class module:"montage/ui/text-slider.reel".TextSlider
35 @extends module:montage/ui/component.Component
36 */
37var TextSlider = exports.TextSlider = Montage.create(Component, /** @lends module:"montage/ui/text-slider.reel".TextSlider# */ {
38
39 // Properties
40
41 _converter: {
42 enumerable: false,
43 value: null
44 },
45 /**
46 A converter that converts from a numeric value to the display value, for
47 example to convert to hexadecimal. You may also want to use a converter
48 that returns <code>value.toFixed(<i>n</i>)</code> to prevent precision errors from
49 being displayed to the user.
50 @type {object}
51 @default null
52 */
53 converter: {
54 serializable: true,
55 get: function() {
56 return this._converter;
57 },
58 set: function(value) {
59 if (this._converter !== value) {
60 this._converter = value;
61 this.needsDraw = true;
62 }
63 }
64 },
65
66 _value: {
67 enumerable: false,
68 value: 0
69 },
70 /**
71 The value of the TextSlider.
72 @type {Number}
73 @default 0
74 */
75 value: {
76 serializable: true,
77 get: function() {
78 return this._value;
79 },
80 set: function(value) {
81 if (isNaN(value = parseFloat(value))) {
82 return false;
83 }
84
85 // != null also checking for undefined
86 if (this._minValue != null && value < this._minValue) {
87 value = this._minValue;
88 } else if (this._maxValue != null && value > this._maxValue) {
89 value = this._maxValue;
90 }
91
92 if (this._value !== value) {
93 this._value = value;
94 this.needsDraw = true;