diff --git a/frontend/controllers/CatalogController.php b/frontend/controllers/CatalogController.php index 8af5b2f..a901dae 100755 --- a/frontend/controllers/CatalogController.php +++ b/frontend/controllers/CatalogController.php @@ -109,7 +109,6 @@ class CatalogController extends \yii\web\Controller } $productModel = new ProductFrontendSearch(); - //$productQuery = $productModel->getSearchQuery($category, $params); $productProvider = $productModel->search($category, $params); $brandModel = new BrandSearch(); @@ -118,7 +117,7 @@ class CatalogController extends \yii\web\Controller $groups = $category->getActiveFilters(); $groups = ArrayHelper::index($groups, null, 'name'); - //$priceLimits = $productModel->priceLimits($category, $params); + $priceLimits = $productModel->priceLimits($category, $params); return $this->render('products', [ @@ -130,7 +129,7 @@ class CatalogController extends \yii\web\Controller 'productModel' => $productModel, 'productProvider' => $productProvider, 'groups' => $groups, - // 'priceLimits' => $priceLimits, + 'priceLimits' => $priceLimits, ]); } diff --git a/frontend/views/catalog/products.php b/frontend/views/catalog/products.php index 63739c9..972f4fb 100755 --- a/frontend/views/catalog/products.php +++ b/frontend/views/catalog/products.php @@ -23,6 +23,12 @@ use yii\helpers\Url; $this->params['seo']['category_name'] = $category->name; $this->params['breadcrumbs'][] = $category->name; + $this->registerCssFile (Yii::getAlias('@web/css/ion.rangeSlider.css')); + $this->registerCssFile (Yii::getAlias('@web/css/ion.rangeSlider.skinHTML5.css')); + $this->registerJsFile(Yii::getAlias('@web/js/ion.rangeSlider.js'),[ + 'position' => View::POS_END, + 'depends' => ['yii\web\JqueryAsset'] + ]); ?>
@@ -31,7 +37,8 @@ use yii\helpers\Url; 'category'=>$category, 'groups'=> $groups, 'filter'=> $filter, - 'brands' => $brands + 'brands' => $brands, + 'priceLimits' => $priceLimits ])?>
@@ -114,14 +121,18 @@ use yii\helpers\Url; true //disable caching ); - });"; + }); + + + + + "; $this->registerJs($js,View::POS_READY); ?> -
diff --git a/frontend/web/css/css_header.css b/frontend/web/css/css_header.css index b739e0a..e0b67ce 100755 --- a/frontend/web/css/css_header.css +++ b/frontend/web/css/css_header.css @@ -26939,3 +26939,21 @@ ul.product-special li.promo div { margin-top:7px } } + +.irs-from, .irs-to, .irs-single{ + background: #0f6fc7; +} + +.irs-bar{ + border-top: 1px solid #0f6fc7; + border-bottom: 1px solid #0f6fc7; + background: #0f6fc7; +} + +.irs-slider.state_hover, .irs-slider:hover{ + background: #a7acb0; + } + +.irs-slider.state_hover, .irs-slider{ + background: #9fa4a8; +} \ No newline at end of file diff --git a/frontend/web/css/ion.rangeSlider.css b/frontend/web/css/ion.rangeSlider.css new file mode 100755 index 0000000..68fd119 --- /dev/null +++ b/frontend/web/css/ion.rangeSlider.css @@ -0,0 +1,150 @@ +/* Ion.RangeSlider +// css version 2.0.3 +// © 2013-2014 Denis Ineshin | IonDen.com +// ===================================================================================================================*/ + +/* ===================================================================================================================== +// RangeSlider */ + +.irs { + position: relative; display: block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + .irs-line { + position: relative; display: block; + overflow: hidden; + outline: none !important; + } + .irs-line-left, .irs-line-mid, .irs-line-right { + position: absolute; display: block; + top: 0; + } + .irs-line-left { + left: 0; width: 11%; + } + .irs-line-mid { + left: 9%; width: 82%; + } + .irs-line-right { + right: 0; width: 11%; + } + + .irs-bar { + position: absolute; display: block; + left: 0; width: 0; + } + .irs-bar-edge { + position: absolute; display: block; + top: 0; left: 0; + } + + .irs-shadow { + position: absolute; display: none; + left: 0; width: 0; + } + + .irs-slider { + position: absolute; display: block; + cursor: default; + z-index: 1; + } + .irs-slider.single { + + } + .irs-slider.from { + + } + .irs-slider.to { + + } + .irs-slider.type_last { + z-index: 2; + } + + .irs-min { + position: absolute; display: block; + left: 0; + cursor: default; + } + .irs-max { + position: absolute; display: block; + right: 0; + cursor: default; + } + + .irs-from, .irs-to, .irs-single { + position: absolute; display: block; + top: 0; left: 0; + cursor: default; + white-space: nowrap; + } + +.irs-grid { + position: absolute; display: none; + bottom: 0; left: 0; + width: 100%; height: 20px; +} +.irs-with-grid .irs-grid { + display: block; +} + .irs-grid-pol { + position: absolute; + top: 0; left: 0; + width: 1px; height: 8px; + background: #000; + } + .irs-grid-pol.small { + height: 4px; + } + .irs-grid-text { + position: absolute; + bottom: 0; left: 0; + white-space: nowrap; + text-align: center; + font-size: 9px; line-height: 9px; + padding: 0 3px; + color: #000; + } + +.irs-disable-mask { + position: absolute; display: block; + top: 0; left: -1%; + width: 102%; height: 100%; + cursor: default; + background: rgba(0,0,0,0.0); + z-index: 2; +} +.lt-ie9 .irs-disable-mask { + background: #000; + filter: alpha(opacity=0); + cursor: not-allowed; +} + +.irs-disabled { + opacity: 0.4; +} + + +.irs-hidden-input { + position: absolute !important; + display: block !important; + top: 0 !important; + left: 0 !important; + width: 0 !important; + height: 0 !important; + font-size: 0 !important; + line-height: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden; + outline: none !important; + z-index: -9999 !important; + background: none !important; + border-style: solid !important; + border-color: transparent !important; +} diff --git a/frontend/web/css/ion.rangeSlider.skinHTML5.css b/frontend/web/css/ion.rangeSlider.skinHTML5.css new file mode 100755 index 0000000..1fd2d73 --- /dev/null +++ b/frontend/web/css/ion.rangeSlider.skinHTML5.css @@ -0,0 +1,159 @@ +/* Ion.RangeSlider, Simple Skin +// css version 2.0.3 +// © Denis Ineshin, 2014 https://github.com/IonDen +// © guybowden, 2014 https://github.com/guybowden +// ===================================================================================================================*/ + +/* ===================================================================================================================== +// Skin details */ + +.irs { + height: 55px; +} +.irs-with-grid { + height: 75px; +} +.irs-line { + height: 10px; top: 33px; + background: #EEE; + /*background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); !* W3C *!*/ + border: 1px solid #CCC; + border-radius: 16px; + -moz-border-radius: 16px; +} + .irs-line-left { + height: 8px; + } + .irs-line-mid { + height: 8px; + } + .irs-line-right { + height: 8px; + } + +.irs-bar { + height: 10px; top: 33px; + border-top: 1px solid #F75D50; + border-bottom: 1px solid #F75D50; + background: #F75D50; + /*background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); !* W3C *!*/ +} + .irs-bar-edge { + height: 10px; top: 33px; + width: 14px; + border: 1px solid #F75D50; + border-right: 0; + background: #F75D50; + background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */ + border-radius: 16px 0 0 16px; + -moz-border-radius: 16px 0 0 16px; + } + +.irs-shadow { + height: 2px; top: 38px; + background: #000; + opacity: 0.3; + border-radius: 5px; + -moz-border-radius: 5px; +} +.lt-ie9 .irs-shadow { + filter: alpha(opacity=30); +} + +.irs-slider { + top: 25px; + width: 27px; height: 27px; + border: 1px solid #AAA; + background: #DDD; + background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */ + border-radius: 27px; + -moz-border-radius: 27px; + box-shadow: 1px 1px 3px rgba(0,0,0,0.3); + cursor: pointer; +} + +.irs-slider.state_hover, .irs-slider:hover { + background: #FFF; +} + +.irs-min, .irs-max { + color: #333; + font-size: 12px; line-height: 1.333; + text-shadow: none; + top: 0; + padding: 1px 5px; + background: rgba(0,0,0,0.1); + border-radius: 3px; + -moz-border-radius: 3px; +} + +.lt-ie9 .irs-min, .lt-ie9 .irs-max { + background: #ccc; +} + +.irs-from, .irs-to, .irs-single { + color: #fff; + font-size: 14px; line-height: 1.333; + text-shadow: none; + padding: 1px 5px; + background: #F75D50; + border-radius: 3px; + -moz-border-radius: 3px; +} +.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { + background: #999; +} + +.irs-grid { + height: 27px; +} +.irs-grid-pol { + opacity: 0.5; + background: #F75D50; +} +.irs-grid-pol.small { + background: #999; +} + +.irs-grid-text { + bottom: 5px; + color: #99a4ac; +} + +.irs-disabled { +} + + +.irs-slider { + top: 27px; + width: 20px; height: 20px; + background: #6BA034; + border-radius: 4px; + -moz-border-radius: 27px; + box-shadow: 1px 1px 3px rgba(0,0,0,0.3); + cursor: pointer; +} +.irs-slider:after { + content: ""; + position: absolute; + width: 6px; + height: 6px; + z-index: 2; + bottom: 7px; + right: 7px; + background: white; +} +.irs-slider.state_hover, .irs-slider:hover { + background: #8ECC4E; +} + +.irs-min, .irs-max { + color: #333; + font-size: 12px; line-height: 1.333; + text-shadow: none; + top: 0; + padding: 1px 5px; + background: rgba(0,0,0,0.1); + border-radius: 3px; + -moz-border-radius: 3px; +} diff --git a/frontend/web/js/ion.rangeSlider.js b/frontend/web/js/ion.rangeSlider.js new file mode 100755 index 0000000..ea0b5ea --- /dev/null +++ b/frontend/web/js/ion.rangeSlider.js @@ -0,0 +1,2317 @@ +// Ion.RangeSlider +// version 2.1.4 Build: 355 +// © Denis Ineshin, 2016 +// https://github.com/IonDen +// +// Project page: http://ionden.com/a/plugins/ion.rangeSlider/en.html +// GitHub page: https://github.com/IonDen/ion.rangeSlider +// +// Released under MIT licence: +// http://ionden.com/a/plugins/licence-en.html +// ===================================================================================================================== + +(function (factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery'], function ($) { + factory($, document, window, navigator); + }); + } else { + factory(jQuery, document, window, navigator); + } +} (function ($, document, window, navigator, undefined) { + "use strict"; + + // ================================================================================================================= + // Service + + var plugin_count = 0; + + // IE8 fix + var is_old_ie = (function () { + var n = navigator.userAgent, + r = /msie\s\d+/i, + v; + if (n.search(r) > 0) { + v = r.exec(n).toString(); + v = v.split(" ")[1]; + if (v < 9) { + $("html").addClass("lt-ie9"); + return true; + } + } + return false; + } ()); + if (!Function.prototype.bind) { + Function.prototype.bind = function bind(that) { + + var target = this; + var slice = [].slice; + + if (typeof target != "function") { + throw new TypeError(); + } + + var args = slice.call(arguments, 1), + bound = function () { + + if (this instanceof bound) { + + var F = function(){}; + F.prototype = target.prototype; + var self = new F(); + + var result = target.apply( + self, + args.concat(slice.call(arguments)) + ); + if (Object(result) === result) { + return result; + } + return self; + + } else { + + return target.apply( + that, + args.concat(slice.call(arguments)) + ); + + } + + }; + + return bound; + }; + } + if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + var k; + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + var O = Object(this); + var len = O.length >>> 0; + if (len === 0) { + return -1; + } + var n = +fromIndex || 0; + if (Math.abs(n) === Infinity) { + n = 0; + } + if (n >= len) { + return -1; + } + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + while (k < len) { + if (k in O && O[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; + } + + + + // ================================================================================================================= + // Template + + var base_html = + '' + + '' + + '01' + + '000' + + '' + + '' + + ''; + + var single_html = + '' + + '' + + ''; + + var double_html = + '' + + '' + + '' + + ''; + + var disable_html = + ''; + + + + // ================================================================================================================= + // Core + + /** + * Main plugin constructor + * + * @param input {Object} link to base input element + * @param options {Object} slider config + * @param plugin_count {Number} + * @constructor + */ + var IonRangeSlider = function (input, options, plugin_count) { + this.VERSION = "2.1.4"; + this.input = input; + this.plugin_count = plugin_count; + this.current_plugin = 0; + this.calc_count = 0; + this.update_tm = 0; + this.old_from = 0; + this.old_to = 0; + this.old_min_interval = null; + this.raf_id = null; + this.dragging = false; + this.force_redraw = false; + this.no_diapason = false; + this.is_key = false; + this.is_update = false; + this.is_start = true; + this.is_finish = false; + this.is_active = false; + this.is_resize = false; + this.is_click = false; + + // cache for links to all DOM elements + this.$cache = { + win: $(window), + body: $(document.body), + input: $(input), + cont: null, + rs: null, + min: null, + max: null, + from: null, + to: null, + single: null, + bar: null, + line: null, + s_single: null, + s_from: null, + s_to: null, + shad_single: null, + shad_from: null, + shad_to: null, + edge: null, + grid: null, + grid_labels: [] + }; + + // storage for measure variables + this.coords = { + // left + x_gap: 0, + x_pointer: 0, + + // width + w_rs: 0, + w_rs_old: 0, + w_handle: 0, + + // percents + p_gap: 0, + p_gap_left: 0, + p_gap_right: 0, + p_step: 0, + p_pointer: 0, + p_handle: 0, + p_single_fake: 0, + p_single_real: 0, + p_from_fake: 0, + p_from_real: 0, + p_to_fake: 0, + p_to_real: 0, + p_bar_x: 0, + p_bar_w: 0, + + // grid + grid_gap: 0, + big_num: 0, + big: [], + big_w: [], + big_p: [], + big_x: [] + }; + + // storage for labels measure variables + this.labels = { + // width + w_min: 0, + w_max: 0, + w_from: 0, + w_to: 0, + w_single: 0, + + // percents + p_min: 0, + p_max: 0, + p_from_fake: 0, + p_from_left: 0, + p_to_fake: 0, + p_to_left: 0, + p_single_fake: 0, + p_single_left: 0 + }; + + + + /** + * get and validate config + */ + var $inp = this.$cache.input, + val = $inp.prop("value"), + config, config_from_data, prop; + + // default config + config = { + type: "single", + + min: 10, + max: 100, + from: null, + to: null, + step: 1, + + min_interval: 0, + max_interval: 0, + drag_interval: false, + + values: [], + p_values: [], + + from_fixed: false, + from_min: null, + from_max: null, + from_shadow: false, + + to_fixed: false, + to_min: null, + to_max: null, + to_shadow: false, + + prettify_enabled: true, + prettify_separator: " ", + prettify: null, + + force_edges: false, + + keyboard: false, + keyboard_step: 5, + + grid: false, + grid_margin: true, + grid_num: 4, + grid_snap: false, + + hide_min_max: false, + hide_from_to: false, + + prefix: "", + postfix: "", + max_postfix: "", + decorate_both: true, + values_separator: " — ", + + input_values_separator: ";", + + disable: false, + + onStart: null, + onChange: null, + onFinish: null, + onUpdate: null + }; + + + + // config from data-attributes extends js config + config_from_data = { + type: $inp.data("type"), + + min: $inp.data("min"), + max: $inp.data("max"), + from: $inp.data("from"), + to: $inp.data("to"), + step: $inp.data("step"), + + min_interval: $inp.data("minInterval"), + max_interval: $inp.data("maxInterval"), + drag_interval: $inp.data("dragInterval"), + + values: $inp.data("values"), + + from_fixed: $inp.data("fromFixed"), + from_min: $inp.data("fromMin"), + from_max: $inp.data("fromMax"), + from_shadow: $inp.data("fromShadow"), + + to_fixed: $inp.data("toFixed"), + to_min: $inp.data("toMin"), + to_max: $inp.data("toMax"), + to_shadow: $inp.data("toShadow"), + + prettify_enabled: $inp.data("prettifyEnabled"), + prettify_separator: $inp.data("prettifySeparator"), + + force_edges: $inp.data("forceEdges"), + + keyboard: $inp.data("keyboard"), + keyboard_step: $inp.data("keyboardStep"), + + grid: $inp.data("grid"), + grid_margin: $inp.data("gridMargin"), + grid_num: $inp.data("gridNum"), + grid_snap: $inp.data("gridSnap"), + + hide_min_max: $inp.data("hideMinMax"), + hide_from_to: $inp.data("hideFromTo"), + + prefix: $inp.data("prefix"), + postfix: $inp.data("postfix"), + max_postfix: $inp.data("maxPostfix"), + decorate_both: $inp.data("decorateBoth"), + values_separator: $inp.data("valuesSeparator"), + + input_values_separator: $inp.data("inputValuesSeparator"), + + disable: $inp.data("disable") + }; + config_from_data.values = config_from_data.values && config_from_data.values.split(","); + + for (prop in config_from_data) { + if (config_from_data.hasOwnProperty(prop)) { + if (!config_from_data[prop] && config_from_data[prop] !== 0) { + delete config_from_data[prop]; + } + } + } + + + + // input value extends default config + if (val) { + val = val.split(config_from_data.input_values_separator || options.input_values_separator || ";"); + + if (val[0] && val[0] == +val[0]) { + val[0] = +val[0]; + } + if (val[1] && val[1] == +val[1]) { + val[1] = +val[1]; + } + + if (options && options.values && options.values.length) { + config.from = val[0] && options.values.indexOf(val[0]); + config.to = val[1] && options.values.indexOf(val[1]); + } else { + config.from = val[0] && +val[0]; + config.to = val[1] && +val[1]; + } + } + + + + // js config extends default config + $.extend(config, options); + + + // data config extends config + $.extend(config, config_from_data); + this.options = config; + + + + // validate config, to be sure that all data types are correct + this.validate(); + + + + // default result object, returned to callbacks + this.result = { + input: this.$cache.input, + slider: null, + + min: this.options.min, + max: this.options.max, + + from: this.options.from, + from_percent: 0, + from_value: null, + + to: this.options.to, + to_percent: 0, + to_value: null + }; + + + + this.init(); + }; + + IonRangeSlider.prototype = { + + /** + * Starts or updates the plugin instance + * + * @param is_update {boolean} + */ + init: function (is_update) { + this.no_diapason = false; + this.coords.p_step = this.convertToPercent(this.options.step, true); + + this.target = "base"; + + this.toggleInput(); + this.append(); + this.setMinMax(); + + if (is_update) { + this.force_redraw = true; + this.calc(true); + + // callbacks called + this.callOnUpdate(); + } else { + this.force_redraw = true; + this.calc(true); + + // callbacks called + this.callOnStart(); + } + + this.updateScene(); + }, + + /** + * Appends slider template to a DOM + */ + append: function () { + var container_html = ''; + this.$cache.input.before(container_html); + this.$cache.input.prop("readonly", true); + this.$cache.cont = this.$cache.input.prev(); + this.result.slider = this.$cache.cont; + + 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"); + 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"); + this.$cache.bar = this.$cache.cont.find(".irs-bar"); + this.$cache.line = this.$cache.cont.find(".irs-line"); + this.$cache.grid = this.$cache.cont.find(".irs-grid"); + + if (this.options.type === "single") { + this.$cache.cont.append(single_html); + this.$cache.edge = this.$cache.cont.find(".irs-bar-edge"); + this.$cache.s_single = this.$cache.cont.find(".single"); + this.$cache.from[0].style.visibility = "hidden"; + this.$cache.to[0].style.visibility = "hidden"; + this.$cache.shad_single = this.$cache.cont.find(".shadow-single"); + } else { + this.$cache.cont.append(double_html); + this.$cache.s_from = this.$cache.cont.find(".from"); + this.$cache.s_to = this.$cache.cont.find(".to"); + this.$cache.shad_from = this.$cache.cont.find(".shadow-from"); + this.$cache.shad_to = this.$cache.cont.find(".shadow-to"); + + this.setTopHandler(); + } + + if (this.options.hide_from_to) { + this.$cache.from[0].style.display = "none"; + this.$cache.to[0].style.display = "none"; + this.$cache.single[0].style.display = "none"; + } + + this.appendGrid(); + + if (this.options.disable) { + this.appendDisableMask(); + this.$cache.input[0].disabled = true; + } else { + this.$cache.cont.removeClass("irs-disabled"); + this.$cache.input[0].disabled = false; + this.bindEvents(); + } + + if (this.options.drag_interval) { + this.$cache.bar[0].style.cursor = "ew-resize"; + } + }, + + /** + * Determine which handler has a priority + * works only for double slider type + */ + setTopHandler: function () { + var min = this.options.min, + max = this.options.max, + from = this.options.from, + to = this.options.to; + + if (from > min && to === max) { + this.$cache.s_from.addClass("type_last"); + } else if (to < max) { + this.$cache.s_to.addClass("type_last"); + } + }, + + /** + * Determine which handles was clicked last + * and which handler should have hover effect + * + * @param target {String} + */ + changeLevel: function (target) { + switch (target) { + case "single": + this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_single_fake); + break; + case "from": + this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake); + this.$cache.s_from.addClass("state_hover"); + this.$cache.s_from.addClass("type_last"); + this.$cache.s_to.removeClass("type_last"); + break; + case "to": + this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_to_fake); + this.$cache.s_to.addClass("state_hover"); + this.$cache.s_to.addClass("type_last"); + this.$cache.s_from.removeClass("type_last"); + break; + case "both": + this.coords.p_gap_left = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake); + this.coords.p_gap_right = this.toFixed(this.coords.p_to_fake - this.coords.p_pointer); + this.$cache.s_to.removeClass("type_last"); + this.$cache.s_from.removeClass("type_last"); + break; + } + }, + + /** + * Then slider is disabled + * appends extra layer with opacity + */ + appendDisableMask: function () { + this.$cache.cont.append(disable_html); + this.$cache.cont.addClass("irs-disabled"); + }, + + /** + * Remove slider instance + * and ubind all events + */ + remove: function () { + this.$cache.cont.remove(); + this.$cache.cont = null; + + this.$cache.line.off("keydown.irs_" + this.plugin_count); + + this.$cache.body.off("touchmove.irs_" + this.plugin_count); + this.$cache.body.off("mousemove.irs_" + this.plugin_count); + + this.$cache.win.off("touchend.irs_" + this.plugin_count); + this.$cache.win.off("mouseup.irs_" + this.plugin_count); + + if (is_old_ie) { + this.$cache.body.off("mouseup.irs_" + this.plugin_count); + this.$cache.body.off("mouseleave.irs_" + this.plugin_count); + } + + this.$cache.grid_labels = []; + this.coords.big = []; + this.coords.big_w = []; + this.coords.big_p = []; + this.coords.big_x = []; + + cancelAnimationFrame(this.raf_id); + }, + + /** + * bind all slider events + */ + bindEvents: function () { + if (this.no_diapason) { + return; + } + + this.$cache.body.on("touchmove.irs_" + this.plugin_count, this.pointerMove.bind(this)); + this.$cache.body.on("mousemove.irs_" + this.plugin_count, this.pointerMove.bind(this)); + + this.$cache.win.on("touchend.irs_" + this.plugin_count, this.pointerUp.bind(this)); + this.$cache.win.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this)); + + 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")); + + 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")); + } else { + this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + } + + if (this.options.type === "single") { + this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); + this.$cache.s_single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); + this.$cache.shad_single.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + + this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); + this.$cache.s_single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); + this.$cache.edge.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + this.$cache.shad_single.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + } else { + this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, null)); + this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, null)); + + this.$cache.from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); + this.$cache.s_from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); + this.$cache.to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); + this.$cache.s_to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); + this.$cache.shad_from.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + this.$cache.shad_to.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + + this.$cache.from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); + this.$cache.s_from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); + this.$cache.to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); + this.$cache.s_to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); + this.$cache.shad_from.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + this.$cache.shad_to.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); + } + + if (this.options.keyboard) { + this.$cache.line.on("keydown.irs_" + this.plugin_count, this.key.bind(this, "keyboard")); + } + + if (is_old_ie) { + this.$cache.body.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this)); + this.$cache.body.on("mouseleave.irs_" + this.plugin_count, this.pointerUp.bind(this)); + } + }, + + /** + * Mousemove or touchmove + * only for handlers + * + * @param e {Object} event object + */ + pointerMove: function (e) { + if (!this.dragging) { + return; + } + + var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; + this.coords.x_pointer = x - this.coords.x_gap; + + this.calc(); + }, + + /** + * Mouseup or touchend + * only for handlers + * + * @param e {Object} event object + */ + pointerUp: function (e) { + if (this.current_plugin !== this.plugin_count) { + return; + } + + if (this.is_active) { + this.is_active = false; + } else { + return; + } + + this.$cache.cont.find(".state_hover").removeClass("state_hover"); + + this.force_redraw = true; + + if (is_old_ie) { + $("*").prop("unselectable", false); + } + + this.updateScene(); + this.restoreOriginalMinInterval(); + + // callbacks call + if ($.contains(this.$cache.cont[0], e.target) || this.dragging) { + this.is_finish = true; + this.callOnFinish(); + } + + this.dragging = false; + }, + + /** + * Mousedown or touchstart + * only for handlers + * + * @param target {String|null} + * @param e {Object} event object + */ + pointerDown: function (target, e) { + e.preventDefault(); + var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; + if (e.button === 2) { + return; + } + + if (target === "both") { + this.setTempMinInterval(); + } + + if (!target) { + target = this.target; + } + + this.current_plugin = this.plugin_count; + this.target = target; + + this.is_active = true; + this.dragging = true; + + this.coords.x_gap = this.$cache.rs.offset().left; + this.coords.x_pointer = x - this.coords.x_gap; + + this.calcPointerPercent(); + this.changeLevel(target); + + if (is_old_ie) { + $("*").prop("unselectable", true); + } + + this.$cache.line.trigger("focus"); + + this.updateScene(); + }, + + /** + * Mousedown or touchstart + * for other slider elements, like diapason line + * + * @param target {String} + * @param e {Object} event object + */ + pointerClick: function (target, e) { + e.preventDefault(); + var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; + if (e.button === 2) { + return; + } + + this.current_plugin = this.plugin_count; + this.target = target; + + this.is_click = true; + this.coords.x_gap = this.$cache.rs.offset().left; + this.coords.x_pointer = +(x - this.coords.x_gap).toFixed(); + + this.force_redraw = true; + this.calc(); + + this.$cache.line.trigger("focus"); + }, + + /** + * Keyborard controls for focused slider + * + * @param target {String} + * @param e {Object} event object + * @returns {boolean|undefined} + */ + key: function (target, e) { + if (this.current_plugin !== this.plugin_count || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) { + return; + } + + switch (e.which) { + case 83: // W + case 65: // A + case 40: // DOWN + case 37: // LEFT + e.preventDefault(); + this.moveByKey(false); + break; + + case 87: // S + case 68: // D + case 38: // UP + case 39: // RIGHT + e.preventDefault(); + this.moveByKey(true); + break; + } + + return true; + }, + + /** + * Move by key. Beta + * @todo refactor than have plenty of time + * + * @param right {boolean} direction to move + */ + moveByKey: function (right) { + var p = this.coords.p_pointer; + + if (right) { + p += this.options.keyboard_step; + } else { + p -= this.options.keyboard_step; + } + + this.coords.x_pointer = this.toFixed(this.coords.w_rs / 100 * p); + this.is_key = true; + this.calc(); + }, + + /** + * Set visibility and content + * of Min and Max labels + */ + setMinMax: function () { + if (!this.options) { + return; + } + + if (this.options.hide_min_max) { + this.$cache.min[0].style.display = "none"; + this.$cache.max[0].style.display = "none"; + return; + } + + if (this.options.values.length) { + 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)); + } + + this.labels.w_min = this.$cache.min.outerWidth(false); + this.labels.w_max = this.$cache.max.outerWidth(false); + }, + + /** + * Then dragging interval, prevent interval collapsing + * using min_interval option + */ + setTempMinInterval: function () { + var interval = this.result.to - this.result.from; + + if (this.old_min_interval === null) { + this.old_min_interval = this.options.min_interval; + } + + this.options.min_interval = interval; + }, + + /** + * Restore min_interval option to original + */ + restoreOriginalMinInterval: function () { + if (this.old_min_interval !== null) { + this.options.min_interval = this.old_min_interval; + this.old_min_interval = null; + } + }, + + + + // ============================================================================================================= + // Calculations + + /** + * All calculations and measures start here + * + * @param update {boolean=} + */ + calc: function (update) { + if (!this.options) { + return; + } + + this.calc_count++; + + if (this.calc_count === 10 || update) { + this.calc_count = 0; + this.coords.w_rs = this.$cache.rs.outerWidth(false); + + this.calcHandlePercent(); + } + + if (!this.coords.w_rs) { + return; + } + + this.calcPointerPercent(); + var handle_x = this.getHandleX(); + + if (this.target === "click") { + this.coords.p_gap = this.coords.p_handle / 2; + handle_x = this.getHandleX(); + + if (this.options.drag_interval) { + this.target = "both_one"; + } else { + this.target = this.chooseHandle(handle_x); + } + } + + switch (this.target) { + case "base": + var w = (this.options.max - this.options.min) / 100, + f = (this.result.from - this.options.min) / w, + t = (this.result.to - this.options.min) / w; + + this.coords.p_single_real = this.toFixed(f); + this.coords.p_from_real = this.toFixed(f); + this.coords.p_to_real = this.toFixed(t); + + this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max); + this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); + this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); + + this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real); + this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); + this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); + + this.target = null; + + break; + + case "single": + if (this.options.from_fixed) { + break; + } + + this.coords.p_single_real = this.convertToRealPercent(handle_x); + this.coords.p_single_real = this.calcWithStep(this.coords.p_single_real); + this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max); + + this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real); + + break; + + case "from": + if (this.options.from_fixed) { + break; + } + + this.coords.p_from_real = this.convertToRealPercent(handle_x); + this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real); + if (this.coords.p_from_real > this.coords.p_to_real) { + this.coords.p_from_real = this.coords.p_to_real; + } + this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); + this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); + this.coords.p_from_real = this.checkMaxInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); + + this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); + + break; + + case "to": + if (this.options.to_fixed) { + break; + } + + this.coords.p_to_real = this.convertToRealPercent(handle_x); + this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real); + if (this.coords.p_to_real < this.coords.p_from_real) { + this.coords.p_to_real = this.coords.p_from_real; + } + this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); + this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); + this.coords.p_to_real = this.checkMaxInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); + + this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); + + break; + + case "both": + if (this.options.from_fixed || this.options.to_fixed) { + break; + } + + handle_x = this.toFixed(handle_x + (this.coords.p_handle * 0.1)); + + this.coords.p_from_real = this.convertToRealPercent(handle_x) - this.coords.p_gap_left; + this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real); + this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); + this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); + this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); + + this.coords.p_to_real = this.convertToRealPercent(handle_x) + this.coords.p_gap_right; + this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real); + this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); + this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); + this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); + + break; + + case "both_one": + if (this.options.from_fixed || this.options.to_fixed) { + break; + } + + var real_x = this.convertToRealPercent(handle_x), + from = this.result.from_percent, + to = this.result.to_percent, + full = to - from, + half = full / 2, + new_from = real_x - half, + new_to = real_x + half; + + if (new_from < 0) { + new_from = 0; + new_to = new_from + full; + } + + if (new_to > 100) { + new_to = 100; + new_from = new_to - full; + } + + this.coords.p_from_real = this.calcWithStep(new_from); + this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); + this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); + + this.coords.p_to_real = this.calcWithStep(new_to); + this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); + this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); + + break; + } + + if (this.options.type === "single") { + this.coords.p_bar_x = (this.coords.p_handle / 2); + this.coords.p_bar_w = this.coords.p_single_fake; + + this.result.from_percent = this.coords.p_single_real; + this.result.from = this.convertToValue(this.coords.p_single_real); + + if (this.options.values.length) { + this.result.from_value = this.options.values[this.result.from]; + } + } else { + this.coords.p_bar_x = this.toFixed(this.coords.p_from_fake + (this.coords.p_handle / 2)); + this.coords.p_bar_w = this.toFixed(this.coords.p_to_fake - this.coords.p_from_fake); + + this.result.from_percent = this.coords.p_from_real; + this.result.from = this.convertToValue(this.coords.p_from_real); + this.result.to_percent = this.coords.p_to_real; + this.result.to = this.convertToValue(this.coords.p_to_real); + + if (this.options.values.length) { + this.result.from_value = this.options.values[this.result.from]; + this.result.to_value = this.options.values[this.result.to]; + } + } + + this.calcMinMax(); + this.calcLabels(); + }, + + + /** + * calculates pointer X in percent + */ + calcPointerPercent: function () { + if (!this.coords.w_rs) { + this.coords.p_pointer = 0; + return; + } + + if (this.coords.x_pointer < 0 || isNaN(this.coords.x_pointer) ) { + this.coords.x_pointer = 0; + } else if (this.coords.x_pointer > this.coords.w_rs) { + this.coords.x_pointer = this.coords.w_rs; + } + + this.coords.p_pointer = this.toFixed(this.coords.x_pointer / this.coords.w_rs * 100); + }, + + convertToRealPercent: function (fake) { + var full = 100 - this.coords.p_handle; + return fake / full * 100; + }, + + convertToFakePercent: function (real) { + var full = 100 - this.coords.p_handle; + return real / 100 * full; + }, + + getHandleX: function () { + var max = 100 - this.coords.p_handle, + x = this.toFixed(this.coords.p_pointer - this.coords.p_gap); + + if (x < 0) { + x = 0; + } else if (x > max) { + x = max; + } + + return x; + }, + + calcHandlePercent: function () { + if (this.options.type === "single") { + this.coords.w_handle = this.$cache.s_single.outerWidth(false); + } else { + this.coords.w_handle = this.$cache.s_from.outerWidth(false); + } + + this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100); + }, + + /** + * Find closest handle to pointer click + * + * @param real_x {Number} + * @returns {String} + */ + chooseHandle: function (real_x) { + if (this.options.type === "single") { + return "single"; + } else { + var m_point = this.coords.p_from_real + ((this.coords.p_to_real - this.coords.p_from_real) / 2); + if (real_x >= m_point) { + return this.options.to_fixed ? "from" : "to"; + } else { + return this.options.from_fixed ? "to" : "from"; + } + } + }, + + /** + * Measure Min and Max labels width in percent + */ + calcMinMax: function () { + if (!this.coords.w_rs) { + return; + } + + this.labels.p_min = this.labels.w_min / this.coords.w_rs * 100; + this.labels.p_max = this.labels.w_max / this.coords.w_rs * 100; + }, + + /** + * Measure labels width and X in percent + */ + calcLabels: function () { + if (!this.coords.w_rs || this.options.hide_from_to) { + return; + } + + if (this.options.type === "single") { + + this.labels.w_single = this.$cache.single.outerWidth(false); + this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100; + this.labels.p_single_left = this.coords.p_single_fake + (this.coords.p_handle / 2) - (this.labels.p_single_fake / 2); + this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake); + + } else { + + this.labels.w_from = this.$cache.from.outerWidth(false); + this.labels.p_from_fake = this.labels.w_from / this.coords.w_rs * 100; + this.labels.p_from_left = this.coords.p_from_fake + (this.coords.p_handle / 2) - (this.labels.p_from_fake / 2); + this.labels.p_from_left = this.toFixed(this.labels.p_from_left); + this.labels.p_from_left = this.checkEdges(this.labels.p_from_left, this.labels.p_from_fake); + + this.labels.w_to = this.$cache.to.outerWidth(false); + this.labels.p_to_fake = this.labels.w_to / this.coords.w_rs * 100; + this.labels.p_to_left = this.coords.p_to_fake + (this.coords.p_handle / 2) - (this.labels.p_to_fake / 2); + this.labels.p_to_left = this.toFixed(this.labels.p_to_left); + this.labels.p_to_left = this.checkEdges(this.labels.p_to_left, this.labels.p_to_fake); + + this.labels.w_single = this.$cache.single.outerWidth(false); + this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100; + this.labels.p_single_left = ((this.labels.p_from_left + this.labels.p_to_left + this.labels.p_to_fake) / 2) - (this.labels.p_single_fake / 2); + this.labels.p_single_left = this.toFixed(this.labels.p_single_left); + this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake); + + } + }, + + + + // ============================================================================================================= + // Drawings + + /** + * Main function called in request animation frame + * to update everything + */ + updateScene: function () { + if (this.raf_id) { + cancelAnimationFrame(this.raf_id); + this.raf_id = null; + } + + clearTimeout(this.update_tm); + this.update_tm = null; + + if (!this.options) { + return; + } + + this.drawHandles(); + + if (this.is_active) { + this.raf_id = requestAnimationFrame(this.updateScene.bind(this)); + } else { + this.update_tm = setTimeout(this.updateScene.bind(this), 300); + } + }, + + /** + * Draw handles + */ + drawHandles: function () { + this.coords.w_rs = this.$cache.rs.outerWidth(false); + + if (!this.coords.w_rs) { + return; + } + + if (this.coords.w_rs !== this.coords.w_rs_old) { + this.target = "base"; + this.is_resize = true; + } + + if (this.coords.w_rs !== this.coords.w_rs_old || this.force_redraw) { + this.setMinMax(); + this.calc(true); + this.drawLabels(); + if (this.options.grid) { + this.calcGridMargin(); + this.calcGridLabels(); + } + this.force_redraw = true; + this.coords.w_rs_old = this.coords.w_rs; + this.drawShadow(); + } + + if (!this.coords.w_rs) { + return; + } + + if (!this.dragging && !this.force_redraw && !this.is_key) { + return; + } + + if (this.old_from !== this.result.from || this.old_to !== this.result.to || this.force_redraw || this.is_key) { + + this.drawLabels(); + + this.$cache.bar[0].style.left = 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.single[0].style.left = this.labels.p_single_left + "%"; + + if (this.options.values.length) { + this.$cache.input.prop("value", this.result.from_value); + } else { + this.$cache.input.prop("value", this.result.from); + } + 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 + "%"; + + if (this.old_from !== this.result.from || this.force_redraw) { + this.$cache.from[0].style.left = 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.single[0].style.left = 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); + } else { + this.$cache.input.prop("value", this.result.from + this.options.input_values_separator + this.result.to); + } + this.$cache.input.data("from", this.result.from); + this.$cache.input.data("to", this.result.to); + } + + if ((this.old_from !== this.result.from || this.old_to !== this.result.to) && !this.is_start) { + this.$cache.input.trigger("change"); + } + + this.old_from = this.result.from; + this.old_to = this.result.to; + + // callbacks call + if (!this.is_resize && !this.is_update && !this.is_start && !this.is_finish) { + this.callOnChange(); + } + if (this.is_key || this.is_click) { + this.is_key = false; + this.is_click = false; + this.callOnFinish(); + } + + this.is_update = false; + this.is_resize = false; + this.is_finish = false; + } + + this.is_start = false; + this.is_key = false; + this.is_click = false; + this.force_redraw = false; + }, + + /** + * Draw labels + * measure labels collisions + * collapse close labels + */ + drawLabels: function () { + if (!this.options) { + return; + } + + var values_num = this.options.values.length, + p_values = this.options.p_values, + text_single, + text_from, + text_to; + + if (this.options.hide_from_to) { + return; + } + + if (this.options.type === "single") { + + if (values_num) { + 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); + this.$cache.single.html(text_single); + } + + this.calcLabels(); + + if (this.labels.p_single_left < this.labels.p_min + 1) { + this.$cache.min[0].style.visibility = "hidden"; + } else { + this.$cache.min[0].style.visibility = "visible"; + } + + if (this.labels.p_single_left + this.labels.p_single_fake > 100 - this.labels.p_max - 1) { + this.$cache.max[0].style.visibility = "hidden"; + } else { + this.$cache.max[0].style.visibility = "visible"; + } + + } else { + + if (values_num) { + + if (this.options.decorate_both) { + text_single = this.decorate(p_values[this.result.from]); + text_single += this.options.values_separator; + text_single += this.decorate(p_values[this.result.to]); + } else { + text_single = this.decorate(p_values[this.result.from] + this.options.values_separator + p_values[this.result.to]); + } + text_from = this.decorate(p_values[this.result.from]); + text_to = this.decorate(p_values[this.result.to]); + + this.$cache.single.html(text_single); + this.$cache.from.html(text_from); + this.$cache.to.html(text_to); + + } else { + + if (this.options.decorate_both) { + text_single = this.decorate(this._prettify(this.result.from), this.result.from); + text_single += this.options.values_separator; + text_single += this.decorate(this._prettify(this.result.to), 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_from = this.decorate(this._prettify(this.result.from), this.result.from); + text_to = this.decorate(this._prettify(this.result.to), this.result.to); + + this.$cache.single.html(text_single); + this.$cache.from.html(text_from); + this.$cache.to.html(text_to); + + } + + this.calcLabels(); + + var min = Math.min(this.labels.p_single_left, this.labels.p_from_left), + single_left = this.labels.p_single_left + this.labels.p_single_fake, + to_left = this.labels.p_to_left + this.labels.p_to_fake, + max = Math.max(single_left, to_left); + + if (this.labels.p_from_left + this.labels.p_from_fake >= this.labels.p_to_left) { + this.$cache.from[0].style.visibility = "hidden"; + this.$cache.to[0].style.visibility = "hidden"; + this.$cache.single[0].style.visibility = "visible"; + + if (this.result.from === this.result.to) { + if (this.target === "from") { + this.$cache.from[0].style.visibility = "visible"; + } else if (this.target === "to") { + this.$cache.to[0].style.visibility = "visible"; + } else if (!this.target) { + this.$cache.from[0].style.visibility = "visible"; + } + this.$cache.single[0].style.visibility = "hidden"; + max = to_left; + } else { + this.$cache.from[0].style.visibility = "hidden"; + this.$cache.to[0].style.visibility = "hidden"; + this.$cache.single[0].style.visibility = "visible"; + max = Math.max(single_left, to_left); + } + } else { + this.$cache.from[0].style.visibility = "visible"; + this.$cache.to[0].style.visibility = "visible"; + this.$cache.single[0].style.visibility = "hidden"; + } + + if (min < this.labels.p_min + 1) { + this.$cache.min[0].style.visibility = "hidden"; + } else { + this.$cache.min[0].style.visibility = "visible"; + } + + if (max > 100 - this.labels.p_max - 1) { + this.$cache.max[0].style.visibility = "hidden"; + } else { + this.$cache.max[0].style.visibility = "visible"; + } + + } + }, + + /** + * Draw shadow intervals + */ + drawShadow: function () { + var o = this.options, + c = this.$cache, + + is_from_min = typeof o.from_min === "number" && !isNaN(o.from_min), + is_from_max = typeof o.from_max === "number" && !isNaN(o.from_max), + is_to_min = typeof o.to_min === "number" && !isNaN(o.to_min), + is_to_max = typeof o.to_max === "number" && !isNaN(o.to_max), + + from_min, + from_max, + to_min, + to_max; + + if (o.type === "single") { + if (o.from_shadow && (is_from_min || is_from_max)) { + from_min = this.convertToPercent(is_from_min ? o.from_min : o.min); + from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min; + from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min)); + from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max)); + from_min = from_min + (this.coords.p_handle / 2); + + c.shad_single[0].style.display = "block"; + c.shad_single[0].style.left = from_min + "%"; + c.shad_single[0].style.width = from_max + "%"; + } else { + c.shad_single[0].style.display = "none"; + } + } else { + if (o.from_shadow && (is_from_min || is_from_max)) { + from_min = this.convertToPercent(is_from_min ? o.from_min : o.min); + from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min; + from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min)); + from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max)); + from_min = from_min + (this.coords.p_handle / 2); + + c.shad_from[0].style.display = "block"; + c.shad_from[0].style.left = from_min + "%"; + c.shad_from[0].style.width = from_max + "%"; + } else { + c.shad_from[0].style.display = "none"; + } + + if (o.to_shadow && (is_to_min || is_to_max)) { + to_min = this.convertToPercent(is_to_min ? o.to_min : o.min); + to_max = this.convertToPercent(is_to_max ? o.to_max : o.max) - to_min; + to_min = this.toFixed(to_min - (this.coords.p_handle / 100 * to_min)); + to_max = this.toFixed(to_max - (this.coords.p_handle / 100 * to_max)); + to_min = to_min + (this.coords.p_handle / 2); + + c.shad_to[0].style.display = "block"; + c.shad_to[0].style.left = to_min + "%"; + c.shad_to[0].style.width = to_max + "%"; + } else { + c.shad_to[0].style.display = "none"; + } + } + }, + + + + // ============================================================================================================= + // Callbacks + + callOnStart: function () { + if (this.options.onStart && typeof this.options.onStart === "function") { + this.options.onStart(this.result); + } + }, + callOnChange: function () { + if (this.options.onChange && typeof this.options.onChange === "function") { + this.options.onChange(this.result); + } + }, + callOnFinish: function () { + if (this.options.onFinish && typeof this.options.onFinish === "function") { + this.options.onFinish(this.result); + } + }, + callOnUpdate: function () { + if (this.options.onUpdate && typeof this.options.onUpdate === "function") { + this.options.onUpdate(this.result); + } + }, + + + + // ============================================================================================================= + // Service methods + + toggleInput: function () { + this.$cache.input.toggleClass("irs-hidden-input"); + }, + + /** + * Convert real value to percent + * + * @param value {Number} X in real + * @param no_min {boolean=} don't use min value + * @returns {Number} X in percent + */ + convertToPercent: function (value, no_min) { + var diapason = this.options.max - this.options.min, + one_percent = diapason / 100, + val, percent; + + if (!diapason) { + this.no_diapason = true; + return 0; + } + + if (no_min) { + val = value; + } else { + val = value - this.options.min; + } + + percent = val / one_percent; + + return this.toFixed(percent); + }, + + /** + * Convert percent to real values + * + * @param percent {Number} X in percent + * @returns {Number} X in real + */ + convertToValue: function (percent) { + var min = this.options.min, + max = this.options.max, + min_decimals = min.toString().split(".")[1], + max_decimals = max.toString().split(".")[1], + min_length, max_length, + avg_decimals = 0, + abs = 0; + + if (percent === 0) { + return this.options.min; + } + if (percent === 100) { + return this.options.max; + } + + + if (min_decimals) { + min_length = min_decimals.length; + avg_decimals = min_length; + } + if (max_decimals) { + max_length = max_decimals.length; + avg_decimals = max_length; + } + if (min_length && max_length) { + avg_decimals = (min_length >= max_length) ? min_length : max_length; + } + + if (min < 0) { + abs = Math.abs(min); + min = +(min + abs).toFixed(avg_decimals); + max = +(max + abs).toFixed(avg_decimals); + } + + var number = ((max - min) / 100 * percent) + min, + string = this.options.step.toString().split(".")[1], + result; + + if (string) { + number = +number.toFixed(string.length); + } else { + number = number / this.options.step; + number = number * this.options.step; + + number = +number.toFixed(0); + } + + if (abs) { + number -= abs; + } + + if (string) { + result = +number.toFixed(string.length); + } else { + result = this.toFixed(number); + } + + if (result < this.options.min) { + result = this.options.min; + } else if (result > this.options.max) { + result = this.options.max; + } + + return result; + }, + + /** + * Round percent value with step + * + * @param percent {Number} + * @returns percent {Number} rounded + */ + calcWithStep: function (percent) { + var rounded = Math.round(percent / this.coords.p_step) * this.coords.p_step; + + if (rounded > 100) { + rounded = 100; + } + if (percent === 100) { + rounded = 100; + } + + return this.toFixed(rounded); + }, + + checkMinInterval: function (p_current, p_next, type) { + var o = this.options, + current, + next; + + if (!o.min_interval) { + return p_current; + } + + current = this.convertToValue(p_current); + next = this.convertToValue(p_next); + + if (type === "from") { + + if (next - current < o.min_interval) { + current = next - o.min_interval; + } + + } else { + + if (current - next < o.min_interval) { + current = next + o.min_interval; + } + + } + + return this.convertToPercent(current); + }, + + checkMaxInterval: function (p_current, p_next, type) { + var o = this.options, + current, + next; + + if (!o.max_interval) { + return p_current; + } + + current = this.convertToValue(p_current); + next = this.convertToValue(p_next); + + if (type === "from") { + + if (next - current > o.max_interval) { + current = next - o.max_interval; + } + + } else { + + if (current - next > o.max_interval) { + current = next + o.max_interval; + } + + } + + return this.convertToPercent(current); + }, + + checkDiapason: function (p_num, min, max) { + var num = this.convertToValue(p_num), + o = this.options; + + if (typeof min !== "number") { + min = o.min; + } + + if (typeof max !== "number") { + max = o.max; + } + + if (num < min) { + num = min; + } + + if (num > max) { + num = max; + } + + return this.convertToPercent(num); + }, + + toFixed: function (num) { + num = num.toFixed(9); + return +num; + }, + + _prettify: function (num) { + if (!this.options.prettify_enabled) { + return num; + } + + if (this.options.prettify && typeof this.options.prettify === "function") { + return this.options.prettify(num); + } else { + return this.prettify(num); + } + }, + + prettify: function (num) { + var n = num.toString(); + return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + this.options.prettify_separator); + }, + + checkEdges: function (left, width) { + if (!this.options.force_edges) { + return this.toFixed(left); + } + + if (left < 0) { + left = 0; + } else if (left > 100 - width) { + left = 100 - width; + } + + return this.toFixed(left); + }, + + validate: function () { + var o = this.options, + r = this.result, + v = o.values, + vl = v.length, + value, + i; + + if (typeof o.min === "string") o.min = +o.min; + if (typeof o.max === "string") o.max = +o.max; + if (typeof o.from === "string") o.from = +o.from; + if (typeof o.to === "string") o.to = +o.to; + if (typeof o.step === "string") o.step = +o.step; + + if (typeof o.from_min === "string") o.from_min = +o.from_min; + if (typeof o.from_max === "string") o.from_max = +o.from_max; + 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) { + o.max = o.min; + } + + if (vl) { + o.p_values = []; + o.min = 0; + o.max = vl - 1; + o.step = 1; + o.grid_num = o.max; + o.grid_snap = true; + + + for (i = 0; i < vl; i++) { + value = +v[i]; + + if (!isNaN(value)) { + v[i] = value; + value = this._prettify(value); + } else { + value = v[i]; + } + + o.p_values.push(value); + } + } + + if (typeof o.from !== "number" || isNaN(o.from)) { + o.from = o.min; + } + + if (typeof o.to !== "number" || isNaN(o.from)) { + o.to = o.max; + } + + if (o.type === "single") { + + if (o.from < o.min) { + o.from = o.min; + } + + if (o.from > o.max) { + o.from = o.max; + } + + } else { + + if (o.from < o.min || o.from > o.max) { + o.from = o.min; + } + if (o.to > o.max || o.to < o.min) { + o.to = o.max; + } + if (o.from > o.to) { + o.from = o.to; + } + + } + + if (typeof o.step !== "number" || isNaN(o.step) || !o.step || o.step < 0) { + 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; + } + + if (typeof o.from_max === "number" && o.from > o.from_max) { + o.from = o.from_max; + } + + if (typeof o.to_min === "number" && o.to < o.to_min) { + o.to = o.to_min; + } + + if (typeof o.to_max === "number" && o.from > o.to_max) { + o.to = o.to_max; + } + + if (r) { + if (r.min !== o.min) { + r.min = o.min; + } + + if (r.max !== o.max) { + r.max = o.max; + } + + if (r.from < r.min || r.from > r.max) { + r.from = o.from; + } + + if (r.to < r.min || r.to > r.max) { + r.to = o.to; + } + } + + if (typeof o.min_interval !== "number" || isNaN(o.min_interval) || !o.min_interval || o.min_interval < 0) { + o.min_interval = 0; + } + + if (typeof o.max_interval !== "number" || isNaN(o.max_interval) || !o.max_interval || o.max_interval < 0) { + o.max_interval = 0; + } + + if (o.min_interval && o.min_interval > o.max - o.min) { + o.min_interval = o.max - o.min; + } + + if (o.max_interval && o.max_interval > o.max - o.min) { + o.max_interval = o.max - o.min; + } + }, + + decorate: function (num, original) { + var decorated = "", + o = this.options; + + if (o.prefix) { + decorated += o.prefix; + } + + decorated += num; + + if (o.max_postfix) { + if (o.values.length && num === o.p_values[o.max]) { + decorated += o.max_postfix; + if (o.postfix) { + decorated += " "; + } + } else if (original === o.max) { + decorated += o.max_postfix; + if (o.postfix) { + decorated += " "; + } + } + } + + if (o.postfix) { + decorated += o.postfix; + } + + return decorated; + }, + + updateFrom: function () { + this.result.from = this.options.from; + this.result.from_percent = this.convertToPercent(this.result.from); + if (this.options.values) { + this.result.from_value = this.options.values[this.result.from]; + } + }, + + updateTo: function () { + this.result.to = this.options.to; + this.result.to_percent = this.convertToPercent(this.result.to); + if (this.options.values) { + this.result.to_value = this.options.values[this.result.to]; + } + }, + + updateResult: function () { + this.result.min = this.options.min; + this.result.max = this.options.max; + this.updateFrom(); + this.updateTo(); + }, + + + // ============================================================================================================= + // Grid + + appendGrid: function () { + if (!this.options.grid) { + return; + } + + var o = this.options, + i, z, + + total = o.max - o.min, + big_num = o.grid_num, + big_p = 0, + big_w = 0, + + small_max = 4, + local_small_max, + small_p, + small_w = 0, + + result, + html = ''; + + + + this.calcGridMargin(); + + if (o.grid_snap) { + big_num = total / o.step; + big_p = this.toFixed(o.step / (total / 100)); + } else { + big_p = this.toFixed(100 / big_num); + } + + if (big_num > 4) { + small_max = 3; + } + if (big_num > 7) { + small_max = 2; + } + if (big_num > 14) { + small_max = 1; + } + if (big_num > 28) { + small_max = 0; + } + + for (i = 0; i < big_num + 1; i++) { + local_small_max = small_max; + + big_w = this.toFixed(big_p * i); + + 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; + + small_p = (big_w - (big_p * (i - 1))) / (local_small_max + 1); + + for (z = 1; z <= local_small_max; z++) { + if (big_w === 0) { + break; + } + + small_w = this.toFixed(big_w - (small_p * z)); + + html += ''; + } + + html += ''; + + result = this.convertToValue(big_w); + if (o.values.length) { + result = o.p_values[result]; + } else { + result = this._prettify(result); + } + + html += '' + result + ''; + } + this.coords.big_num = Math.ceil(big_num + 1); + + + + this.$cache.cont.addClass("irs-with-grid"); + this.$cache.grid.html(html); + this.cacheGridLabels(); + }, + + cacheGridLabels: function () { + var $label, i, + num = this.coords.big_num; + + for (i = 0; i < num; i++) { + $label = this.$cache.grid.find(".js-grid-text-" + i); + this.$cache.grid_labels.push($label); + } + + this.calcGridLabels(); + }, + + calcGridLabels: function () { + var i, label, start = [], finish = [], + num = this.coords.big_num; + + for (i = 0; i < num; i++) { + this.coords.big_w[i] = this.$cache.grid_labels[i].outerWidth(false); + this.coords.big_p[i] = this.toFixed(this.coords.big_w[i] / this.coords.w_rs * 100); + this.coords.big_x[i] = this.toFixed(this.coords.big_p[i] / 2); + + start[i] = this.toFixed(this.coords.big[i] - this.coords.big_x[i]); + finish[i] = this.toFixed(start[i] + this.coords.big_p[i]); + } + + if (this.options.force_edges) { + if (start[0] < -this.coords.grid_gap) { + start[0] = -this.coords.grid_gap; + finish[0] = this.toFixed(start[0] + this.coords.big_p[0]); + + this.coords.big_x[0] = this.coords.grid_gap; + } + + if (finish[num - 1] > 100 + this.coords.grid_gap) { + finish[num - 1] = 100 + this.coords.grid_gap; + start[num - 1] = this.toFixed(finish[num - 1] - this.coords.big_p[num - 1]); + + this.coords.big_x[num - 1] = this.toFixed(this.coords.big_p[num - 1] - this.coords.grid_gap); + } + } + + this.calcGridCollision(2, start, finish); + this.calcGridCollision(4, start, finish); + + for (i = 0; i < num; i++) { + label = this.$cache.grid_labels[i][0]; + label.style.marginLeft = -this.coords.big_x[i] + "%"; + } + }, + + // Collisions Calc Beta + // TODO: Refactor then have plenty of time + calcGridCollision: function (step, start, finish) { + var i, next_i, label, + num = this.coords.big_num; + + for (i = 0; i < num; i += step) { + next_i = i + (step / 2); + if (next_i >= num) { + break; + } + + label = this.$cache.grid_labels[next_i][0]; + + if (finish[i] <= start[next_i]) { + label.style.visibility = "visible"; + } else { + label.style.visibility = "hidden"; + } + } + }, + + calcGridMargin: function () { + if (!this.options.grid_margin) { + return; + } + + this.coords.w_rs = this.$cache.rs.outerWidth(false); + if (!this.coords.w_rs) { + return; + } + + if (this.options.type === "single") { + this.coords.w_handle = this.$cache.s_single.outerWidth(false); + } else { + this.coords.w_handle = this.$cache.s_from.outerWidth(false); + } + this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100); + this.coords.grid_gap = this.toFixed((this.coords.p_handle / 2) - 0.1); + + this.$cache.grid[0].style.width = this.toFixed(100 - this.coords.p_handle) + "%"; + this.$cache.grid[0].style.left = this.coords.grid_gap + "%"; + }, + + + + // ============================================================================================================= + // Public methods + + update: function (options) { + if (!this.input) { + return; + } + + this.is_update = true; + + this.options.from = this.result.from; + this.options.to = this.result.to; + + this.options = $.extend(this.options, options); + this.validate(); + this.updateResult(options); + + this.toggleInput(); + this.remove(); + this.init(true); + }, + + reset: function () { + if (!this.input) { + return; + } + + this.updateResult(); + this.update(); + }, + + destroy: function () { + if (!this.input) { + return; + } + + this.toggleInput(); + this.$cache.input.prop("readonly", false); + $.data(this.input, "ionRangeSlider", null); + + this.remove(); + this.input = null; + this.options = null; + } + }; + + $.fn.ionRangeSlider = function (options) { + return this.each(function() { + if (!$.data(this, "ionRangeSlider")) { + $.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++)); + } + }); + }; + + + + // ================================================================================================================= + // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + + // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + + // MIT license + + (function() { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + }()); + +})); diff --git a/frontend/widgets/FilterWidget.php b/frontend/widgets/FilterWidget.php index e6e54cd..6650af0 100755 --- a/frontend/widgets/FilterWidget.php +++ b/frontend/widgets/FilterWidget.php @@ -10,6 +10,7 @@ class FilterWidget extends Widget public $groups; public $filter; public $brands; + public $priceLimits; public function init(){ @@ -26,7 +27,8 @@ class FilterWidget extends Widget 'category'=>$this->category, 'groups'=>$this->groups, 'filter'=>$this->filter, - 'brands'=>$this->brands + 'brands'=>$this->brands, + 'priceLimits'=>$this->priceLimits ]); } diff --git a/frontend/widgets/views/_filter_view.php b/frontend/widgets/views/_filter_view.php index 11d6be9..488c810 100755 --- a/frontend/widgets/views/_filter_view.php +++ b/frontend/widgets/views/_filter_view.php @@ -82,6 +82,16 @@ use yii\web\View;
+ +
+
Цена
+
+
+ +
+
+
+
@@ -162,9 +172,47 @@ $js = " } }); - "; - + "; + $this->registerJs($js, + View::POS_LOAD + ); + + + if ($priceLimits['min'] < $priceLimits['max']){ + + $filterWhitoutPrice = $filter; + $filterWhitoutPrice['prices'] = [ + 'min' => '{from}', + 'max' => '{to}', + ]; + + $js = " + + + + $('#price_interval').ionRangeSlider({ + type: 'double', + min: {$priceLimits['min']}, + max: {$priceLimits['max']}, + from: ".((isset($filter['prices']) && !empty($filter['prices']['min'])) ? $filter['prices']['min'] : $priceLimits['min']) .", + to: ". ((isset($filter['prices']) && !empty($filter['prices']['max'])) ? $filter['prices']['max'] : $priceLimits['max']) .", + grid: false, + onFinish: function(e) { + var url = '" . Url::to([ + 'catalog/category', + 'category' => $category, + 'filters' => $filterWhitoutPrice + ])."'; + var from = e.from; + var to = e.to; + document.location = url.replace('{from}', from).replace('{to}', to); + } + }); + + "; + $this->registerJs($js, + View::POS_LOAD + ); + } + ?> -$this->registerJs($js, - View::POS_LOAD -); ?> -- libgit2 0.21.4