diff --git a/README.md b/README.md index 1ab4e1c..40a4e2c 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,8 @@ Documentation, Features and Demos --------------------------------- Full details and documentation can be found on the project page here: - \ No newline at end of file + + +Touch Support +--------------------------------- +The script will automatically add touch support for mobile browsers. Please note that since this webkit, IE Mobile is not supported. Windows Phone 8 doesn't register tocuh events and the command used to detect touch in browsers will not work. \ No newline at end of file diff --git a/js/simple-slider.js b/js/simple-slider.js index da546e4..e0f7362 100644 --- a/js/simple-slider.js +++ b/js/simple-slider.js @@ -18,25 +18,30 @@ var __slice = [].slice, _this = this; this.input = input; this.defaultOptions = { - animate: true, + animate: false, snapMid: false, classPrefix: null, + classSuffix: null, theme: null }; this.settings = $.extend({}, this.defaultOptions, options); + if (this.settings.theme) { this.settings.classSuffix = "-" + this.settings.theme; } this.input.hide(); + this.slider = $("
").addClass("slider" + (this.settings.classSuffix || "")).css({ position: "relative", userSelect: "none", boxSizing: "border-box" }).insertBefore(this.input); + if (this.input.attr("id")) { this.slider.attr("id", this.input.attr("id") + "-slider"); } + this.track = $("
").addClass("track").css({ position: "absolute", top: "50%", @@ -44,6 +49,7 @@ var __slice = [].slice, userSelect: "none", cursor: "pointer" }).appendTo(this.slider); + this.dragger = $("
").addClass("dragger").css({ position: "absolute", top: "50%", @@ -62,39 +68,114 @@ var __slice = [].slice, marginTop: this.dragger.outerWidth() / -2, marginLeft: this.dragger.outerWidth() / -2 }); - this.track.mousedown(function(e) { - if (e.which !== 1) { - return; - } - _this.domDrag(e.pageX, e.pageY, true); - _this.dragging = true; - return false; - }); - this.dragger.mousedown(function(e) { - if (e.which !== 1) { - return; - } - _this.dragging = true; - _this.dragger.addClass("dragging"); - _this.domDrag(e.pageX, e.pageY); - return false; - }); - $(window).mousemove(function(e) { - if (_this.dragging) { + + if('ontouchstart' in window) { + this.track.on("touchstart", function(e) { + if (jQuery) { + if (e.originalEvent.touches[0]) { + _this.domDrag(e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY); + _this.dragging = true; + } + } + else { + if (e.touches[0]) { + _this.domDrag(e.touches[0].pageX, e.touches[0].pageY); + _this.dragging = true; + } + } + + return false; + }); + + this.dragger.on("touchstart", function(e) { + + if (jQuery) { + if (e.originalEvent.touches[0]) { + _this.dragging = true; + _this.dragger.addClass("dragging"); + _this.domDrag(e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY); + } + return false; + } + else { + console.log(jQuery); + if (e.touches[0]) { + _this.dragging = true; + _this.dragger.addClass("dragging"); + _this.domDrag(e.touches[0].pageX, e.touches[0].pageY); + } + return false; + } + }); + + $(window).on("touchmove", function(e) { + if (jQuery) { + if (_this.dragging) { + _this.domDrag(e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY); + return $("body").css({ + cursor: "pointer" + }); + } + } + else { + if (_this.dragging) { + _this.domDrag(e.touches[0].pageX, e.touches[0].pageY); + return $("body").css({ + cursor: "pointer" + }); + } + } + }); + + $(window).on("touchend", function(e) { + if (_this.dragging) { + _this.dragging = false; + _this.dragger.removeClass("dragging"); + return $("body").css({ + cursor: "auto" + }); + } + }); + } + else { + + this.track.mousedown(function(e) { + if (e.which !== 1) { + return; + } + _this.domDrag(e.pageX, e.pageY, true); + _this.dragging = true; + return false; + }); + + this.dragger.mousedown(function(e) { + if (e.which !== 1) { + return; + } + _this.dragging = true; + _this.dragger.addClass("dragging"); _this.domDrag(e.pageX, e.pageY); - return $("body").css({ - cursor: "pointer" - }); - } - }).mouseup(function(e) { - if (_this.dragging) { - _this.dragging = false; - _this.dragger.removeClass("dragging"); - return $("body").css({ - cursor: "auto" - }); - } - }); + return false; + }); + + $(window).mousemove(function(e) { + if (_this.dragging) { + _this.domDrag(e.pageX, e.pageY); + return $("body").css({ + cursor: "pointer" + }); + } + }).mouseup(function(e) { + if (_this.dragging) { + _this.dragging = false; + _this.dragger.removeClass("dragging"); + return $("body").css({ + cursor: "auto" + }); + } + }); + } + this.pagePos = 0; if (this.input.val() === "") { this.value = this.getRange().min; @@ -151,13 +232,19 @@ var __slice = [].slice, }; SimpleSlider.prototype.setSliderPosition = function(position, animate) { + if (animate == null) { animate = false; } if (animate && this.settings.animate) { + console.log(animating); + return this.dragger.animate({ left: position }, 200); + + //this.dragger.style.webkitTransform = "translate("+position+"px,0)"; + } else { return this.dragger.css({ left: position @@ -290,7 +377,9 @@ var __slice = [].slice, }); } }); + return $(function() { + return $("[data-slider]").each(function() { var $el, allowedValues, settings, x; $el = $(this); @@ -321,5 +410,6 @@ var __slice = [].slice, } return $el.simpleSlider(settings); }); + }); })(this.jQuery || this.Zepto, this); diff --git a/js/simple-slider.min.js b/js/simple-slider.min.js index 73184b5..d8ca3f3 100644 --- a/js/simple-slider.min.js +++ b/js/simple-slider.min.js @@ -2,10 +2,11 @@ * jQuery Simple Slider: Unobtrusive Numerical Slider * Version 1.0.0 * + * Forked by Greg Avola (http://gregavola.me) to add touch. + * * Copyright (c) 2012 James Smith (http://loopj.com) * * Licensed under the MIT license (http://mit-license.org/) * */ - -var __slice=[].slice,__indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t").addClass("slider").attr("id",this.input.attr("id")+"-slider").css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input),this.track=e("
").addClass("track").css({position:"absolute",top:"50%",width:"100%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),this.dragger=e("
").addClass("dragger").css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2}),this.track.css({marginTop:this.track.outerHeight()/-2}),this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2}),this.track.mousedown(function(e){if(e.which!==1)return;return s.domDrag(e.pageX,e.pageY,!0),s.dragging=!0,!1}),this.dragger.mousedown(function(e){if(e.which!==1)return;return s.dragging=!0,s.dragger.addClass("dragging"),s.domDrag(e.pageX,e.pageY),!1}),e(t).mousemove(function(t){if(s.dragging)return s.domDrag(t.pageX,t.pageY),e("body").css({cursor:"pointer"})}).mouseup(function(t){if(s.dragging)return s.dragging=!1,s.dragger.removeClass("dragging"),e("body").css({cursor:"auto"})}),this.pagePos=0,this.input.val()===""?(this.value=this.getRange().min,this.input.val(this.value)):this.value=this.nearestValidValue(this.input.val()),this.setSliderPositionFromValue(this.value),i=this.valueToRatio(this.value),this.input.trigger("slider:ready",{value:this.value,ratio:i,position:i*this.slider.outerWidth()})}return n.prototype.setRatio=function(e){var t;return e=Math.min(1,e),e=Math.max(0,e),t=this.ratioToValue(e),this.setSliderPositionFromValue(t),this.valueChanged(t,e,"setRatio")},n.prototype.setValue=function(e){var t;return e=this.nearestValidValue(e),t=this.valueToRatio(e),this.setSliderPositionFromValue(e),this.valueChanged(e,t,"setValue")},n.prototype.domDrag=function(e,t,n){var r,i,s;n==null&&(n=!1),r=e-this.slider.offset().left,r=Math.min(this.slider.outerWidth(),r),r=Math.max(0,r);if(this.pagePos!==r)return this.pagePos=r,i=r/this.slider.outerWidth(),s=this.ratioToValue(i),this.valueChanged(s,i,"domDrag"),this.settings.snap?this.setSliderPositionFromValue(s,n):this.setSliderPosition(r,n)},n.prototype.setSliderPosition=function(e,t){return t==null&&(t=!1),t&&this.settings.animate?this.dragger.animate({left:e},200):this.dragger.css({left:e})},n.prototype.setSliderPositionFromValue=function(e,t){var n;return t==null&&(t=!1),n=this.valueToRatio(e),this.setSliderPosition(n*this.slider.outerWidth(),t)},n.prototype.getRange=function(){return this.settings.allowedValues?{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}:this.settings.range?{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}:{min:0,max:1}},n.prototype.nearestValidValue=function(t){var n,r,i,s;return i=this.getRange(),t=Math.min(i.max,t),t=Math.max(i.min,t),this.settings.allowedValues?(n=null,e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)this.settings.step/2&&s=0?(s=e(this).data("slider-object"),s[i].apply(s,t)):(o=i,e(this).data("slider-object",new n(e(this),o)))})}}),e(function(){return e("[data-slider]").each(function(){var t,n,r,i,s,o;return t=e(this),i={},n=t.data("slider-values"),n&&(i.allowedValues=function(){var e,t,r,i;r=n.split(","),i=[];for(e=0,t=r.length;e").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input);if(this.input.attr("id")){this.slider.attr("id",this.input.attr("id")+"-slider")}this.track=e("
").addClass("track").css({position:"absolute",top:"50%",width:"100%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider);this.dragger=e("
").addClass("dragger").css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider);this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2});this.track.css({marginTop:this.track.outerHeight()/-2});this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2});if("ontouchstart"in t){this.track.on("touchstart",function(e){if(jQuery){if(e.originalEvent.touches[0]){s.domDrag(e.originalEvent.touches[0].pageX,e.originalEvent.touches[0].pageY);s.dragging=true}}else{if(e.touches[0]){s.domDrag(e.touches[0].pageX,e.touches[0].pageY);s.dragging=true}}return false});this.dragger.on("touchstart",function(e){if(jQuery){if(e.originalEvent.touches[0]){s.dragging=true;s.dragger.addClass("dragging");s.domDrag(e.originalEvent.touches[0].pageX,e.originalEvent.touches[0].pageY)}return false}else{console.log(jQuery);if(e.touches[0]){s.dragging=true;s.dragger.addClass("dragging");s.domDrag(e.touches[0].pageX,e.touches[0].pageY)}return false}});e(t).on("touchmove",function(t){if(jQuery){if(s.dragging){s.domDrag(t.originalEvent.touches[0].pageX,t.originalEvent.touches[0].pageY);return e("body").css({cursor:"pointer"})}}else{if(s.dragging){s.domDrag(t.touches[0].pageX,t.touches[0].pageY);return e("body").css({cursor:"pointer"})}}});e(t).on("touchend",function(t){if(s.dragging){s.dragging=false;s.dragger.removeClass("dragging");return e("body").css({cursor:"auto"})}})}else{this.track.mousedown(function(e){if(e.which!==1){return}s.domDrag(e.pageX,e.pageY,true);s.dragging=true;return false});this.dragger.mousedown(function(e){if(e.which!==1){return}s.dragging=true;s.dragger.addClass("dragging");s.domDrag(e.pageX,e.pageY);return false});e(t).mousemove(function(t){if(s.dragging){s.domDrag(t.pageX,t.pageY);return e("body").css({cursor:"pointer"})}}).mouseup(function(t){if(s.dragging){s.dragging=false;s.dragger.removeClass("dragging");return e("body").css({cursor:"auto"})}})}this.pagePos=0;if(this.input.val()===""){this.value=this.getRange().min;this.input.val(this.value)}else{this.value=this.nearestValidValue(this.input.val())}this.setSliderPositionFromValue(this.value);i=this.valueToRatio(this.value);this.input.trigger("slider:ready",{value:this.value,ratio:i,position:i*this.slider.outerWidth(),el:this.slider})}n.prototype.setRatio=function(e){var t;e=Math.min(1,e);e=Math.max(0,e);t=this.ratioToValue(e);this.setSliderPositionFromValue(t);return this.valueChanged(t,e,"setRatio")};n.prototype.setValue=function(e){var t;e=this.nearestValidValue(e);t=this.valueToRatio(e);this.setSliderPositionFromValue(e);return this.valueChanged(e,t,"setValue")};n.prototype.domDrag=function(e,t,n){var r,i,s;if(n==null){n=false}r=e-this.slider.offset().left;r=Math.min(this.slider.outerWidth(),r);r=Math.max(0,r);if(this.pagePos!==r){this.pagePos=r;i=r/this.slider.outerWidth();s=this.ratioToValue(i);this.valueChanged(s,i,"domDrag");if(this.settings.snap){return this.setSliderPositionFromValue(s,n)}else{return this.setSliderPosition(r,n)}}};n.prototype.setSliderPosition=function(e,t){if(t==null){t=false}if(t&&this.settings.animate){console.log(animating);return this.dragger.animate({left:e},200)}else{return this.dragger.css({left:e})}};n.prototype.setSliderPositionFromValue=function(e,t){var n;if(t==null){t=false}n=this.valueToRatio(e);return this.setSliderPosition(n*this.slider.outerWidth(),t)};n.prototype.getRange=function(){if(this.settings.allowedValues){return{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}}else if(this.settings.range){return{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}}else{return{min:0,max:1}}};n.prototype.nearestValidValue=function(t){var n,r,i,s;i=this.getRange();t=Math.min(i.max,t);t=Math.max(i.min,t);if(this.settings.allowedValues){n=null;e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)this.settings.step/2&&s=0){s=e(this).data("slider-object");return s[i].apply(s,t)}else{o=i;return e(this).data("slider-object",new n(e(this),o))}})}});return e(function(){return e("[data-slider]").each(function(){var t,n,r,i;t=e(this);r={};n=t.data("slider-values");if(n){r.allowedValues=function(){var e,t,r,s;r=n.split(",");s=[];for(e=0,t=r.length;e