diff --git a/dist/snap.js b/dist/snap.js index c0a77e4..2b255cf 100644 --- a/dist/snap.js +++ b/dist/snap.js @@ -189,6 +189,7 @@ } }, easeCallback: function easeCallback() { + utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); settings.element.style[cache.vendor + 'Transition'] = ''; cache.translation = action.translate.get.matrix(4); cache.easing = false; @@ -197,10 +198,12 @@ if (cache.easingTo === 0) { utils.klass.remove(document.body, 'snapjs-right'); utils.klass.remove(document.body, 'snapjs-left'); + utils.dispatchEvent('close'); + } else { + utils.dispatchEvent('open'); } utils.dispatchEvent('animated'); - utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); }, easeTo: function easeTo(n) { cache.easing = true; @@ -455,7 +458,6 @@ // Tap Close if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) { - utils.dispatchEvent('close'); utils.events.prevent(e); action.translate.easeTo(0); cache.isDragging = false; @@ -476,24 +478,24 @@ action.translate.easeTo(settings.maxPosition); // Open Left } } else { - action.translate.easeTo(0); // Close Left - } + action.translate.easeTo(0); // Close Left + } // Revealing Right } else if (cache.simpleStates.opening === 'right') { - // Halfway, Flicking, or Too Far Out - if (cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick) { - if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { - // Flicking Closed - action.translate.easeTo(0); - } else if (cache.simpleStates.flick && cache.simpleStates.towards === 'left' || // Flicking Open OR - cache.simpleStates.halfway || cache.simpleStates.hyperExtending // At least halfway open OR hyperextending - ) { - action.translate.easeTo(settings.minPosition); // Open Right - } - } else { - action.translate.easeTo(0); // Close Right + // Halfway, Flicking, or Too Far Out + if (cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick) { + if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { + // Flicking Closed + action.translate.easeTo(0); + } else if (cache.simpleStates.flick && cache.simpleStates.towards === 'left' || // Flicking Open OR + cache.simpleStates.halfway || cache.simpleStates.hyperExtending // At least halfway open OR hyperextending + ) { + action.translate.easeTo(settings.minPosition); // Open Right } + } else { + action.translate.easeTo(0); // Close Right } + } cache.isDragging = false; cache.startDragX = utils.page('X', e); } @@ -517,7 +519,6 @@ * Public */ this.open = function (side) { - utils.dispatchEvent('open'); utils.klass.remove(document.body, 'snapjs-expand-left'); utils.klass.remove(document.body, 'snapjs-expand-right'); @@ -536,7 +537,6 @@ } }; this.close = function () { - utils.dispatchEvent('close'); action.translate.easeTo(0); }; this.expand = function (side) { diff --git a/dist/snap.min.js b/dist/snap.min.js index 6e2a834..3941801 100644 --- a/dist/snap.min.js +++ b/dist/snap.min.js @@ -1 +1 @@ -"use strict";!function e(t,n,a){function s(i,o){if(!n[i]){if(!t[i]){var l="function"==typeof require&&require;if(!o&&l)return l(i,!0);if(r)return r(i,!0);throw new Error("Cannot find module '"+i+"'")}var d=n[i]={exports:{}};t[i][0].call(d.exports,function(e){var n=t[i][1][e];return s(n?n:e)},d,d.exports,e,t,n,a)}return n[i].exports}for(var r="function"==typeof require&&require,i=0;i0?t.touches[0]["page"+e]:t.changedTouches[0]["page"+e]},klass:{has:function(e,t){return-1!==e.className.indexOf(t)},add:function(e,n){!s.klass.has(e,n)&&t.addBodyClasses&&(e.className+=" "+n)},remove:function(e,n){t.addBodyClasses&&(e.className=e.className.replace(n,"").replace(/^\s+|\s+$/g,""))}},dispatchEvent:function(e){return"function"==typeof a[e]?a[e].call():void 0},vendor:function(){var e,t=document.createElement("div"),n="webkit Moz O ms".split(" ");for(e in n)if("undefined"!=typeof t.style[n[e]+"Transition"])return n[e]},transitionCallback:function(){return"Moz"===n.vendor||"ms"===n.vendor?"transitionend":n.vendor+"TransitionEnd"},deepExtend:function(e,t){var n;for(n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},s.deepExtend(e[n],t[n])):e[n]=t[n];return e},angleOfDrag:function(e,t){var a,s;return s=Math.atan2(-(n.startDragY-t),n.startDragX-e),0>s&&(s+=2*Math.PI),a=Math.floor(s*(180/Math.PI)-180),0>a&&a>-180&&(a=360-Math.abs(a)),Math.abs(a)},events:{addEvent:function(e,t,n){return e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):void 0},removeEvent:function(e,t,n){return e.addEventListener?e.removeEventListener(t,n,!1):e.attachEvent?e.detachEvent("on"+t,n):void 0},prevent:function(e){e.preventDefault?e.preventDefault():e.returnValue=!1}},parentUntil:function(e,t){for(var n="string"==typeof t;e.parentNode;){if(n&&e.getAttribute&&e.getAttribute(t))return e;if(!n&&e===t)return e;e=e.parentNode}return null}},r={translate:{get:{matrix:function l(e){var l=window.getComputedStyle(t.element)[n.vendor+"Transform"].match(/\((.*)\)/),a=8;return l?(l=l[1].split(","),16===l.length&&(e+=a),parseInt(l[e],10)):0}},easeCallback:function(){t.element.style[n.vendor+"Transition"]="",n.translation=r.translate.get.matrix(4),n.easing=!1,clearInterval(n.animatingInterval),0===n.easingTo&&(s.klass.remove(document.body,"snapjs-right"),s.klass.remove(document.body,"snapjs-left")),s.dispatchEvent("animated"),s.events.removeEvent(t.element,s.transitionCallback(),r.translate.easeCallback)},easeTo:function(e){n.easing=!0,n.easingTo=e,t.element.style[n.vendor+"Transition"]="all "+t.transitionSpeed+"s "+t.easing,n.animatingInterval=setInterval(function(){s.dispatchEvent("animating")},1),s.events.addEvent(t.element,s.transitionCallback(),r.translate.easeCallback),r.translate.x(e),0===e&&(t.element.style[n.vendor+"Transform"]="")},x:function(e){if(!("left"===t.disable&&e>0||"right"===t.disable&&0>e)){t.hyperextensible||(e===t.maxPosition||e>t.maxPosition?e=t.maxPosition:(e===t.minPosition||e0,u=c;if(n.intentChecked&&!n.hasIntent)return;if(t.addBodyClasses&&(d>0?(s.klass.add(document.body,"snapjs-left"),s.klass.remove(document.body,"snapjs-right")):0>d&&(s.klass.add(document.body,"snapjs-right"),s.klass.remove(document.body,"snapjs-left"))),n.hasIntent===!1||null===n.hasIntent){var g=s.angleOfDrag(i,o),h=g>=0&&g<=t.slideIntent||360>=g&&g>360-t.slideIntent,m=g>=180&&g<=180+t.slideIntent||180>=g&&g>=180-t.slideIntent;m||h?n.hasIntent=!0:n.hasIntent=!1,n.intentChecked=!0}if(t.minDragDistance>=Math.abs(i-n.startDragX)||n.hasIntent===!1)return;s.events.prevent(e),s.dispatchEvent("drag"),n.dragWatchers.current=i,n.dragWatchers.last>i?("left"!==n.dragWatchers.state&&(n.dragWatchers.state="left",n.dragWatchers.hold=i),n.dragWatchers.last=i):n.dragWatchers.lastt.maxPosition/2,flick:Math.abs(n.dragWatchers.current-n.dragWatchers.hold)>t.flickThreshold,translation:{absolute:d,relative:c,sinceDirectionChange:n.dragWatchers.current-n.dragWatchers.hold,percentage:d/t.maxPosition*100}}):(t.minPosition>d&&(a=(d-t.minPosition)*t.resistance,u=c-a),n.simpleStates={opening:"right",towards:n.dragWatchers.state,hyperExtending:t.minPosition>d,halfway:dt.flickThreshold,translation:{absolute:d,relative:c,sinceDirectionChange:n.dragWatchers.current-n.dragWatchers.hold,percentage:d/t.minPosition*100}}),r.translate.x(u+l)}},endDrag:function(e){if(n.isDragging){t.stopPropagation&&e.stopPropagation(),s.dispatchEvent("end");var a=r.translate.get.matrix(4);if(0===n.dragWatchers.current&&0!==a&&t.tapToClose)return s.dispatchEvent("close"),s.events.prevent(e),r.translate.easeTo(0),n.isDragging=!1,void(n.startDragX=0);"left"===n.simpleStates.opening?n.simpleStates.halfway||n.simpleStates.hyperExtending||n.simpleStates.flick?n.simpleStates.flick&&"left"===n.simpleStates.towards?r.translate.easeTo(0):(n.simpleStates.flick&&"right"===n.simpleStates.towards||n.simpleStates.halfway||n.simpleStates.hyperExtending)&&r.translate.easeTo(t.maxPosition):r.translate.easeTo(0):"right"===n.simpleStates.opening&&(n.simpleStates.halfway||n.simpleStates.hyperExtending||n.simpleStates.flick?n.simpleStates.flick&&"right"===n.simpleStates.towards?r.translate.easeTo(0):(n.simpleStates.flick&&"left"===n.simpleStates.towards||n.simpleStates.halfway||n.simpleStates.hyperExtending)&&r.translate.easeTo(t.minPosition):r.translate.easeTo(0)),n.isDragging=!1,n.startDragX=s.page("X",e)}}}},i=function(e){if(s.deepExtend(t,e),!t.element)throw"Snap's element argument does not exist.";t.element.setAttribute("touch-action","pan-y")},o=function(e){i(e),n.vendor=s.vendor(),r.drag.listen()};this.open=function(e){s.dispatchEvent("open"),s.klass.remove(document.body,"snapjs-expand-left"),s.klass.remove(document.body,"snapjs-expand-right"),"left"===e?(n.simpleStates.opening="left",n.simpleStates.towards="right",s.klass.add(document.body,"snapjs-left"),s.klass.remove(document.body,"snapjs-right"),r.translate.easeTo(t.maxPosition)):"right"===e&&(n.simpleStates.opening="right",n.simpleStates.towards="left",s.klass.remove(document.body,"snapjs-left"),s.klass.add(document.body,"snapjs-right"),r.translate.easeTo(t.minPosition))},this.close=function(){s.dispatchEvent("close"),r.translate.easeTo(0)},this.expand=function(e){var t=window.innerWidth||document.documentElement.clientWidth;"left"===e?(s.dispatchEvent("expandLeft"),s.klass.add(document.body,"snapjs-expand-left"),s.klass.remove(document.body,"snapjs-expand-right")):(s.dispatchEvent("expandRight"),s.klass.add(document.body,"snapjs-expand-right"),s.klass.remove(document.body,"snapjs-expand-left"),t*=-1),r.translate.easeTo(t)},this.on=function(e,t){return a[e]=t,this},this.off=function(e){a[e]&&(a[e]=!1)},this.enable=function(){s.dispatchEvent("enable"),r.drag.listen()},this.disable=function(){s.dispatchEvent("disable"),r.drag.stopListening()},this.settings=function(e){i(e)},this.state=function(){var e,a=r.translate.get.matrix(4);return e=a===t.maxPosition?"left":a===t.minPosition?"right":"closed",{state:e,info:n.simpleStates}},o(e)};t.exports=a},{}]},{},[1]); \ No newline at end of file +"use strict";!function e(t,n,a){function s(i,o){if(!n[i]){if(!t[i]){var l="function"==typeof require&&require;if(!o&&l)return l(i,!0);if(r)return r(i,!0);throw new Error("Cannot find module '"+i+"'")}var d=n[i]={exports:{}};t[i][0].call(d.exports,function(e){var n=t[i][1][e];return s(n?n:e)},d,d.exports,e,t,n,a)}return n[i].exports}for(var r="function"==typeof require&&require,i=0;i0?t.touches[0]["page"+e]:t.changedTouches[0]["page"+e]},klass:{has:function(e,t){return e.className.indexOf(t)!==-1},add:function(e,n){!s.klass.has(e,n)&&t.addBodyClasses&&(e.className+=" "+n)},remove:function(e,n){t.addBodyClasses&&(e.className=e.className.replace(n,"").replace(/^\s+|\s+$/g,""))}},dispatchEvent:function(e){if("function"==typeof a[e])return a[e].call()},vendor:function(){var e,t=document.createElement("div"),n="webkit Moz O ms".split(" ");for(e in n)if("undefined"!=typeof t.style[n[e]+"Transition"])return n[e]},transitionCallback:function(){return"Moz"===n.vendor||"ms"===n.vendor?"transitionend":n.vendor+"TransitionEnd"},deepExtend:function(e,t){var n;for(n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},s.deepExtend(e[n],t[n])):e[n]=t[n];return e},angleOfDrag:function(e,t){var a,s;return s=Math.atan2(-(n.startDragY-t),n.startDragX-e),s<0&&(s+=2*Math.PI),a=Math.floor(s*(180/Math.PI)-180),a<0&&a>-180&&(a=360-Math.abs(a)),Math.abs(a)},events:{addEvent:function(e,t,n){return e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):void 0},removeEvent:function(e,t,n){return e.addEventListener?e.removeEventListener(t,n,!1):e.attachEvent?e.detachEvent("on"+t,n):void 0},prevent:function(e){e.preventDefault?e.preventDefault():e.returnValue=!1}},parentUntil:function(e,t){for(var n="string"==typeof t;e.parentNode;){if(n&&e.getAttribute&&e.getAttribute(t))return e;if(!n&&e===t)return e;e=e.parentNode}return null}},r={translate:{get:{matrix:function l(e){var l=window.getComputedStyle(t.element)[n.vendor+"Transform"].match(/\((.*)\)/),a=8;return l?(l=l[1].split(","),16===l.length&&(e+=a),parseInt(l[e],10)):0}},easeCallback:function(){s.events.removeEvent(t.element,s.transitionCallback(),r.translate.easeCallback),t.element.style[n.vendor+"Transition"]="",n.translation=r.translate.get.matrix(4),n.easing=!1,clearInterval(n.animatingInterval),0===n.easingTo?(s.klass.remove(document.body,"snapjs-right"),s.klass.remove(document.body,"snapjs-left"),s.dispatchEvent("close")):s.dispatchEvent("open"),s.dispatchEvent("animated")},easeTo:function(e){n.easing=!0,n.easingTo=e,t.element.style[n.vendor+"Transition"]="all "+t.transitionSpeed+"s "+t.easing,n.animatingInterval=setInterval(function(){s.dispatchEvent("animating")},1),s.events.addEvent(t.element,s.transitionCallback(),r.translate.easeCallback),r.translate.x(e),0===e&&(t.element.style[n.vendor+"Transform"]="")},x:function(e){if(!("left"===t.disable&&e>0||"right"===t.disable&&e<0)){t.hyperextensible||(e===t.maxPosition||e>t.maxPosition?e=t.maxPosition:(e===t.minPosition||e0,u=c;if(n.intentChecked&&!n.hasIntent)return;if(t.addBodyClasses&&(d>0?(s.klass.add(document.body,"snapjs-left"),s.klass.remove(document.body,"snapjs-right")):d<0&&(s.klass.add(document.body,"snapjs-right"),s.klass.remove(document.body,"snapjs-left"))),n.hasIntent===!1||null===n.hasIntent){var g=s.angleOfDrag(i,o),h=g>=0&&g<=t.slideIntent||g<=360&&g>360-t.slideIntent,m=g>=180&&g<=180+t.slideIntent||g<=180&&g>=180-t.slideIntent;m||h?n.hasIntent=!0:n.hasIntent=!1,n.intentChecked=!0}if(t.minDragDistance>=Math.abs(i-n.startDragX)||n.hasIntent===!1)return;s.events.prevent(e),s.dispatchEvent("drag"),n.dragWatchers.current=i,n.dragWatchers.last>i?("left"!==n.dragWatchers.state&&(n.dragWatchers.state="left",n.dragWatchers.hold=i),n.dragWatchers.last=i):n.dragWatchers.lastt.maxPosition/2,flick:Math.abs(n.dragWatchers.current-n.dragWatchers.hold)>t.flickThreshold,translation:{absolute:d,relative:c,sinceDirectionChange:n.dragWatchers.current-n.dragWatchers.hold,percentage:d/t.maxPosition*100}}):(t.minPosition>d&&(a=(d-t.minPosition)*t.resistance,u=c-a),n.simpleStates={opening:"right",towards:n.dragWatchers.state,hyperExtending:t.minPosition>d,halfway:dt.flickThreshold,translation:{absolute:d,relative:c,sinceDirectionChange:n.dragWatchers.current-n.dragWatchers.hold,percentage:d/t.minPosition*100}}),r.translate.x(u+l)}},endDrag:function(e){if(n.isDragging){t.stopPropagation&&e.stopPropagation(),s.dispatchEvent("end");var a=r.translate.get.matrix(4);if(0===n.dragWatchers.current&&0!==a&&t.tapToClose)return s.events.prevent(e),r.translate.easeTo(0),n.isDragging=!1,void(n.startDragX=0);"left"===n.simpleStates.opening?n.simpleStates.halfway||n.simpleStates.hyperExtending||n.simpleStates.flick?n.simpleStates.flick&&"left"===n.simpleStates.towards?r.translate.easeTo(0):(n.simpleStates.flick&&"right"===n.simpleStates.towards||n.simpleStates.halfway||n.simpleStates.hyperExtending)&&r.translate.easeTo(t.maxPosition):r.translate.easeTo(0):"right"===n.simpleStates.opening&&(n.simpleStates.halfway||n.simpleStates.hyperExtending||n.simpleStates.flick?n.simpleStates.flick&&"right"===n.simpleStates.towards?r.translate.easeTo(0):(n.simpleStates.flick&&"left"===n.simpleStates.towards||n.simpleStates.halfway||n.simpleStates.hyperExtending)&&r.translate.easeTo(t.minPosition):r.translate.easeTo(0)),n.isDragging=!1,n.startDragX=s.page("X",e)}}}},i=function(e){if(s.deepExtend(t,e),!t.element)throw"Snap's element argument does not exist.";t.element.setAttribute("touch-action","pan-y")},o=function(e){i(e),n.vendor=s.vendor(),r.drag.listen()};this.open=function(e){s.klass.remove(document.body,"snapjs-expand-left"),s.klass.remove(document.body,"snapjs-expand-right"),"left"===e?(n.simpleStates.opening="left",n.simpleStates.towards="right",s.klass.add(document.body,"snapjs-left"),s.klass.remove(document.body,"snapjs-right"),r.translate.easeTo(t.maxPosition)):"right"===e&&(n.simpleStates.opening="right",n.simpleStates.towards="left",s.klass.remove(document.body,"snapjs-left"),s.klass.add(document.body,"snapjs-right"),r.translate.easeTo(t.minPosition))},this.close=function(){r.translate.easeTo(0)},this.expand=function(e){var t=window.innerWidth||document.documentElement.clientWidth;"left"===e?(s.dispatchEvent("expandLeft"),s.klass.add(document.body,"snapjs-expand-left"),s.klass.remove(document.body,"snapjs-expand-right")):(s.dispatchEvent("expandRight"),s.klass.add(document.body,"snapjs-expand-right"),s.klass.remove(document.body,"snapjs-expand-left"),t*=-1),r.translate.easeTo(t)},this.on=function(e,t){return a[e]=t,this},this.off=function(e){a[e]&&(a[e]=!1)},this.enable=function(){s.dispatchEvent("enable"),r.drag.listen()},this.disable=function(){s.dispatchEvent("disable"),r.drag.stopListening()},this.settings=function(e){i(e)},this.state=function(){var e,a=r.translate.get.matrix(4);return e=a===t.maxPosition?"left":a===t.minPosition?"right":"closed",{state:e,info:n.simpleStates}},o(e)};t.exports=a},{}]},{},[1]); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index e399562..88da3e3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,4 +49,5 @@ gulp.task('watchers', function () { gulp.watch(paths.js, ['js']); }); -gulp.task('default', ['css', 'js', 'watchers']); \ No newline at end of file +gulp.task('default', ['css', 'js']); +gulp.task('watch', ['css', 'js', 'watchers']); diff --git a/package.json b/package.json index bec2ab2..430c168 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "A Library for creating beautiful mobile shelfs in Javascript", "main": "snap.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "gulp", + "watch": "gulp watch" }, "repository": { "type": "git", diff --git a/src/snap.js b/src/snap.js index 66ba1d5..252480f 100755 --- a/src/snap.js +++ b/src/snap.js @@ -170,6 +170,7 @@ var Snap = function(userOpts) { } }, easeCallback: function(){ + utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); settings.element.style[cache.vendor+'Transition'] = ''; cache.translation = action.translate.get.matrix(4); cache.easing = false; @@ -178,10 +179,12 @@ var Snap = function(userOpts) { if(cache.easingTo===0){ utils.klass.remove(document.body, 'snapjs-right'); utils.klass.remove(document.body, 'snapjs-left'); + utils.dispatchEvent('close'); + } else { + utils.dispatchEvent('open'); } utils.dispatchEvent('animated'); - utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); }, easeTo: function(n) { cache.easing = true; @@ -436,7 +439,6 @@ var Snap = function(userOpts) { // Tap Close if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) { - utils.dispatchEvent('close'); utils.events.prevent(e); action.translate.easeTo(0); cache.isDragging = false; @@ -498,7 +500,6 @@ var Snap = function(userOpts) { * Public */ this.open = function(side) { - utils.dispatchEvent('open'); utils.klass.remove(document.body, 'snapjs-expand-left'); utils.klass.remove(document.body, 'snapjs-expand-right'); @@ -517,7 +518,6 @@ var Snap = function(userOpts) { } }; this.close = function() { - utils.dispatchEvent('close'); action.translate.easeTo(0); }; this.expand = function(side){