Skip to content

Commit c47823a

Browse files
ktaeylnktaeyln
committed
Added single mode and disabled state to Range Component
Improved theme of Range Component
1 parent 60147cb commit c47823a

File tree

2 files changed

+87
-32
lines changed

2 files changed

+87
-32
lines changed

‎Components/Range Component/range.css

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
11
range.setup {
2-
height: 15px;
3-
min-width: 80px;
2+
height: 20px;
3+
min-width: 120px;
44
display: inline-block;
55
position: relative;
66
}
7+
range.setup.disabled {
8+
cursor: default !important;
9+
}
710
range.setup track {
811
display: block;
912
position: absolute;
10-
padding: 0px 8px;
13+
padding: 0px 5px;
1114
height: 5px;
1215
width: 100%;
13-
top: 5px;
16+
top: 8px;
1417
}
1518
range.setup back,
1619
range.setup bar {
1720
height: 5px;
1821
display: block;
19-
background: #f2f2f2;
22+
border-radius: 8px;
23+
background: #E1E1E1;
2024
width: 100%;
2125
}
2226
range.setup bar {
2327
position: relative;
24-
background: #444;
28+
background: #A4A4A4;
29+
width: 0px;
30+
}
31+
range.setup.disabled back,
32+
range.setup.disabled bar {
33+
opacity: 0.3;
2534
}
2635
range.setup knob {
2736
cursor: move;
@@ -31,21 +40,20 @@ range.setup knob {
3140

3241
display: block;
3342
position: absolute;
34-
background: ThreeDShadow; /* Old browsers */
35-
background: -moz-radial-gradient(center, ellipse cover, ThreeDShadow 0%, ThreeDFace 100%); /* FF3.6+ */
36-
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,ThreeDShadow), color-stop(100%,ThreeDFace)); /* Chrome,Safari4+ */
37-
background: -webkit-radial-gradient(center, ellipse cover, ThreeDShadow 0%,ThreeDFace 100%); /* Chrome10+,Safari5.1+ */
38-
background: -o-radial-gradient(center, ellipse cover, ThreeDShadow 0%,ThreeDFace 100%); /* Opera 12+ */
39-
background: -ms-radial-gradient(center, ellipse cover, ThreeDShadow 0%,ThreeDFace 100%); /* IE10+ */
40-
background: radial-gradient(ellipse at center, ThreeDShadow 0%,ThreeDFace 100%); /* W3C */
41-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='ThreeDShadow', endColorstr='ThreeDFace',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
43+
background: white;
4244

45+
-webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.4);
46+
box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.4);
4347
border-radius: 15px;
44-
height: 15px;
45-
width: 15px;
48+
height: 20px;
49+
width: 10px;
4650
left: 0px;
4751
top: 0px;
4852
}
53+
range.setup.disabled knob {
54+
-webkit-box-shadow: 0px 0px 1px 0 rgba(0,0,0,0.2);
55+
box-shadow: 0px 0px 1px 0 rgba(0,0,0,0.2);
56+
}
4957
range.setup knob:hover {
5058
background: ButtonHighlight;
5159
}

