PHP Classes

File: JS_toolbucket/freqdec-fd-slider-01084d3/js/fd-slider.js

Recommend this page to a friend!
  Classes of Joseph  >  Rainbow Maker  >  JS_toolbucket/freqdec-fd-slider-01084d3/js/fd-slider.js  >  Download  
File: JS_toolbucket/freqdec-fd-slider-01084d3/js/fd-slider.js
Role: Auxiliary data
Content type: text/plain
Description: adds input type='range' support to lame browsers
Class: Rainbow Maker
Create transparent gradient images
Author: By
Last change:
Date: 10 years ago
Size: 76,977 bytes
 

Contents

Class file image Download
/*! Unobtrusive Slider Control / HTML5 Input Range polyfill - MIT/GPL2 @freqdec */ var fdSlider = (function() { var sliders = {}, uniqueid = 0, mouseWheelEnabled = true, fullARIA = true, describedBy = "fd-slider-describedby", varSetRules = { onfocus:true, onvalue:true }, noRangeBar = false, html5Animation = "jump", isOpera = Object.prototype.toString.call(window.opera) === "[object Opera]", fpRegExp = /^([-]{0,1}[0-9]+(\.[0-9]+){0,1})$/, stepRegExp = /^([0-9]+(\.[0-9]+){0,1})$/; var parseJSON = function(str) { // Check we have a String if(typeof str !== 'string' || str == "") { return {}; }; try { // Does a JSON (native or not) Object exist if(typeof JSON === "object" && JSON.parse) { return window.JSON.parse(str); // Genious code taken from: http://kentbrewster.com/badges/ } else if(/mousewheelenabled|fullaria|describedby|norangebar|html5animation|varsetrules/.test(str.toLowerCase())) { var f = Function(['var document,top,self,window,parent,Number,Date,Object,Function,', 'Array,String,Math,RegExp,Image,ActiveXObject;', 'return (' , str.replace(/<\!--.+-->/gim,'').replace(/\bfunction\b/g,'function-') , ');'].join('')); return f(); }; } catch (e) { }; return {"err":"Could not parse the JSON object"}; }; var affectJSON = function(json) { if(typeof json !== "object") { return; }; for(key in json) { value = json[key]; switch(key.toLowerCase()) { case "mousewheelenabled": mouseWheelEnabled = !!value; break; case "fullaria": fullARIA = !!value; break; case "describedby": describedBy = String(value); break; case "norangebar": noRangeBar = !!value; break; case "html5animation": html5Animation = String(value).search(/^(jump|tween|timed)$/i) != -1 ? String(value).toLowerCase() : "jump"; break; case "varsetrules": if("onfocus" in value) { varSetRules.onfocus = !!value.onfocus; }; if("onvalue" in value) { varSetRules.onvalue = !!value.onvalue; }; break; }; }; }; // Classic event functions var addEvent = function(obj, type, fn) { if( obj.attachEvent ) { obj.attachEvent( "on"+type, fn ); } else { obj.addEventListener( type, fn, true ); } }; var removeEvent = function(obj, type, fn) { try { if( obj.detachEvent ) { obj.detachEvent( "on"+type, fn ); } else { obj.removeEventListener( type, fn, true ); } } catch(err) {}; }; var stopEvent = function(e) { e = e || window.event; if(e.stopPropagation) { e.stopPropagation(); e.preventDefault(); }; /*@cc_on@*/ /*@if(@_win32) e.cancelBubble = true; e.returnValue = false; /*@end@*/ return false; }; var preventDefault = function(e) { e = e || window.event; if(e.preventDefault) { e.preventDefault(); return; }; e.returnValue = false; }; // Add/Remove classname utility functions var addClass = function(e,c) { if(new RegExp("(^|\\s)" + c + "(\\s|$)").test(e.className)) { return; }; e.className += ( e.className ? " " : "" ) + c; }; var removeClass = function(e,c) { e.className = !c ? "" : e.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)"), " ").replace(/^\s\s*/, '').replace(/\s\s*$/, ''); }; // Returns an Object of key value pairs indicating which sliders have values // that have been "set" by the user var getValueSet = function() { var obj = {}; for(id in sliders) { obj[id] = sliders[id].getValueSet(); }; return obj; }; // Sets the valueSet variable for a specific slider var setValueSet = function(sliderId, tf) { sliders[sliderId].setValueSet(!!tf); }; // Does the slider exist in memory var sliderExists = function(slider) { return !!(slider in sliders && sliders.hasOwnProperty(slider)); }; // Javascript instantiation of a slider (input type="text" or select list) var createSlider = function(options) { if(!options || !options.inp || !options.inp.tagName || options.inp.tagName.search(/^input|select/i) == -1) { return false; }; options.html5Shim = false; if(options.inp.tagName.toLowerCase() == "select") { if(options.inp.options.length < 2) { return false; }; options.min = 0; options.max = options.inp.options.length - 1; options.step = 1; options.precision = 0; options.scale = false; options.forceValue = true; } else { if(String(options.inp.type).search(/^text$/i) == -1) { return false; }; options.min = options.min && String(options.min).search(fpRegExp) != -1 ? +options.min : 0; options.max = options.max && String(options.max).search(fpRegExp) != -1 ? +options.max : 100; options.step = options.step && String(options.step).search(stepRegExp) != -1 ? options.step : 1; options.precision = options.precision && String(options.precision).search(/^[0-9]+$/) != -1 ? options.precision : (String(options.step).search(/\.([0-9]+)$/) != -1 ? String(options.step).match(/\.([0-9]+)$/)[1].length : 0); options.scale = options.scale || false; options.forceValue = ("forceValue" in options) ? !!options.forceValue : false; }; options.maxStep = options.maxStep && String(options.maxStep).search(stepRegExp) != -1 ? +options.maxStep : +options.step * 2; options.classNames = options.classNames || ""; options.callbacks = options.callbacks || false; destroySingleSlider(options.inp.id); sliders[options.inp.id] = new fdRange(options); return true; }; var getAttribute = function(elem, att) { return elem.getAttribute(att) || ""; }; // HTML5 input type="range" shim - called onload or onDomReady var init = function() { var inputs = document.getElementsByTagName("input"), options; for(var i = 0, inp; inp = inputs[i]; i++) { if(inp.tagName.toLowerCase() == "input" && inp.type.toLowerCase() == "text" && (getAttribute(inp, "min") && getAttribute(inp, "min").search(fpRegExp) != -1 || getAttribute(inp, "max") && getAttribute(inp, "max").search(fpRegExp) != -1 || getAttribute(inp, "step") && getAttribute(inp, "step").search(/^(any|([0-9]+(\.[0-9]+){0,1}))$/i) != -1 )) { // Skip elements that have already been created are are resident in the DOM if(inp.id && document.getElementById("fd-slider-"+inp.id)) { continue; // Destroy elements that have already been created but not resident in the DOM } else if(inp.id && !document.getElementById("fd-slider-"+inp.id)) { destroySingleSlider(inp.id); }; // Create an id for the form element if necessary if(!inp.id) { inp.id = "fd-slider-form-elem-" + uniqueid++; }; // Basic option Object options = { inp: inp, callbacks: [], animation: html5Animation, vertical: getAttribute(inp, "data-fd-slider-vertical") ? true : !!(inp.offsetHeight > inp.offsetWidth), classNames: getAttribute(inp, "data-fd-slider-vertical"), html5Shim: true }; if(options.vertical && !getAttribute(inp, "data-fd-slider-vertical")) { options.inpHeight = inp.offsetHeight; }; options.min = getAttribute(inp, "min") || 0; options.max = getAttribute(inp, "max") || 100; options.step = getAttribute(inp, "step").search(/^any$/i) != -1 ? options.max - options.min : getAttribute(inp, "step").search(stepRegExp) != -1 ? inp.getAttribute("step") : 1; options.precision = String(options.step).search(/\.([0-9]+)$/) != -1 ? String(options.step).match(/\.([0-9]+)$/)[1].length : 0; options.maxStep = options.step * 2; destroySingleSlider(options.inp.id); sliders[options.inp.id] = new fdRange(options); }; }; return true; }; var destroySingleSlider = function(id) { if(id in sliders && sliders.hasOwnProperty(id)) { sliders[id].destroy(); delete sliders[id]; return true; }; return false; }; var destroyAllsliders = function(e) { for(slider in sliders) { if(sliders.hasOwnProperty(slider)) { sliders[slider].destroy(); }; }; sliders = []; }; var unload = function(e) { destroyAllsliders(); sliders = null; }; var resize = function(e) { for(slider in sliders) { if(sliders.hasOwnProperty(slider)) { sliders[slider].onResize(); }; }; }; var onDomReady = function() { removeEvent(window, "load", init); init(); }; var removeOnLoadEvent = function() { removeEvent(window, "load", init); }; function fdRange(options) { var inp = options.inp, disabled = false, tagName = inp.tagName.toLowerCase(), min = +options.min, max = +options.max, rMin = +options.min, rMax = +options.max, range = Math.abs(max - min), step = tagName == "select" ? 1 : +options.step, maxStep = options.maxStep ? +options.maxStep : step * 2, precision = options.precision || 0, steps = Math.ceil(range / step), scale = options.scale || false, hideInput = !!options.hideInput, animation = options.animation || "", vertical = !!options.vertical, callbacks = options.callbacks || {}, classNames = options.classNames || "", html5Shim = !!options.html5Shim, defaultVal = max < min ? min : min + ((max - min) / 2), resetDef = tagName == "select" ? inp.selectedIndex : inp.defaultValue || defaultVal, forceValue = html5Shim || !!options.forceValue, inpHeight = html5Shim && vertical && ("inpHeight" in options) ? options.inpHeight : false, timer = null, kbEnabled = true, initialVal = tagName == "select" ? inp.selectedIndex : inp.value, sliderH = 0, sliderW = 0, tweenX = 0, tweenB = 0, tweenC = 0, tweenD = 0, frame = 0, x = 0, y = 0, rMaxPx = 0, rMinPx = 0, handlePos = 0, destPos = 0, mousePos = 0, stepPx = 0, userSet = false, touchEvents = false, outerWrapper, wrapper, handle, rangeBar, bar; // For the reset event to work we have set a defaultValue if(tagName == "input" && forceValue && !inp.defaultValue) { inp.defaultValue = getWorkingValueFromInput(); }; // Make sure we have a negative step if the max < min if(max < min) { step = -Math.abs(step); maxStep = -Math.abs(maxStep); }; // Add the 100% scale mark if needs be if(scale) { scale[100] = max; }; // Set the "userSet" variable programmatically for this slider function valueSet(tf) { tf = !!tf; if(tf != userSet) { userSet = tf; valueToPixels(getWorkingValueFromInput()); }; }; function disableSlider(noCallback) { if(disabled && !noCallback) { return; }; try { setTabIndex(handle, -1); removeEvent(handle, "focus", onFocus); removeEvent(handle, "blur", onBlur); if(!isOpera) { removeEvent(handle, "keydown", onKeyDown); removeEvent(handle, "keypress", onKeyPress); } else { removeEvent(handle, "keypress", onKeyDown); }; removeEvent(outerWrapper, "mouseover", onMouseOver); removeEvent(outerWrapper, "mouseout", onMouseOut); removeEvent(outerWrapper, "mousedown", onMouseDown); removeEvent(outerWrapper, "touchstart", onMouseDown); if(mouseWheelEnabled) { if (window.addEventListener && !window.devicePixelRatio) window.removeEventListener('DOMMouseScroll', trackMouseWheel, false); else { removeEvent(document, "mousewheel", trackMouseWheel); removeEvent(window, "mousewheel", trackMouseWheel); }; }; } catch(err) {}; removeClass(outerWrapper, "fd-slider-focused"); removeClass(outerWrapper, "fd-slider-active"); addClass(outerWrapper, "fd-slider-disabled"); outerWrapper.setAttribute("aria-disabled", true); inp.disabled = disabled = true; clearTimeout(timer); if(!noCallback) { callback("disable"); }; }; function enableSlider(noCallback) { if(!disabled && !noCallback) { return; }; setTabIndex(handle, 0); addEvent(handle, "focus", onFocus); addEvent(handle, "blur", onBlur); if(!isOpera) { addEvent(handle, "keydown", onKeyDown); addEvent(handle, "keypress", onKeyPress); } else { addEvent(handle, "keypress", onKeyDown); }; addEvent(outerWrapper, "touchstart", onMouseDown); addEvent(outerWrapper, "mousedown", onMouseDown); addEvent(outerWrapper, "mouseover", onMouseOver); addEvent(outerWrapper, "mouseout", onMouseOut); removeClass(outerWrapper, "fd-slider-disabled"); outerWrapper.setAttribute("aria-disabled", false); inp.disabled = disabled = touchEvents = false; if(!noCallback) { callback("enable"); }; }; // Destroys a slider function destroySlider() { // Clear any timeouts clearTimeout(timer); // Remove pointers to DOM nodes wrapper = bar = handle = outerWrapper = timer = null; // Call the "destroy" callback callback("destroy"); // Delete the callback functions callbacks = null; }; // Calculates the pixel increment etc function redraw() { locate(); // Internet Explorer requires the try catch as hidden // elements throw errors try { var sW = outerWrapper.offsetWidth, sH = outerWrapper.offsetHeight, hW = handle.offsetWidth, hH = handle.offsetHeight, bH = bar.offsetHeight, bW = bar.offsetWidth, mPx = vertical ? sH - hH : sW - hW; stepPx = mPx / steps; rMinPx = Math.max(scale ? percentToPixels(valueToPercent(rMin)) : Math.abs((rMin - min) / step) * stepPx, 0); rMaxPx = Math.min(scale ? percentToPixels(valueToPercent(rMax)) : Math.abs((rMax - min) / step) * stepPx, Math.floor(vertical ? sH - hH : sW - hW)); sliderW = sW; sliderH = sH; // Use the input value valueToPixels(forceValue ? getWorkingValueFromInput() : (tagName == "select" ? inp.selectedIndex : parseFloat(inp.value))); } catch(err) {}; callback("redraw"); }; // Calls a callback function function callback(type) { if(!html5Shim) { if(callbacks.hasOwnProperty(type)) { var cbObj = {"disabled":disabled, "elem":inp, "value":tagName == "select" ? inp.options[inp.selectedIndex].value : inp.value}; // Call all functions in sequence for(var i = 0, func; func = callbacks[type][i]; i++) { func.call(inp, cbObj); }; }; } else if(type.match(/^(blur|focus|change)$/i)) { if(typeof(document.createEventObject) != 'undefined') { try { var e = document.createEventObject(); inp.fireEvent('on' + type.toLowerCase(), e); } catch(err){ }; } else if(typeof(document.createEvent) != 'undefined') { var e = document.createEvent('HTMLEvents'); e.initEvent(type, true, true); inp.dispatchEvent(e); }; }; }; // FOCUS & BLUR events function onFocus(e) { addClass(outerWrapper, 'fd-slider-focused'); // Is the value said to have been set by the user onfocus if(varSetRules.onfocus) { userSet = true; valueToPixels(getWorkingValueFromInput()); }; // If mousewheel events required then add them if(mouseWheelEnabled) { addEvent(window, 'DOMMouseScroll', trackMouseWheel); addEvent(document, 'mousewheel', trackMouseWheel); if(!isOpera) { addEvent(window, 'mousewheel', trackMouseWheel); }; }; // Callback... callback("focus"); return true; }; function onBlur(e) { removeClass(outerWrapper, 'fd-slider-focused'); // Remove mousewheel events if necessary if(mouseWheelEnabled) { removeEvent(document, 'mousewheel', trackMouseWheel); removeEvent(window, 'DOMMouseScroll', trackMouseWheel); if(!isOpera) { removeEvent(window, 'mousewheel', trackMouseWheel); }; }; kbEnabled = true; // Callback... callback("blur"); }; // MOUSEWHEEL events function trackMouseWheel(e) { if(!kbEnabled) { return; }; e = e || window.event; var delta = 0, value; if (e.wheelDelta) { delta = e.wheelDelta/120; // Older versions of Opera require a small hack to inverse the delta if (isOpera && window.opera.version() < 9.2) { delta = -delta; }; } else if(e.detail) { delta = -e.detail/3; }; if(vertical) { delta = -delta; }; if(delta) { value = getWorkingValueFromInput(); value += (delta < 0) ? -step : step; userSet = true; valueToPixels(getValidValue(value)); }; return stopEvent(e); }; // KEYBOARD events function onKeyPress(e) { e = e || window.event; // Let all non-hijacked keyboard events pass if((e.keyCode >= 33 && e.keyCode <= 40) || !kbEnabled || e.keyCode == 45 || e.keyCode == 46) { return stopEvent(e); }; return true; }; function onKeyDown(e) { if(!kbEnabled) { return true; }; e = e || window.event; var kc = e.keyCode != null ? e.keyCode : e.charCode, value; if(kc < 33 || (kc > 40 && (kc != 45 && kc != 46))) { return true; }; value = getWorkingValueFromInput(); if( kc == 37 || kc == 40 || kc == 46 || kc == 34) { // left, down, ins, page down value -= (e.ctrlKey || kc == 34 ? +maxStep : +step); } else if( kc == 39 || kc == 38 || kc == 45 || kc == 33) { // right, up, del, page up value += (e.ctrlKey || kc == 33 ? +maxStep : +step); } else if( kc == 35 ) { // max value = rMax; } else if( kc == 36 ) { // min value = rMin; }; userSet = true; valueToPixels(getValidValue(value)); callback("update"); // Opera doesn't let us cancel key events so the up/down arrows and home/end buttons will scroll the screen - which sucks preventDefault(e); }; // MOUSE & TOUCH events // Mouseover the slider function onMouseOver(e) { addClass(outerWrapper, 'fd-slider-hover'); }; // Mouseout of the slider function onMouseOut(e) { // Should really check we are not still in the slider removeClass(outerWrapper, 'fd-slider-hover'); }; // Mousedown on the slider function onMouseDown(e) { e = e || window.event; // Stop page scrolling preventDefault(e); // Grab the event target var targ; if (e.target) { targ = e.target; } else if (e.srcElement) { targ = e.srcElement; }; if(targ && targ.nodeType == 3) { targ = targ.parentNode; }; // Are we using touchEvents if(e.touches) { // Skip gestures if(e.targetTouches && e.targetTouches.length != 1) { return false; }; e = e.touches[0]; touchEvents = true; }; // Stop any animation timers clearTimeout(timer); timer = null; // Not keyboard enabled kbEnabled = false; // User has set a value userSet = true; // Handle mousedown - initiate drag if(targ.className.search("fd-slider-handle") != -1) { mousePos = vertical ? e.clientY : e.clientX; handlePos = parseInt(vertical ? handle.offsetTop : handle.offsetLeft)||0; // Set a value on first click even if no movement trackMouse(e); if(!touchEvents) { addEvent(document, 'mousemove', trackMouse); addEvent(document, 'mouseup', stopDrag); } else { addEvent(document, 'touchmove', trackMouse); addEvent(document, 'touchend', stopDrag); // Remove mouseEvents to stop them firing after the touch event removeEvent(outerWrapper, "mousedown", onMouseDown); }; addClass(outerWrapper, 'fd-slider-active'); addClass(document.body, "fd-slider-drag-" + (vertical ? "vertical" : "horizontal")); callback("dragstart"); // Wrapper mousedown - initiate animation to click point } else { locate(); var posx = 0, sLft = 0, sTop = 0; // Internet Explorer doctype woes if(document.documentElement && document.documentElement.scrollTop) { sTop = document.documentElement.scrollTop; sLft = document.documentElement.scrollLeft; } else if (document.body) { sTop = document.body.scrollTop; sLft = document.body.scrollLeft; }; if(e.pageX) { posx = vertical ? e.pageY : e.pageX; } else if (e.clientX) { posx = vertical ? e.clientY + sTop : e.clientX + sLft; }; posx -= vertical ? y + Math.round(handle.offsetHeight / 2) : x + Math.round(handle.offsetWidth / 2); posx = snapToPxValue(posx); // Tween animation to click point if(animation == "tween") { addClass(outerWrapper, 'fd-slider-active'); tweenTo(posx); // Progressive increment to click point } else if(animation == "timed") { addClass(outerWrapper, 'fd-slider-active'); addEvent(document, touchEvents ? 'touchend' : 'mouseup', onDocMouseUp); destPos = posx; onTimer(); // Immediate jump to click point } else { pixelsToValue(posx); //addEvent(document, touchEvents ? 'touchend' : 'mouseup', onMouseUp); }; }; return stopEvent(e); }; // Progressive increment to click point - clear the animation timer and remove the mouseup/touchend event function onDocMouseUp( e ) { e = e || window.event; preventDefault(e); removeEvent(document, touchEvents ? 'touchend' : 'mouseup', onDocMouseUp); removeClass(outerWrapper, "fd-slider-active"); clearTimeout(timer); timer = null; kbEnabled = true; return stopEvent(e); }; // Mouseup or touchend event on the document to stop drag function stopDrag(e) { e = e || window.event; preventDefault(e); if(touchEvents) { removeEvent(document, 'touchmove', trackMouse); removeEvent(document, 'touchend', stopDrag); } else { removeEvent(document, 'mousemove', trackMouse); removeEvent(document, 'mouseup', stopDrag); }; kbEnabled = true; removeClass(document.body, "fd-slider-drag-" + (vertical ? "vertical" : "horizontal")); removeClass(outerWrapper, "fd-slider-active"); callback("dragend"); return stopEvent(e); }; // Mousemove or touchmove event on the drag handle function trackMouse(e) { e = e || window.event; preventDefault(e); if(e.touches) { // Skip gestures if(e.targetTouches && e.targetTouches.length != 1) { return false; }; e = e.touches[0]; }; pixelsToValue(snapToPxValue(handlePos + (vertical ? e.clientY - mousePos : e.clientX - mousePos))); return false; }; // Increments the slider by "inc" steps function increment(inc) { var value = getWorkingValueFromInput(); userSet = true; value += inc * step; valueToPixels(getValidValue(value)); }; // Attempts to locate the on-screen position of the slider function locate(){ var curleft = 0, curtop = 0, obj = outerWrapper; // Try catch for IE's benefit try { while (obj.offsetParent) { curleft += obj.offsetLeft; curtop += obj.offsetTop; obj = obj.offsetParent; }; } catch(err) {}; x = curleft; y = curtop; }; // Used during the progressive animation to click point function onTimer() { var xtmp = parseInt(vertical ? handle.offsetTop : handle.offsetLeft, 10); xtmp = Math.round((destPos < xtmp) ? Math.max(destPos, Math.floor(xtmp - stepPx)) : Math.min(destPos, Math.ceil(xtmp + stepPx))); pixelsToValue(snapToPxValue(xtmp)); if(xtmp != destPos) { timer = setTimeout(onTimer, steps > 20 ? 50 : 100); } else { kbEnabled = true; removeClass(outerWrapper, "fd-slider-active"); callback("finalise"); }; }; var tween = function(){ frame++; var c = tweenC, d = 20, t = frame, b = tweenB, x = Math.ceil((t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b); pixelsToValue(t == d ? tweenX : x); if(t!=d) { // Call the "move" callback on each animation increment callback("move"); timer = setTimeout(tween, 20); } else { clearTimeout(timer); timer = null; kbEnabled = true; removeClass(outerWrapper, "fd-slider-focused"); removeClass(outerWrapper, "fd-slider-active"); // Call the "finalise" callback whenever the animation is complete callback("finalise"); }; }; function tweenTo(tx){ kbEnabled = false; tweenX = parseInt(tx, 10); tweenB = parseInt(vertical ? handle.offsetTop : handle.offsetLeft, 10); tweenC = tweenX - tweenB; tweenD = 20; frame = 0; if(!timer) { timer = setTimeout(tween, 20); }; }; // Returns a value within the range & sets the userSet var // i.e. has the user entered a valid value function checkValue(value) { if(isNaN(value) || value === "" || typeof value == "undefined") { userSet = false; return defaultVal; } else if(value < Math.min(rMin,rMax)) { userSet = false; return Math.min(rMin,rMax); } else if(value > Math.max(rMin,rMax)) { userSet = false; return Math.max(rMin,rMax); }; userSet = true; return value; }; // Returns a value within a range - uses the form element value as base function getWorkingValueFromInput() { return getValidValue(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); }; // Returns a value within the range function getValidValue(value) { return (isNaN(value) || value === "" || typeof value == "undefined") ? defaultVal : Math.min(Math.max(value, Math.min(rMin,rMax)), Math.max(rMin,rMax)); }; // Calculates value according to pixel position of slider handle function pixelsToValue(px) { var val = getValidValue(scale ? percentToValue(pixelsToPercent(px)) : vertical ? max - (Math.round(px / stepPx) * step) : min + (Math.round(px / stepPx) * step)); handle.style[vertical ? "top" : "left"] = (px || 0) + "px"; redrawRange(); setInputValue((tagName == "select" || step == 1) ? Math.round(val) : val); }; // Calculates pixel position according to form element value function valueToPixels(val) { var clearVal = false, value; // Allow empty values for non-polyfill sliders if((typeof val == "undefined" || isNaN(val) || val === "") && tagName == "input" && !forceValue) { value = defaultVal; clearVal = true; userSet = false; } else { value = checkValue(val); }; handle.style[vertical ? "top" : "left"] = (scale ? percentToPixels(valueToPercent(value)) : vertical ? Math.round(((max - value) / step) * stepPx) : Math.round(((value - min) / step) * stepPx)) + "px"; redrawRange(); setInputValue(clearVal ? "" : value); }; // Rounds a pixel value to the nearest "snap" point on the slider scale function snapToPxValue(px) { if(scale) { return Math.max(Math.min(rMaxPx, px), rMinPx); } else { var rem = px % stepPx; if(rem && rem >= (stepPx / 2)) { px += (stepPx - rem); } else { px -= rem; }; if(px < Math.min(Math.abs(rMinPx), Math.abs(rMaxPx))) { px = Math.min(Math.abs(rMinPx), Math.abs(rMaxPx)); } else if(px > Math.max(Math.abs(rMinPx), Math.abs(rMaxPx))) { px = Math.max(Math.abs(rMinPx), Math.abs(rMaxPx)); }; return Math.min(Math.max(px, 0), rMaxPx); }; }; // Calculates a value according to percentage of distance handle has travelled function percentToValue(pct) { var st = 0, fr = min, value; for(var s in scale) { if(!scale.hasOwnProperty(s)) { continue; }; if(pct >= st && pct <= +s ) { value = fr + ((pct - st) * (+scale[s] - fr) ) / (+s - st); }; st = +s; fr = +scale[s]; }; return value; }; // Calculates the percentage handle position according to form element value function valueToPercent(value) { var st = 0, fr = min, pct = 0; for(var s in scale) { if(!scale.hasOwnProperty(s)) { continue; }; if(value >= fr && value <= +scale[s]){ pct = st + (value - fr) * (+s - st) / (+scale[s] - fr); }; st = +s; fr = +scale[s]; }; return pct; }; function percentToPixels(percent) { return ((outerWrapper[vertical ? "offsetHeight" : "offsetWidth"] - handle[vertical ? "offsetHeight" : "offsetWidth"]) / 100) * percent; }; function pixelsToPercent(pixels) { return pixels / ((outerWrapper[vertical ? "offsetHeight" : "offsetWidth"] - outerWrapper[handle ? "offsetHeight" : "offsetWidth"]) / 100); }; // Sets the form element with a valid value function setInputValue(val) { // The update callback doesn't mean the input value has changed callback("update"); // If the user has not set this value or has entered an incorrect value then set a class // to enable styling of the slider if(!userSet) { addClass(outerWrapper, "fd-slider-no-value"); } else { removeClass(outerWrapper, "fd-slider-no-value"); }; if(tagName == "select") { try { val = parseInt(val, 10); if(inp.selectedIndex === val) { updateAriaValues(); return; }; inp.options[val].selected = true; } catch (err) {}; } else { if(val != "") { val = (min + (Math.round((val - min) / step) * step)).toFixed(precision); }; if(inp.value === val) { updateAriaValues(); return; }; inp.value = val; }; updateAriaValues(); callback("change"); }; function checkInputValue(value) { return !(isNaN(value) || value === "" || value < Math.min(rMin,rMax) || value > Math.max(rMin,rMax)); }; function setSliderRange(newMin, newMax) { if(rMin > rMax) { newMin = Math.min(min, Math.max(newMin, newMax)); newMax = Math.max(max, Math.min(newMin, newMax)); rMin = Math.max(newMin, newMax); rMax = Math.min(newMin, newMax); } else { newMin = Math.max(min, Math.min(newMin, newMax)); newMax = Math.min(max, Math.max(newMin, newMax)); rMin = Math.min(newMin, newMax); rMax = Math.max(newMin, newMax); }; if(defaultVal < Math.min(rMin, rMax)) { defaultVal = Math.min(rMin, rMax); } else if(defaultVal > Math.max(rMin, rMax)) { defaultVal = Math.max(rMin, rMax); }; handle.setAttribute("aria-valuemin", rMin); handle.setAttribute("aria-valuemax", rMax); checkValue(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); redraw(); }; function redrawRange() { if(noRangeBar) { return; }; if(vertical) { rangeBar.style["height"] = (bar.offsetHeight - handle.offsetTop) + "px"; } else { rangeBar.style["width"] = handle.offsetLeft + "px"; }; }; function findLabel() { var label = false, labelList = document.getElementsByTagName('label'); // loop through label array attempting to match each 'for' attribute to the id of the current element for(var i = 0, lbl; lbl = labelList[i]; i++) { // Internet Explorer requires the htmlFor test if((lbl['htmlFor'] && lbl['htmlFor'] == inp.id) || (lbl.getAttribute('for') == inp.id)) { label = lbl; break; }; }; if(label && !label.id) { label.id = inp.id + "_label"; }; return label; }; function updateAriaValues() { handle.setAttribute("aria-valuenow", tagName == "select" ? inp.options[inp.selectedIndex].value : inp.value); handle.setAttribute("aria-valuetext", tagName == "select" ? (inp.options[inp.selectedIndex].text ? inp.options[inp.selectedIndex].text : inp.options[inp.selectedIndex].value) : inp.value); }; function onInputChange(e) { userSet = true; valueToPixels(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); updateAriaValues(); }; function onReset(e) { if(tagName == "input") { inp.value = inp.defaultValue; } else { inp.selectedIndex = resetDef; }; checkValue(tagName == "select" ? inp.options[inp.selectedIndex].value : inp.value); redraw(); updateAriaValues(); }; function valueSet(tf) { userSet = !!tf; }; // Sets a tabindex attribute on an element, bends over for IE. function setTabIndex(e, i) { e.setAttribute(!/*@cc_on!@*/false ? "tabIndex" : "tabindex", i); e.tabIndex = i; }; (function() { if(html5Shim || hideInput) { addClass(inp, "fd-form-element-hidden"); } else { addEvent(inp, 'change', onInputChange); }; // Add stepUp & stepDown methods to input element if using the html5Shim if(html5Shim) { inp.stepUp = function(n) { increment(n||1); }; inp.stepDown = function(n) { increment(n||-1); }; }; outerWrapper = document.createElement('span'); outerWrapper.className = "fd-slider" + (vertical ? "-vertical " : " ") + (!html5Shim ? " fd-slider-no-value " : "") + classNames; outerWrapper.id = "fd-slider-" + inp.id; if(vertical && inpHeight) { outerWrapper.style.height = inpHeight + "px"; }; wrapper = document.createElement('span'); wrapper.className = "fd-slider-inner"; bar = document.createElement('span'); bar.className = "fd-slider-bar"; if(!noRangeBar) { rangeBar = document.createElement('span'); rangeBar.className = "fd-slider-range"; }; if(fullARIA) { handle = document.createElement('span'); } else { handle = document.createElement('a'); handle.setAttribute("href", "#"); addEvent(handle, "click", stopEvent); }; setTabIndex(handle, 0); handle.className = "fd-slider-handle"; handle.appendChild(document.createTextNode(String.fromCharCode(160))); outerWrapper.appendChild(wrapper); if(!noRangeBar) { outerWrapper.appendChild(rangeBar); }; outerWrapper.appendChild(bar); outerWrapper.appendChild(handle); inp.parentNode.insertBefore(outerWrapper, inp); /*@cc_on@*/ /*@if(@_win32) handle.unselectable = "on"; if(!noRangeBar) rangeBar.unselectable = "on"; bar.unselectable = "on"; wrapper.unselectable = "on"; outerWrapper.unselectable = "on"; /*@end@*/ // Add ARIA accessibility info programmatically outerWrapper.setAttribute("role", "application"); handle.setAttribute("role", "slider"); handle.setAttribute("aria-valuemin", tagName == "select" ? inp.options[0].value : min); handle.setAttribute("aria-valuemax", tagName == "select" ? inp.options[inp.options.length - 1].value : max); var lbl = findLabel(); if(lbl) { handle.setAttribute("aria-labelledby", lbl.id); handle.id = "fd-slider-handle-" + inp.id; /*@cc_on /*@if(@_win32) lbl.setAttribute("htmlFor", handle.id); @else @*/ lbl.setAttribute("for", handle.id); /*@end @*/ }; // Are there page instructions if(document.getElementById(describedBy)) { handle.setAttribute("aria-describedby", describedBy); }; // Is the form element initially disabled if(inp.getAttribute("disabled") == true) { disableSlider(true); } else { enableSlider(true); }; // Does an initial form element value mean the user has set a valid value? // Also called onload in case browsers have automatically set the input value if(varSetRules.onvalue) { userSet = true; checkValue(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); }; if(inp.form) { addEvent(inp.form, "reset", onReset); }; updateAriaValues(); callback("create"); redraw(); })(); return { onResize: function(e) { if(outerWrapper.offsetHeight != sliderH || outerWrapper.offsetWidth != sliderW) { redraw(); }; }, destroy: function() { destroySlider(); }, reset: function() { valueToPixels(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); }, stepUp: function(n) { increment(Math.abs(n)||1); }, stepDown: function(n) { increment(-Math.abs(n)||-1); }, increment: function(n) { increment(n); }, disable: function() { disableSlider(); }, enable: function() { enableSlider(); }, setRange: function(mi, mx) { setSliderRange(mi, mx); }, getValueSet: function() { return !!userSet; }, setValueSet: function(tf) { valueSet(tf); }, checkValue: function() { if(varSetRules.onvalue) { userSet = true; checkValue(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex); }; updateAriaValues(); redraw(); } }; }; addEvent(window, "load", init); addEvent(window, "load", function() { setTimeout(function() { var slider; for(slider in sliders) { sliders[slider].checkValue(); } }, 0); }); addEvent(window, "resize", resize); addEvent(window, "unload", unload); // Have we been passed JSON within the including script tag (function() { var scriptFiles = document.getElementsByTagName('script'), scriptInner = String(scriptFiles[scriptFiles.length - 1].innerHTML).replace(/[\n\r\s\t]+/g, " ").replace(/^\s+/, "").replace(/\s+$/, ""), json = parseJSON(scriptInner); if(typeof json === "object" && !("err" in json)) { affectJSON(json); }; })(); // Add oldie class if needed for IE < 9 /*@cc_on @if (@_jscript_version < 9) addClass(document.documentElement, "oldie"); @end @*/ return { createSlider: function(opts) { return createSlider(opts); }, onDomReady: function() { onDomReady(); }, destroyAll: function() { destroyAllsliders(); }, destroySlider: function(id) { return destroySingleSlider(id); }, redrawAll: function() { resize(); }, addEvent: addEvent, removeEvent: removeEvent, stopEvent: stopEvent, increment: function(id, numSteps) { if(!sliderExists(id)) { return false; }; sliders[id].increment(numSteps); }, stepUp: function(id, n) { if(!sliderExists(id)) { return false; }; sliders[id].stepUp(Math.abs(n)||1); }, stepDown: function(id, n) { if(!sliderExists(id)) { return false; }; sliders[id].stepDown(-Math.abs(n)||-1); }, setRange: function(id, newMin, newMax) { if(!sliderExists(id)) { return false; }; sliders[id].setRange(newMin, newMax); }, updateSlider: function(id) { if(!sliderExists(id)) { return false; }; sliders[id].reset(); }, disable: function(id) { if(!sliderExists(id)) { return false; }; sliders[id].disable(); }, enable: function(id) { if(!sliderExists(id)) { return false; }; sliders[id].enable(); }, getValueSet: function() { return getValueSet(); }, setValueSet: function(a, tf) { if(!sliderExists(id)) { return false; }; setValueSet(a, tf); }, setGlobalVariables: function(json) { affectJSON(json); }, removeOnload: function() { removeOnLoadEvent(); } }; })();