/**
* asRange v0.3.4
* https://github.com/amazingSurge/jquery-asRange
*
* Copyright (c) amazingSurge
* Released under the LGPL-3.0 license
*/
(function(global, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
factory(require('jquery'));
} else {
var mod = {
exports: {}
};
factory(global.jQuery);
global.jqueryAsRangeEs = mod.exports;
}
})(this, function(_jquery) {
'use strict';
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) {
return obj && obj.__esModule
? obj
: {
default: obj
};
}
var _typeof =
typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
? function(obj) {
return typeof obj;
}
: function(obj) {
return obj &&
typeof Symbol === 'function' &&
obj.constructor === Symbol &&
obj !== Symbol.prototype
? 'symbol'
: typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
var DEFAULTS = {
namespace: 'asRange',
skin: null,
max: 100,
min: 0,
value: null,
step: 10,
limit: true,
range: false,
direction: 'h', // 'v' or 'h'
keyboard: true,
replaceFirst: false, // false, 'inherit', {'inherit': 'default'}
tip: true,
scale: true,
format: function format(value) {
return value;
}
};
function getEventObject(event) {
var e = event.originalEvent;
if (e.touches && e.touches.length && e.touches[0]) {
e = e.touches[0];
}
return e;
}
var Pointer = (function() {
function Pointer($element, id, parent) {
_classCallCheck(this, Pointer);
this.$element = $element;
this.uid = id;
this.parent = parent;
this.options = _jquery2.default.extend(true, {}, this.parent.options);
this.direction = this.options.direction;
this.value = null;
this.classes = {
active: this.parent.namespace + '-pointer_active'
};
}
_createClass(Pointer, [
{
key: 'mousedown',
value: function mousedown(event) {
var axis = this.parent.direction.axis;
var position = this.parent.direction.position;
var offset = this.parent.$wrap.offset();
this.$element.trigger(this.parent.namespace + '::moveStart', this);
this.data = {};
this.data.start = event[axis];
this.data.position = event[axis] - offset[position];
var value = this.parent.getValueFromPosition(this.data.position);
this.set(value);
_jquery2.default.each(this.parent.pointer, function(i, p) {
p.deactive();
});
this.active();
this.mousemove = function(event) {
var eventObj = getEventObject(event);
var value = this.parent.getValueFromPosition(
this.data.position +
(eventObj[axis] || this.data.start) -
this.data.start
);
this.set(value);
event.preventDefault();
return false;
};
this.mouseup = function() {
(0, _jquery2.default)(document).off(
'.asRange mousemove.asRange touchend.asRange mouseup.asRange touchcancel.asRange'
);
this.$element.trigger(this.parent.namespace + '::moveEnd', this);
return false;
};
(0, _jquery2.default)(document)
.on(
'touchmove.asRange mousemove.asRange',
_jquery2.default.proxy(this.mousemove, this)
)
.on(
'touchend.asRange mouseup.asRange',
_jquery2.default.proxy(this.mouseup, this)
);
return false;
}
},
{
key: 'active',
value: function active() {
this.$element.addClass(this.classes.active);
}
},
{
key: 'deactive',
value: function deactive() {
this.$element.removeClass(this.classes.active);
}
},
{
key: 'set',
value: function set(value) {
if (this.value === value) {
return;
}
if (this.parent.step) {
value = this.matchStep(value);
}
if (this.options.limit === true) {
value = this.matchLimit(value);
} else {
if (value <= this.parent.min) {
value = this.parent.min;
}
if (value >= this.parent.max) {
value = this.parent.max;
}
}
this.value = value;
this.updatePosition();
this.$element.focus();
this.$element.trigger(this.parent.namespace + '::move', this);
}
},
{
key: 'updatePosition',
value: function updatePosition() {
var position = {};
position[this.parent.direction.position] = this.getPercent() + '%';
this.$element.css(position);
}
},
{
key: 'getPercent',
value: function getPercent() {
return (this.value - this.parent.min) / this.parent.interval * 100;
}
},
{
key: 'get',
value: function get() {
return this.value;
}
},
{
key: 'matchStep',
value: function matchStep(value) {
var step = this.parent.step;
var decimal = step.toString().split('.')[1];
value = Math.round(value / step) * step;
if (decimal) {
value = value.toFixed(decimal.length);
}
return parseFloat(value);
}
},
{
key: 'matchLimit',
value: function matchLimit(value) {
var left = void 0;
var right = void 0;
var pointer = this.parent.pointer;
if (this.uid === 1) {
left = this.parent.min;
} else {
left = pointer[this.uid - 2].value;
}
if (pointer[this.uid] && pointer[this.uid].value !== null) {
right = pointer[this.uid].value;
} else {
right = this.parent.max;
}
if (value <= left) {
value = left;
}
if (value >= right) {
value = right;
}
return value;
}
},
{
key: 'destroy',
value: function destroy() {
this.$element.off('.asRange');
this.$element.remove();
}
}
]);
return Pointer;
})();
var scale = {
defaults: {
scale: {
valuesNumber: 3,
gap: 1,
grid: 5
}
},
init: function init(instance) {
var opts = _jquery2.default.extend(
{},
this.defaults,
instance.options.scale
);
var scale = opts.scale;
scale.values = [];
scale.values.push(instance.min);
var part = (instance.max - instance.min) / (scale.valuesNumber - 1);
for (var j = 1; j <= scale.valuesNumber - 2; j++) {
scale.values.push(part * j);
}
scale.values.push(instance.max);
var classes = {
scale: instance.namespace + '-scale',
lines: instance.namespace + '-scale-lines',
grid: instance.namespace + '-scale-grid',
inlineGrid: instance.namespace + '-scale-inlineGrid',
values: instance.namespace + '-scale-values'
};
var len = scale.values.length;
var num =
((scale.grid - 1) * (scale.gap + 1) + scale.gap) * (len - 1) + len;
var perOfGrid = 100 / (num - 1);
var perOfValue = 100 / (len - 1);
this.$scale = (0, _jquery2.default)('
').addClass(
classes.scale
);
this.$lines = (0, _jquery2.default)('').addClass(classes.lines);
this.$values = (0, _jquery2.default)('').addClass(
classes.values
);
for (var i = 0; i < num; i++) {
var $list = void 0;
if (i === 0 || i === num || i % ((num - 1) / (len - 1)) === 0) {
$list = (0, _jquery2.default)(
''
);
} else if (i % scale.grid === 0) {
$list = (0, _jquery2.default)(
''
);
} else {
$list = (0, _jquery2.default)('');
}
// position scale
$list
.css({
left: perOfGrid * i + '%'
})
.appendTo(this.$lines);
}
for (var v = 0; v < len; v++) {
// position value
(0, _jquery2.default)('' + scale.values[v] + '')
.css({
left: perOfValue * v + '%'
})
.appendTo(this.$values);
}
this.$lines.add(this.$values).appendTo(this.$scale);
this.$scale.appendTo(instance.$wrap);
},
update: function update(instance) {
this.$scale.remove();
this.init(instance);
}
};
var selected = {
defaults: {},
init: function init(instance) {
var _this = this;
this.$arrow = (0, _jquery2.default)('').appendTo(
instance.$wrap
);
this.$arrow.addClass(instance.namespace + '-selected');
if (instance.options.range === false) {
instance.p1.$element.on(instance.namespace + '::move', function(
e,
pointer
) {
_this.$arrow.css({
left: 0,
width: pointer.getPercent() + '%'
});
});
}
if (instance.options.range === true) {
var onUpdate = function onUpdate() {
var width = instance.p2.getPercent() - instance.p1.getPercent();
var left = void 0;
if (width >= 0) {
left = instance.p1.getPercent();
} else {
width = -width;
left = instance.p2.getPercent();
}
_this.$arrow.css({
left: left + '%',
width: width + '%'
});
};
instance.p1.$element.on(instance.namespace + '::move', onUpdate);
instance.p2.$element.on(instance.namespace + '::move', onUpdate);
}
}
};
var tip = {
defaults: {
active: 'always' // 'always' 'onMove'
},
init: function init(instance) {
var that = this;
var opts = _jquery2.default.extend(
{},
this.defaults,
instance.options.tip
);
this.opts = opts;
this.classes = {
tip: instance.namespace + '-tip',
show: instance.namespace + '-tip-show'
};
_jquery2.default.each(instance.pointer, function(i, p) {
var $tip = (0, _jquery2.default)('').appendTo(
instance.pointer[i].$element
);
$tip.addClass(that.classes.tip);
if (that.opts.active === 'onMove') {
$tip.css({
display: 'none'
});
p.$element
.on(instance.namespace + '::moveEnd', function() {
that.hide($tip);
return false;
})
.on(instance.namespace + '::moveStart', function() {
that.show($tip);
return false;
});
}
p.$element.on(instance.namespace + '::move', function() {
var value = void 0;
if (instance.options.range) {
value = instance.get()[i];
} else {
value = instance.get();
}
if (typeof instance.options.format === 'function') {
if (instance.options.replaceFirst && typeof value !== 'number') {
if (typeof instance.options.replaceFirst === 'string') {
value = instance.options.replaceFirst;
}
if (_typeof(instance.options.replaceFirst) === 'object') {
for (var key in instance.options.replaceFirst) {
if (
Object.hasOwnProperty(instance.options.replaceFirst, key)
) {
value = instance.options.replaceFirst[key];
}
}
}
} else {
value = instance.options.format(value);
}
}
$tip.text(value);
return false;
});
});
},
show: function show($tip) {
$tip.addClass(this.classes.show);
$tip.css({
display: 'block'
});
},
hide: function hide($tip) {
$tip.removeClass(this.classes.show);
$tip.css({
display: 'none'
});
}
};
var keyboard = function keyboard() {
var $doc = (0, _jquery2.default)(document);
$doc.on('asRange::ready', function(event, instance) {
var step = void 0;
var keyboard = {
keys: {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,
RETURN: 13,
ESCAPE: 27,
BACKSPACE: 8,
SPACE: 32
},
map: {},
bound: false,
press: function press(e) {
/*eslint consistent-return: "off"*/
var key = e.keyCode || e.which;
if (key in keyboard.map && typeof keyboard.map[key] === 'function') {
keyboard.map[key](e);
return false;
}
},
attach: function attach(map) {
var key = void 0;
var up = void 0;
for (key in map) {
if (map.hasOwnProperty(key)) {
up = key.toUpperCase();
if (up in keyboard.keys) {
keyboard.map[keyboard.keys[up]] = map[key];
} else {
keyboard.map[up] = map[key];
}
}
}
if (!keyboard.bound) {
keyboard.bound = true;
$doc.bind('keydown', keyboard.press);
}
},
detach: function detach() {
keyboard.bound = false;
keyboard.map = {};
$doc.unbind('keydown', keyboard.press);
}
};
if (instance.options.keyboard === true) {
_jquery2.default.each(instance.pointer, function(i, p) {
if (instance.options.step) {
step = instance.options.step;
} else {
step = 1;
}
var left = function left() {
var value = p.value;
p.set(value - step);
};
var right = function right() {
var value = p.value;
p.set(value + step);
};
p.$element
.attr('tabindex', '0')
.on('focus', function() {
keyboard.attach({
left: left,
right: right
});
return false;
})
.on('blur', function() {
keyboard.detach();
return false;
});
});
}
});
};
var components = {};
/**
* Plugin constructor
**/
var asRange = (function() {
function asRange(element, options) {
var _this2 = this;
_classCallCheck(this, asRange);
var metas = {};
this.element = element;
this.$element = (0, _jquery2.default)(element);
if (this.$element.is('input')) {
var value = this.$element.val();
if (typeof value === 'string') {
metas.value = value.split(',');
}
_jquery2.default.each(['min', 'max', 'step'], function(index, key) {
var val = parseFloat(_this2.$element.attr(key));
if (!isNaN(val)) {
metas[key] = val;
}
});
this.$element.css({
display: 'none'
});
this.$wrap = (0, _jquery2.default)('');
this.$element.after(this.$wrap);
} else {
this.$wrap = this.$element;
}
this.options = _jquery2.default.extend(
{},
DEFAULTS,
options,
this.$element.data(),
metas
);
this.namespace = this.options.namespace;
this.components = _jquery2.default.extend(true, {}, components);
if (this.options.range) {
this.options.replaceFirst = false;
}
// public properties
this.value = this.options.value;
if (this.value === null) {
this.value = this.options.min;
}
if (!this.options.range) {
if (_jquery2.default.isArray(this.value)) {
this.value = this.value[0];
}
} else if (!_jquery2.default.isArray(this.value)) {
this.value = [this.value, this.value];
} else if (this.value.length === 1) {
this.value[1] = this.value[0];
}
this.min = this.options.min;
this.max = this.options.max;
this.step = this.options.step;
this.interval = this.max - this.min;
// flag
this.initialized = false;
this.updating = false;
this.disabled = false;
if (this.options.direction === 'v') {
this.direction = {
axis: 'pageY',
position: 'top'
};
} else {
this.direction = {
axis: 'pageX',
position: 'left'
};
}
this.$wrap.addClass(this.namespace);
if (this.options.skin) {
this.$wrap.addClass(this.namespace + '_' + this.options.skin);
}
if (this.max < this.min || this.step >= this.interval) {
throw new Error('error options about max min step');
}
this.init();
}
_createClass(
asRange,
[
{
key: 'init',
value: function init() {
this.$wrap.append('');
// build pointers
this.buildPointers();
// initial components
this.components.selected.init(this);
if (this.options.tip !== false) {
this.components.tip.init(this);
}
if (this.options.scale !== false) {
this.components.scale.init(this);
}
// initial pointer value
this.set(this.value);
// Bind events
this.bindEvents();
this._trigger('ready');
this.initialized = true;
}
},
{
key: '_trigger',
value: function _trigger(eventType) {
for (
var _len = arguments.length,
params = Array(_len > 1 ? _len - 1 : 0),
_key = 1;
_key < _len;
_key++
) {
params[_key - 1] = arguments[_key];
}
var data = [this].concat(params);
// event
this.$element.trigger(this.namespace + ('::' + eventType), data);
// callback
eventType = eventType.replace(/\b\w+\b/g, function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
});
var onFunction = 'on' + eventType;
if (typeof this.options[onFunction] === 'function') {
this.options[onFunction].apply(this, params);
}
}
},
{
key: 'buildPointers',
value: function buildPointers() {
this.pointer = [];
var pointerCount = 1;
if (this.options.range) {
pointerCount = 2;
}
for (var i = 1; i <= pointerCount; i++) {
var $pointer = (0, _jquery2.default)(
''
).appendTo(this.$wrap);
var p = new Pointer($pointer, i, this);
this.pointer.push(p);
}
// alias of pointer
this.p1 = this.pointer[0];
if (this.options.range) {
this.p2 = this.pointer[1];
}
}
},
{
key: 'bindEvents',
value: function bindEvents() {
var _this3 = this;
var that = this;
this.$wrap.on('touchstart.asRange mousedown.asRange', function(
event
) {
/*eslint consistent-return: "off"*/
if (that.disabled === true) {
return;
}
event = getEventObject(event);
var rightclick = event.which
? event.which === 3
: event.button === 2;
if (rightclick) {
return false;
}
var offset = that.$wrap.offset();
var start =
event[that.direction.axis] - offset[that.direction.position];
var p = that.getAdjacentPointer(start);
p.mousedown(event);
return false;
});
if (this.$element.is('input')) {
this.$element.on(this.namespace + '::change', function() {
var value = _this3.get();
_this3.$element.val(value);
});
}
_jquery2.default.each(this.pointer, function(i, p) {
p.$element.on(_this3.namespace + '::move', function() {
that.value = that.get();
if (!that.initialized || that.updating) {
return false;
}
that._trigger('change', that.value);
return false;
});
});
}
},
{
key: 'getValueFromPosition',
value: function getValueFromPosition(px) {
if (px > 0) {
return this.min + px / this.getLength() * this.interval;
}
return 0;
}
},
{
key: 'getAdjacentPointer',
value: function getAdjacentPointer(start) {
var value = this.getValueFromPosition(start);
if (this.options.range) {
var p1 = this.p1.value;
var p2 = this.p2.value;
var diff = Math.abs(p1 - p2);
if (p1 <= p2) {
if (value > p1 + diff / 2) {
return this.p2;
}
return this.p1;
}
if (value > p2 + diff / 2) {
return this.p1;
}
return this.p2;
}
return this.p1;
}
},
{
key: 'getLength',
value: function getLength() {
if (this.options.direction === 'v') {
return this.$wrap.height();
}
return this.$wrap.width();
}
},
{
key: 'update',
value: function update(options) {
var _this4 = this;
this.updating = true;
_jquery2.default.each(
['max', 'min', 'step', 'limit', 'value'],
function(key, value) {
if (options[value]) {
_this4[value] = options[value];
}
}
);
if (options.max || options.min) {
this.setInterval(options.min, options.max);
}
if (!options.value) {
this.value = options.min;
}
_jquery2.default.each(this.components, function(key, value) {
if (typeof value.update === 'function') {
value.update(_this4);
}
});
this.set(this.value);
this._trigger('update');
this.updating = false;
}
},
{
key: 'get',
value: function get() {
var value = [];
_jquery2.default.each(this.pointer, function(i, p) {
value[i] = p.get();
});
if (this.options.range) {
return value;
}
if (value[0] === this.options.min) {
if (typeof this.options.replaceFirst === 'string') {
value[0] = this.options.replaceFirst;
}
if (_typeof(this.options.replaceFirst) === 'object') {
for (var key in this.options.replaceFirst) {
if (Object.hasOwnProperty(this.options.replaceFirst, key)) {
value[0] = key;
}
}
}
}
return value[0];
}
},
{
key: 'set',
value: function set(value) {
if (this.options.range) {
if (typeof value === 'number') {
value = [value];
}
if (!_jquery2.default.isArray(value)) {
return;
}
_jquery2.default.each(this.pointer, function(i, p) {
p.set(value[i]);
});
} else {
this.p1.set(value);
}
this.value = value;
}
},
{
key: 'val',
value: function val(value) {
if (value) {
this.set(value);
return this;
}
return this.get();
}
},
{
key: 'setInterval',
value: function setInterval(start, end) {
this.min = start;
this.max = end;
this.interval = end - start;
}
},
{
key: 'enable',
value: function enable() {
this.disabled = false;
this.$wrap.removeClass(this.namespace + '_disabled');
this._trigger('enable');
return this;
}
},
{
key: 'disable',
value: function disable() {
this.disabled = true;
this.$wrap.addClass(this.namespace + '_disabled');
this._trigger('disable');
return this;
}
},
{
key: 'destroy',
value: function destroy() {
_jquery2.default.each(this.pointer, function(i, p) {
p.destroy();
});
this.$wrap.destroy();
this._trigger('destroy');
}
}
],
[
{
key: 'registerComponent',
value: function registerComponent(component, methods) {
components[component] = methods;
}
},
{
key: 'setDefaults',
value: function setDefaults(options) {
_jquery2.default.extend(
DEFAULTS,
_jquery2.default.isPlainObject(options) && options
);
}
}
]
);
return asRange;
})();
asRange.registerComponent('scale', scale);
asRange.registerComponent('selected', selected);
asRange.registerComponent('tip', tip);
keyboard();
var info = {
version: '0.3.4'
};
var NAMESPACE = 'asRange';
var OtherAsRange = _jquery2.default.fn.asRange;
var jQueryAsRange = function jQueryAsRange(options) {
for (
var _len2 = arguments.length,
args = Array(_len2 > 1 ? _len2 - 1 : 0),
_key2 = 1;
_key2 < _len2;
_key2++
) {
args[_key2 - 1] = arguments[_key2];
}
if (typeof options === 'string') {
var method = options;
if (/^_/.test(method)) {
return false;
} else if (
/^(get)$/.test(method) ||
(method === 'val' && args.length === 0)
) {
var instance = this.first().data(NAMESPACE);
if (instance && typeof instance[method] === 'function') {
return instance[method].apply(instance, args);
}
} else {
return this.each(function() {
var instance = _jquery2.default.data(this, NAMESPACE);
if (instance && typeof instance[method] === 'function') {
instance[method].apply(instance, args);
}
});
}
}
return this.each(function() {
if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
(0, _jquery2.default)(this).data(NAMESPACE, new asRange(this, options));
}
});
};
_jquery2.default.fn.asRange = jQueryAsRange;
_jquery2.default.asRange = _jquery2.default.extend(
{
setDefaults: asRange.setDefaults,
noConflict: function noConflict() {
_jquery2.default.fn.asRange = OtherAsRange;
return jQueryAsRange;
}
},
info
);
});