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:
132
html/js/modules (optional)/range-input.js
Executable file
132
html/js/modules (optional)/range-input.js
Executable file
@@ -0,0 +1,132 @@
|
||||
'use strict';
|
||||
|
||||
/** **************
|
||||
* Range Input *
|
||||
****************/
|
||||
(function ($) {
|
||||
|
||||
var range_wrapper = '.range-field';
|
||||
var range_type = 'input[type=range]';
|
||||
var thumb_html = '<span class="thumb"><span class="value"></span></span>';
|
||||
var range_mousedown = false;
|
||||
var left = void 0;
|
||||
|
||||
var add_thumb = function add_thumb() {
|
||||
var $thumb = $(thumb_html);
|
||||
$(range_type).after($thumb);
|
||||
};
|
||||
|
||||
// Add thumbs;
|
||||
$(range_type).each(add_thumb);
|
||||
|
||||
$(document).on('change', range_type, function () {
|
||||
var $thumb = $(this);
|
||||
var $thumb_value = $thumb.siblings('.thumb').find('.value');
|
||||
$thumb_value.html($thumb.val());
|
||||
});
|
||||
|
||||
$(document).on('input mousedown touchstart', range_type, function (e) {
|
||||
var $this = $(this);
|
||||
var $thumb = $this.siblings('.thumb');
|
||||
var width = $this.outerWidth();
|
||||
var noThumb = !$thumb.length;
|
||||
// If thumb indicator does not exist yet, create it
|
||||
if (noThumb) {
|
||||
add_thumb();
|
||||
}
|
||||
|
||||
// Set indicator value
|
||||
$thumb.find('.value').html($this.val());
|
||||
|
||||
range_mousedown = 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', range_wrapper, function () {
|
||||
range_mousedown = false;
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mousemove touchmove', range_wrapper, function (e) {
|
||||
var $thumb = $(this).children('.thumb');
|
||||
var left = void 0;
|
||||
|
||||
if (range_mousedown) {
|
||||
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(range_type).val());
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseout touchleave', range_wrapper, function () {
|
||||
if (!range_mousedown) {
|
||||
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