mirror of
https://github.com/Sarjuuk/aowow.git
synced 2025-12-01 21:15:20 +08:00
Template/Update (Part 47)
* split global.js into its components, so it can be reasonably processed by setup * make reputation requirements configurable * move Markup and Locale back into global.js (removed associated build scripts) * extend Icon to display iconId in lightbox popup
This commit is contained in:
Sarjuuk
289
setup/tools/filegen/templates/global.js/slider.js
Normal file
289
setup/tools/filegen/templates/global.js/slider.js
Normal file
@@ -0,0 +1,289 @@
|
||||
var Slider = new function()
|
||||
{
|
||||
var
|
||||
start,
|
||||
handleObj,
|
||||
timer;
|
||||
|
||||
function onMouseDown(e)
|
||||
{
|
||||
e = $WH.$E(e);
|
||||
|
||||
handleObj = this;
|
||||
start = $WH.g_getCursorPos(e);
|
||||
|
||||
$WH.aE(document, 'mousemove', onMouseMove);
|
||||
$WH.aE(document, 'mouseup', onMouseUp);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onMouseMove(e)
|
||||
{
|
||||
e = $WH.$E(e);
|
||||
|
||||
if (!start || !handleObj)
|
||||
return;
|
||||
|
||||
var
|
||||
cursor = $WH.g_getCursorPos(e),
|
||||
delta = cursor[handleObj._dir] - start[handleObj._dir],
|
||||
outside = setPosition(handleObj, handleObj._pos + delta),
|
||||
current = getCurrentPosition(handleObj);
|
||||
|
||||
if (current && handleObj.input)
|
||||
handleObj.input.value = current.value;
|
||||
|
||||
if (!outside)
|
||||
start = cursor;
|
||||
|
||||
if (handleObj.onMove)
|
||||
handleObj.onMove(e, handleObj, current);
|
||||
}
|
||||
|
||||
function onMouseUp(e)
|
||||
{
|
||||
e = $WH.$E(e);
|
||||
|
||||
if (handleObj.onMove)
|
||||
handleObj.onMove(e, handleObj, getCurrentPosition(handleObj));
|
||||
|
||||
handleObj = null;
|
||||
start = null;
|
||||
|
||||
$WH.dE(document, 'mousemove', onMouseMove);
|
||||
$WH.dE(document, 'mouseup', onMouseUp);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onClick(obj, e)
|
||||
{
|
||||
e = $WH.$E(e);
|
||||
|
||||
handleObj = obj;
|
||||
start = $WH.g_getCursorPos(e);
|
||||
|
||||
var
|
||||
offset = $WH.ac(handleObj.parentNode),
|
||||
center = Math.floor(getHandleWidth(handleObj) / 2);
|
||||
|
||||
setPosition(handleObj, start[handleObj._dir] - offset[handleObj._dir] - center);
|
||||
|
||||
var current = getCurrentPosition(handleObj);
|
||||
|
||||
if (current && handleObj.input)
|
||||
handleObj.input.value = current.value;
|
||||
|
||||
if (handleObj.onMove)
|
||||
handleObj.onMove(e, handleObj, current);
|
||||
|
||||
$WH.aE(document, 'mousemove', onMouseMove);
|
||||
$WH.aE(document, 'mouseup', onMouseUp);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onKeyPress(obj, e)
|
||||
{
|
||||
if (timer)
|
||||
clearTimeout(timer);
|
||||
|
||||
if (e.type == 'change' || e.type == 'keypress' && e.which == 13)
|
||||
onInput(obj, e);
|
||||
else
|
||||
timer = setTimeout(onInput.bind(0, obj, e), 1000);
|
||||
}
|
||||
|
||||
function onInput(obj, e)
|
||||
{
|
||||
var
|
||||
value = obj.input.value,
|
||||
current = getCurrentPosition(obj);
|
||||
|
||||
if (isNaN(value))
|
||||
value = current.value;
|
||||
if (value > obj._max)
|
||||
value = obj._max;
|
||||
if (value < obj._min)
|
||||
value = obj._min;
|
||||
|
||||
Slider.setValue(obj, value);
|
||||
|
||||
if (obj.onMove)
|
||||
obj.onMove(e, obj, getCurrentPosition(obj));
|
||||
}
|
||||
|
||||
function setPosition(obj, offset)
|
||||
{
|
||||
var outside = false;
|
||||
|
||||
if (offset < 0)
|
||||
{
|
||||
offset = 0;
|
||||
outside = true;
|
||||
}
|
||||
else if (offset > getMaxPosition(obj))
|
||||
{
|
||||
offset = getMaxPosition(obj);
|
||||
outside = true;
|
||||
}
|
||||
|
||||
obj.style[(obj._dir == 'y' ? 'top' : 'left')] = offset + 'px';
|
||||
obj._pos = offset;
|
||||
|
||||
return outside;
|
||||
}
|
||||
|
||||
function getMaxPosition(obj)
|
||||
{
|
||||
return getTrackerWidth(obj) - getHandleWidth(obj) + 2;
|
||||
}
|
||||
|
||||
function getCurrentPosition(obj)
|
||||
{
|
||||
var
|
||||
percent = obj._pos / getMaxPosition(obj),
|
||||
value = Math.round((percent * (obj._max - obj._min)) + obj._min),
|
||||
result = [percent, value];
|
||||
|
||||
result.percent = percent;
|
||||
result.value = value;
|
||||
return result;
|
||||
}
|
||||
|
||||
function getTrackerWidth(obj) {
|
||||
if (obj._tsz > 0) {
|
||||
return obj._tsz;
|
||||
}
|
||||
|
||||
if (obj._dir == 'y') {
|
||||
return obj.parentNode.offsetHeight;
|
||||
}
|
||||
|
||||
return obj.parentNode.offsetWidth;
|
||||
}
|
||||
|
||||
function getHandleWidth(obj) {
|
||||
if (obj._hsz > 0)
|
||||
return obj._hsz;
|
||||
|
||||
if (obj._dir == 'y')
|
||||
return obj.offsetHeight;
|
||||
|
||||
return obj.offsetWidth;
|
||||
}
|
||||
|
||||
this.setPercent = function(obj, percent)
|
||||
{
|
||||
setPosition(obj, parseInt(percent * getMaxPosition(obj)));
|
||||
}
|
||||
|
||||
this.setValue = function(obj, value)
|
||||
{
|
||||
if (value < obj._min)
|
||||
value = obj._min;
|
||||
else if (value > obj._max)
|
||||
value = obj._max;
|
||||
|
||||
if (obj.input)
|
||||
obj.input.value = value;
|
||||
|
||||
this.setPercent(obj, (value - obj._min) / (obj._max - obj._min));
|
||||
}
|
||||
|
||||
this.setSize = function(obj, length)
|
||||
{
|
||||
var
|
||||
current = getCurrentPosition(obj),
|
||||
resized = getMaxPosition(obj);
|
||||
|
||||
obj.parentNode.style[(obj._dir == 'y' ? 'height' : 'width')] = length + 'px';
|
||||
|
||||
if (resized != getMaxPosition(obj))
|
||||
this.setValue(obj, current.value);
|
||||
}
|
||||
|
||||
this.init = function(container, opt)
|
||||
{
|
||||
var obj = $WH.ce('a');
|
||||
obj.href = 'javascript:;';
|
||||
obj.onmousedown = onMouseDown;
|
||||
obj.className = 'handle';
|
||||
|
||||
var track = $WH.ce('a');
|
||||
track.href = 'javascript:;';
|
||||
track.onmousedown = onClick.bind(0, obj);
|
||||
track.className = 'track';
|
||||
|
||||
$WH.ae(container, $WH.ce('span'));
|
||||
$WH.ae(container, track);
|
||||
$WH.ae(container, obj);
|
||||
|
||||
obj._dir = 'x';
|
||||
obj._min = 1;
|
||||
obj._max = 100;
|
||||
obj._pos = 0;
|
||||
obj._tsz = 0;
|
||||
obj._hsz = 0;
|
||||
|
||||
if (opt != null)
|
||||
{
|
||||
// Orientation
|
||||
if (opt.direction == 'y')
|
||||
obj._dir = 'y';
|
||||
|
||||
// Values
|
||||
if (opt.minValue)
|
||||
obj._min = opt.minValue;
|
||||
if (opt.maxValue)
|
||||
obj._max = opt.maxValue;
|
||||
|
||||
// Functions
|
||||
if (opt.onMove)
|
||||
obj.onMove = opt.onMove;
|
||||
|
||||
if (opt.trackSize)
|
||||
obj._tsz = opt.trackSize;
|
||||
|
||||
if (opt.handleSize)
|
||||
obj._hsz = opt.handleSize;
|
||||
|
||||
// Labels
|
||||
if (opt.showLabels !== false)
|
||||
{
|
||||
var label = $WH.ce('div');
|
||||
|
||||
label.innerHTML = obj._min;
|
||||
label.className = 'label min';
|
||||
$WH.ae(container, label);
|
||||
|
||||
label = $WH.ce('div');
|
||||
label.innerHTML = obj._max;
|
||||
label.className = 'label max';
|
||||
$WH.ae(container, label);
|
||||
|
||||
obj.input = $WH.ce('input');
|
||||
$(obj.input).attr({ value: obj._max, type: 'text' })
|
||||
.bind('click', function () { this.select(); })
|
||||
.keypress(function (e) {
|
||||
var allowed = [];
|
||||
var usedKey = e.which;
|
||||
for (i = 48; i < 58; i++)
|
||||
allowed.push(i);
|
||||
|
||||
if (!($WH.in_array(allowed, usedKey) >= 0) && usedKey != 13)
|
||||
e.preventDefault();
|
||||
})
|
||||
.bind('keyup keydown change', onKeyPress.bind(0, obj));
|
||||
|
||||
obj.input.className = 'input';
|
||||
$WH.ae(container, obj.input);
|
||||
}
|
||||
}
|
||||
|
||||
container.className = 'slider-' + obj._dir + (opt == null || opt.showLabels !== false ? ' has-labels' : '');
|
||||
|
||||
return obj;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user