From b597303bfe1e708628e61149250166675440e6a8 Mon Sep 17 00:00:00 2001 From: Albin Sunnanbo Date: Sat, 21 Mar 2015 14:43:03 +0100 Subject: [PATCH] Fix #36 - Bind to touch events as well as mouse events - Makes jquery-toggle work on mobile devices --- js/Toggles.js | 29 ++++++++++++++++++----------- toggles.js | 29 ++++++++++++++++++----------- toggles.min.js | 7 +------ 3 files changed, 37 insertions(+), 28 deletions(-) diff --git a/js/Toggles.js b/js/Toggles.js index fcd2775..860af4c 100644 --- a/js/Toggles.js +++ b/js/Toggles.js @@ -181,9 +181,9 @@ Toggles.prototype.bindDrag = function() { // fired on mouseup and mouseleave events var upLeave = function(e) { - self.el.off('mousemove'); - self.els.slide.off('mouseleave'); - self.els.blob.off('mouseup'); + self.el.off('mousemove touchmove'); + self.els.slide.off('mouseleave touchend'); + self.els.blob.off('mouseup touchend'); if (!diff && self.opts['click'] && e.type !== 'mouseleave') { self.toggle(); @@ -204,17 +204,24 @@ Toggles.prototype.bindDrag = function() { var wh = -self.w + self.h; - self.els.blob.on('mousedown', function(e) { + self.els.blob.on('mousedown touchstart', function(e) { // reset diff diff = 0; - self.els.blob.off('mouseup'); - self.els.slide.off('mouseleave'); - var cursor = e.pageX; + self.els.blob.off('mouseup touchend'); + self.els.slide.off('mouseleave touchend'); + var cursor = e.pageX + if (cursor === undefined) { + cursor = e.originalEvent.touches[0].pageX; + } - self.el.on('mousemove', self.els.blob, function(e) { - diff = e.pageX - cursor; + self.el.on('mousemove touchmove', self.els.blob, function (e) { + var currentCursor = e.pageX; + if (currentCursor === undefined) { + currentCursor = e.originalEvent.touches[0].pageX; + } + diff = currentCursor - cursor; var marginLeft; @@ -237,8 +244,8 @@ Toggles.prototype.bindDrag = function() { self.els.inner.css('margin-left',marginLeft); }); - self.els.blob.on('mouseup', upLeave); - self.els.slide.on('mouseleave', upLeave); + self.els.blob.on('mouseup touchend', upLeave); + self.els.slide.on('mouseleave touchend', upLeave); }); }; diff --git a/toggles.js b/toggles.js index 985efa4..6e45c2b 100644 --- a/toggles.js +++ b/toggles.js @@ -191,9 +191,9 @@ Toggles.prototype.bindDrag = function() { // fired on mouseup and mouseleave events var upLeave = function(e) { - self.el.off('mousemove'); - self.els.slide.off('mouseleave'); - self.els.blob.off('mouseup'); + self.el.off('mousemove touchmove'); + self.els.slide.off('mouseleave touchend'); + self.els.blob.off('mouseup touchend'); if (!diff && self.opts['click'] && e.type !== 'mouseleave') { self.toggle(); @@ -214,17 +214,24 @@ Toggles.prototype.bindDrag = function() { var wh = -self.w + self.h; - self.els.blob.on('mousedown', function(e) { + self.els.blob.on('mousedown touchstart', function(e) { // reset diff diff = 0; - self.els.blob.off('mouseup'); - self.els.slide.off('mouseleave'); - var cursor = e.pageX; + self.els.blob.off('mouseup touchend'); + self.els.slide.off('mouseleave touchend'); + var cursor = e.pageX + if (cursor === undefined) { + cursor = e.originalEvent.touches[0].pageX; + } - self.el.on('mousemove', self.els.blob, function(e) { - diff = e.pageX - cursor; + self.el.on('mousemove touchmove', self.els.blob, function (e) { + var currentCursor = e.pageX; + if (currentCursor === undefined) { + currentCursor = e.originalEvent.touches[0].pageX; + } + diff = currentCursor - cursor; var marginLeft; @@ -247,8 +254,8 @@ Toggles.prototype.bindDrag = function() { self.els.inner.css('margin-left',marginLeft); }); - self.els.blob.on('mouseup', upLeave); - self.els.slide.on('mouseleave', upLeave); + self.els.blob.on('mouseup touchend', upLeave); + self.els.slide.on('mouseleave touchend', upLeave); }); }; diff --git a/toggles.min.js b/toggles.min.js index 0c15d68..bda9677 100644 --- a/toggles.min.js +++ b/toggles.min.js @@ -3,9 +3,4 @@ Copyright 2012 - 2015 Simon Tabor - MIT License https://github.com/simontabor/jquery-toggles / http://simontabor.com/labs/toggles */ -(function(h){function l(f){var k=h.Toggles=function(b,a){if("boolean"===typeof a&&b.data("toggles"))b.data("toggles").toggle(a);else{for(var c="on drag click width height animate easing type checkbox".split(" "),e={},d=0;d')}var a=this.c.height(),c=this.c.width();a||this.c.height(a=this.b.height);c||this.c.width(c=this.b.width);this.g=a;this.i=c;this.a={f:b("slide"),e:b("inner"),on:b("on"),off:b("off"),d:b("blob")};var e=a/2,d=c-e,g=this.h;this.a.on.css({height:a,width:d,textIndent:g?"":-e,lineHeight:a+ -"px"}).html(this.b.text.on);this.a.off.css({height:a,width:d,marginLeft:g?"":-e,textIndent:g?"":e,lineHeight:a+"px"}).html(this.b.text.off);this.a.d.css({height:a,width:a,marginLeft:-e});this.a.e.css({width:2*c-a,marginLeft:g||this.active?0:-c+a});this.h&&(this.a.f.addClass("toggle-select"),this.c.css("width",2*d),this.a.d.hide());this.a.e.append(this.a.on,this.a.d,this.a.off);this.a.f.html(this.a.e);this.c.html(this.a.f)};k.prototype.k=function(){function b(b){b.target===a.a.d[0]&&a.b.drag||a.toggle()} -var a=this;if(a.b.click&&(!a.b.clicker||!a.b.clicker.has(a.c).length))a.c.on("click",b);if(a.b.clicker)a.b.clicker.on("click",b);a.b.drag&&!a.h&&a.j()};k.prototype.j=function(){function b(b){a.c.off("mousemove");a.a.f.off("mouseleave");a.a.d.off("mouseup");!c&&a.b.click&&"mouseleave"!==b.type?a.toggle():(a.active?c<-e:c>e)?a.toggle():a.a.e.stop().animate({marginLeft:a.active?0:-a.i+a.g},a.b.animate/2)}var a=this,c,e=(a.i-a.g)/4,d=-a.i+a.g;a.a.d.on("mousedown",function(e){c=0;a.a.d.off("mouseup"); -a.a.f.off("mouseleave");var f=e.pageX;a.c.on("mousemove",a.a.d,function(b){c=b.pageX-f;a.active?(b=c,0c&&(b=d),c>-d&&(b=0));a.a.e.css("margin-left",b)});a.a.d.on("mouseup",b);a.a.f.on("mouseleave",b)})};k.prototype.toggle=function(b,a,c){this.active!==b&&(b=this.active=!this.active,this.c.data("toggle-active",b),this.a.off.toggleClass("active",!b),this.a.on.toggleClass("active",b),this.l.prop("checked",b),c||this.c.trigger(this.b.event,b),this.h||(c=b?0:-this.i+this.g, -this.a.e.stop().animate({marginLeft:c},a?0:this.b.animate)))};f.fn.toggles=function(b){return this.each(function(){new k(f(this),b)})}}"function"===typeof define&&define.amd?define(["jquery"],l):l(h.jQuery||h.Zepto||h.ender||h.$||$)})(this); +!function(e){var t=function(t){var o=e.Toggles=function(e,o){var l=this;if("boolean"==typeof o&&e.data("toggles"))return void e.data("toggles").toggle(o);for(var i=["on","drag","click","width","height","animate","easing","type","checkbox"],n={},s=0;s')};e.els={slide:i("slide"),inner:i("inner"),on:i("on"),off:i("off"),blob:i("blob")};var n=o/2,s=l-n,c=e.selectType;e.els.on.css({height:o,width:s,textIndent:c?"":-n,lineHeight:o+"px"}).html(e.opts.text.on),e.els.off.css({height:o,width:s,marginLeft:c?"":-n,textIndent:c?"":n,lineHeight:o+"px"}).html(e.opts.text.off),e.els.blob.css({height:o,width:o,marginLeft:-n}),e.els.inner.css({width:2*l-o,marginLeft:c||e.active?0:-l+o}),e.selectType&&(e.els.slide.addClass("toggle-select"),e.el.css("width",2*s),e.els.blob.hide()),e.els.inner.append(e.els.on,e.els.blob,e.els.off),e.els.slide.html(e.els.inner),e.el.html(e.els.slide)},o.prototype.bindEvents=function(){var e=this,t=function(t){t.target===e.els.blob[0]&&e.opts.drag||e.toggle()};!e.opts.click||e.opts.clicker&&e.opts.clicker.has(e.el).length||e.el.on("click",t),e.opts.clicker&&e.opts.clicker.on("click",t),e.opts.drag&&!e.selectType&&e.bindDrag()},o.prototype.bindDrag=function(){var e,t=this,o=(t.w-t.h)/4,l=function(l){if(t.el.off("mousemove touchmove"),t.els.slide.off("mouseleave touchend"),t.els.blob.off("mouseup touchend"),!e&&t.opts.click&&"mouseleave"!==l.type)return void t.toggle();var i=t.active?-o>e:e>o;i?t.toggle():t.els.inner.stop().animate({marginLeft:t.active?0:-t.w+t.h},t.opts.animate/2)},i=-t.w+t.h;t.els.blob.on("mousedown touchstart",function(o){e=0,t.els.blob.off("mouseup touchend"),t.els.slide.off("mouseleave touchend");var n=o.pageX;void 0===n&&(n=o.originalEvent.touches[0].pageX),t.el.on("mousemove touchmove",t.els.blob,function(o){var l=o.pageX;void 0===l&&(l=o.originalEvent.touches[0].pageX),e=l-n;var s;t.active?(s=e,e>0&&(s=0),i>e&&(s=i)):(s=e+i,0>e&&(s=i),e>-i&&(s=0)),t.els.inner.css("margin-left",s)}),t.els.blob.on("mouseup touchend",l),t.els.slide.on("mouseleave touchend",l)})},o.prototype.toggle=function(e,t,o){var l=this;if(l.active!==e){var i=l.active=!l.active;if(l.el.data("toggle-active",i),l.els.off.toggleClass("active",!i),l.els.on.toggleClass("active",i),l.checkbox.prop("checked",i),o||l.el.trigger(l.opts.event,i),!l.selectType){var n=i?0:-l.w+l.h;l.els.inner.stop().animate({marginLeft:n},t?0:l.opts.animate)}}},t.fn.toggles=function(e){return this.each(function(){new o(t(this),e)})}};"function"==typeof define&&define.amd?define(["jquery"],t):t(e.jQuery||e.Zepto||e.ender||e.$||$)}(this); \ No newline at end of file