Zabbix

/*

** Copyright (C) 2001-2025 Zabbix SIA

**

** This program is free software: you can redistribute it and/or modify it under the terms of

** the GNU Affero General Public License as published by the Free Software Foundation, version 3.

**

** 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 Affero General Public License for more details.

**

** You should have received a copy of the GNU Affero General Public License along with this program.

** If not, see <https://www.gnu.org/licenses/>.

**/

​

​

/**

 * 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));

​