traffic-counter/assets/scripts/nouislider.init.js

196 lines
4.8 KiB
JavaScript
Raw Normal View History

/**
* Theme: Ninja Admin Template
* Author: NinjaTeam
* Module/App: noUIslider
*/
(function($) {
"use strict";
var slider = {};
$(document).ready(function(){
if ($("#noui-connect").length) slider.connect();
if ($("#noui-html5").length) slider.html5();
if ($("#noui-slider1").length) slider.lock();
return false;
});
slider = {
connect : function(){
var connectSlider = document.getElementById('noui-connect');
noUiSlider.create(connectSlider, {
start: [20, 80],
connect: false,
range: {
'min': 0,
'max': 100
}
});
var connectBar = document.createElement('div'),
connectBase = connectSlider.querySelector('.noUi-base');
// Give the bar a class for styling and add it to the slider.
connectBar.className += 'connect';
connectBase.appendChild(connectBar);
connectSlider.noUiSlider.on('update', function( values, handle, a, b, handlePositions ) {
var offset = handlePositions[handle];
// Right offset is 100% - left offset
if ( handle === 1 ) {
offset = 100 - offset;
}
// Pick left for the first handle, right for the second.
connectBar.style[handle ? 'right' : 'left'] = offset + '%';
});
return false;
},
html5: function(){
var select = document.getElementById('noui-select');
// Append the option elements
for ( var i = -20; i <= 40; i++ ){
var option = document.createElement("option");
option.text = i;
option.value = i;
select.appendChild(option);
}
//Initializing the slider
var html5Slider = document.getElementById('noui-html5');
noUiSlider.create(html5Slider, {
start: [ 10, 30 ],
connect: true,
range: {
'min': -20,
'max': 40
}
});
//Linking the select and input
var inputNumber = document.getElementById('noui-input-number');
html5Slider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
inputNumber.value = value;
} else {
select.value = Math.round(value);
}
});
select.addEventListener('change', function(){
html5Slider.noUiSlider.set([this.value, null]);
});
inputNumber.addEventListener('change', function(){
html5Slider.noUiSlider.set([null, this.value]);
});
return false;
},
lock: function(){
// Store the locked state and slider values.
var lockedState = false,
lockedSlider = false,
lockedValues = [60, 80],
slider1 = document.getElementById('noui-slider1'),
slider2 = document.getElementById('noui-slider2'),
lockButton = document.getElementById('noui-lockbutton'),
slider1Value = document.getElementById('noui-slider1-span'),
slider2Value = document.getElementById('noui-slider2-span');
// When the button is clicked, the locked
// state is inverted.
lockButton.addEventListener('click', function(){
lockedState = !lockedState;
this.textContent = lockedState ? 'unlock' : 'lock';
});
noUiSlider.create(slider1, {
start: 60,
// Disable animation on value-setting,
// so the sliders respond immediately.
animate: false,
range: {
min: 50,
max: 100
}
});
noUiSlider.create(slider2, {
start: 80,
animate: false,
range: {
min: 50,
max: 100
}
});
slider1.noUiSlider.on('update', function( values, handle ){
slider1Value.innerHTML = values[handle];
});
slider2.noUiSlider.on('update', function( values, handle ){
slider2Value.innerHTML = values[handle];
});
slider1.noUiSlider.on('change', setLockedValues);
slider2.noUiSlider.on('change', setLockedValues);
// The value will be send to the other slider,
// using a custom function as the serialization
// method. The function uses the global 'lockedState'
// variable to decide whether the other slider is updated.
slider1.noUiSlider.on('slide', function( values, handle ){
crossUpdate(values[handle], slider2);
});
slider2.noUiSlider.on('slide', function( values, handle ){
crossUpdate(values[handle], slider1);
});
function crossUpdate ( value, slider ) {
// If the sliders aren't interlocked, don't
// cross-update.
if ( !lockedState ) return;
// Select whether to increase or decrease
// the other slider value.
var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1;
// Offset the slider value.
value -= lockedValues[b] - lockedValues[a];
// Set the value
slider.noUiSlider.set(value);
return false;
}
function setLockedValues ( ) {
lockedValues = [
Number(slider1.noUiSlider.get()),
Number(slider2.noUiSlider.get())
];
return false;
}
return false;
}
}
})(jQuery);