Skip to content

Commit

Permalink
Add Reverse Option
Browse files Browse the repository at this point in the history
  • Loading branch information
@MohammadYounes
MohammadYounes committed Oct 9, 2015
1 parent 78f4599 commit 8b2079f
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 19 deletions.
3 changes: 3 additions & 0 deletions css/ion.rangeSlider.css
View file
Expand Up @@ -42,6 +42,9 @@
position: absolute; display: block;
top: 0; left: 0;
}
.irs-bar-edge.reverse {
left:auto; right:0;
}

.irs-shadow {
position: absolute; display: none;
Expand Down
5 changes: 5 additions & 0 deletions css/ion.rangeSlider.skinHTML5.css
View file
Expand Up @@ -48,6 +48,11 @@
border-radius: 16px 0 0 16px;
-moz-border-radius: 16px 0 0 16px;
}
.irs-bar-edge.reverse {
border-width: 1px 1px 1px 0;
border-radius:0 16px 16px 0;
-moz-border-radius:0 16px 16px 0;
}

.irs-shadow {
height: 2px; top: 38px;
Expand Down
78 changes: 59 additions & 19 deletions js/ion.rangeSlider.js
View file
@@ -1,4 +1,4 @@
// Ion.RangeSlider
// Ion.RangeSlider
// version 2.1.1 Build: 347
// © Denis Ineshin, 2015
// https://github.com/IonDen
Expand Down Expand Up @@ -311,6 +311,8 @@

disable: false,

reverse: false,

onStart: null,
onChange: null,
onFinish: null,
Expand Down Expand Up @@ -369,7 +371,8 @@

input_values_separator: $inp.data("inputValuesSeparator"),

disable: $inp.data("disable")
disable: $inp.data("disable"),
reverse: $inp.data("reverse")
};
config_from_data.values = config_from_data.values && config_from_data.values.split(",");

Expand Down Expand Up @@ -488,8 +491,15 @@

this.$cache.cont.html(base_html);
this.$cache.rs = this.$cache.cont.find(".irs");
this.$cache.min = this.$cache.cont.find(".irs-min");
this.$cache.max = this.$cache.cont.find(".irs-max");

if (this.options.reverse === true) {
this.$cache.min = this.$cache.cont.find(".irs-max");
this.$cache.max = this.$cache.cont.find(".irs-min");
}else{
this.$cache.min = this.$cache.cont.find(".irs-min");
this.$cache.max = this.$cache.cont.find(".irs-max");
}

this.$cache.from = this.$cache.cont.find(".irs-from");
this.$cache.to = this.$cache.cont.find(".irs-to");
this.$cache.single = this.$cache.cont.find(".irs-single");
Expand All @@ -499,7 +509,7 @@

if (this.options.type === "single") {
this.$cache.cont.append(single_html);
this.$cache.edge = this.$cache.cont.find(".irs-bar-edge");
this.$cache.edge = this.$cache.cont.find(".irs-bar-edge").toggleClass('reverse', this.options.reverse);
this.$cache.s_single = this.$cache.cont.find(".single");
this.$cache.from[0].style.visibility = "hidden";
this.$cache.to[0].style.visibility = "hidden";
Expand Down Expand Up @@ -1124,7 +1134,7 @@
this.coords.x_pointer = this.coords.w_rs;
}

this.coords.p_pointer = this.toFixed(this.coords.x_pointer / this.coords.w_rs * 100);
this.coords.p_pointer = this.toFixed(this.convertToReversePercent(this.coords.x_pointer / this.coords.w_rs * 100));
},

convertToRealPercent: function (fake) {
Expand Down Expand Up @@ -1300,13 +1310,16 @@

this.drawLabels();

this.$cache.bar[0].style.left = this.coords.p_bar_x + "%";
this.$cache.bar[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_bar_x) - this.coords.p_bar_w + "%"
: this.coords.p_bar_x + "%";
this.$cache.bar[0].style.width = this.coords.p_bar_w + "%";

if (this.options.type === "single") {
this.$cache.s_single[0].style.left = this.coords.p_single_fake + "%";
this.$cache.s_single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_single_fake) - this.coords.p_handle + "%"
: this.coords.p_single_fake + "%";

this.$cache.single[0].style.left = this.labels.p_single_left + "%";
this.$cache.single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_single_left) - this.labels.p_single_fake + "%"
: this.labels.p_single_left + "%";

