fd-slider-rails 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/fd-slider-rails/version.rb +1 -1
- data/vendor/assets/images/blank.gif +0 -0
- data/vendor/assets/images/fd-slider/fd-handle-disabled.png +0 -0
- data/vendor/assets/images/fd-slider/fd-handle-glow.png +0 -0
- data/vendor/assets/images/fd-slider/fd-handle-no-value.png +0 -0
- data/vendor/assets/images/fd-slider/fd-handle-normal.png +0 -0
- data/vendor/assets/images/fd-slider/fd-slider-sprite.png +0 -0
- data/vendor/assets/javascripts/fd-slider.min.js +26 -0
- data/vendor/assets/stylesheets/fd-slider.css.erb +988 -0
- metadata +11 -3
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/*! Unobtrusive Slider Control / HTML5 Input Range polyfill - MIT/GPL2 @freqdec */
|
2
|
+
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){if(typeof str!=="string"||str==""){return{}}try{if(typeof JSON==="object"&&typeof(JSON.parse)==="function"){return JSON.parse(str)}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}}};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()}
|
3
|
+
/*@cc_on@*/
|
4
|
+
/*@if(@_win32)
|
5
|
+
e.cancelBubble = true;
|
6
|
+
e.returnValue = false;
|
7
|
+
/*@end@*/
|
8
|
+
return false};var preventDefault=function(e){e=e||window.event;if(e.preventDefault){e.preventDefault();return}e.returnValue=false};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*$/,"")};var getValueSet=function(){var obj={};for(id in sliders){obj[id]=sliders[id].getValueSet()}return obj};var setValueSet=function(sliderId,tf){sliders[sliderId].setValueSet(!!tf)};var sliderExists=function(slider){return !!(slider in sliders&&sliders.hasOwnProperty(slider))};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|range)$/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.ariaFormat=("ariaFormat" in options)&&typeof options.ariaFormat=="function"?options.ariaFormat: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)||""};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)){if(inp.id&&document.getElementById("fd-slider-"+inp.id)){continue}else{if(inp.id&&!document.getElementById("fd-slider-"+inp.id)){destroySingleSlider(inp.id)}}if(!inp.id){inp.id="fd-slider-form-elem-"+uniqueid++}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,ariaFormat=!html5Shim&&options.ariaFormat?options.ariaFormat: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,innerWrapper,ieBlur,handle,rangeBar,bar;if(tagName=="input"&&forceValue&&!inp.defaultValue){inp.defaultValue=getWorkingValueFromInput()}if(max<min){step=-Math.abs(step);maxStep=-Math.abs(maxStep)}if(scale){scale[100]=max}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(innerWrapper,"fd-slider-focused");removeClass(innerWrapper,"fd-slider-active");addClass(innerWrapper,"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(innerWrapper,"fd-slider-disabled");outerWrapper.setAttribute("aria-disabled",false);inp.disabled=disabled=touchEvents=false;if(!noCallback){callback("enable")}}function destroySlider(){clearTimeout(timer);ieBlur=bar=handle=outerWrapper=innerWrapper=timer=null;callback("destroy");callbacks=null}function redraw(){locate();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;valueToPixels(forceValue?getWorkingValueFromInput():(tagName=="select"?inp.selectedIndex:parseFloat(inp.value)))}catch(err){}callback("redraw")}function callback(type){if(!html5Shim){if(callbacks.hasOwnProperty(type)){var cbObj={userSet:userSet,disabled:disabled,elem:inp,value:tagName=="select"?inp.options[inp.selectedIndex].value:inp.value};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)}}}}}function onFocus(e){addClass(innerWrapper,"fd-slider-focused");if(varSetRules.onfocus){userSet=true;valueToPixels(getWorkingValueFromInput())}if(mouseWheelEnabled){addEvent(window,"DOMMouseScroll",trackMouseWheel);addEvent(document,"mousewheel",trackMouseWheel);if(!isOpera){addEvent(window,"mousewheel",trackMouseWheel)}}callback("focus");return true}function onBlur(e){removeClass(innerWrapper,"fd-slider-focused");if(mouseWheelEnabled){removeEvent(document,"mousewheel",trackMouseWheel);removeEvent(window,"DOMMouseScroll",trackMouseWheel);if(!isOpera){removeEvent(window,"mousewheel",trackMouseWheel)}}kbEnabled=true;callback("blur")}function trackMouseWheel(e){if(!kbEnabled){return}e=e||window.event;var delta=0,value;if(e.wheelDelta){delta=e.wheelDelta/120;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)}function onKeyPress(e){e=e||window.event;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){value-=(e.ctrlKey||kc==34?+maxStep:+step)}else{if(kc==39||kc==38||kc==45||kc==33){value+=(e.ctrlKey||kc==33?+maxStep:+step)}else{if(kc==35){value=rMax}else{if(kc==36){value=rMin}}}}userSet=true;valueToPixels(getValidValue(value));callback("update");preventDefault(e)}function onMouseOver(e){addClass(innerWrapper,"fd-slider-hover")}function onMouseOut(e){removeClass(innerWrapper,"fd-slider-hover")}function onMouseDown(e){e=e||window.event;preventDefault(e);var targ;if(e.target){targ=e.target}else{if(e.srcElement){targ=e.srcElement}}if(targ&&targ.nodeType==3){targ=targ.parentNode}if(e.touches){if(e.targetTouches&&e.targetTouches.length!=1){return false}e=e.touches[0];touchEvents=true}clearTimeout(timer);timer=null;kbEnabled=false;userSet=true;if(targ.className.search("fd-slider-handle")!=-1){mousePos=vertical?e.clientY:e.clientX;handlePos=parseInt(vertical?handle.offsetTop:handle.offsetLeft)||0;trackMouse(e);if(!touchEvents){addEvent(document,"mousemove",trackMouse);addEvent(document,"mouseup",stopDrag)}else{addEvent(document,"touchmove",trackMouse);addEvent(document,"touchend",stopDrag);removeEvent(outerWrapper,"mousedown",onMouseDown)}addClass(innerWrapper,"fd-slider-active");addClass(document.body,"fd-slider-drag-"+(vertical?"vertical":"horizontal"));callback("dragstart")}else{locate();var posx=0;if(e.pageX||e.pageY){posx=vertical?e.pageY:e.pageX}else{if(e.clientX||e.clientY){posx=vertical?e.clientY+document.body.scrollTop+document.documentElement.scrollTop:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft}}posx-=vertical?y+Math.round(handle.offsetHeight/2):x+Math.round(handle.offsetWidth/2);posx=snapToPxValue(posx);if(animation=="tween"){addClass(innerWrapper,"fd-slider-active");tweenTo(posx)}else{if(animation=="timed"){addClass(innerWrapper,"fd-slider-active");addEvent(document,touchEvents?"touchend":"mouseup",onDocMouseUp);destPos=posx;onTimer()}else{pixelsToValue(posx)}}}return stopEvent(e)}function onDocMouseUp(e){e=e||window.event;preventDefault(e);removeEvent(document,touchEvents?"touchend":"mouseup",onDocMouseUp);removeClass(innerWrapper,"fd-slider-active");clearTimeout(timer);timer=null;kbEnabled=true;return stopEvent(e)}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(innerWrapper,"fd-slider-active");callback("dragend");return stopEvent(e)}function trackMouse(e){e=e||window.event;preventDefault(e);if(e.touches){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}function increment(inc){var value=getWorkingValueFromInput();userSet=true;value+=inc*step;valueToPixels(getValidValue(value))}function locate(){var curleft=0,curtop=0,obj=outerWrapper;try{while(obj.offsetParent){curleft+=obj.offsetLeft;curtop+=obj.offsetTop;obj=obj.offsetParent}}catch(err){}x=curleft;y=curtop}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(innerWrapper,"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){callback("move");timer=setTimeout(tween,20)}else{clearTimeout(timer);timer=null;kbEnabled=true;removeClass(innerWrapper,"fd-slider-focused");removeClass(innerWrapper,"fd-slider-active");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)}}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}function getWorkingValueFromInput(){return getValidValue(tagName=="input"?parseFloat(inp.value):inp.selectedIndex)}function getValidValue(value){return(isNaN(value)||value===""||typeof value=="undefined")?defaultVal:Math.min(Math.max(value,Math.min(rMin,rMax)),Math.max(rMin,rMax))}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)}function valueToPixels(val){var clearVal=false,value;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)}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)}}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}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)}function setInputValue(val){callback("update");if(!userSet){addClass(innerWrapper,"fd-slider-no-value")}else{removeClass(innerWrapper,"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=Math.max(1,(bar.offsetHeight-handle.offsetTop))+"px"}else{rangeBar.style.width=Math.max(1,handle.offsetLeft)+"px"}}function findLabel(){var label=false,labelList=document.getElementsByTagName("label");for(var i=0,lbl;lbl=labelList[i];i++){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(){var val=tagName=="select"?inp.options[inp.selectedIndex].value:inp.value,valTxt=ariaFormat?ariaFormat(val):tagName=="select"?(inp.options[inp.selectedIndex].text?inp.options[inp.selectedIndex].text:val):val;handle.setAttribute("aria-valuenow",val);handle.setAttribute("aria-valuetext",valTxt)}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}function setTabIndex(e,i){e.setAttribute(!
|
9
|
+
/*@cc_on!@*/
|
10
|
+
false?"tabIndex":"tabindex",i);e.tabIndex=i}(function(){if(html5Shim||hideInput){addClass(inp,"fd-form-element-hidden")}else{addEvent(inp,"change",onInputChange)}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 ":" ")+classNames;outerWrapper.id="fd-slider-"+inp.id;if(vertical&&inpHeight){outerWrapper.style.height=inpHeight+"px"}innerWrapper=document.createElement("span");innerWrapper.className="fd-slider-wrapper"+(!html5Shim?" fd-slider-no-value":"");ieBlur=document.createElement("span");ieBlur.className="fd-slider-inner";bar=document.createElement("span");bar.className="fd-slider-bar";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)));innerWrapper.appendChild(ieBlur);if(!noRangeBar){rangeBar=document.createElement("span");rangeBar.className="fd-slider-range";innerWrapper.appendChild(rangeBar)}innerWrapper.appendChild(bar);innerWrapper.appendChild(handle);outerWrapper.appendChild(innerWrapper);inp.parentNode.insertBefore(outerWrapper,inp);if(isOpera||
|
11
|
+
/*@cc_on!@*/
|
12
|
+
!true){handle.unselectable="on";bar.unselectable="on";ieBlur.unselectable="on";outerWrapper.unselectable="on";innerWrapper.unselectable="on";if(!noRangeBar){rangeBar.unselectable="on"}}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;
|
13
|
+
/*@cc_on
|
14
|
+
/*@if(@_win32)
|
15
|
+
lbl.setAttribute("htmlFor", handle.id);
|
16
|
+
@else @*/
|
17
|
+
lbl.setAttribute("for",handle.id);
|
18
|
+
/*@end
|
19
|
+
@*/
|
20
|
+
}if(document.getElementById(describedBy)){handle.setAttribute("aria-describedby",describedBy)}if(inp.getAttribute("disabled")==true){disableSlider(true)}else{enableSlider(true)}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);(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)}})();
|
21
|
+
/*@cc_on
|
22
|
+
@if (@_jscript_version < 9)
|
23
|
+
addClass(document.documentElement, "oldie");
|
24
|
+
@end
|
25
|
+
@*/
|
26
|
+
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()}}})();
|
@@ -0,0 +1,988 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
Don't use this version of the file in a production environment. A minified
|
4
|
+
version tailored specifically to your needs can be generated in-browser by
|
5
|
+
using the /css-generator/index.html file.
|
6
|
+
|
7
|
+
Notes for the adventurous:
|
8
|
+
|
9
|
+
1. The script automagically adds the classname "oldie" to IE6, 7 & 8.
|
10
|
+
|
11
|
+
2. A combination of the .oldie class and "safe css hacks" are used to target
|
12
|
+
specific IE versions. See: http://mathiasbynens.be/notes/safe-css-hacks
|
13
|
+
|
14
|
+
3. MSHTML has been used to base64 encode the various png images used for the
|
15
|
+
drag handle in IE6 and 7. IE7 gets served one base64 encoded image sprite
|
16
|
+
whereas IE6 gets served individual base64 encoded images.
|
17
|
+
|
18
|
+
See: http://www.phpied.com/the-proper-mhtml-syntax/ for more info on MHTML
|
19
|
+
|
20
|
+
The base64 encoded images have been placed into their own .mht file. This
|
21
|
+
means only IE6 and 7 will ever be burdened with downloading the file.
|
22
|
+
|
23
|
+
A Microsoft security update in July 2011 means that .mht files now have to
|
24
|
+
be delivered with the mimetype "message/rfc822". If using IIS, there is
|
25
|
+
nothing to do as IIS appears to default to using the required
|
26
|
+
"message/rfc822" mimetype, if using Apache, there are two ways in which to
|
27
|
+
configure this behaviour:
|
28
|
+
|
29
|
+
A. You have Admin rights and can restart the Apache server
|
30
|
+
|
31
|
+
Update the apache_root/httpd/conf/Srm.conf file and add the following
|
32
|
+
line:
|
33
|
+
|
34
|
+
AddType message/rfc822 mht
|
35
|
+
|
36
|
+
This method requires that you restart Apache.
|
37
|
+
|
38
|
+
B. You can simply use an htaccess directive
|
39
|
+
|
40
|
+
You can add the following to an .htaccess file that sits in the same
|
41
|
+
directory as the .mht file (or to an htaccess file at the root of your
|
42
|
+
website if one exists already):
|
43
|
+
|
44
|
+
AddType message/rfc822 mht
|
45
|
+
|
46
|
+
You do not need to restart Apache for the change to take effect.
|
47
|
+
|
48
|
+
Yikes - I cant do either of the above!
|
49
|
+
|
50
|
+
Don't worry, using the .mht file isn't compulsory - just replace the
|
51
|
+
various mhtml: references (found within the .oldie classes) to point to
|
52
|
+
the correct image file on your server (not forgetting to actually upload
|
53
|
+
the image files to your server of course).
|
54
|
+
|
55
|
+
All of the relevant rules have further instructions embedded within them.
|
56
|
+
|
57
|
+
4. All browsers but IE6 get one "normal" base64 encoded image sprite. IE6 has
|
58
|
+
to use separate images for each animation state.
|
59
|
+
|
60
|
+
5. The drag handle is only 20px in width & height, most probably not suitable
|
61
|
+
for touch screen devices.
|
62
|
+
|
63
|
+
6. It's painless to base64 encode your own images, use an online encoder.
|
64
|
+
See: http://www.google.com/search?q=base+64+encoder - the only problem is
|
65
|
+
that IE6 needs each frame of the handle sprite to be encoded individually.
|
66
|
+
|
67
|
+
7. If you want to use a different image for vertical slider drag handles,
|
68
|
+
uncomment the relevant classes below (easy to spot as they all have the
|
69
|
+
classname ".fd-slider-vertical" somewhere within the declaration).
|
70
|
+
|
71
|
+
8. As a reminder, the following HTML is being targetted by the CSS:
|
72
|
+
|
73
|
+
<span class="fd-slider[-vertical]"
|
74
|
+
id="fd-slider-[the associated form element id]"
|
75
|
+
role="application"
|
76
|
+
aria-disabled="false">
|
77
|
+
<span class="fd-slider-wrapper (fd-slider-[focus|hover|no-value|disabled|active])">
|
78
|
+
<span class="fd-slider-inner"></span>
|
79
|
+
<span class="fd-slider-range"></span>
|
80
|
+
<span class="fd-slider-bar"></span>
|
81
|
+
<span class="fd-slider-handle"
|
82
|
+
tabindex="0"
|
83
|
+
role="slider"
|
84
|
+
aria-valuemin="-10"
|
85
|
+
aria-valuemax="10"
|
86
|
+
aria-labelledby="[the associated form element label id]"
|
87
|
+
id="fd-slider-handle-[the associated form element id]"
|
88
|
+
aria-describedby="fd-slider-describedby"
|
89
|
+
aria-valuenow="-3.50"
|
90
|
+
aria-valuetext="-3.50"> </span>
|
91
|
+
</span>
|
92
|
+
</span>
|
93
|
+
|
94
|
+
*/
|
95
|
+
|
96
|
+
/*
|
97
|
+
Element: Form element associated with the slider
|
98
|
+
Notes: The styles given to the associated form element in order to hide
|
99
|
+
it within the display
|
100
|
+
*/
|
101
|
+
.fd-form-element-hidden
|
102
|
+
{
|
103
|
+
display:none;
|
104
|
+
}
|
105
|
+
/*
|
106
|
+
Element: Outer wrapper
|
107
|
+
Orientation: Horizontal
|
108
|
+
*/
|
109
|
+
.fd-slider
|
110
|
+
{
|
111
|
+
width:100%;
|
112
|
+
height:20px;
|
113
|
+
margin:0 0 10px 0;
|
114
|
+
}
|
115
|
+
/*
|
116
|
+
Element: Outer wrapper
|
117
|
+
Orientation: Vertical
|
118
|
+
Notes: You may wish to float the vertical sliders left or use
|
119
|
+
display:inline-block (inline-block should work even in IE6 as the slider
|
120
|
+
is constructed from span elements but don't quote me on that)
|
121
|
+
*/
|
122
|
+
.fd-slider-vertical
|
123
|
+
{
|
124
|
+
width:20px;
|
125
|
+
height:100%;
|
126
|
+
margin:0 10px 10px 0;
|
127
|
+
}
|
128
|
+
/*
|
129
|
+
Element: Outer wrapper
|
130
|
+
Orientation: Both horizontal & vertical
|
131
|
+
*/
|
132
|
+
.fd-slider,
|
133
|
+
.fd-slider-vertical
|
134
|
+
{
|
135
|
+
text-align:center;
|
136
|
+
display:block;
|
137
|
+
position:relative;
|
138
|
+
cursor:pointer;
|
139
|
+
text-decoration:none;
|
140
|
+
border:0 none;
|
141
|
+
-webkit-user-select: none;
|
142
|
+
-khtml-user-select: none;
|
143
|
+
-moz-user-select: none;
|
144
|
+
-ms-user-select: none;
|
145
|
+
-o-user-select: none;
|
146
|
+
user-select: none;
|
147
|
+
}
|
148
|
+
/*
|
149
|
+
Element: Outer Wrapper
|
150
|
+
Orientation: Both horizontal & vertical
|
151
|
+
Notes: IE6 & 7 need a transparent gif as a background in order for
|
152
|
+
hover events to work. This has been base64 encoded within the .mht file.
|
153
|
+
As it's not a png, no AlphaImageLoader filter is required for IE6.
|
154
|
+
*/
|
155
|
+
.oldie .fd-slider,
|
156
|
+
.oldie .fd-slider-vertical
|
157
|
+
{
|
158
|
+
/*
|
159
|
+
If using the .mht file then uncomment the following rule and edit the
|
160
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
161
|
+
server (replace "www.your-domain.com/the/path/to/")
|
162
|
+
*/
|
163
|
+
|
164
|
+
/*
|
165
|
+
|
166
|
+
*background:transparent url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!blank) repeat;
|
167
|
+
|
168
|
+
*/
|
169
|
+
|
170
|
+
/*
|
171
|
+
If not using the .mht file then uncomment the following rule and edit
|
172
|
+
the filepath to match the absolute path to the blank.gif file on your
|
173
|
+
server (replace "www.your-domain.com/the/path/to/")
|
174
|
+
*/
|
175
|
+
|
176
|
+
*background:transparent url(<%= asset_path 'fd-slider/blank.gif' %>) repeat;
|
177
|
+
|
178
|
+
}
|
179
|
+
/*
|
180
|
+
Element: Inner wrapper
|
181
|
+
Notes: All other DOM elements added as children to this element.
|
182
|
+
*/
|
183
|
+
.fd-slider-wrapper
|
184
|
+
{
|
185
|
+
position:absolute;
|
186
|
+
top:0;
|
187
|
+
left:0;
|
188
|
+
width:100%;
|
189
|
+
height:100%;
|
190
|
+
}
|
191
|
+
/*
|
192
|
+
Element: Inner wrapper
|
193
|
+
Notes: IE6 needs an expression as it cannot do a height:100% on
|
194
|
+
absolutely positioned elements and it also can't position on four
|
195
|
+
corners - so we are left with a "one time evaluated" self-deleting
|
196
|
+
expression to do the dirty work.
|
197
|
+
*/
|
198
|
+
|
199
|
+
.oldie .fd-slider-vertical .fd-slider-wrapper
|
200
|
+
{
|
201
|
+
*clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none', 0);
|
202
|
+
}
|
203
|
+
/*
|
204
|
+
Element: ieBlur shiv
|
205
|
+
Notes: Used only by IE for the onfocus "Blur" effect
|
206
|
+
*/
|
207
|
+
.fd-slider-inner
|
208
|
+
{
|
209
|
+
display:none;
|
210
|
+
}
|
211
|
+
/*
|
212
|
+
Element: ieBlur shiv
|
213
|
+
Orientation: Horizontal
|
214
|
+
Notes: IE6, 7 & 8 only.
|
215
|
+
Use the "Blur" filter to simulate the box-shadow - not brilliant but the
|
216
|
+
best we can do for IE. IE6 can't absolutely position on 4 sides so we
|
217
|
+
reset the right to "auto" and use a nasty expression to calculate the
|
218
|
+
width dynamically.
|
219
|
+
*/
|
220
|
+
.oldie .fd-slider-inner
|
221
|
+
{
|
222
|
+
position:absolute;
|
223
|
+
height:2px;
|
224
|
+
border:1px solid #bbf;
|
225
|
+
background:#bbf;
|
226
|
+
top:4px;
|
227
|
+
bottom:none;
|
228
|
+
left:4px;
|
229
|
+
right:12px;
|
230
|
+
z-index:2;
|
231
|
+
margin:0;
|
232
|
+
padding:0;
|
233
|
+
overflow:hidden;
|
234
|
+
line-height:4px;
|
235
|
+
_right:auto;
|
236
|
+
_width:expression((this.parentNode.offsetWidth - 12) + "px");
|
237
|
+
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5);
|
238
|
+
}
|
239
|
+
/*
|
240
|
+
Element: ieBlur shiv
|
241
|
+
Orientation: Vertical
|
242
|
+
Notes: Reposition the "Blur" filter for the vertical slider for IE6,
|
243
|
+
7 & 8. The "Blur" filter rule cascades from the rule above so no need to
|
244
|
+
redeclare here, we just reposition.
|
245
|
+
*/
|
246
|
+
.oldie .fd-slider-vertical .fd-slider-inner
|
247
|
+
{
|
248
|
+
width:2px;
|
249
|
+
height:auto;
|
250
|
+
bottom:12px;
|
251
|
+
right:auto;
|
252
|
+
_bottom:auto;
|
253
|
+
*clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none', 0);
|
254
|
+
}
|
255
|
+
/*
|
256
|
+
Element: ieBlur shiv
|
257
|
+
Orientation: Horizontal & Vertical
|
258
|
+
Notes: Display the "Blurred" inner div for IE6, 7 & 8 when the slider
|
259
|
+
gains focus
|
260
|
+
*/
|
261
|
+
.oldie .fd-slider-focused .fd-slider-inner
|
262
|
+
{
|
263
|
+
display:block;
|
264
|
+
}
|
265
|
+
/*
|
266
|
+
Element: Inner track bar
|
267
|
+
Orientation: Horizontal
|
268
|
+
*/
|
269
|
+
.fd-slider-bar
|
270
|
+
{
|
271
|
+
display:block;
|
272
|
+
position:absolute;
|
273
|
+
top:8px;
|
274
|
+
right:10px;
|
275
|
+
left:10px;
|
276
|
+
z-index:2;
|
277
|
+
height:2px;
|
278
|
+
margin:0;
|
279
|
+
padding:0;
|
280
|
+
overflow:hidden;
|
281
|
+
border:1px solid #bbb;
|
282
|
+
border-bottom:1px solid #aaa;
|
283
|
+
border-right:1px solid #aaa;
|
284
|
+
border:1px solid rgba(187, 187, 187, .8);
|
285
|
+
border-bottom:1px solid rgba(170, 170, 170, .8);
|
286
|
+
border-right:1px solid rgba(170, 170, 170, .8);
|
287
|
+
line-height:4px;
|
288
|
+
background-color:#ddd;
|
289
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ccc));
|
290
|
+
background-image: -webkit-linear-gradient(top, #ececec, #ccc);
|
291
|
+
background-image: -moz-linear-gradient(top, #ececec, #ccc);
|
292
|
+
background-image: -ms-linear-gradient(top, #ececec, #ccc);
|
293
|
+
background-image: -o-linear-gradient(top, #ececec, #ccc);
|
294
|
+
background-image: linear-gradient(to bottom, #ececec, #ccc);
|
295
|
+
-webkit-border-radius:2px;
|
296
|
+
-moz-border-radius:2px;
|
297
|
+
border-radius:2px;
|
298
|
+
-webkit-background-clip: padding-box;
|
299
|
+
-moz-background-clip: padding;
|
300
|
+
background-clip: padding-box;
|
301
|
+
}
|
302
|
+
/*
|
303
|
+
Element: Inner track bar
|
304
|
+
Orientation: Horizontal
|
305
|
+
Notes: For IE6 & 7 & 8. IE6 does not recognise absolute positioning on
|
306
|
+
four sides (top, right, bottom & left) so we use an expression to
|
307
|
+
dynamically calculate the track bar size. Yes, it is horrible - you
|
308
|
+
don't need to remind me.
|
309
|
+
*/
|
310
|
+
.oldie .fd-slider-bar
|
311
|
+
{
|
312
|
+
_right:auto;
|
313
|
+
_width:expression((this.parentNode.offsetWidth - 20) + "px");
|
314
|
+
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc');
|
315
|
+
}
|
316
|
+
/*
|
317
|
+
Element: Inner track bar
|
318
|
+
Orientation: Vertical
|
319
|
+
*/
|
320
|
+
.fd-slider-vertical .fd-slider-bar
|
321
|
+
{
|
322
|
+
width:2px;
|
323
|
+
top:10px;
|
324
|
+
right:auto;
|
325
|
+
bottom:10px;
|
326
|
+
left:8px;
|
327
|
+
height:auto;
|
328
|
+
background-color:#ddd;
|
329
|
+
background-image: -webkit-gradient(linear, left top, right top, from(#ececec), to(#ccc));
|
330
|
+
background-image: -webkit-linear-gradient(left, #ececec, #ccc);
|
331
|
+
background-image: -moz-linear-gradient(left, #ececec, #ccc);
|
332
|
+
background-image: -ms-linear-gradient(left, #ececec, #ccc);
|
333
|
+
background-image: -o-linear-gradient(left, #ececec, #ccc);
|
334
|
+
background-image: linear-gradient(to right, #ececec, #ccc);
|
335
|
+
}
|
336
|
+
/*
|
337
|
+
Element: Inner track bar
|
338
|
+
Orientation: Vertical
|
339
|
+
Notes: For IE6 & 7 & 8. The gradient filter colour strings in AARRGGBB
|
340
|
+
format (to save you one less google). IE6 gets repositioned and alas,
|
341
|
+
an expression to calculate the height.
|
342
|
+
*/
|
343
|
+
.oldie .fd-slider-vertical .fd-slider-bar
|
344
|
+
{
|
345
|
+
_bottom:auto;
|
346
|
+
*clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none', 0);
|
347
|
+
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
|
348
|
+
}
|
349
|
+
/*
|
350
|
+
Element: Inner track bar
|
351
|
+
Orientation: Horizontal & Vertical
|
352
|
+
State: Focused
|
353
|
+
Notes: Drop shadow on the inner bar when focused - newer browsers get
|
354
|
+
an animation. IE6, 7 & 8 get a "Blur" filter on an inner SPAN
|
355
|
+
.fd-slider-inner instead
|
356
|
+
*/
|
357
|
+
.fd-slider-focused .fd-slider-bar
|
358
|
+
{
|
359
|
+
-webkit-box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
|
360
|
+
-moz-box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
|
361
|
+
box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
|
362
|
+
-webkit-animation:fd-pulse 2s infinite;
|
363
|
+
-moz-animation:fd-pulse 2s infinite;
|
364
|
+
-ms-animation:fd-pulse 2s infinite;
|
365
|
+
-o-animation:fd-pulse 2s infinite;
|
366
|
+
}
|
367
|
+
/*
|
368
|
+
Element: Inner animated range bar
|
369
|
+
Orientation: Horizontal
|
370
|
+
*/
|
371
|
+
.fd-slider-range
|
372
|
+
{
|
373
|
+
display:block;
|
374
|
+
position:absolute;
|
375
|
+
top:9px;
|
376
|
+
left:11px;
|
377
|
+
z-index:3;
|
378
|
+
height:2px;
|
379
|
+
margin:0;
|
380
|
+
padding:0;
|
381
|
+
overflow:hidden;
|
382
|
+
line-height:2px;
|
383
|
+
background-color:#4cc;
|
384
|
+
background-image: -webkit-gradient(linear, left top, right top, from(#6cc), to(#3cf));
|
385
|
+
background-image: -webkit-linear-gradient(left, #6cc, #3cf);
|
386
|
+
background-image: -moz-linear-gradient(left, #6cc, #3cf);
|
387
|
+
background-image: -ms-linear-gradient(left, #6cc, #3cf);
|
388
|
+
background-image: -o-linear-gradient(left, #6cc, #3cf);
|
389
|
+
background-image: linear-gradient(to right, #6cc, #3cf);
|
390
|
+
-webkit-border-radius:2px;
|
391
|
+
-moz-border-radius:2px;
|
392
|
+
border-radius:2px;
|
393
|
+
-webkit-background-clip: padding-box;
|
394
|
+
-moz-background-clip: padding;
|
395
|
+
background-clip: padding-box;
|
396
|
+
}
|
397
|
+
/*
|
398
|
+
Element: Inner range bar
|
399
|
+
Orientation: Horizontal
|
400
|
+
Notes: IE6, 7 & 8
|
401
|
+
*/
|
402
|
+
.oldie .fd-slider-range
|
403
|
+
{
|
404
|
+
/* IE6 - is this needed? To test. */
|
405
|
+
_left:10px;
|
406
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
|
407
|
+
}
|
408
|
+
/*
|
409
|
+
Element: Inner range bar
|
410
|
+
Orientation: Vertical
|
411
|
+
*/
|
412
|
+
.fd-slider-vertical .fd-slider-range
|
413
|
+
{
|
414
|
+
height:auto;
|
415
|
+
width:2px;
|
416
|
+
top:auto;
|
417
|
+
right:auto;
|
418
|
+
bottom:11px;
|
419
|
+
left:9px;
|
420
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(#6cc));
|
421
|
+
background-image: -webkit-linear-gradient(top, #3cf, #6cc);
|
422
|
+
background-image: -moz-linear-gradient(top, #3cf, #6cc);
|
423
|
+
background-image: -ms-linear-gradient(top, #3cf, #6cc);
|
424
|
+
background-image: -o-linear-gradient(top, #3cf, #6cc);
|
425
|
+
background-image: linear-gradient(to bottom, #3cf, #6cc);
|
426
|
+
}
|
427
|
+
/*
|
428
|
+
Element: Inner range bar
|
429
|
+
Orientation: Vertical
|
430
|
+
Notes: IE6, 7 & 8
|
431
|
+
*/
|
432
|
+
.oldie .fd-slider-vertical .fd-slider-range
|
433
|
+
{
|
434
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
|
435
|
+
}
|
436
|
+
/*
|
437
|
+
Element: Drag handle
|
438
|
+
Orientation: Horizontal
|
439
|
+
State: Default.
|
440
|
+
Notes: The image sprite used for the handle is base64 encoded below. IE7
|
441
|
+
gets its own version within the .mht file, IE6 does not use an image
|
442
|
+
sprite and it is necessary to base64 encode individual animation frames
|
443
|
+
within the .mht file.
|
444
|
+
*/
|
445
|
+
.fd-slider-handle
|
446
|
+
{
|
447
|
+
position:absolute;
|
448
|
+
display:block;
|
449
|
+
padding:0;
|
450
|
+
border:0 none;
|
451
|
+
margin:0;
|
452
|
+
z-index:3;
|
453
|
+
top:0;
|
454
|
+
left:0;
|
455
|
+
width:20px;
|
456
|
+
height:20px;
|
457
|
+
outline:0 none;
|
458
|
+
background-color:transparent;
|
459
|
+
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGes7tckiIp3iRboi6mbollya5DF4VsVWpaw42ABCmaogWSFH3oDyjQoijQP2AUyFOLFshbn4SqsYFabowmdaW4NhDJiKXaUuwotm6UKJK6kKIkipfl7p7OWR3aa5kiVdQoEjQLDM7u2TPfnss3MztDKKXwPC8BnvP1xQeUSnUSvGBwshl8R18Fq70PZOtx44WSn4F89hYkV6/B26ElWuIAyP4+xBKd70311tXV/bzb7+oLOcDaYiWSTSAkR0EfT9P8UDj1j8Rq/Lfw1ukx1NcOnKExs4tDbT6f75e9tc6+c05q90gEtwWRdAoyblG/k4jeVvcr76qKZePi0K9Q5ZF5pvuXLENj6xv1Pvc5n6DJyQJAQgGdjWZCuFQRwTLQ7P/W6PaLb0YBfoNd+YMAq8BR/TIpFCzhDECEgK5SeGafJAJEA0FqO+L7LgL+rhygEwE7FrMFWMqAVvY4CX6I2hoMHYDNg5es60I8Z9xXNiHd2A25PG3WInFPY9BfLRFiwePQS8AKuJEFHWA3Fl1PVOChArPT96Gp5YRDJMSFoExZ1Z8cisQ/sqOBroRnZgydMoBpGLk8mm9uDemdJzs8kkA8FgZKQMSXbFN1ZEiqQGl26eFS4cbwiKFTxvQyMPbhZPb9weHl6bsL4ZymZzRKXSKBADKbtew5+vDB8vKVwb8kPrh029A5yFIMYgO4UNrh1Nl+6H/9PBwPtUMg6DcGRBcTMDM5CzevjsDU2E3smUXZMRO7pOlh40AJoAR56+KvdxgsyiJvd/ebHinlYPlMZYPoezyTHx/a3p6xZSqHcg5fCn9ITC0xPRcvapJnLEoqASQUOczvRdM7WqQjisqfdTOwtA9M5GLhByHzMSJ/r3EghUuB92kcg5pnKHJlK4qdSxV/Lo5Tuatip5zlkjd9zBhITEtjyg5FUdx/iuVeuJQi35lTxZc2QGpkg2tAjbRJ2r9+6KGjb9bbHsqyLOzbV53RhnAwG+NcMpn0vxPVvz2pWn/sc9i6TlcRyzErCDbkZhY94CdpWhhPZO72yvnBXzeI/8RwkeDcZE5Pk0wHIOfz+ao/r6RP3M67ftLhtXb3OInFKyFXGV9xAnZ0qn0ukL2iPfS3mCri2PWfOhwTVqtV4duhC6Yly/F43H0lBa8QW1WnX6TSlqqTRQx1KHRhT/BeJw6BSl0+58mPdoXXmA4/PAOrOEPjQGKxmHtRD4aaqS5G8wRWC0B1YFvyhDXovigOpgWKftZq/0Ys9sh97Nix9SK9zLQRNzY2XEnP8QDJaSReIFTECIpbR83cZaaqUZ1q6GUF3eJnOmauPmUpu7u7FnDrwpqigygKCMimAcRMazZDjYmGY3R1T6eEpRgWUCgUVM/uZlLx1Lp8shFTCC6YFBHZwRi+hAqQ1yhYt7ZSTIdz8LGlFM1JxeXt1iUjC2FPbbMVuzFQ4SzxJX0SU9g3VJzdFm7u0VQszHT4CWtFSynao+JwOBKdCzMfp1w1L6iB5oATQ4nXQowoZwDrBMEpwSCsy4n4Wmv8848dDd4EN0N9b+57gIZ9NjU1JTvU7YmWR7dv5FcWV8NZVUurGrXjXtYiH1mbVnWajUc2XA/GP2rKbNxmOhxQNdsyAy20tbVtz8/Pz21PTV1zfBLfnm/s6rlzpKVxq7q2mg1yb69v16wtRFoj98fbIXsreOrUHNPhTuKpPWTT1TweT66rq2sdN3oaPvts2zf19xm0ngAeqpOHhjRaRRTNba6zszOMYxNMx+TSaDEEPOW+kFvyxMSEc2VlpZqRXVVVm/F1ScrV19dvNTQ0bJ85cyZdU1OjmNwXmAGfu4M1u3Ld1P5XIWA/MP1CRL0vcZ5y4cKFZuTcq6Io9qEYeYqmaTMot5Cb165fv374PGVgYOAckvdntbW1fdjKaOMicpABUuSoMjs7O5pKpX6PoJXzlJ6enrbq6upfIIG/iYA2FtlYIEMww9lin4h9F6anpy04dq1inoKzeQMBe1HJiksTstnsfgrhDy2Rg8FgP5roj/D5nbJ5isVieRk/aNnZ2SHpdFo/4HePNRa/338e2z+UzVMQsAPBBASrRGzCf0jL5yk4o1LLLHnx2ZfPUxAs7na7fThT/iN7MBiuZK0SD5Wtra37CNiJ3COMKgx034+98YwujSLgg4p5SiQSGXW5XCGkTTueNEF5Csj4qqIA8nB+aWnpmTxlP2AGfy0m7Xb7MN7/AEGDgiAQm80GbAuQJjSXywGOCSO5h8Ph8J1D5ylIif5AIHDe6/W2V1VVGXlKJpNJbG5uzkaj0ZFEIvFVnvJ/67H/p6WqWvAd/TpY7V0gWxt5qSoC+ex9SK7egbdD64cNAYLzvakTdXV13+v2u7pCDrC0WInAS1V0HNOKoXDqbmI1fhXeOj2D+nqlUlU9xpHv99Y6u845qeyRGCcfl6pIv5NYva3u0LuqIm1cHPojqkTLhQAJGlvP1vvcnT5Bk3ipipYoVYkDzf7u0e0X+9FcLvPfuZKAVnBUn0QvIPJSFS1TqhLbjvheQsC/lgO0IWCAl6r0Q5Sq/DylSx8EaPkPS1XAU+GypapNT2PQdchS1ValUlUBZqeXoKmliZeqoEypiirhmYh5/0oB5mDk8r18c2ub3nkyUKFUtVa4MXyPp7UHml4exj6cy74/OL48fTcezmnUVKoCU6lqY/nK4Fjig0ufm4P8QSGAlQbq4dTZbuh//WtwPFQPgaCLl6p2YGYyBjev3oOpsU+xJ8Yib6UQIHAq+FCO8tZeDNsoLNFZ5W1uv+mVCwHFgobNRI0C3zO2TPWrEGBc/xZgAJyadcoLu6zuAAAAAElFTkSuQmCC);
|
460
|
+
background-position:0 0;
|
461
|
+
cursor:W-resize;
|
462
|
+
line-height:20px;
|
463
|
+
font-size:10px;
|
464
|
+
-moz-outline:0 none;
|
465
|
+
-webkit-touch-callout: none;
|
466
|
+
-webkit-user-select: none;
|
467
|
+
-khtml-user-select: none;
|
468
|
+
-moz-user-select: none;
|
469
|
+
-ms-user-select: none;
|
470
|
+
-o-user-select: none;
|
471
|
+
user-select: none;
|
472
|
+
}
|
473
|
+
/*
|
474
|
+
Element: Drag handle
|
475
|
+
Orientation: Horizontal
|
476
|
+
State: Default
|
477
|
+
Notes: IE6, 7 & 8 use a nasty expression in order to not draw focus
|
478
|
+
outline on drag handle.
|
479
|
+
*/
|
480
|
+
.oldie .fd-slider-handle
|
481
|
+
{
|
482
|
+
/* IE6 & 7 - set the handle sprite as the background image */
|
483
|
+
|
484
|
+
/*
|
485
|
+
If using the .mht file then uncomment the following rule and edit the
|
486
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
487
|
+
server (replace "www.your-domain.com/the/path/to/")
|
488
|
+
*/
|
489
|
+
|
490
|
+
/*
|
491
|
+
|
492
|
+
*background-image:url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!fullsprite);
|
493
|
+
|
494
|
+
*/
|
495
|
+
|
496
|
+
/*
|
497
|
+
If not using the .mht file then uncomment the following rule and edit
|
498
|
+
the filepath to match the absolute path to the fd-slider-sprite.png
|
499
|
+
file on your server (replace "www.your-domain.com/the/path/to/")
|
500
|
+
*/
|
501
|
+
|
502
|
+
*background-image:url(<%= asset_path 'fd-slider/fd-slider-sprite.png' %>);
|
503
|
+
|
504
|
+
/**********************************************************************/
|
505
|
+
|
506
|
+
/* IE6 - reset the background image sprite stipulated above. */
|
507
|
+
_background-image:none;
|
508
|
+
|
509
|
+
/*
|
510
|
+
IE6 - use the AlphaImageLoader to either load a base64 encoded image
|
511
|
+
from the .mht file or a normal png image from the server
|
512
|
+
*/
|
513
|
+
|
514
|
+
/*
|
515
|
+
If using the .mht file then uncomment the following rule and edit the
|
516
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
517
|
+
server (replace "www.your-domain.com/the/path/to/")
|
518
|
+
*/
|
519
|
+
|
520
|
+
/*
|
521
|
+
|
522
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenormal');
|
523
|
+
|
524
|
+
*/
|
525
|
+
|
526
|
+
/*
|
527
|
+
If not using the .mht file then uncomment the following rule and edit
|
528
|
+
the filepath to match the absolute path to the fd-handle-normal.png
|
529
|
+
file on your server (replace "www.your-domain.com/the/path/to/")
|
530
|
+
*/
|
531
|
+
|
532
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='<%= asset_path 'fd-slider/fd-handle-normal.png' %>');
|
533
|
+
|
534
|
+
/* IE6, 7 & 8 */
|
535
|
+
outline:expression(hideFocus='true');
|
536
|
+
}
|
537
|
+
/*
|
538
|
+
Element: Drag handle
|
539
|
+
Orientation: Horizontal & Vertical
|
540
|
+
State: Focused
|
541
|
+
Notes: Attempts to remove the focus outline, remove the rule if it
|
542
|
+
offends your sensibilities.
|
543
|
+
*/
|
544
|
+
.fd-slider-handle:focus
|
545
|
+
{
|
546
|
+
outline:0 none;
|
547
|
+
border:0 none;
|
548
|
+
-moz-user-focus:normal;
|
549
|
+
}
|
550
|
+
.fd-slider-handle:focus::-moz-focus-inner
|
551
|
+
{
|
552
|
+
border-color: transparent;
|
553
|
+
}
|
554
|
+
/*
|
555
|
+
Element: Drag handle
|
556
|
+
Orientation: Horizontal
|
557
|
+
State: Focused and Hovered and also while handle is animating into
|
558
|
+
position or being dragged.
|
559
|
+
Notes: I'm using the same image for focused, hover and active states
|
560
|
+
but you can, of course, go wild.
|
561
|
+
*/
|
562
|
+
.fd-slider-focused .fd-slider-handle,
|
563
|
+
.fd-slider-hover .fd-slider-handle,
|
564
|
+
.fd-slider-active .fd-slider-handle
|
565
|
+
{
|
566
|
+
background-position:0 -20px;
|
567
|
+
}
|
568
|
+
/*
|
569
|
+
Element: Drag handle
|
570
|
+
Orientation: Horizontal
|
571
|
+
State: Focused and Hovered and also while handle is animating into
|
572
|
+
position or being dragged.
|
573
|
+
Notes: IE6 only.
|
574
|
+
*/
|
575
|
+
.oldie .fd-slider-focused .fd-slider-handle,
|
576
|
+
.oldie .fd-slider-hover .fd-slider-handle,
|
577
|
+
.oldie .fd-slider-active .fd-slider-handle
|
578
|
+
{
|
579
|
+
/*
|
580
|
+
IE6 - use the AlphaImageLoader to either load a base64 encoded image
|
581
|
+
from the .mht file or a normal png image from the server
|
582
|
+
*/
|
583
|
+
|
584
|
+
/*
|
585
|
+
If using the .mht file then uncomment the following rule and edit the
|
586
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
587
|
+
server (replace "www.your-domain.com/the/path/to/")
|
588
|
+
*/
|
589
|
+
|
590
|
+
/*
|
591
|
+
|
592
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handleglow');
|
593
|
+
|
594
|
+
*/
|
595
|
+
|
596
|
+
/*
|
597
|
+
If not using the .mht file then uncomment the following rule and edit
|
598
|
+
the filepath to match the absolute path to the fd-handle-glow.png
|
599
|
+
file on your server (replace "www.your-domain.com/the/path/to/")
|
600
|
+
*/
|
601
|
+
|
602
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='<%= asset_path 'fd-slider/fd-handle-glow.png' %>');
|
603
|
+
}
|
604
|
+
/*
|
605
|
+
Element: Drag handle
|
606
|
+
Orientation: Vertical
|
607
|
+
Notes: Change the cursor to the correct icon.
|
608
|
+
*/
|
609
|
+
.fd-slider-vertical .fd-slider-handle
|
610
|
+
{
|
611
|
+
cursor:N-resize;
|
612
|
+
}
|
613
|
+
/*
|
614
|
+
Element: Drag handle
|
615
|
+
Orientation: Vertical
|
616
|
+
Notes: IE6, 7 & 8
|
617
|
+
|
618
|
+
.oldie .fd-slider-vertical .fd-slider-handle
|
619
|
+
{
|
620
|
+
}
|
621
|
+
*/
|
622
|
+
/*
|
623
|
+
Element: Drag handle
|
624
|
+
Orientation: Vertical
|
625
|
+
State: Focused and Hovered and also while handle is animating into
|
626
|
+
position or being dragged.
|
627
|
+
|
628
|
+
.fd-slider-vertical .fd-slider-focused .fd-slider-handle,
|
629
|
+
.fd-slider-vertical .fd-slider-hover .fd-slider-handle,
|
630
|
+
.fd-slider-vertical .fd-slider-active .fd-slider-handle
|
631
|
+
{
|
632
|
+
}
|
633
|
+
*/
|
634
|
+
/*
|
635
|
+
Element: Drag handle
|
636
|
+
Orientation: Vertical
|
637
|
+
State: Focused and Hovered and also while handle is animating into
|
638
|
+
position or being dragged.
|
639
|
+
Notes: IE6, 7 & 8
|
640
|
+
|
641
|
+
.oldie .fd-slider-vertical .fd-slider-focused .fd-slider-handle,
|
642
|
+
.oldie .fd-slider-vertical .fd-slider-hover .fd-slider-handle,
|
643
|
+
.oldie .fd-slider-vertical .fd-slider-active .fd-slider-handle
|
644
|
+
{
|
645
|
+
}
|
646
|
+
*/
|
647
|
+
/*
|
648
|
+
Element: Drag handle
|
649
|
+
Orientation: Horizontal & Vertical
|
650
|
+
State: User has not yet used the slider to set a value
|
651
|
+
Notes: I screwed the positioning of the image sprite by 1px which is why
|
652
|
+
it's -59px and not -60px. Yeah - I suck at Photoshop.
|
653
|
+
*/
|
654
|
+
.fd-slider-no-value .fd-slider-handle
|
655
|
+
{
|
656
|
+
background-position:0 -59px;
|
657
|
+
}
|
658
|
+
/*
|
659
|
+
Element: Drag handle
|
660
|
+
Orientation: Horizontal
|
661
|
+
State: User has not yet used the slider to set a value
|
662
|
+
Notes: IE6 only
|
663
|
+
*/
|
664
|
+
.oldie .fd-slider-no-value .fd-slider-handle
|
665
|
+
{
|
666
|
+
/*
|
667
|
+
IE6 - use the AlphaImageLoader to either load a base64 encoded image
|
668
|
+
from the .mht file or a normal png image from the server
|
669
|
+
*/
|
670
|
+
|
671
|
+
/*
|
672
|
+
If using the .mht file then uncomment the following rule and edit the
|
673
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
674
|
+
server (replace "www.your-domain.com/the/path/to/")
|
675
|
+
*/
|
676
|
+
|
677
|
+
/*
|
678
|
+
|
679
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenovalue');
|
680
|
+
|
681
|
+
*/
|
682
|
+
|
683
|
+
/*
|
684
|
+
If not using the .mht file then uncomment the following rule and edit
|
685
|
+
the filepath to match the absolute path to the fd-handle-no-value.png
|
686
|
+
file on your server (replace "www.your-domain.com/the/path/to/")
|
687
|
+
*/
|
688
|
+
|
689
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='<%= asset_path 'fd-slider/fd-handle-no-value.png' %>');
|
690
|
+
}
|
691
|
+
/*
|
692
|
+
Element: Drag handle
|
693
|
+
Orientation: Vertical
|
694
|
+
State: User has not yet used the slider to set a value
|
695
|
+
Notes: IE6, 7 & 8. Only required should you use a different image for
|
696
|
+
vertical sliders.
|
697
|
+
|
698
|
+
.oldie .fd-slider-vertical .fd-slider-no-value .fd-slider-handle
|
699
|
+
{
|
700
|
+
}
|
701
|
+
*/
|
702
|
+
/*
|
703
|
+
Element: document.body
|
704
|
+
Orientation: Horizontal and Vertical
|
705
|
+
Notes: Class given to body to change cursor style when dragging. It also
|
706
|
+
attempts to stop text selection while dragging.
|
707
|
+
*/
|
708
|
+
body.fd-slider-drag-horizontal,
|
709
|
+
body.fd-slider-drag-horizontal *,
|
710
|
+
body.fd-slider-drag-vertical,
|
711
|
+
body.fd-slider-drag-vertical *
|
712
|
+
{
|
713
|
+
cursor:N-resize !important;
|
714
|
+
-webkit-user-select: none;
|
715
|
+
-khtml-user-select: none;
|
716
|
+
-moz-user-select: none;
|
717
|
+
-ms-user-select: none;
|
718
|
+
-o-user-select: none;
|
719
|
+
user-select: none;
|
720
|
+
}
|
721
|
+
/*
|
722
|
+
Element: document.body
|
723
|
+
Orientation: Horizontal
|
724
|
+
Notes: Class given to body to change cursor style when dragging
|
725
|
+
*/
|
726
|
+
body.fd-slider-drag-horizontal,
|
727
|
+
body.fd-slider-drag-horizontal *
|
728
|
+
{
|
729
|
+
cursor:W-resize !important;
|
730
|
+
}
|
731
|
+
/*
|
732
|
+
Element: Inner wrapper
|
733
|
+
Orientation: Horizontal & Vertical
|
734
|
+
State: disabled
|
735
|
+
Notes: Class given to slider when disabled
|
736
|
+
*/
|
737
|
+
.fd-slider-disabled
|
738
|
+
{
|
739
|
+
opacity:.8;
|
740
|
+
cursor:default;
|
741
|
+
}
|
742
|
+
/*
|
743
|
+
Element: Drag handle
|
744
|
+
Orientation: Horizontal
|
745
|
+
State: disabled
|
746
|
+
Notes: Class given to slider when disabled
|
747
|
+
*/
|
748
|
+
.fd-slider-disabled .fd-slider-handle
|
749
|
+
{
|
750
|
+
cursor:default !important;
|
751
|
+
background-position:0 -40px;
|
752
|
+
opacity:1;
|
753
|
+
}
|
754
|
+
/*
|
755
|
+
Element: Drag handle
|
756
|
+
Orientation: Horizontal
|
757
|
+
State: disabled
|
758
|
+
Notes: IE6 only
|
759
|
+
*/
|
760
|
+
.oldie .fd-slider-disabled .fd-slider-handle
|
761
|
+
{
|
762
|
+
/*
|
763
|
+
IE6 - use the AlphaImageLoader to either load a base64 encoded image
|
764
|
+
from the .mht file or a normal png image from the server
|
765
|
+
*/
|
766
|
+
|
767
|
+
/*
|
768
|
+
If using the .mht file then uncomment the following rule and edit the
|
769
|
+
filepath to match the absolute path to the fd-slider.mht file on your
|
770
|
+
server (replace "www.your-domain.com/the/path/to/")
|
771
|
+
*/
|
772
|
+
|
773
|
+
/*
|
774
|
+
|
775
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handledisabled');
|
776
|
+
|
777
|
+
*/
|
778
|
+
|
779
|
+
/*
|
780
|
+
If not using the .mht file then uncomment the following rule and edit
|
781
|
+
the filepath to match the absolute path to the fd-handle-disabled.png
|
782
|
+
file on your server (replace "www.your-domain.com/the/path/to/")
|
783
|
+
*/
|
784
|
+
|
785
|
+
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='<%= asset_path 'fd-slider/fd-handle-disabled.png' %>');
|
786
|
+
}
|
787
|
+
/*
|
788
|
+
Element: Drag handle
|
789
|
+
Orientation: Vertical
|
790
|
+
State: disabled
|
791
|
+
|
792
|
+
.fd-slider-vertical .fd-slider-disabled .fd-slider-handle
|
793
|
+
{
|
794
|
+
}
|
795
|
+
.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-handle
|
796
|
+
{
|
797
|
+
}
|
798
|
+
*/
|
799
|
+
/*
|
800
|
+
Element: Inner track bar
|
801
|
+
Orientation: Horizontal
|
802
|
+
State: disabled
|
803
|
+
*/
|
804
|
+
.fd-slider-disabled .fd-slider-bar
|
805
|
+
{
|
806
|
+
cursor:auto !important;
|
807
|
+
border:1px solid #888;
|
808
|
+
border-bottom:1px solid #999;
|
809
|
+
border-right:1px solid #999;
|
810
|
+
border:1px solid rgba(136,136,136,.8);
|
811
|
+
border-bottom:1px solid rgba(153,153,153,.8);
|
812
|
+
border-right:1px solid rgba(153,153,153,.8);
|
813
|
+
background-color:#555;
|
814
|
+
background-image: -webkit-gradient(linear, left top, right top, from(#666), to(#333));
|
815
|
+
background-image: -webkit-linear-gradient(left, #666, #333);
|
816
|
+
background-image: -moz-linear-gradient(left, #666, #333);
|
817
|
+
background-image: -ms-linear-gradient(left, #666, #333);
|
818
|
+
background-image: -o-linear-gradient(left, #666, #333);
|
819
|
+
background-image: linear-gradient(to right, #666, #333);
|
820
|
+
}
|
821
|
+
/*
|
822
|
+
Element: Inner track bar
|
823
|
+
Orientation: Vertical
|
824
|
+
State: disabled
|
825
|
+
*/
|
826
|
+
.fd-slider-vertical .fd-slider-disabled .fd-slider-bar
|
827
|
+
{
|
828
|
+
background-image: -webkit-gradient(linear, left top, right bottom, from(#333), to(#666));
|
829
|
+
background-image: -webkit-linear-gradient(top, #333, #666);
|
830
|
+
background-image: -moz-linear-gradient(top, #333, #666);
|
831
|
+
background-image: -ms-linear-gradient(top, #333, #666);
|
832
|
+
background-image: -o-linear-gradient(top, #333, #666);
|
833
|
+
background-image: linear-gradient(to bottom, #333, #666);
|
834
|
+
}
|
835
|
+
/*
|
836
|
+
Element: Inner track bar
|
837
|
+
Orientation: Horizontal
|
838
|
+
State: disabled
|
839
|
+
Notes: IE6, 7 & 8
|
840
|
+
*/
|
841
|
+
.oldie .fd-slider-disabled .fd-slider-bar
|
842
|
+
{
|
843
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
|
844
|
+
}
|
845
|
+
/*
|
846
|
+
Element: Inner track bar
|
847
|
+
Orientation: Vertical
|
848
|
+
State: disabled
|
849
|
+
Notes: IE6, 7 & 8
|
850
|
+
*/
|
851
|
+
.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar
|
852
|
+
{
|
853
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333');
|
854
|
+
}
|
855
|
+
/*
|
856
|
+
Element: Range bar
|
857
|
+
Orientation: Horizontal
|
858
|
+
State: disabled
|
859
|
+
*/
|
860
|
+
.fd-slider-disabled .fd-slider-range
|
861
|
+
{
|
862
|
+
cursor:auto !important;
|
863
|
+
background-color:#222;
|
864
|
+
background-image: -webkit-gradient(linear, left top, right top, from(#222), to(#000));
|
865
|
+
background-image: -webkit-linear-gradient(left, #222, #000);
|
866
|
+
background-image: -moz-linear-gradient(left, #222, #000);
|
867
|
+
background-image: -ms-linear-gradient(left, #222, #000);
|
868
|
+
background-image: -o-linear-gradient(left, #222, #000);
|
869
|
+
background-image: linear-gradient(to right, #222, #000);
|
870
|
+
}
|
871
|
+
/*
|
872
|
+
Element: Range bar
|
873
|
+
Orientation: Horizontal
|
874
|
+
State: disabled
|
875
|
+
Notes: IE6, 7 & 8
|
876
|
+
*/
|
877
|
+
.oldie .fd-slider-disabled .fd-slider-range
|
878
|
+
{
|
879
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
|
880
|
+
}
|
881
|
+
/*
|
882
|
+
Element: Range bar
|
883
|
+
Orientation: Vertical
|
884
|
+
State: disabled
|
885
|
+
*/
|
886
|
+
.fd-slider-vertical .fd-slider-disabled .fd-slider-range
|
887
|
+
{
|
888
|
+
background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#222));
|
889
|
+
background-image: -webkit-linear-gradient(top, #000, #222);
|
890
|
+
background-image: -moz-linear-gradient(top, #000, #222);
|
891
|
+
background-image: -ms-linear-gradient(top, #000, #222);
|
892
|
+
background-image: -o-linear-gradient(top, #000, #222);
|
893
|
+
background-image: linear-gradient(to bottom, #000, #222);
|
894
|
+
}
|
895
|
+
/*
|
896
|
+
Element: Range bar
|
897
|
+
Orientation: Vertical
|
898
|
+
State: disabled
|
899
|
+
Notes: IE6, 7 & 8
|
900
|
+
*/
|
901
|
+
.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range
|
902
|
+
{
|
903
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000');
|
904
|
+
}
|
905
|
+
/*
|
906
|
+
The various prefixed keyframe rules for the glow effect used whenever
|
907
|
+
the slider gains keyboard focus
|
908
|
+
*/
|
909
|
+
@-webkit-keyframes fd-pulse {
|
910
|
+
0% {
|
911
|
+
box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
|
912
|
+
}
|
913
|
+
20% {
|
914
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
915
|
+
}
|
916
|
+
40% {
|
917
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
918
|
+
}
|
919
|
+
60% {
|
920
|
+
box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
|
921
|
+
}
|
922
|
+
80% {
|
923
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
924
|
+
}
|
925
|
+
100% {
|
926
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
927
|
+
}
|
928
|
+
}
|
929
|
+
@-moz-keyframes fd-pulse {
|
930
|
+
0% {
|
931
|
+
box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
|
932
|
+
}
|
933
|
+
20% {
|
934
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
935
|
+
}
|
936
|
+
40% {
|
937
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
938
|
+
}
|
939
|
+
60% {
|
940
|
+
box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
|
941
|
+
}
|
942
|
+
80% {
|
943
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
944
|
+
}
|
945
|
+
100% {
|
946
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
947
|
+
}
|
948
|
+
}
|
949
|
+
@-ms-keyframes fd-pulse {
|
950
|
+
0% {
|
951
|
+
box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
|
952
|
+
}
|
953
|
+
20% {
|
954
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
955
|
+
}
|
956
|
+
40% {
|
957
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
958
|
+
}
|
959
|
+
60% {
|
960
|
+
box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
|
961
|
+
}
|
962
|
+
80% {
|
963
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
964
|
+
}
|
965
|
+
100% {
|
966
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
967
|
+
}
|
968
|
+
}
|
969
|
+
@-o-keyframes fd-pulse {
|
970
|
+
0% {
|
971
|
+
box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
|
972
|
+
}
|
973
|
+
20% {
|
974
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
975
|
+
}
|
976
|
+
40% {
|
977
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
978
|
+
}
|
979
|
+
60% {
|
980
|
+
box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
|
981
|
+
}
|
982
|
+
80% {
|
983
|
+
box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
|
984
|
+
}
|
985
|
+
100% {
|
986
|
+
box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
|
987
|
+
}
|
988
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: fd-slider-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.5.
|
4
|
+
version: 0.5.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -40,6 +40,14 @@ files:
|
|
40
40
|
- lib/fd-slider-rails/version.rb
|
41
41
|
- lib/fd-slider-rails.rb
|
42
42
|
- lib/tasks/fd-slider-rails_tasks.rake
|
43
|
+
- vendor/assets/images/blank.gif
|
44
|
+
- vendor/assets/images/fd-slider/fd-handle-disabled.png
|
45
|
+
- vendor/assets/images/fd-slider/fd-handle-glow.png
|
46
|
+
- vendor/assets/images/fd-slider/fd-handle-no-value.png
|
47
|
+
- vendor/assets/images/fd-slider/fd-handle-normal.png
|
48
|
+
- vendor/assets/images/fd-slider/fd-slider-sprite.png
|
49
|
+
- vendor/assets/javascripts/fd-slider.min.js
|
50
|
+
- vendor/assets/stylesheets/fd-slider.css.erb
|
43
51
|
- MIT-LICENSE
|
44
52
|
- Rakefile
|
45
53
|
- README.rdoc
|
@@ -57,7 +65,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
57
65
|
version: '0'
|
58
66
|
segments:
|
59
67
|
- 0
|
60
|
-
hash: -
|
68
|
+
hash: -2490917986567447189
|
61
69
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
62
70
|
none: false
|
63
71
|
requirements:
|
@@ -66,7 +74,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
66
74
|
version: '0'
|
67
75
|
segments:
|
68
76
|
- 0
|
69
|
-
hash: -
|
77
|
+
hash: -2490917986567447189
|
70
78
|
requirements: []
|
71
79
|
rubyforge_project:
|
72
80
|
rubygems_version: 1.8.21
|