github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-02-07 21:26:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update to ion.rangeSlider 2.2.0

Browse Source
This commit is contained in:
Winston Chang
2018-02-26 14:24:08 -06:00
parent 8e0f17c9d7
commit f28dcd85fb
5 changed files with 332 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
inst/www/shared/ionrangeslider/css/ion.rangeSlider.skinRound.css Normal file
View File

@@ -0,0 +1,108 @@
/* Ion.RangeSlider, Round Skin
// css version 2.2.0
// © Denis Ineshin, 2014 https://github.com/IonDen
// © Veaceslav Grimalschi, 2018 https://github.com/grimalschi
// ===================================================================================================================*/
/* =====================================================================================================================
// Skin details */
.irs {
height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.irs-with-grid {
height: 67px;
}
.irs-line {
top: 36px;
height: 4px;
background: #DEE4EC;
border-radius: 16px;
}
.irs-bar, .irs-bar-edge {
top: 36px;
height: 4px;
background: #006CFA;
}
.irs-bar-edge {
width: 12px;
}
.irs-shadow {
height: 4px;
top: 40px;
background: #DEE4EC;
opacity: 0.5;
}
.lt-ie9 .irs-shadow {
filter: alpha(opacity=25);
}
.irs-slider {
top: 35px;
width: 16px;
height: 16px;
margin-top: -10px;
border: 4px solid #006CFA;
background: white;
border-radius: 27px;
box-shadow: 0 1px 3px rgba(0,0,255,0.3);
cursor: pointer;
box-sizing: content-box;
}
.irs-slider.state_hover, .irs-slider:hover {
background: #f0f6ff;
}
.irs-min, .irs-max {
color: #333;
font-size: 14px;
top: 0;
padding: 3px 5px;
background: rgba(0,0,0,0.1);
border-radius: 3px;
line-height: 1;
}
.irs-from, .irs-to, .irs-single {
color: #fff;
font-size: 14px;
text-shadow: none;
padding: 3px 5px;
background: #006CFA;
border-radius: 3px;
line-height: 1;
}
.irs-from:after, .irs-to:after, .irs-single:after {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #006CFA;
}
.irs-grid {
height: 27px;
}
.irs-grid-pol {
background: #DEE4EC;
}
.irs-grid-text {
bottom: 4px;
color: silver;
font-size: 12px;
}

87
inst/www/shared/ionrangeslider/css/ion.rangeSlider.skinSquare.css Normal file
View File

@@ -0,0 +1,87 @@
/* Ion.RangeSlider, Square Skin
// css version 2.2.0
// © Denis Ineshin, 2014 https://github.com/IonDen
// © Veaceslav Grimalschi, 2018 https://github.com/grimalschi
// ===================================================================================================================*/
/* =====================================================================================================================
// Skin details */
.irs {
height: 45px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.irs-with-grid {
height: 62px;
}
.irs-line {
top: 31px;
height: 4px;
background: #DEDEDE;
}
.irs-bar, .irs-bar-edge {
top: 31px;
height: 4px;
background: black;
}
.irs-bar-edge {
width: 8px;
}
.irs-shadow {
height: 2px;
top: 37px;
background: #DEDEDE;
}
.irs-slider {
top: 30px;
width: 10px;
height: 10px;
margin-top: -5px;
border: 3px solid black;
background: white;
cursor: pointer;
box-sizing: content-box;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.irs-slider.state_hover, .irs-slider:hover {
background: #f0f0f0;
}
.irs-min, .irs-max {
color: #333;
font-size: 13px;
top: 0;
padding: 3px 4px;
background: rgba(0,0,0,0.1);
line-height: 1;
}
.irs-from, .irs-to, .irs-single {
color: #fff;
font-size: 13px;
text-shadow: none;
padding: 3px 4px;
background: black;
line-height: 1;
}
.irs-grid {
height: 27px;
}
.irs-grid-pol {
background: #DEDEDE;
}
.irs-grid-text {
bottom: 4px;
color: silver;
font-size: 11px;
}

182
inst/www/shared/ionrangeslider/js/ion.rangeSlider.js
View File

@@ -1,6 +1,6 @@
// Ion.RangeSlider
// version 2.1.6 Build: 369
// © Denis Ineshin, 2016
// version 2.2.0 Build: 380
// © Denis Ineshin, 2017
// https://github.com/IonDen
//
// Project page: http://ionden.com/a/plugins/ion.rangeSlider/en.html
@@ -121,7 +121,7 @@
var base_html =
'<span class="irs">' +
'<span class="irs-line" tabindex="-1"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span>' +
'<span class="irs-line" tabindex="0"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span>' +
'<span class="irs-min">0</span><span class="irs-max">1</span>' +
'<span class="irs-from">0</span><span class="irs-to">0</span><span class="irs-single">0</span>' +
'</span>' +
@@ -156,7 +156,7 @@
* @constructor
*/
var IonRangeSlider = function (input, options, plugin_count) {
this.VERSION = "2.1.6";
this.VERSION = "2.2.0";
this.input = input;
this.plugin_count = plugin_count;
this.current_plugin = 0;
@@ -169,9 +169,9 @@
this.dragging = false;
this.force_redraw = false;
this.no_diapason = false;
this.has_tab_index = true;
this.is_key = false;
this.is_update = false;
this.is_first_update = true;
this.is_start = true;
this.is_finish = false;
this.is_active = false;
@@ -303,8 +303,7 @@
force_edges: false,
keyboard: false,
keyboard_step: 5,
keyboard: true,
grid: false,
grid_margin: true,
@@ -323,7 +322,11 @@
input_values_separator: ";",
disable: false,
block: false,
extra_classes: "",
scope: null,
onStart: null,
onChange: null,
onFinish: null,
@@ -369,7 +372,6 @@
force_edges: $inp.data("forceEdges"),
keyboard: $inp.data("keyboard"),
keyboard_step: $inp.data("keyboardStep"),
grid: $inp.data("grid"),
grid_margin: $inp.data("gridMargin"),
@@ -387,7 +389,10 @@
input_values_separator: $inp.data("inputValuesSeparator"),
disable: $inp.data("disable")
disable: $inp.data("disable"),
block: $inp.data("block"),
extra_classes: $inp.data("extraClasses"),
};
config_from_data.values = config_from_data.values && config_from_data.values.split(",");
@@ -498,7 +503,7 @@
* Appends slider template to a DOM
*/
append: function () {
var container_html = '<span class="irs js-irs-' + this.plugin_count + '"></span>';
var container_html = '<span class="irs js-irs-' + this.plugin_count + ' ' + this.options.extra_classes + '"></span>';
this.$cache.input.before(container_html);
this.$cache.input.prop("readonly", true);
this.$cache.cont = this.$cache.input.prev();
@@ -544,11 +549,20 @@
this.appendDisableMask();
this.$cache.input[0].disabled = true;
} else {
this.$cache.cont.removeClass("irs-disabled");
this.$cache.input[0].disabled = false;
this.removeDisableMask();
this.bindEvents();
}
// block only if not disabled
if (!this.options.disable) {
if (this.options.block) {
this.appendDisableMask();
} else {
this.removeDisableMask();
}
}
if (this.options.drag_interval) {
this.$cache.bar[0].style.cursor = "ew-resize";
}
@@ -581,6 +595,7 @@
switch (target) {
case "single":
this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_single_fake);
this.$cache.s_single.addClass("state_hover");
break;
case "from":
this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake);
@@ -612,9 +627,18 @@
this.$cache.cont.addClass("irs-disabled");
},
/**
* Then slider is not disabled
* remove disable mask
*/
removeDisableMask: function () {
this.$cache.cont.remove(".irs-disable-mask");
this.$cache.cont.removeClass("irs-disabled");
},
/**
* Remove slider instance
* and ubind all events
* and unbind all events
*/
remove: function () {
this.$cache.cont.remove();
@@ -659,6 +683,8 @@
this.$cache.line.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
this.$cache.line.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
this.$cache.line.on("focus.irs_" + this.plugin_count, this.pointerFocus.bind(this));
if (this.options.drag_interval && this.options.type === "double") {
this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "both"));
this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "both"));
@@ -705,6 +731,29 @@
}
},
/**
* Focus with tabIndex
*
* @param e {Object} event object
*/
pointerFocus: function (e) {
if (!this.target) {
var x;
var $handle;
if (this.options.type === "single") {
$handle = this.$cache.single;
} else {
$handle = this.$cache.from;
}
x = $handle.offset().left;
x += ($handle.width() / 2) - 1;
this.pointerClick("single", {preventDefault: function () {}, pageX: x});
}
},
/**
* Mousemove or touchmove
* only for handlers
@@ -864,18 +913,19 @@
},
/**
* Move by key. Beta
* @todo refactor than have plenty of time
* Move by key
*
* @param right {boolean} direction to move
*/
moveByKey: function (right) {
var p = this.coords.p_pointer;
var p_step = (this.options.max - this.options.min) / 100;
p_step = this.options.step / p_step;
if (right) {
p += this.options.keyboard_step;
p += p_step;
} else {
p -= this.options.keyboard_step;
p -= p_step;
}
this.coords.x_pointer = this.toFixed(this.coords.w_rs / 100 * p);
@@ -902,8 +952,14 @@
this.$cache.min.html(this.decorate(this.options.p_values[this.options.min]));
this.$cache.max.html(this.decorate(this.options.p_values[this.options.max]));
} else {
this.$cache.min.html(this.decorate(this._prettify(this.options.min), this.options.min));
this.$cache.max.html(this.decorate(this._prettify(this.options.max), this.options.max));
var min_pretty = this._prettify(this.options.min);
var max_pretty = this._prettify(this.options.max);
this.result.min_pretty = min_pretty;
this.result.max_pretty = max_pretty;
this.$cache.min.html(this.decorate(min_pretty, this.options.min));
this.$cache.max.html(this.decorate(max_pretty, this.options.max));
}
this.labels.w_min = this.$cache.min.outerWidth(false);
@@ -1114,6 +1170,7 @@
this.result.from_percent = this.coords.p_single_real;
this.result.from = this.convertToValue(this.coords.p_single_real);
this.result.from_pretty = this._prettify(this.result.from);
if (this.options.values.length) {
this.result.from_value = this.options.values[this.result.from];
@@ -1124,8 +1181,10 @@
this.result.from_percent = this.coords.p_from_real;
this.result.from = this.convertToValue(this.coords.p_from_real);
this.result.from_pretty = this._prettify(this.result.from);
this.result.to_percent = this.coords.p_to_real;
this.result.to = this.convertToValue(this.coords.p_to_real);
this.result.to_pretty = this._prettify(this.result.to);
if (this.options.values.length) {
this.result.from_value = this.options.values[this.result.from];
@@ -1364,10 +1423,9 @@
if (!this.is_resize && !this.is_update && !this.is_start && !this.is_finish) {
this.callOnChange();
}
if (this.is_key || this.is_click || this.is_first_update) {
if (this.is_key || this.is_click) {
this.is_key = false;
this.is_click = false;
this.is_first_update = false;
this.callOnFinish();
}
@@ -1392,11 +1450,13 @@
return;
}
var values_num = this.options.values.length,
p_values = this.options.p_values,
text_single,
text_from,
text_to;
var values_num = this.options.values.length;
var p_values = this.options.p_values;
var text_single;
var text_from;
var text_to;
var from_pretty;
var to_pretty;
if (this.options.hide_from_to) {
return;
@@ -1408,7 +1468,9 @@
text_single = this.decorate(p_values[this.result.from]);
this.$cache.single.html(text_single);
} else {
text_single = this.decorate(this._prettify(this.result.from), this.result.from);
from_pretty = this._prettify(this.result.from);
text_single = this.decorate(from_pretty, this.result.from);
this.$cache.single.html(text_single);
}
@@ -1445,16 +1507,18 @@
this.$cache.to.html(text_to);
} else {
from_pretty = this._prettify(this.result.from);
to_pretty = this._prettify(this.result.to);
if (this.options.decorate_both) {
text_single = this.decorate(this._prettify(this.result.from), this.result.from);
text_single = this.decorate(from_pretty, this.result.from);
text_single += this.options.values_separator;
text_single += this.decorate(this._prettify(this.result.to), this.result.to);
text_single += this.decorate(to_pretty, this.result.to);
} else {
text_single = this.decorate(this._prettify(this.result.from) + this.options.values_separator + this._prettify(this.result.to), this.result.to);
text_single = this.decorate(from_pretty + this.options.values_separator + to_pretty, this.result.to);
}
text_from = this.decorate(this._prettify(this.result.from), this.result.from);
text_to = this.decorate(this._prettify(this.result.to), this.result.to);
text_from = this.decorate(from_pretty, this.result.from);
text_to = this.decorate(to_pretty, this.result.to);
this.$cache.single.html(text_single);
this.$cache.from.html(text_from);
@@ -1606,28 +1670,44 @@
this.writeToInput();
if (this.options.onStart && typeof this.options.onStart === "function") {
this.options.onStart(this.result);
if (this.options.scope) {
this.options.onStart.call(this.options.scope, this.result);
} else {
this.options.onStart(this.result);
}
}
},
callOnChange: function () {
this.writeToInput();
if (this.options.onChange && typeof this.options.onChange === "function") {
this.options.onChange(this.result);
if (this.options.scope) {
this.options.onChange.call(this.options.scope, this.result);
} else {
this.options.onChange(this.result);
}
}
},
callOnFinish: function () {
this.writeToInput();
if (this.options.onFinish && typeof this.options.onFinish === "function") {
this.options.onFinish(this.result);
if (this.options.scope) {
this.options.onFinish.call(this.options.scope, this.result);
} else {
this.options.onFinish(this.result);
}
}
},
callOnUpdate: function () {
this.writeToInput();
if (this.options.onUpdate && typeof this.options.onUpdate === "function") {
this.options.onUpdate(this.result);
if (this.options.scope) {
this.options.onUpdate.call(this.options.scope, this.result);
} else {
this.options.onUpdate(this.result);
}
}
},
@@ -1639,6 +1719,14 @@
toggleInput: function () {
this.$cache.input.toggleClass("irs-hidden-input");
if (this.has_tab_index) {
this.$cache.input.prop("tabindex", -1);
} else {
this.$cache.input.removeProp("tabindex");
}
this.has_tab_index = !this.has_tab_index;
},
/**
@@ -1897,7 +1985,6 @@
if (typeof o.to_min === "string") o.to_min = +o.to_min;
if (typeof o.to_max === "string") o.to_max = +o.to_max;
if (typeof o.keyboard_step === "string") o.keyboard_step = +o.keyboard_step;
if (typeof o.grid_num === "string") o.grid_num = +o.grid_num;
if (o.max < o.min) {
@@ -1912,7 +1999,6 @@
o.grid_num = o.max;
o.grid_snap = true;
for (i = 0; i < vl; i++) {
value = +v[i];
@@ -1968,10 +2054,6 @@
o.step = 1;
}
if (typeof o.keyboard_step !== "number" || isNaN(o.keyboard_step) || !o.keyboard_step || o.keyboard_step < 0) {
o.keyboard_step = 5;
}
if (typeof o.from_min === "number" && o.from < o.from_min) {
o.from = o.from_min;
}
@@ -2057,6 +2139,7 @@
updateFrom: function () {
this.result.from = this.options.from;
this.result.from_percent = this.convertToPercent(this.result.from);
this.result.from_pretty = this._prettify(this.result.from);
if (this.options.values) {
this.result.from_value = this.options.values[this.result.from];
}
@@ -2065,6 +2148,7 @@
updateTo: function () {
this.result.to = this.options.to;
this.result.to_percent = this.convertToPercent(this.result.to);
this.result.to_pretty = this._prettify(this.result.to);
if (this.options.values) {
this.result.to_value = this.options.values[this.result.to];
}
@@ -2107,8 +2191,15 @@
this.calcGridMargin();
if (o.grid_snap) {
big_num = total / o.step;
big_p = this.toFixed(o.step / (total / 100));
if (total > 50) {
big_num = 50 / o.step;
big_p = this.toFixed(o.step / 0.5);
} else {
big_num = total / o.step;
big_p = this.toFixed(o.step / (total / 100));
}
} else {
big_p = this.toFixed(100 / big_num);
}
@@ -2133,11 +2224,6 @@
if (big_w > 100) {
big_w = 100;
local_small_max -= 2;
if (local_small_max < 0) {
local_small_max = 0;
}
}
this.coords.big[i] = big_w;

4
inst/www/shared/ionrangeslider/js/ion.rangeSlider.min.js vendored
View File

File diff suppressed because one or more lines are too long