You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
4.0 KiB
137 lines
4.0 KiB
/*
|
|
** Zabbix
|
|
** Copyright (C) 2001-2023 Zabbix SIA
|
|
**
|
|
** This program is free software; you can redistribute it and/or modify
|
|
** it under the terms of the GNU General Public License as published by
|
|
** the Free Software Foundation; either version 2 of the License, or
|
|
** (at your option) any later version.
|
|
**
|
|
** This program is distributed in the hope that it will be useful,
|
|
** but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
** GNU General Public License for more details.
|
|
**
|
|
** You should have received a copy of the GNU General Public License
|
|
** along with this program; if not, write to the Free Software
|
|
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
**/
|
|
|
|
|
|
/**
|
|
* JQuery class that creates input[type=range] UI element from given input[type=text] elements and adds some
|
|
* interactivity for better user experience.
|
|
*/
|
|
jQuery(function ($) {
|
|
"use strict";
|
|
|
|
function generateRangeElements(datalist, options) {
|
|
var value;
|
|
|
|
for (value = options.min; value < options.max; value += options.step) {
|
|
$('<option>', {value: value}).appendTo(datalist);
|
|
}
|
|
}
|
|
|
|
var methods = {
|
|
/**
|
|
* Initializes range control for passed input[type=text] elements.
|
|
*
|
|
* Following options should/must be defined in [data-options] attribute (json expected):
|
|
* - step - specifies what is a step in specified min-max range (optional).
|
|
* - min - specifies minimal value of range (mandatory).
|
|
* - max - specifies maximal value of range (mandatory).
|
|
*/
|
|
init: function() {
|
|
var tmpl = $('<div class="range-control">' +
|
|
'<div>' +
|
|
'<div class="range-control-track"></div>' +
|
|
'<div class="range-control-progress"></div>' +
|
|
'<datalist></datalist>' +
|
|
'<div class="range-control-thumb"></div>' +
|
|
'<input type="range">' +
|
|
'</div>' +
|
|
'</div>');
|
|
|
|
return $(this).each(function(_, input) {
|
|
var options = $(this).data('options'),
|
|
datalistid = (new Date()).getTime().toString(34),
|
|
$input = $(input),
|
|
$control = tmpl.clone(),
|
|
$range = $control.find('[type=range]'),
|
|
$datalist = $control.find('datalist').attr('id', datalistid),
|
|
$progress = $control.find('.range-control-progress'),
|
|
$thumb = $control.find('.range-control-thumb'),
|
|
updateHandler = function() {
|
|
var value = $range.val(),
|
|
shift = ((value - options.min) * 100 / (options.max - options.min));
|
|
|
|
$input.val(value);
|
|
$progress.css({width: shift + '%'});
|
|
$thumb.css({left: shift + '%'});
|
|
};
|
|
|
|
generateRangeElements($datalist, options);
|
|
|
|
$(this).removeAttr('data-options');
|
|
|
|
$range
|
|
.attr({
|
|
'list': datalistid,
|
|
'min': options.min,
|
|
'max': options.max,
|
|
'step': options.step,
|
|
'value': $input.val()
|
|
})
|
|
.prop('disabled', $input.prop('disabled'))
|
|
.change(updateHandler)
|
|
.focus(function() {
|
|
$control.addClass("range-control-focus");
|
|
$(document).on("mousemove", updateHandler);
|
|
})
|
|
.blur(function() {
|
|
$control.removeClass("range-control-focus");
|
|
$(document).off("mousemove", updateHandler);
|
|
})
|
|
.change();
|
|
|
|
if ($input.prop('disabled')) {
|
|
$control.addClass('disabled');
|
|
}
|
|
|
|
$control
|
|
.width(options.width)
|
|
.insertBefore($input);
|
|
|
|
$input
|
|
.change(function() {$range.val(this.value); updateHandler();})
|
|
.appendTo($control);
|
|
});
|
|
},
|
|
disable: function() {
|
|
var $input = $(this),
|
|
$range = $input.parent().find('[type=range]');
|
|
|
|
$input.parent().addClass('disabled');
|
|
$input.prop('disabled', true);
|
|
$range.prop('disabled', true);
|
|
},
|
|
enable: function() {
|
|
var $input = $(this),
|
|
$range = $input.parent().find('[type=range]');
|
|
|
|
$input.parent().removeClass('disabled');
|
|
$input.prop('disabled', false);
|
|
$range.prop('disabled', false);
|
|
}
|
|
};
|
|
|
|
$.fn.rangeControl = function(method) {
|
|
if (methods[method]) {
|
|
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
}
|
|
|
|
return methods.init.apply(this, arguments);
|
|
};
|
|
});
|