Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
150
html/js/modules/range-input.js
Executable file
150
html/js/modules/range-input.js
Executable file
@@ -0,0 +1,150 @@
|
||||
'use strict';
|
||||
|
||||
(function ($) {
|
||||
|
||||
var rangeWrapper = '.range-field';
|
||||
var rangeType = 'input[type=range]';
|
||||
var thumbHtml = '<span class="thumb"><span class="value"></span></span>';
|
||||
var rangeMousedown = false;
|
||||
var left = void 0;
|
||||
|
||||
var addThumb = function addThumb() {
|
||||
|
||||
var $thumb = $(thumbHtml);
|
||||
$(rangeType).after($thumb);
|
||||
};
|
||||
|
||||
$(document).on('change', rangeType, function () {
|
||||
|
||||
var $thumb = $(this);
|
||||
var $thumbValue = $thumb.siblings('.thumb').find('.value');
|
||||
$thumbValue.html($thumb.val());
|
||||
});
|
||||
|
||||
$(document).on('input mousedown touchstart', rangeType, function (e) {
|
||||
|
||||
var $this = $(this);
|
||||
var $thumb = $this.siblings('.thumb');
|
||||
var width = $this.outerWidth();
|
||||
var noThumb = !$thumb.length;
|
||||
|
||||
if (noThumb) {
|
||||
|
||||
addThumb();
|
||||
}
|
||||
|
||||
// Set indicator value
|
||||
$thumb.find('.value').html($this.val());
|
||||
|
||||
rangeMousedown = true;
|
||||
$this.addClass('active');
|
||||
|
||||
if (!$thumb.hasClass('active')) {
|
||||
|
||||
$thumb.velocity({
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
top: '-20px',
|
||||
marginLeft: '-15px'
|
||||
}, {
|
||||
duration: 300,
|
||||
easing: 'easeOutExpo'
|
||||
});
|
||||
}
|
||||
|
||||
if (e.type !== 'input') {
|
||||
|
||||
var isMobile = e.pageX === undefined || e.pageX === null;
|
||||
if (isMobile) {
|
||||
|
||||
left = e.originalEvent.touches[0].pageX - $(this).offset().left;
|
||||
} else {
|
||||
|
||||
left = e.pageX - $(this).offset().left;
|
||||
}
|
||||
|
||||
if (left < 0) {
|
||||
|
||||
left = 0;
|
||||
} else if (left > width) {
|
||||
|
||||
left = width;
|
||||
}
|
||||
|
||||
$thumb.addClass('active').css('left', left);
|
||||
}
|
||||
|
||||
$thumb.find('.value').html($this.val());
|
||||
});
|
||||
|
||||
$(document).on('mouseup touchend', rangeWrapper, function () {
|
||||
|
||||
rangeMousedown = false;
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mousemove touchmove', rangeWrapper, function (e) {
|
||||
|
||||
var $thumb = $(this).children('.thumb');
|
||||
var left = void 0;
|
||||
|
||||
if (rangeMousedown) {
|
||||
|
||||
if (!$thumb.hasClass('active')) {
|
||||
|
||||
$thumb.velocity({
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
top: '-20px',
|
||||
marginLeft: '-15px'
|
||||
}, {
|
||||
duration: 300,
|
||||
easing: 'easeOutExpo'
|
||||
});
|
||||
}
|
||||
|
||||
var isMobile = e.pageX === undefined || e.pageX === null;
|
||||
if (isMobile) {
|
||||
|
||||
left = e.originalEvent.touches[0].pageX - $(this).offset().left;
|
||||
} else {
|
||||
|
||||
left = e.pageX - $(this).offset().left;
|
||||
}
|
||||
|
||||
var width = $(this).outerWidth();
|
||||
if (left < 0) {
|
||||
|
||||
left = 0;
|
||||
} else if (left > width) {
|
||||
|
||||
left = width;
|
||||
}
|
||||
|
||||
$thumb.addClass('active').css('left', left);
|
||||
$thumb.find('.value').html($thumb.siblings(rangeType).val());
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseout touchleave', rangeWrapper, function () {
|
||||
|
||||
if (!rangeMousedown) {
|
||||
|
||||
var $thumb = $(this).children('.thumb');
|
||||
|
||||
if ($thumb.hasClass('active')) {
|
||||
|
||||
$thumb.velocity({
|
||||
height: '0',
|
||||
width: '0',
|
||||
top: '10px',
|
||||
marginLeft: '-6px'
|
||||
}, {
|
||||
duration: 100
|
||||
});
|
||||
}
|
||||
|
||||
$thumb.removeClass('active');
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user