diff options
Diffstat (limited to 'node_modules/montage/ui/skeleton')
3 files changed, 113 insertions, 72 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 index 07e6031e..43bf5b2c 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.css +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css | |||
@@ -2,7 +2,7 @@ | |||
2 | display: inline-block; | 2 | display: inline-block; |
3 | border-radius: 4px; | 3 | border-radius: 4px; |
4 | position: relative; | 4 | position: relative; |
5 | height: 5px; | 5 | height: 8px; |
6 | background-color: #556270; | 6 | background-color: #556270; |
7 | border: 1px solid #aaa; | 7 | border: 1px solid #aaa; |
8 | cursor: default; | 8 | cursor: default; |
@@ -17,9 +17,9 @@ | |||
17 | height: 1.2em; | 17 | height: 1.2em; |
18 | background-color: #ddd; | 18 | background-color: #ddd; |
19 | color: #fff; | 19 | color: #fff; |
20 | padding: 2px; | 20 | padding: 4px; |
21 | border: 1px solid #333; | 21 | border: 1px solid #333; |
22 | border-radius: 10px; | 22 | border-radius: 20px; |
23 | } | 23 | } |
24 | 24 | ||
25 | .slider-handle:hover { | 25 | .slider-handle:hover { |
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 index 8e1a8d22..927c49d1 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html | |||
@@ -12,21 +12,19 @@ | |||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "translateComposer1": { | 14 | "translateComposer1": { |
15 | "prototype": "montage/ui/composer/translate-composer", | 15 | "prototype": "ui/composer/translate-composer", |
16 | "properties": { | 16 | "properties": { |
17 | "component": {"@": "owner"}, | 17 | "component": {"@": "owner"}, |
18 | "axis": "horizontal", | 18 | "axis": "horizontal", |
19 | "hasBouncing": false, | ||
20 | "hasMomentum": false, | 19 | "hasMomentum": false, |
21 | "minTranslateX": 0 | 20 | "minTranslateX": 0 |
22 | }, | 21 | }, |
23 | "bindings": { | 22 | "bindings": { |
24 | "maxTranslateX": {"<-": "@owner._sliderWidth"}, | 23 | "maxTranslateX": {"<-": "@owner._sliderWidth"}, |
25 | "translateX": {"<<->": "@owner._positionX"} | 24 | "translateX": {"<->": "@owner._positionX"} |
26 | } | 25 | } |
27 | }, | 26 | }, |
28 | "owner": { | 27 | "owner": { |
29 | "prototype": "montage/ui/skeleton/range-input.reel", | ||
30 | "properties": { | 28 | "properties": { |
31 | "element": {"#": "slider"}, | 29 | "element": {"#": "slider"}, |
32 | "_handleEl": {"#": "slider-handle"}, | 30 | "_handleEl": {"#": "slider-handle"}, |
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 index bb14ffc9..1dbd4272 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js | |||
@@ -12,13 +12,19 @@ var Montage = require("montage").Montage, | |||
12 | */ | 12 | */ |
13 | var RangeInput = exports.RangeInput = Montage.create(Component, { | 13 | var RangeInput = exports.RangeInput = Montage.create(Component, { |
14 | 14 | ||
15 | DEFAULT_WIDTH: {value: 300}, | 15 | DEFAULT_WIDTH: { |
16 | HANDLE_ADJUST: {value: 5}, | 16 | value: 300 |
17 | }, | ||
17 | 18 | ||
18 | hasTemplate: {value: true}, | 19 | HANDLE_ADJUST: { |
20 | value: 5 | ||
21 | }, | ||
19 | 22 | ||
20 | // public API | 23 | // public API |
21 | _min: {value: null}, | 24 | _min: { |
25 | value: null | ||
26 | }, | ||
27 | |||
22 | min: { | 28 | min: { |
23 | get: function() { | 29 | get: function() { |
24 | return this._min; | 30 | return this._min; |
@@ -26,73 +32,110 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
26 | set: function(value) { | 32 | set: function(value) { |
27 | this._min = String.isString(value) ? parseFloat(value) : value; | 33 | this._min = String.isString(value) ? parseFloat(value) : value; |
28 | this.needsDraw = true; | 34 | this.needsDraw = true; |
29 | } | 35 | }, |
36 | serializable: true | ||
37 | }, | ||
38 | |||
39 | _max: { | ||
40 | value: null | ||
30 | }, | 41 | }, |
31 | 42 | ||
32 | _max: {value: null}, | ||
33 | max: { | 43 | max: { |
34 | get: function() { | 44 | get: function() { |
35 | return this._max; | 45 | return this._max; |
36 | }, | 46 | }, |
37 | set: function(value) { | 47 | set: function(value) { |
38 | this._max = String.isString(value) ? parseFloat(value) : value; | 48 | this._max = String.isString(value) ? parseFloat(value) : value; |
39 | this.needsDraw = true; | 49 | this.needsDraw = true; |
40 | } | 50 | }, |
51 | serializable: true | ||
41 | }, | 52 | }, |
42 | 53 | ||
43 | _step: {value: null}, | 54 | _step: { |
55 | value: null | ||
56 | }, | ||
57 | |||
44 | step: { | 58 | step: { |
45 | get: function() { | 59 | get: function() { |
46 | return this._step; | 60 | return this._step; |
47 | }, | 61 | }, |
48 | set: function(value) { | 62 | set: function(value) { |
49 | this._step = String.isString(value) ? parseFloat(value) : value; | 63 | this._step = String.isString(value) ? parseFloat(value) : value; |
50 | this.needsDraw = true; | 64 | this.needsDraw = true; |
51 | } | 65 | }, |
52 | }, | 66 | serializable: true |
67 | }, | ||
68 | |||
69 | /** Width of the slider in px. Default = 300 */ | ||
70 | _width: { | ||
71 | value: null | ||
72 | }, | ||
73 | |||
74 | width: { | ||
75 | get: function() { | ||
76 | return this._width; | ||
77 | }, | ||
78 | set: function(value) { | ||
79 | this._width = String.isString(value) ? parseFloat(value) : value; | ||
80 | this.needsDraw = true; | ||
81 | }, | ||
82 | serializable: true | ||
83 | }, | ||
84 | |||
85 | percent: { | ||
86 | value: null | ||
87 | }, | ||
88 | |||
89 | _valueSyncedWithPosition: { | ||
90 | value: null | ||
91 | }, | ||
92 | |||
93 | _value: { | ||
94 | value: null | ||
95 | }, | ||
53 | 96 | ||
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 | percent: {value: null}, | ||
67 | |||
68 | _valueSyncedWithPosition: {value: null}, | ||
69 | _value: {value: null}, | ||
70 | value: { | 97 | value: { |
71 | get: function() { | 98 | get: function() { |
72 | return this._value; | 99 | return this._value; |
73 | }, | 100 | }, |
74 | set: function(value, fromInput) { | 101 | set: function(value, fromInput) { |
75 | this._value = String.isString(value) ? parseFloat(value) : value; | 102 | this._value = String.isString(value) ? parseFloat(value) : value; |
76 | 103 | ||
77 | if(fromInput) { | 104 | if(fromInput) { |
78 | this._valueSyncedWithPosition = true; | 105 | this._valueSyncedWithPosition = true; |
79 | } else { | 106 | } else { |
80 | this._valueSyncedWithPosition = false; | 107 | this._valueSyncedWithPosition = false; |
81 | this._calculatePositionFromValue(); | 108 | this._calculatePositionFromValue(); |
82 | this.needsDraw = true; | 109 | this.needsDraw = true; |