Skip to content

Commit 0038abb

Browse files
ktaeylnktaeyln
committed
Added Range Component
1 parent 12de868 commit 0038abb

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎Components/Range Component/boot.inc.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?php
2+
Template::importPrototypeAddon("simulate", true);
3+
Template::addGlobalScript("range.js");
4+
Template::addGlobalStyle("range.css");
5+
?>

‎Components/Range Component/info.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Range Component",
3+
"provides": "range-component"
4+
}

‎Components/Range Component/range.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
range.setup {
2+
height: 15px;
3+
min-width: 80px;
4+
display: inline-block;
5+
position: relative;
6+
}
7+
range.setup track {
8+
display: block;
9+
position: absolute;
10+
padding: 0px 8px;
11+
height: 5px;
12+
width: 100%;
13+
top: 5px;
14+
}
15+
range.setup back,
16+
range.setup bar {
17+
height: 5px;
18+
display: block;
19+
background: #f2f2f2;
20+
width: 100%;
21+
}
22+
range.setup bar {
23+
position: relative;
24+
background: #444;
25+
}
26+
range.setup knob {
27+
cursor: move;
28+
cursor: -moz-grab;
29+
cursor: -webkit-grab;
30+
cursor: grab;
31+
32+
display: block;
33+
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 */
42+
43+
border-radius: 15px;
44+
height: 15px;
45+
width: 15px;
46+
left: 0px;
47+
top: 0px;
48+
}
49+
range.setup knob:hover {
50+
background: ButtonHighlight;
51+
}
52+
range.setup knob:active {
53+
background: ButtonShadow;
54+
cursor: -moz-grabbing;
55+
cursor: -webkit-grabbing;
56+
cursor: grabbing;
57+
}

‎Components/Range Component/range.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
Framework.Components.registerComponent("range", {
2+
3+
getValue: function() {
4+
return this.values;
5+
},
6+
7+
setValue: function(val) {
8+
this.values = val;
9+
this.updateValues();
10+
},
11+
12+
updateValues: function() {
13+
var el = this.getElement();
14+
var width = el.measure("width")-(this.knobSize*2);
15+
var minPerc = ((this.values[0] - this.min) / this.max);
16+
var maxPerc = ((this.values[1] - this.min) / this.max);
17+
this.minKnob.setStyle({
18+
"left": (minPerc*width) + "px"
19+
});
20+
this.maxKnob.setStyle({
21+
"left": (this.knobSize+(maxPerc*width)) + "px"
22+
});
23+
var left = minPerc*width;
24+
var right = (maxPerc*width)+this.knobSize;
25+
this.bar.setStyle({
26+
"left": left + "px",
27+
"width": (right-left) + "px"
28+
});
29+
30+
Event.simulate(el, "change");
31+
},
32+
33+
hook: function(el) {
34+
el.getValue = this.getValue.bind(this);
35+
el.setValue = this.setValue.bind(this);
36+
},
37+
38+
setup: function(el) {
39+
this.backTrack = $C(el, "track");
40+
this.back = $C(this.backTrack, "back");
41+
42+
this.barTrack = $C(el, "track");
43+
this.bar = $C(this.barTrack, "bar");
44+
45+
this.minKnob = $C(el, "knob.min");
46+
this.maxKnob = $C(el, "knob.max");
47+
48+
this.min = el.readAttribute("value") || 0;
49+
this.max = el.readAttribute("value") || 100;
50+
var valMod = this.max-this.min;
51+
52+
this.values = el.readAttribute("value");
53+
if(this.values)
54+
this.values = this.values.split(/[,\s]+/g);
55+
else
56+
this.values = [this.min,this.max];
57+
58+
el.addClassName("setup");
59+
setTimeout((function() {
60+
this.updateValues();
61+
this.knobSize = Element.measure(this.minKnob, "width");
62+
this.makeDraggable(this.minKnob);
63+
this.makeDraggable(this.maxKnob);
64+
65+
Event.on(this.minKnob, "drag:move", (function(e) {
66+
var pos = e.memo;
67+
//console.log(pos);
68+
69+
var width = el.measure("width");
70+
pos.left = Math.max(0, pos.left);
71+
pos.left = Math.min(width-(this.knobSize*2), pos.left);
72+
this.minKnob.setStyle({"left": pos.left + "px"});
73+
width -= this.knobSize*2;
74+
75+
var left = pos.left;
76+
var right = (this.knobSize+(((this.values[1] - this.min) / this.max)*width));
77+
this.bar.setStyle({
78+
"left": left + "px",
79+
"width": Math.max(0, right-left) + "px"
80+
});
81+
82+
pos.left += this.knobSize;
83+
this.maxKnob.setStyle({"left": Math.max(right, pos.left) + "px"});
84+
e.stop();
85+
}).bind(this));
86+
Event.on(this.maxKnob, "drag:move", (function(e) {
87+
var pos = e.memo;
88+
//console.log(pos);
89+
90+
var width = el.measure("width");
91+
pos.left = Math.max(this.knobSize, pos.left);
92+
pos.left = Math.min(width-this.knobSize, pos.left);
93+
this.maxKnob.setStyle({"left": pos.left + "px"});
94+
width -= this.knobSize*2;
95+
96+
var left = (((this.values[0] - this.min) / this.max)*width);
97+
var right = pos.left;
98+
this.bar.setStyle({
99+
"left": left + "px",
100+
"width": Math.max(0, right-left) + "px"
101+
});
102+
103+
pos.left -= this.knobSize;
104+
this.minKnob.setStyle({"left": Math.min(left, pos.left) + "px"});
105+
e.stop();
106+
}).bind(this));
107+
var boundUpdateValues = this.updateValues.bind(this);
108+
Event.on(this.minKnob, "drag:stop", (function(e) {
109+
var val = this.minKnob.measure("left");
110+
val /= el.measure("width")-(this.knobSize*2);
111+
val *= valMod;
112+
val += this.min;
113+
114+
this.values[0] = val;
115+
this.values[1] = Math.max(val, this.values[1]);
116+
boundUpdateValues();
117+
}).bind(this));
118+
Event.on(this.maxKnob, "drag:stop", (function(e) {
119+
var val = this.maxKnob.measure("left");
120+
121+
val -= this.knobSize;
122+
val /= el.measure("width")-(this.knobSize*2);
123+
val *= valMod;
124+
val += this.min;
125+
126+
this.values[1] = val;
127+
this.values[0] = Math.min(this.values[0], val);
128+
boundUpdateValues();
129+
}).bind(this));
130+
boundUpdateValues();
131+
}).bind(this), 0);
132+
},
133+
134+
destroy: function(el) {
135+
this.bar.remove();
136+
this.maxKnob.remove();
137+
this.minKnob.remove();
138+
139+
el.removeClassName("setup");
140+
}
141+
142+
});

0 commit comments

Comments
 (0)