‎Components/Range Component/range.js

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
Framework.Components.registerComponent("range", {
22

3-
getValue: function() {
4-
return this.values;
3+
getValue: function(full) {
4+
return !full && this.singleMode ? this.values[1] : this.values;
55
},
66

77
getMinimum: function() {
@@ -14,17 +14,22 @@ Framework.Components.registerComponent("range", {
1414

1515
setMinimum: function(min) {
1616
this.min = min;
17+
this.values[0] = Math.min(this.values[0], this.min);
1718
this.updateValues();
1819
},
1920

2021
setMaximum: function(max) {
2122
this.max = max;
23+
this.values[1] = Math.max(this.values[1], this.max);
2224
this.updateValues();
2325
},
2426

2527
setValue: function(val) {
28+
if(!Object.isArray(val))
29+
val = [this.min,val*1];
30+
2631
if(this.oldValues[0] == val[0] && this.oldValues[1] == val[1]) {
27-
this.updateLayout();
32+
this.updateLayout(this.getElement());
2833
return; // No update
2934
}
3035

@@ -33,19 +38,30 @@ Framework.Components.registerComponent("range", {
3338
this.updateValues();
3439
},
3540

36-
updateLayout: function() {
37-
var el = this.getElement();
38-
var width = el.measure("width")-(this.knobSize*2);
41+
updateLayout: function(el) {
42+
var width;
43+
if(this.singleMode) {
44+
width = el.measure("width")-this.knobSize;
45+
} else {
46+
width = el.measure("width")-(this.knobSize*2);
47+
}
3948
var minPerc = ((this.values[0] - this.min) / this.valMod);
4049
var maxPerc = ((this.values[1] - this.min) / this.valMod);
4150
this.minKnob.slideTo({
4251
"left": (minPerc*width) + "px"
4352
});
44-
this.maxKnob.slideTo({
45-
"left": (this.knobSize+(maxPerc*width)) + "px"
46-
});
47-
var left = minPerc*width;
48-
var right = (maxPerc*width)+this.knobSize;
53+
if(this.singleMode)
54+
this.maxKnob.slideTo({
55+
"left": (maxPerc*width) + "px"
56+
});
57+
else
58+
this.maxKnob.slideTo({
59+
"left": (this.knobSize+(maxPerc*width)) + "px"
60+
});
61+
var left = this.singleMode ? 0 : minPerc*width;
62+
var right = (maxPerc*width);
63+
if(!this.singleMode)
64+
right += this.knobSize;
4965
this.bar.slideTo({
5066
"left": left + "px"
5167
});
@@ -72,9 +88,25 @@ Framework.Components.registerComponent("range", {
7288
this.tick = el.readAttribute("tick")*1 || 1;
7389
this.valMod = this.max-this.min;
7490

91+
this.singleMode = el.hasAttribute("single");
92+
if(this.singleMode)
93+
this.minKnob.hide();
94+
else
95+
this.minKnob.show();
96+
97+
this.disabled = el.hasAttribute("disabled");
98+
if(this.disabled)
99+
el.addClassName("disabled");
100+
else
101+
el.removeClassName("disabled");
102+
75103
this.values = el.readAttribute("value");
76104
if(this.values) {
77105
this.values = this.values.split(/[,\s]+/);
106+
if(!this.values[1]) {
107+
this.values[1] = this.values[0];
108+
this.values[0] = this.min;
109+
}
78110
this.values = [this.values[0]*1,this.values[1]*1];
79111
} else
80112
this.values = [this.min,this.max];
@@ -101,6 +133,14 @@ Framework.Components.registerComponent("range", {
101133
this.makeDraggable(this.minKnob);
102134
this.makeDraggable(this.maxKnob);
103135

136+
Event.on(this.minKnob, "drag:start", (function(e) {
137+
if(this.disabled)
138+
e.stop(); // Prevent event
139+
}).bind(this));
140+
Event.on(this.maxKnob, "drag:start", (function(e) {
141+
if(this.disabled)
142+
e.stop(); // Prevent event
143+
}).bind(this));
104144
Event.on(this.minKnob, "drag:move", (function(e) {
105145
var pos = e.memo;
106146
//console.log(pos);
@@ -127,7 +167,10 @@ Framework.Components.registerComponent("range", {
127167
//console.log(pos);
128168

129169
var width = el.measure("width");
130-
pos.left = Math.max(this.knobSize, pos.left);
170+
if(this.singleMode)
171+
pos.left = Math.max(0, pos.left);
172+
else
173+
pos.left = Math.max(this.knobSize, pos.left);
131174
pos.left = Math.min(width-this.knobSize, pos.left);
132175
this.maxKnob.setStyle({"left": pos.left + "px"});
133176
width -= this.knobSize*2;
@@ -147,7 +190,7 @@ Framework.Components.registerComponent("range", {
147190
Event.on(this.minKnob, "drag:stop", (function(e) {
148191
var val = this.minKnob.measure("left");
149192
val /= el.measure("width")-(this.knobSize*2);
150-
console.log(val);
193+
//console.log(val);
151194
val *= this.valMod;
152195
val += this.min;
153196

@@ -159,9 +202,13 @@ Framework.Components.registerComponent("range", {
159202
Event.on(this.maxKnob, "drag:stop", (function(e) {
160203
var val = this.maxKnob.measure("left");
161204

162-
val -= this.knobSize;
163-
val /= el.measure("width")-(this.knobSize*2);
164-
console.log(val);
205+
if(this.singleMode)
206+
val /= el.measure("width")-this.knobSize;
207+
else {
208+
val -= this.knobSize;
209+
val /= el.measure("width")-(this.knobSize*2);
210+
}
211+
//console.log(val);
165212
val *= this.valMod;
166213
val += this.min;
167214

0 commit comments

Comments
 (0)