From e0e88dcec1b986106dea8a390a85d0ae9994e83a Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Fri, 14 Sep 2018 15:20:10 -0500 Subject: [PATCH 1/6] Add onDrag function which returns percent completion; Close #2 --- README.md | 3 +++ package.json | 2 +- superslide-std.js | 25 ++++++++++++++++++++++++- superslide-std.min.js | 2 +- 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 98cb6c5..caccd6d 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,9 @@ Executed before the menu begins to close - `onClose` (`callback`): Executed as soon as the menu has closed +- `onDrag` (`completion`, `callback`): +Executed as the menu is being dragged; returns percentage completion + # Methods - `OSREC.superslide.open()` diff --git a/package.json b/package.json index a7250e8..f28fafb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "superslide.js", - "version": "1.0.0", + "version": "1.0.1", "description": "A lightweight, slick sliding menu for your next PWA by OSREC Technologies (https://osrec.co.uk)", "main": "superslide-std.js", "scripts": { diff --git a/superslide-std.js b/superslide-std.js index 4e3f7a3..c45f532 100755 --- a/superslide-std.js +++ b/superslide-std.js @@ -37,6 +37,7 @@ OSREC.superslide = function (p) { me.p.onOpen = typeof me.p.onOpen == 'function' ? me.p.onOpen : function () {}; me.p.beforeClose = typeof me.p.beforeClose == 'function' ? me.p.beforeClose : function () {}; me.p.onClose = typeof me.p.onClose == 'function' ? me.p.onClose : function () {}; + me.p.onDrag = typeof me.p.onDrag == 'function' ? me.p.onDrag : function () {}; me.body = document; me.p.isOpen = false; @@ -101,6 +102,7 @@ OSREC.superslide = function (p) { var sliderStartPosition = me.p.isOpen ? me.p.slider.offsetWidth : 0; var translation = 0; var delta = 0; + var completion = 0; var touchMoveFunction = function (e) { @@ -114,6 +116,16 @@ OSREC.superslide = function (p) { translation = 0; } + if (delta >= me.p.slider.offsetWidth) { + completion = 1; + } else if (delta <= 0) { + completion = 0; + } else { + completion = delta / me.p.slider.offsetWidth; + } + + me.p.onDrag(completion); + me.p.slider.style.transform = `translate3d(${translation}px, 0, 0)`; if (me.p.slideContent) { me.p.content.style.transform = me.p.slider.style.transform; @@ -167,6 +179,7 @@ OSREC.superslide = function (p) { var sliderStartPosition = me.p.isOpen ? -me.p.slider.offsetWidth : 0; var translation = 0; var delta = 0; + var completion = 0; var touchMoveFunction = function (e) { @@ -180,6 +193,16 @@ OSREC.superslide = function (p) { translation = 0; } + if ((delta * -1) >= me.p.slider.offsetWidth) { + completion = 1; + } else if ((delta * -1) <= 0) { + completion = 0; + } else { + completion = (delta * -1) / me.p.slider.offsetWidth; + } + + me.p.onDrag(completion); + me.p.slider.style.transform = `translate3d(${translation}px, 0, 0)`; if (me.p.slideContent) { me.p.content.style.transform = me.p.slider.style.transform; @@ -401,4 +424,4 @@ if (hasDefine) { // Assign to the global object // This makes sure that the object really is assigned to the global scope root.OSREC = OSREC; -} \ No newline at end of file +} diff --git a/superslide-std.min.js b/superslide-std.min.js index 1e76562..9f96a72 100644 --- a/superslide-std.min.js +++ b/superslide-std.min.js @@ -1 +1 @@ -"use strict";var OSREC=OSREC||{};OSREC.superslide=function(e){var t=this;t.p=e,t.p.animation=t.p.animation||"slideLeft",t.p.duration=t.p.duration||.5,t.p.allowDrag=void 0===t.p.allowDrag||t.p.allowDrag,t.p.slideContent=void 0===t.p.slideContent||t.p.slideContent,t.p.allowContentInteraction=void 0!==t.p.allowContentInteraction&&t.p.allowContentInteraction,t.p.closeOnBlur=void 0!==t.p.closeOnBlur&&t.p.closeOnBlur,t.p.width=t.p.width||"70vw",t.p.height=t.p.height||"100px",t.p.dragThreshold=t.p.dragThreshold||70,t.p.openThreshold=t.p.openThreshold||70,t.p.closeThreshold=t.p.closeThreshold||20,t.p.beforeOpen="function"==typeof t.p.beforeOpen?t.p.beforeOpen:function(){},t.p.onOpen="function"==typeof t.p.onOpen?t.p.onOpen:function(){},t.p.beforeClose="function"==typeof t.p.beforeClose?t.p.beforeClose:function(){},t.p.onClose="function"==typeof t.p.onClose?t.p.onClose:function(){},t.body=document,t.p.isOpen=!1;t.p.cssTransitionEndEvent=function(){var e,t=document.createElement("dummy"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]}(),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}();var n=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(t.p.sliderTransformClose="",t.p.contentTransformClose="",t.p.animation){case"slideLeft":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: -${t.p.width};`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var n=e.changedTouches[0].clientX;if(t.p.isOpen||!(n>t.p.dragThreshold)){t.p.content.style.transition="none",t.p.slider.style.transition="none";var o=t.p.isOpen?t.p.slider.offsetWidth:0,i=0,s=0,r=function(e){s=e.changedTouches[0].clientX-n,(i=o+s)>t.p.slider.offsetWidth&&(i=t.p.slider.offsetWidth),i<0&&(i=0),t.p.slider.style.transform=`translate3d(${i}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},p=function(e){t.body.removeEventListener("touchmove",r),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&s>=t.p.openThreshold?t.open(!0):t.p.isOpen&&s<-t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",p)};t.body.addEventListener("touchend",p),t.body.addEventListener("touchmove",r)}};break;case"slideRight":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: 100%;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(-${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(-${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var o=e.changedTouches[0].clientX;if(t.p.isOpen||!(o0&&(s=0),t.p.slider.style.transform=`translate3d(${s}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},l=function(e){t.body.removeEventListener("touchmove",p),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&r<=-t.p.openThreshold?t.open(!0):t.p.isOpen&&r>t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",l)};t.body.addEventListener("touchend",l),t.body.addEventListener("touchmove",p)}};break;case"slideTop":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: -${t.p.height}; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,${t.p.height},0)`,t.p.contentTransform=`translate3d(0,${t.p.height},0)`,t.p.allowDrag=!1,t.p.touchStartFunction=function(e){};break;case"slideBottom":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: 100vh; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,-${t.p.height},0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(0,-${t.p.height},0)`,t.p.allowDrag=!1}return t.p.closeOnBlurFunction=function(e){e.preventDefault(),t.close.call(t)},t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),t.p.allowDrag&&t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.allowContentInteraction?t.p.contentTouchStartFunction=function(e){}:t.p.contentTouchStartFunction=function(e){e.preventDefault()},t.p.slider.offsetHeight,t.p.slider.style.transition=`${t.p.duration}s`,t.p.content.style["-webkit-tap-highlight-color"]="transparent",t},OSREC.superslide.prototype.open=function(e){var t=this;return!e&&t.p.isOpen?Promise.resolve():new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onOpen(),t.p.isOpen=!0,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.addEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.removeEventListener("touchstart",t.p.touchStartFunction),t.p.content.addEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.addEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeOpen(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransform,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransform)})},OSREC.superslide.prototype.close=function(e){var t=this;return e||t.p.isOpen?new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onClose(),t.p.isOpen=!1,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.removeEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.content.removeEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.removeEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeClose(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransformClose,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var e=this;this.close().then(function(){e.body.removeEventListener("touchstart",e.p.touchStartFunction),e.body=null,e.p.content.removeEventListener("touchstart",e.p.closeOnBlurFunction),e.p.content.removeEventListener("click",e.p.closeOnBlurFunction),e.p.content=null,e.p.slider=null,e.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file +"use strict";var OSREC=OSREC||{};OSREC.superslide=function(p){var me=this;me.p=p,me.p.animation=me.p.animation||"slideLeft",me.p.duration=me.p.duration||.5,me.p.allowDrag=void 0===me.p.allowDrag||me.p.allowDrag,me.p.slideContent=void 0===me.p.slideContent||me.p.slideContent,me.p.allowContentInteraction=void 0!==me.p.allowContentInteraction&&me.p.allowContentInteraction,me.p.closeOnBlur=void 0!==me.p.closeOnBlur&&me.p.closeOnBlur,me.p.width=me.p.width||"70vw",me.p.height=me.p.height||"100px",me.p.dragThreshold=me.p.dragThreshold||70,me.p.openThreshold=me.p.openThreshold||70,me.p.closeThreshold=me.p.closeThreshold||20,me.p.beforeOpen="function"==typeof me.p.beforeOpen?me.p.beforeOpen:function(){},me.p.onOpen="function"==typeof me.p.onOpen?me.p.onOpen:function(){},me.p.beforeClose="function"==typeof me.p.beforeClose?me.p.beforeClose:function(){},me.p.onClose="function"==typeof me.p.onClose?me.p.onClose:function(){},me.p.onDrag="function"==typeof me.p.onDrag?me.p.onDrag:function(){},me.body=document,me.p.isOpen=!1;me.p.cssTransitionEndEvent=function(){var t,el=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(t in transitions)if(void 0!==el.style[t])return transitions[t]}(),function(){function CustomEvent(event,params){params=params||{bubbles:!1,cancelable:!1,detail:void 0};var evt=document.createEvent("CustomEvent");return evt.initCustomEvent(event,params.bubbles,params.cancelable,params.detail),evt}CustomEvent.prototype=window.Event.prototype,window.CustomEvent=CustomEvent}();var clientWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(me.p.sliderTransformClose="",me.p.contentTransformClose="",me.p.animation){case"slideLeft":me.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${me.p.width}; height: 100%; top: 0px; left: -${me.p.width};`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(${me.p.width},0,0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(${me.p.width},0,0)`,me.p.touchStartFunction=function(e){var startX=e.changedTouches[0].clientX;if(me.p.isOpen||!(startX>me.p.dragThreshold)){me.p.content.style.transition="none",me.p.slider.style.transition="none";var sliderStartPosition=me.p.isOpen?me.p.slider.offsetWidth:0,translation=0,delta=0,completion=0,touchMoveFunction=function(e){delta=e.changedTouches[0].clientX-startX,(translation=sliderStartPosition+delta)>me.p.slider.offsetWidth&&(translation=me.p.slider.offsetWidth),translation<0&&(translation=0),completion=delta>=me.p.slider.offsetWidth?1:delta<=0?0:delta/me.p.slider.offsetWidth,me.p.onDrag(completion),me.p.slider.style.transform=`translate3d(${translation}px, 0, 0)`,me.p.slideContent&&(me.p.content.style.transform=me.p.slider.style.transform),me.p.slider.style.opacity=.999},touchEndFunction=function(e){me.body.removeEventListener("touchmove",touchMoveFunction),me.p.slider.style.transition=`${me.p.duration}s`,me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),!me.p.isOpen&&delta>=me.p.openThreshold?me.open(!0):me.p.isOpen&&delta<-me.p.closeThreshold?me.close(!0):me.p.isOpen?me.open(!0):me.close(!0),me.body.removeEventListener("touchend",touchEndFunction)};me.body.addEventListener("touchend",touchEndFunction),me.body.addEventListener("touchmove",touchMoveFunction)}};break;case"slideRight":me.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${me.p.width}; height: 100%; top: 0px; left: 100%;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(-${me.p.width},0,0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(-${me.p.width},0,0)`,me.p.touchStartFunction=function(e){var startX=e.changedTouches[0].clientX;if(me.p.isOpen||!(startX0&&(translation=0),completion=-1*delta>=me.p.slider.offsetWidth?1:-1*delta<=0?0:-1*delta/me.p.slider.offsetWidth,me.p.onDrag(completion),me.p.slider.style.transform=`translate3d(${translation}px, 0, 0)`,me.p.slideContent&&(me.p.content.style.transform=me.p.slider.style.transform),me.p.slider.style.opacity=.999},touchEndFunction=function(e){me.body.removeEventListener("touchmove",touchMoveFunction),me.p.slider.style.transition=`${me.p.duration}s`,me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),!me.p.isOpen&&delta<=-me.p.openThreshold?me.open(!0):me.p.isOpen&&delta>me.p.closeThreshold?me.close(!0):me.p.isOpen?me.open(!0):me.close(!0),me.body.removeEventListener("touchend",touchEndFunction)};me.body.addEventListener("touchend",touchEndFunction),me.body.addEventListener("touchmove",touchMoveFunction)}};break;case"slideTop":me.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${me.p.height}; top: -${me.p.height}; left: 0;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(0,${me.p.height},0)`,me.p.contentTransform=`translate3d(0,${me.p.height},0)`,me.p.allowDrag=!1,me.p.touchStartFunction=function(e){};break;case"slideBottom":me.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${me.p.height}; top: 100vh; left: 0;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(0,-${me.p.height},0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(0,-${me.p.height},0)`,me.p.allowDrag=!1}return me.p.closeOnBlurFunction=function(e){e.preventDefault(),me.close.call(me)},me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),me.p.allowDrag&&me.body.addEventListener("touchstart",me.p.touchStartFunction),me.p.allowContentInteraction?me.p.contentTouchStartFunction=function(e){}:me.p.contentTouchStartFunction=function(e){e.preventDefault()},me.p.slider.offsetHeight,me.p.slider.style.transition=`${me.p.duration}s`,me.p.content.style["-webkit-tap-highlight-color"]="transparent",me},OSREC.superslide.prototype.open=function(doPartialAnimation){var me=this;return!doPartialAnimation&&me.p.isOpen?Promise.resolve():new Promise(function(resolve,reject){var onOpenTransitionEnd=function(e){(e.target||e.srcElement||e.originalTarget)==me.p.slider&&(me.p.onOpen(),me.p.isOpen=!0,me.p.slider.removeEventListener(me.p.cssTransitionEndEvent,onOpenTransitionEnd),me.p.content.addEventListener("touchstart",me.p.contentTouchStartFunction),me.p.closeOnBlur&&(me.body.removeEventListener("touchstart",me.p.touchStartFunction),me.p.content.addEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.addEventListener("click",me.p.closeOnBlurFunction)),resolve())};me.p.beforeOpen(),me.p.slider.addEventListener(me.p.cssTransitionEndEvent,onOpenTransitionEnd),me.p.slider.style.transform=me.p.sliderTransform,me.p.slider.style.opacity=1,me.p.slideContent&&(me.p.content.style.transform=me.p.contentTransform)})},OSREC.superslide.prototype.close=function(doPartialAnimation){var me=this;return doPartialAnimation||me.p.isOpen?new Promise(function(resolve,reject){var onCloseTransitionEnd=function(e){(e.target||e.srcElement||e.originalTarget)==me.p.slider&&(me.p.onClose(),me.p.isOpen=!1,me.p.slider.removeEventListener(me.p.cssTransitionEndEvent,onCloseTransitionEnd),me.p.content.removeEventListener("touchstart",me.p.contentTouchStartFunction),me.p.closeOnBlur&&(me.body.addEventListener("touchstart",me.p.touchStartFunction),me.p.content.removeEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.removeEventListener("click",me.p.closeOnBlurFunction)),resolve())};me.p.beforeClose(),me.p.slider.addEventListener(me.p.cssTransitionEndEvent,onCloseTransitionEnd),me.p.slider.style.transform=me.p.sliderTransformClose,me.p.slider.style.opacity=1,me.p.slideContent&&(me.p.content.style.transform=me.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var me=this;this.close().then(function(){me.body.removeEventListener("touchstart",me.p.touchStartFunction),me.body=null,me.p.content.removeEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.removeEventListener("click",me.p.closeOnBlurFunction),me.p.content=null,me.p.slider=null,me.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file From 15e46f865b2501a5fa05334dbac1de955ac001c3 Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Fri, 14 Sep 2018 18:14:54 -0500 Subject: [PATCH 2/6] Fix onDrag description --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index caccd6d..262566e 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ Executed before the menu begins to close - `onClose` (`callback`): Executed as soon as the menu has closed -- `onDrag` (`completion`, `callback`): +- `onDrag` (`callback`): Executed as the menu is being dragged; returns percentage completion # Methods From 4597bfea9d00f8815ce57c1e69d96a644a7dd7b6 Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Fri, 14 Sep 2018 18:17:51 -0500 Subject: [PATCH 3/6] Change spaces to tabs to stick with original style --- superslide-std.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/superslide-std.js b/superslide-std.js index c45f532..4ce41a2 100755 --- a/superslide-std.js +++ b/superslide-std.js @@ -37,7 +37,7 @@ OSREC.superslide = function (p) { me.p.onOpen = typeof me.p.onOpen == 'function' ? me.p.onOpen : function () {}; me.p.beforeClose = typeof me.p.beforeClose == 'function' ? me.p.beforeClose : function () {}; me.p.onClose = typeof me.p.onClose == 'function' ? me.p.onClose : function () {}; - me.p.onDrag = typeof me.p.onDrag == 'function' ? me.p.onDrag : function () {}; + me.p.onDrag = typeof me.p.onDrag == 'function' ? me.p.onDrag : function () {}; me.body = document; me.p.isOpen = false; @@ -102,7 +102,7 @@ OSREC.superslide = function (p) { var sliderStartPosition = me.p.isOpen ? me.p.slider.offsetWidth : 0; var translation = 0; var delta = 0; - var completion = 0; + var completion = 0; var touchMoveFunction = function (e) { @@ -116,15 +116,15 @@ OSREC.superslide = function (p) { translation = 0; } - if (delta >= me.p.slider.offsetWidth) { - completion = 1; - } else if (delta <= 0) { - completion = 0; - } else { - completion = delta / me.p.slider.offsetWidth; - } + if (delta >= me.p.slider.offsetWidth) { + completion = 1; + } else if (delta <= 0) { + completion = 0; + } else { + completion = delta / me.p.slider.offsetWidth; + } - me.p.onDrag(completion); + me.p.onDrag(completion); me.p.slider.style.transform = `translate3d(${translation}px, 0, 0)`; if (me.p.slideContent) { @@ -179,7 +179,7 @@ OSREC.superslide = function (p) { var sliderStartPosition = me.p.isOpen ? -me.p.slider.offsetWidth : 0; var translation = 0; var delta = 0; - var completion = 0; + var completion = 0; var touchMoveFunction = function (e) { @@ -193,15 +193,15 @@ OSREC.superslide = function (p) { translation = 0; } - if ((delta * -1) >= me.p.slider.offsetWidth) { - completion = 1; - } else if ((delta * -1) <= 0) { - completion = 0; - } else { - completion = (delta * -1) / me.p.slider.offsetWidth; - } + if ((delta * -1) >= me.p.slider.offsetWidth) { + completion = 1; + } else if ((delta * -1) <= 0) { + completion = 0; + } else { + completion = (delta * -1) / me.p.slider.offsetWidth; + } - me.p.onDrag(completion); + me.p.onDrag(completion); me.p.slider.style.transform = `translate3d(${translation}px, 0, 0)`; if (me.p.slideContent) { From 09abd9c7215c287d619a4086a35b8ee813b2a209 Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Sat, 15 Sep 2018 11:28:22 -0500 Subject: [PATCH 4/6] Move me.p.slider.offsetWidth in to a variable; Prevent reflow on each resize event --- superslide-std.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/superslide-std.js b/superslide-std.js index 4ce41a2..49b94df 100755 --- a/superslide-std.js +++ b/superslide-std.js @@ -99,7 +99,8 @@ OSREC.superslide = function (p) { me.p.content.style.transition = 'none'; me.p.slider.style.transition = 'none'; - var sliderStartPosition = me.p.isOpen ? me.p.slider.offsetWidth : 0; + var sliderOffsetWidth = me.p.slider.offsetWidth; + var sliderStartPosition = me.p.isOpen ? sliderOffsetWidth : 0; var translation = 0; var delta = 0; var completion = 0; @@ -109,19 +110,19 @@ OSREC.superslide = function (p) { delta = e.changedTouches[0].clientX - startX; translation = sliderStartPosition + delta; - if (translation > me.p.slider.offsetWidth) { - translation = me.p.slider.offsetWidth; + if (translation > sliderOffsetWidth) { + translation = sliderOffsetWidth; } if (translation < 0) { translation = 0; } - if (delta >= me.p.slider.offsetWidth) { + if (delta >= sliderOffsetWidth) { completion = 1; } else if (delta <= 0) { completion = 0; } else { - completion = delta / me.p.slider.offsetWidth; + completion = delta / sliderOffsetWidth; } me.p.onDrag(completion); @@ -176,7 +177,8 @@ OSREC.superslide = function (p) { me.p.content.style.transition = 'none'; me.p.slider.style.transition = 'none'; - var sliderStartPosition = me.p.isOpen ? -me.p.slider.offsetWidth : 0; + var sliderOffsetWidth = me.p.sliderOffsetWidth; + var sliderStartPosition = me.p.isOpen ? -sliderOffsetWidth : 0; var translation = 0; var delta = 0; var completion = 0; @@ -186,19 +188,19 @@ OSREC.superslide = function (p) { delta = e.changedTouches[0].clientX - startX; translation = sliderStartPosition + delta; - if (translation < -me.p.slider.offsetWidth) { - translation = -me.p.slider.offsetWidth; + if (translation < -sliderOffsetWidth) { + translation = -sliderOffsetWidth; } if (translation > 0) { translation = 0; } - if ((delta * -1) >= me.p.slider.offsetWidth) { + if ((delta * -1) >= sliderOffsetWidth) { completion = 1; } else if ((delta * -1) <= 0) { completion = 0; } else { - completion = (delta * -1) / me.p.slider.offsetWidth; + completion = (delta * -1) / sliderOffsetWidth; } me.p.onDrag(completion); From 7822b305784822a9bc8b37f7d1d030b7dcc27b3a Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Sat, 15 Sep 2018 11:32:56 -0500 Subject: [PATCH 5/6] Update compressed script --- superslide-std.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superslide-std.min.js b/superslide-std.min.js index 9f96a72..28fd060 100644 --- a/superslide-std.min.js +++ b/superslide-std.min.js @@ -1 +1 @@ -"use strict";var OSREC=OSREC||{};OSREC.superslide=function(p){var me=this;me.p=p,me.p.animation=me.p.animation||"slideLeft",me.p.duration=me.p.duration||.5,me.p.allowDrag=void 0===me.p.allowDrag||me.p.allowDrag,me.p.slideContent=void 0===me.p.slideContent||me.p.slideContent,me.p.allowContentInteraction=void 0!==me.p.allowContentInteraction&&me.p.allowContentInteraction,me.p.closeOnBlur=void 0!==me.p.closeOnBlur&&me.p.closeOnBlur,me.p.width=me.p.width||"70vw",me.p.height=me.p.height||"100px",me.p.dragThreshold=me.p.dragThreshold||70,me.p.openThreshold=me.p.openThreshold||70,me.p.closeThreshold=me.p.closeThreshold||20,me.p.beforeOpen="function"==typeof me.p.beforeOpen?me.p.beforeOpen:function(){},me.p.onOpen="function"==typeof me.p.onOpen?me.p.onOpen:function(){},me.p.beforeClose="function"==typeof me.p.beforeClose?me.p.beforeClose:function(){},me.p.onClose="function"==typeof me.p.onClose?me.p.onClose:function(){},me.p.onDrag="function"==typeof me.p.onDrag?me.p.onDrag:function(){},me.body=document,me.p.isOpen=!1;me.p.cssTransitionEndEvent=function(){var t,el=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(t in transitions)if(void 0!==el.style[t])return transitions[t]}(),function(){function CustomEvent(event,params){params=params||{bubbles:!1,cancelable:!1,detail:void 0};var evt=document.createEvent("CustomEvent");return evt.initCustomEvent(event,params.bubbles,params.cancelable,params.detail),evt}CustomEvent.prototype=window.Event.prototype,window.CustomEvent=CustomEvent}();var clientWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(me.p.sliderTransformClose="",me.p.contentTransformClose="",me.p.animation){case"slideLeft":me.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${me.p.width}; height: 100%; top: 0px; left: -${me.p.width};`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(${me.p.width},0,0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(${me.p.width},0,0)`,me.p.touchStartFunction=function(e){var startX=e.changedTouches[0].clientX;if(me.p.isOpen||!(startX>me.p.dragThreshold)){me.p.content.style.transition="none",me.p.slider.style.transition="none";var sliderStartPosition=me.p.isOpen?me.p.slider.offsetWidth:0,translation=0,delta=0,completion=0,touchMoveFunction=function(e){delta=e.changedTouches[0].clientX-startX,(translation=sliderStartPosition+delta)>me.p.slider.offsetWidth&&(translation=me.p.slider.offsetWidth),translation<0&&(translation=0),completion=delta>=me.p.slider.offsetWidth?1:delta<=0?0:delta/me.p.slider.offsetWidth,me.p.onDrag(completion),me.p.slider.style.transform=`translate3d(${translation}px, 0, 0)`,me.p.slideContent&&(me.p.content.style.transform=me.p.slider.style.transform),me.p.slider.style.opacity=.999},touchEndFunction=function(e){me.body.removeEventListener("touchmove",touchMoveFunction),me.p.slider.style.transition=`${me.p.duration}s`,me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),!me.p.isOpen&&delta>=me.p.openThreshold?me.open(!0):me.p.isOpen&&delta<-me.p.closeThreshold?me.close(!0):me.p.isOpen?me.open(!0):me.close(!0),me.body.removeEventListener("touchend",touchEndFunction)};me.body.addEventListener("touchend",touchEndFunction),me.body.addEventListener("touchmove",touchMoveFunction)}};break;case"slideRight":me.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${me.p.width}; height: 100%; top: 0px; left: 100%;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(-${me.p.width},0,0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(-${me.p.width},0,0)`,me.p.touchStartFunction=function(e){var startX=e.changedTouches[0].clientX;if(me.p.isOpen||!(startX0&&(translation=0),completion=-1*delta>=me.p.slider.offsetWidth?1:-1*delta<=0?0:-1*delta/me.p.slider.offsetWidth,me.p.onDrag(completion),me.p.slider.style.transform=`translate3d(${translation}px, 0, 0)`,me.p.slideContent&&(me.p.content.style.transform=me.p.slider.style.transform),me.p.slider.style.opacity=.999},touchEndFunction=function(e){me.body.removeEventListener("touchmove",touchMoveFunction),me.p.slider.style.transition=`${me.p.duration}s`,me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),!me.p.isOpen&&delta<=-me.p.openThreshold?me.open(!0):me.p.isOpen&&delta>me.p.closeThreshold?me.close(!0):me.p.isOpen?me.open(!0):me.close(!0),me.body.removeEventListener("touchend",touchEndFunction)};me.body.addEventListener("touchend",touchEndFunction),me.body.addEventListener("touchmove",touchMoveFunction)}};break;case"slideTop":me.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${me.p.height}; top: -${me.p.height}; left: 0;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(0,${me.p.height},0)`,me.p.contentTransform=`translate3d(0,${me.p.height},0)`,me.p.allowDrag=!1,me.p.touchStartFunction=function(e){};break;case"slideBottom":me.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${me.p.height}; top: 100vh; left: 0;`,me.p.slider.style.transition=`${me.p.duration}s`,me.p.sliderTransform=`translate3d(0,-${me.p.height},0)`,me.p.slider.parentNode.style.overflowX="hidden",me.p.contentTransform=`translate3d(0,-${me.p.height},0)`,me.p.allowDrag=!1}return me.p.closeOnBlurFunction=function(e){e.preventDefault(),me.close.call(me)},me.p.slideContent&&(me.p.content.style.transition=`${me.p.duration}s`),me.p.allowDrag&&me.body.addEventListener("touchstart",me.p.touchStartFunction),me.p.allowContentInteraction?me.p.contentTouchStartFunction=function(e){}:me.p.contentTouchStartFunction=function(e){e.preventDefault()},me.p.slider.offsetHeight,me.p.slider.style.transition=`${me.p.duration}s`,me.p.content.style["-webkit-tap-highlight-color"]="transparent",me},OSREC.superslide.prototype.open=function(doPartialAnimation){var me=this;return!doPartialAnimation&&me.p.isOpen?Promise.resolve():new Promise(function(resolve,reject){var onOpenTransitionEnd=function(e){(e.target||e.srcElement||e.originalTarget)==me.p.slider&&(me.p.onOpen(),me.p.isOpen=!0,me.p.slider.removeEventListener(me.p.cssTransitionEndEvent,onOpenTransitionEnd),me.p.content.addEventListener("touchstart",me.p.contentTouchStartFunction),me.p.closeOnBlur&&(me.body.removeEventListener("touchstart",me.p.touchStartFunction),me.p.content.addEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.addEventListener("click",me.p.closeOnBlurFunction)),resolve())};me.p.beforeOpen(),me.p.slider.addEventListener(me.p.cssTransitionEndEvent,onOpenTransitionEnd),me.p.slider.style.transform=me.p.sliderTransform,me.p.slider.style.opacity=1,me.p.slideContent&&(me.p.content.style.transform=me.p.contentTransform)})},OSREC.superslide.prototype.close=function(doPartialAnimation){var me=this;return doPartialAnimation||me.p.isOpen?new Promise(function(resolve,reject){var onCloseTransitionEnd=function(e){(e.target||e.srcElement||e.originalTarget)==me.p.slider&&(me.p.onClose(),me.p.isOpen=!1,me.p.slider.removeEventListener(me.p.cssTransitionEndEvent,onCloseTransitionEnd),me.p.content.removeEventListener("touchstart",me.p.contentTouchStartFunction),me.p.closeOnBlur&&(me.body.addEventListener("touchstart",me.p.touchStartFunction),me.p.content.removeEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.removeEventListener("click",me.p.closeOnBlurFunction)),resolve())};me.p.beforeClose(),me.p.slider.addEventListener(me.p.cssTransitionEndEvent,onCloseTransitionEnd),me.p.slider.style.transform=me.p.sliderTransformClose,me.p.slider.style.opacity=1,me.p.slideContent&&(me.p.content.style.transform=me.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var me=this;this.close().then(function(){me.body.removeEventListener("touchstart",me.p.touchStartFunction),me.body=null,me.p.content.removeEventListener("touchstart",me.p.closeOnBlurFunction),me.p.content.removeEventListener("click",me.p.closeOnBlurFunction),me.p.content=null,me.p.slider=null,me.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file +"use strict";var OSREC=OSREC||{};OSREC.superslide=function(e){var t=this;t.p=e,t.p.animation=t.p.animation||"slideLeft",t.p.duration=t.p.duration||.5,t.p.allowDrag=void 0===t.p.allowDrag||t.p.allowDrag,t.p.slideContent=void 0===t.p.slideContent||t.p.slideContent,t.p.allowContentInteraction=void 0!==t.p.allowContentInteraction&&t.p.allowContentInteraction,t.p.closeOnBlur=void 0!==t.p.closeOnBlur&&t.p.closeOnBlur,t.p.width=t.p.width||"70vw",t.p.height=t.p.height||"100px",t.p.dragThreshold=t.p.dragThreshold||70,t.p.openThreshold=t.p.openThreshold||70,t.p.closeThreshold=t.p.closeThreshold||20,t.p.beforeOpen="function"==typeof t.p.beforeOpen?t.p.beforeOpen:function(){},t.p.onOpen="function"==typeof t.p.onOpen?t.p.onOpen:function(){},t.p.beforeClose="function"==typeof t.p.beforeClose?t.p.beforeClose:function(){},t.p.onClose="function"==typeof t.p.onClose?t.p.onClose:function(){},t.p.onDrag="function"==typeof t.p.onDrag?t.p.onDrag:function(){},t.body=document,t.p.isOpen=!1;t.p.cssTransitionEndEvent=function(){var e,t=document.createElement("dummy"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]}(),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}();var n=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(t.p.sliderTransformClose="",t.p.contentTransformClose="",t.p.animation){case"slideLeft":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: -${t.p.width};`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var n=e.changedTouches[0].clientX;if(t.p.isOpen||!(n>t.p.dragThreshold)){t.p.content.style.transition="none",t.p.slider.style.transition="none";var o=t.p.slider.offsetWidth,i=t.p.isOpen?o:0,s=0,r=0,p=0,l=function(e){r=e.changedTouches[0].clientX-n,(s=i+r)>o&&(s=o),s<0&&(s=0),p=r>=o?1:r<=0?0:r/o,t.p.onDrag(p),t.p.slider.style.transform=`translate3d(${s}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},d=function(e){t.body.removeEventListener("touchmove",l),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&r>=t.p.openThreshold?t.open(!0):t.p.isOpen&&r<-t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",d)};t.body.addEventListener("touchend",d),t.body.addEventListener("touchmove",l)}};break;case"slideRight":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: 100%;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(-${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(-${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var o=e.changedTouches[0].clientX;if(t.p.isOpen||!(o0&&(r=0),l=-1*p>=i?1:-1*p<=0?0:-1*p/i,t.p.onDrag(l),t.p.slider.style.transform=`translate3d(${r}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},a=function(e){t.body.removeEventListener("touchmove",d),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&p<=-t.p.openThreshold?t.open(!0):t.p.isOpen&&p>t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",a)};t.body.addEventListener("touchend",a),t.body.addEventListener("touchmove",d)}};break;case"slideTop":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: -${t.p.height}; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,${t.p.height},0)`,t.p.contentTransform=`translate3d(0,${t.p.height},0)`,t.p.allowDrag=!1,t.p.touchStartFunction=function(e){};break;case"slideBottom":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: 100vh; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,-${t.p.height},0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(0,-${t.p.height},0)`,t.p.allowDrag=!1}return t.p.closeOnBlurFunction=function(e){e.preventDefault(),t.close.call(t)},t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),t.p.allowDrag&&t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.allowContentInteraction?t.p.contentTouchStartFunction=function(e){}:t.p.contentTouchStartFunction=function(e){e.preventDefault()},t.p.slider.offsetHeight,t.p.slider.style.transition=`${t.p.duration}s`,t.p.content.style["-webkit-tap-highlight-color"]="transparent",t},OSREC.superslide.prototype.open=function(e){var t=this;return!e&&t.p.isOpen?Promise.resolve():new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onOpen(),t.p.isOpen=!0,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.addEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.removeEventListener("touchstart",t.p.touchStartFunction),t.p.content.addEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.addEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeOpen(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransform,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransform)})},OSREC.superslide.prototype.close=function(e){var t=this;return e||t.p.isOpen?new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onClose(),t.p.isOpen=!1,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.removeEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.content.removeEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.removeEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeClose(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransformClose,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var e=this;this.close().then(function(){e.body.removeEventListener("touchstart",e.p.touchStartFunction),e.body=null,e.p.content.removeEventListener("touchstart",e.p.closeOnBlurFunction),e.p.content.removeEventListener("click",e.p.closeOnBlurFunction),e.p.content=null,e.p.slider=null,e.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file From 0a3f51c113737e8727f8cb50a35fa491abf8b588 Mon Sep 17 00:00:00 2001 From: Jacob Bearce Date: Sat, 15 Sep 2018 11:46:42 -0500 Subject: [PATCH 6/6] Fix sliderOffsetWidth variable in slideRight transition --- superslide-std.js | 2 +- superslide-std.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/superslide-std.js b/superslide-std.js index 49b94df..c6645c2 100755 --- a/superslide-std.js +++ b/superslide-std.js @@ -177,7 +177,7 @@ OSREC.superslide = function (p) { me.p.content.style.transition = 'none'; me.p.slider.style.transition = 'none'; - var sliderOffsetWidth = me.p.sliderOffsetWidth; + var sliderOffsetWidth = me.p.slider.offsetWidth; var sliderStartPosition = me.p.isOpen ? -sliderOffsetWidth : 0; var translation = 0; var delta = 0; diff --git a/superslide-std.min.js b/superslide-std.min.js index 28fd060..b363abb 100644 --- a/superslide-std.min.js +++ b/superslide-std.min.js @@ -1 +1 @@ -"use strict";var OSREC=OSREC||{};OSREC.superslide=function(e){var t=this;t.p=e,t.p.animation=t.p.animation||"slideLeft",t.p.duration=t.p.duration||.5,t.p.allowDrag=void 0===t.p.allowDrag||t.p.allowDrag,t.p.slideContent=void 0===t.p.slideContent||t.p.slideContent,t.p.allowContentInteraction=void 0!==t.p.allowContentInteraction&&t.p.allowContentInteraction,t.p.closeOnBlur=void 0!==t.p.closeOnBlur&&t.p.closeOnBlur,t.p.width=t.p.width||"70vw",t.p.height=t.p.height||"100px",t.p.dragThreshold=t.p.dragThreshold||70,t.p.openThreshold=t.p.openThreshold||70,t.p.closeThreshold=t.p.closeThreshold||20,t.p.beforeOpen="function"==typeof t.p.beforeOpen?t.p.beforeOpen:function(){},t.p.onOpen="function"==typeof t.p.onOpen?t.p.onOpen:function(){},t.p.beforeClose="function"==typeof t.p.beforeClose?t.p.beforeClose:function(){},t.p.onClose="function"==typeof t.p.onClose?t.p.onClose:function(){},t.p.onDrag="function"==typeof t.p.onDrag?t.p.onDrag:function(){},t.body=document,t.p.isOpen=!1;t.p.cssTransitionEndEvent=function(){var e,t=document.createElement("dummy"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]}(),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}();var n=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(t.p.sliderTransformClose="",t.p.contentTransformClose="",t.p.animation){case"slideLeft":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: -${t.p.width};`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var n=e.changedTouches[0].clientX;if(t.p.isOpen||!(n>t.p.dragThreshold)){t.p.content.style.transition="none",t.p.slider.style.transition="none";var o=t.p.slider.offsetWidth,i=t.p.isOpen?o:0,s=0,r=0,p=0,l=function(e){r=e.changedTouches[0].clientX-n,(s=i+r)>o&&(s=o),s<0&&(s=0),p=r>=o?1:r<=0?0:r/o,t.p.onDrag(p),t.p.slider.style.transform=`translate3d(${s}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},d=function(e){t.body.removeEventListener("touchmove",l),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&r>=t.p.openThreshold?t.open(!0):t.p.isOpen&&r<-t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",d)};t.body.addEventListener("touchend",d),t.body.addEventListener("touchmove",l)}};break;case"slideRight":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: 100%;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(-${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(-${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var o=e.changedTouches[0].clientX;if(t.p.isOpen||!(o0&&(r=0),l=-1*p>=i?1:-1*p<=0?0:-1*p/i,t.p.onDrag(l),t.p.slider.style.transform=`translate3d(${r}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},a=function(e){t.body.removeEventListener("touchmove",d),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&p<=-t.p.openThreshold?t.open(!0):t.p.isOpen&&p>t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",a)};t.body.addEventListener("touchend",a),t.body.addEventListener("touchmove",d)}};break;case"slideTop":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: -${t.p.height}; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,${t.p.height},0)`,t.p.contentTransform=`translate3d(0,${t.p.height},0)`,t.p.allowDrag=!1,t.p.touchStartFunction=function(e){};break;case"slideBottom":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: 100vh; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,-${t.p.height},0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(0,-${t.p.height},0)`,t.p.allowDrag=!1}return t.p.closeOnBlurFunction=function(e){e.preventDefault(),t.close.call(t)},t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),t.p.allowDrag&&t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.allowContentInteraction?t.p.contentTouchStartFunction=function(e){}:t.p.contentTouchStartFunction=function(e){e.preventDefault()},t.p.slider.offsetHeight,t.p.slider.style.transition=`${t.p.duration}s`,t.p.content.style["-webkit-tap-highlight-color"]="transparent",t},OSREC.superslide.prototype.open=function(e){var t=this;return!e&&t.p.isOpen?Promise.resolve():new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onOpen(),t.p.isOpen=!0,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.addEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.removeEventListener("touchstart",t.p.touchStartFunction),t.p.content.addEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.addEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeOpen(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransform,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransform)})},OSREC.superslide.prototype.close=function(e){var t=this;return e||t.p.isOpen?new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onClose(),t.p.isOpen=!1,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.removeEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.content.removeEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.removeEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeClose(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransformClose,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var e=this;this.close().then(function(){e.body.removeEventListener("touchstart",e.p.touchStartFunction),e.body=null,e.p.content.removeEventListener("touchstart",e.p.closeOnBlurFunction),e.p.content.removeEventListener("click",e.p.closeOnBlurFunction),e.p.content=null,e.p.slider=null,e.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file +"use strict";var OSREC=OSREC||{};OSREC.superslide=function(e){var t=this;t.p=e,t.p.animation=t.p.animation||"slideLeft",t.p.duration=t.p.duration||.5,t.p.allowDrag=void 0===t.p.allowDrag||t.p.allowDrag,t.p.slideContent=void 0===t.p.slideContent||t.p.slideContent,t.p.allowContentInteraction=void 0!==t.p.allowContentInteraction&&t.p.allowContentInteraction,t.p.closeOnBlur=void 0!==t.p.closeOnBlur&&t.p.closeOnBlur,t.p.width=t.p.width||"70vw",t.p.height=t.p.height||"100px",t.p.dragThreshold=t.p.dragThreshold||70,t.p.openThreshold=t.p.openThreshold||70,t.p.closeThreshold=t.p.closeThreshold||20,t.p.beforeOpen="function"==typeof t.p.beforeOpen?t.p.beforeOpen:function(){},t.p.onOpen="function"==typeof t.p.onOpen?t.p.onOpen:function(){},t.p.beforeClose="function"==typeof t.p.beforeClose?t.p.beforeClose:function(){},t.p.onClose="function"==typeof t.p.onClose?t.p.onClose:function(){},t.p.onDrag="function"==typeof t.p.onDrag?t.p.onDrag:function(){},t.body=document,t.p.isOpen=!1;t.p.cssTransitionEndEvent=function(){var e,t=document.createElement("dummy"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]}(),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}();var n=Math.max(document.documentElement.clientWidth,window.innerWidth||0);Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(t.p.sliderTransformClose="",t.p.contentTransformClose="",t.p.animation){case"slideLeft":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: -${t.p.width};`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var n=e.changedTouches[0].clientX;if(t.p.isOpen||!(n>t.p.dragThreshold)){t.p.content.style.transition="none",t.p.slider.style.transition="none";var o=t.p.slider.offsetWidth,i=t.p.isOpen?o:0,s=0,r=0,p=0,l=function(e){r=e.changedTouches[0].clientX-n,(s=i+r)>o&&(s=o),s<0&&(s=0),p=r>=o?1:r<=0?0:r/o,t.p.onDrag(p),t.p.slider.style.transform=`translate3d(${s}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},d=function(e){t.body.removeEventListener("touchmove",l),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&r>=t.p.openThreshold?t.open(!0):t.p.isOpen&&r<-t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",d)};t.body.addEventListener("touchend",d),t.body.addEventListener("touchmove",l)}};break;case"slideRight":t.p.slider.style.cssText=`position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; width: ${t.p.width}; height: 100%; top: 0px; left: 100%;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(-${t.p.width},0,0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(-${t.p.width},0,0)`,t.p.touchStartFunction=function(e){var o=e.changedTouches[0].clientX;if(t.p.isOpen||!(o0&&(r=0),l=-1*p>=i?1:-1*p<=0?0:-1*p/i,t.p.onDrag(l),t.p.slider.style.transform=`translate3d(${r}px, 0, 0)`,t.p.slideContent&&(t.p.content.style.transform=t.p.slider.style.transform),t.p.slider.style.opacity=.999},a=function(e){t.body.removeEventListener("touchmove",d),t.p.slider.style.transition=`${t.p.duration}s`,t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),!t.p.isOpen&&p<=-t.p.openThreshold?t.open(!0):t.p.isOpen&&p>t.p.closeThreshold?t.close(!0):t.p.isOpen?t.open(!0):t.close(!0),t.body.removeEventListener("touchend",a)};t.body.addEventListener("touchend",a),t.body.addEventListener("touchmove",d)}};break;case"slideTop":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: -${t.p.height}; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,${t.p.height},0)`,t.p.contentTransform=`translate3d(0,${t.p.height},0)`,t.p.allowDrag=!1,t.p.touchStartFunction=function(e){};break;case"slideBottom":t.p.slider.style.cssText=`position: fixed; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; height: ${t.p.height}; top: 100vh; left: 0;`,t.p.slider.style.transition=`${t.p.duration}s`,t.p.sliderTransform=`translate3d(0,-${t.p.height},0)`,t.p.slider.parentNode.style.overflowX="hidden",t.p.contentTransform=`translate3d(0,-${t.p.height},0)`,t.p.allowDrag=!1}return t.p.closeOnBlurFunction=function(e){e.preventDefault(),t.close.call(t)},t.p.slideContent&&(t.p.content.style.transition=`${t.p.duration}s`),t.p.allowDrag&&t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.allowContentInteraction?t.p.contentTouchStartFunction=function(e){}:t.p.contentTouchStartFunction=function(e){e.preventDefault()},t.p.slider.offsetHeight,t.p.slider.style.transition=`${t.p.duration}s`,t.p.content.style["-webkit-tap-highlight-color"]="transparent",t},OSREC.superslide.prototype.open=function(e){var t=this;return!e&&t.p.isOpen?Promise.resolve():new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onOpen(),t.p.isOpen=!0,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.addEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.removeEventListener("touchstart",t.p.touchStartFunction),t.p.content.addEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.addEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeOpen(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransform,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransform)})},OSREC.superslide.prototype.close=function(e){var t=this;return e||t.p.isOpen?new Promise(function(e,n){var o=function(n){(n.target||n.srcElement||n.originalTarget)==t.p.slider&&(t.p.onClose(),t.p.isOpen=!1,t.p.slider.removeEventListener(t.p.cssTransitionEndEvent,o),t.p.content.removeEventListener("touchstart",t.p.contentTouchStartFunction),t.p.closeOnBlur&&(t.body.addEventListener("touchstart",t.p.touchStartFunction),t.p.content.removeEventListener("touchstart",t.p.closeOnBlurFunction),t.p.content.removeEventListener("click",t.p.closeOnBlurFunction)),e())};t.p.beforeClose(),t.p.slider.addEventListener(t.p.cssTransitionEndEvent,o),t.p.slider.style.transform=t.p.sliderTransformClose,t.p.slider.style.opacity=1,t.p.slideContent&&(t.p.content.style.transform=t.p.contentTransformClose)}):Promise.resolve()},OSREC.superslide.prototype.toggle=function(){return this.p.isOpen?(console.log("close"),this.close()):(console.log("open"),this.open())},OSREC.superslide.prototype.isOpen=function(){return this.p.isOpen},OSREC.superslide.prototype.ready=function(){return this.p.readyPromise},OSREC.superslide.prototype.destroy=function(){var e=this;this.close().then(function(){e.body.removeEventListener("touchstart",e.p.touchStartFunction),e.body=null,e.p.content.removeEventListener("touchstart",e.p.closeOnBlurFunction),e.p.content.removeEventListener("click",e.p.closeOnBlurFunction),e.p.content=null,e.p.slider=null,e.p=null})};var hasDefine="function"==typeof define,hasExports="undefined"!=typeof module&&module.exports,root="undefined"==typeof window?global:window;hasDefine?define([],function(){return OSREC.superslide}):hasExports?module.exports=OSREC.superslide:root.OSREC=OSREC; \ No newline at end of file