if (this.options.values.length) {
this.$cache.input.prop("value", this.result.from_value);
Expand All @@ -1315,17 +1328,21 @@
}
this.$cache.input.data("from", this.result.from);
} else {
this.$cache.s_from[0].style.left = this.coords.p_from_fake + "%";
this.$cache.s_to[0].style.left = this.coords.p_to_fake + "%";

this.$cache.s_from[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_from_fake) - this.coords.p_handle + "%"
: this.coords.p_from_fake + "%";
this.$cache.s_to[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_to_fake) - this.coords.p_handle + "%"
: this.coords.p_to_fake + "%";
if (this.old_from !== this.result.from || this.force_redraw) {
this.$cache.from[0].style.left = this.labels.p_from_left + "%";
this.$cache.from[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_from_left) - this.labels.p_from_fake + "%"
: this.labels.p_from_left + "%";
}
if (this.old_to !== this.result.to || this.force_redraw) {
this.$cache.to[0].style.left = this.labels.p_to_left + "%";
this.$cache.to[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_to_left) - this.labels.p_to_fake + "%"
: this.labels.p_to_left + "%";
}

this.$cache.single[0].style.left = this.labels.p_single_left + "%";
this.$cache.single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_single_left) - this.labels.p_single_fake + "%"
: this.labels.p_single_left + "%";

if (this.options.values.length) {
this.$cache.input.prop("value", this.result.from_value + this.options.input_values_separator + this.result.to_value);
Expand Down Expand Up @@ -1511,6 +1528,10 @@
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
from_min = from_min + (this.coords.p_handle / 2);

if (this.options.reverse === true) {
from_min = this.convertToReversePercent(from_min) - from_max;
}

c.shad_single[0].style.display = "block";
c.shad_single[0].style.left = from_min + "%";
c.shad_single[0].style.width = from_max + "%";
Expand All @@ -1525,6 +1546,10 @@
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
from_min = from_min + (this.coords.p_handle / 2);

if (this.options.reverse === true) {
from_min = this.convertToReversePercent(from_min) - from_max;
}

c.shad_from[0].style.display = "block";
c.shad_from[0].style.left = from_min + "%";
c.shad_from[0].style.width = from_max + "%";
Expand All @@ -1539,6 +1564,10 @@
to_max = this.toFixed(to_max - (this.coords.p_handle / 100 * to_max));
to_min = to_min + (this.coords.p_handle / 2);

if (this.options.reverse === true) {
to_min = this.convertToReversePercent(to_min) - to_max;
}

c.shad_to[0].style.display = "block";
c.shad_to[0].style.left = to_min + "%";
c.shad_to[0].style.width = to_max + "%";
Expand Down Expand Up @@ -1611,6 +1640,16 @@
return this.toFixed(percent);
},

/**
* Convert percent to its reverse
*
* @param value {number} X in percent
* @returns {number} X in reverse percent
*/
convertToReversePercent: function (value) {
return this.options.reverse ? this.toFixed(100 - value) : value;
},

/**
* Convert percent to real values
*
Expand Down Expand Up @@ -2087,10 +2126,10 @@

small_w = this.toFixed(big_w - (small_p * z));

html += '<span class="irs-grid-pol small" style="left: ' + small_w + '%"></span>';
html += '<span class="irs-grid-pol small" style="left: ' + this.convertToReversePercent(small_w) + '%"></span>';
}

html += '<span class="irs-grid-pol" style="left: ' + big_w + '%"></span>';
html += '<span class="irs-grid-pol" style="left: ' +this.convertToReversePercent(big_w) + '%"></span>';

result = this.convertToValue(big_w);
if (o.values.length) {
Expand All @@ -2099,7 +2138,7 @@
result = this._prettify(result);
}

html += '<span class="irs-grid-text js-grid-text-' + i + '" style="left: ' + big_w + '%">' + result + '</span>';
html += '<span class="irs-grid-text js-grid-text-' + i + '" style="left: ' + this.convertToReversePercent(big_w) + '%">' + result + '</span>';
}
this.coords.big_num = Math.ceil(big_num + 1);

Expand Down Expand Up @@ -2156,7 +2195,8 @@

for (i = 0; i < num; i++) {
label = this.$cache.grid_labels[i][0];
label.style.marginLeft = -this.coords.big_x[i] + "%";
label.style.marginLeft = this.options.reverse ? this.coords.big_x[i] - this.coords.big_p[i] + "%"
: -this.coords.big_x[i] + "%";
}
},

Expand Down

0 comments on commit 8b2079f

Please sign in to comment.