From cb130df52513663837e3d685caa22542ad9302b9 Mon Sep 17 00:00:00 2001 From: chicpro Date: Mon, 21 Oct 2013 14:48:11 +0900 Subject: [PATCH] =?UTF-8?q?swipe=20=ED=94=8C=EB=9F=AC=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?touchSipe=20=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/jquery.touchSwipe.min.js | 1 + js/jquery.touchwipe.min.js | 10 - ...query.slideview.js => shop.mobile.main.js} | 33 ++-- mobile/shop/index.php | 4 +- mobile/skin/shop/basic/item.form.skin.php | 179 ++++++++---------- 5 files changed, 94 insertions(+), 133 deletions(-) create mode 100644 js/jquery.touchSwipe.min.js delete mode 100644 js/jquery.touchwipe.min.js rename js/{jquery.slideview.js => shop.mobile.main.js} (93%) diff --git a/js/jquery.touchSwipe.min.js b/js/jquery.touchSwipe.min.js new file mode 100644 index 000000000..ed1870357 --- /dev/null +++ b/js/jquery.touchSwipe.min.js @@ -0,0 +1 @@ +(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{a(jQuery)}}(function(e){var o="left",n="right",d="up",v="down",c="in",w="out",l="none",r="auto",k="swipe",s="pinch",x="tap",i="doubletap",b="longtap",A="horizontal",t="vertical",h="all",q=10,f="start",j="move",g="end",p="cancel",a="ontouchstart" in window,y="TouchSwipe";var m={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe"};e.fn.swipe=function(D){var C=e(this),B=C.data(y);if(B&&typeof D==="string"){if(B[D]){return B[D].apply(this,Array.prototype.slice.call(arguments,1))}else{e.error("Method "+D+" does not exist on jQuery.swipe")}}else{if(!B&&(typeof D==="object"||!D)){return u.apply(this,arguments)}}return C};e.fn.swipe.defaults=m;e.fn.swipe.phases={PHASE_START:f,PHASE_MOVE:j,PHASE_END:g,PHASE_CANCEL:p};e.fn.swipe.directions={LEFT:o,RIGHT:n,UP:d,DOWN:v,IN:c,OUT:w};e.fn.swipe.pageScroll={NONE:l,HORIZONTAL:A,VERTICAL:t,AUTO:r};e.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:h};function u(B){if(B&&(B.allowPageScroll===undefined&&(B.swipe!==undefined||B.swipeStatus!==undefined))){B.allowPageScroll=l}if(B.click!==undefined&&B.tap===undefined){B.tap=B.click}if(!B){B={}}B=e.extend({},e.fn.swipe.defaults,B);return this.each(function(){var D=e(this);var C=D.data(y);if(!C){C=new z(this,B);D.data(y,C)}})}function z(a0,aq){var av=(a||!aq.fallbackToMouseEvents),G=av?"touchstart":"mousedown",au=av?"touchmove":"mousemove",R=av?"touchend":"mouseup",P=av?null:"mouseleave",az="touchcancel";var ac=0,aL=null,Y=0,aX=0,aV=0,D=1,am=0,aF=0,J=null;var aN=e(a0);var W="start";var T=0;var aM=null;var Q=0,aY=0,a1=0,aa=0,K=0;var aS=null;try{aN.bind(G,aJ);aN.bind(az,a5)}catch(ag){e.error("events not supported "+G+","+az+" on jQuery.swipe")}this.enable=function(){aN.bind(G,aJ);aN.bind(az,a5);return aN};this.disable=function(){aG();return aN};this.destroy=function(){aG();aN.data(y,null);return aN};this.option=function(a8,a7){if(aq[a8]!==undefined){if(a7===undefined){return aq[a8]}else{aq[a8]=a7}}else{e.error("Option "+a8+" does not exist on jQuery.swipe.options")}return null};function aJ(a9){if(ax()){return}if(e(a9.target).closest(aq.excludedElements,aN).length>0){return}var ba=a9.originalEvent?a9.originalEvent:a9;var a8,a7=a?ba.touches[0]:ba;W=f;if(a){T=ba.touches.length}else{a9.preventDefault()}ac=0;aL=null;aF=null;Y=0;aX=0;aV=0;D=1;am=0;aM=af();J=X();O();if(!a||(T===aq.fingers||aq.fingers===h)||aT()){ae(0,a7);Q=ao();if(T==2){ae(1,ba.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}if(aq.swipeStatus||aq.pinchStatus){a8=L(ba,W)}}else{a8=false}if(a8===false){W=p;L(ba,W);return a8}else{ak(true)}return null}function aZ(ba){var bd=ba.originalEvent?ba.originalEvent:ba;if(W===g||W===p||ai()){return}var a9,a8=a?bd.touches[0]:bd;var bb=aD(a8);aY=ao();if(a){T=bd.touches.length}W=j;if(T==2){if(aX==0){ae(1,bd.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}else{aD(bd.touches[1]);aV=ap(aM[0].end,aM[1].end);aF=an(aM[0].end,aM[1].end)}D=a3(aX,aV);am=Math.abs(aX-aV)}if((T===aq.fingers||aq.fingers===h)||!a||aT()){aL=aH(bb.start,bb.end);ah(ba,aL);ac=aO(bb.start,bb.end);Y=aI();aE(aL,ac);if(aq.swipeStatus||aq.pinchStatus){a9=L(bd,W)}if(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave){var a7=true;if(aq.triggerOnTouchLeave){var bc=aU(this);a7=B(bb.end,bc)}if(!aq.triggerOnTouchEnd&&a7){W=ay(j)}else{if(aq.triggerOnTouchLeave&&!a7){W=ay(g)}}if(W==p||W==g){L(bd,W)}}}else{W=p;L(bd,W)}if(a9===false){W=p;L(bd,W)}}function I(a7){var a8=a7.originalEvent;if(a){if(a8.touches.length>0){C();return true}}if(ai()){T=aa}a7.preventDefault();aY=ao();Y=aI();if(a6()){W=p;L(a8,W)}else{if(aq.triggerOnTouchEnd||(aq.triggerOnTouchEnd==false&&W===j)){W=g;L(a8,W)}else{if(!aq.triggerOnTouchEnd&&a2()){W=g;aB(a8,W,x)}else{if(W===j){W=p;L(a8,W)}}}}ak(false);return null}function a5(){T=0;aY=0;Q=0;aX=0;aV=0;D=1;O();ak(false)}function H(a7){var a8=a7.originalEvent;if(aq.triggerOnTouchLeave){W=ay(g);L(a8,W)}}function aG(){aN.unbind(G,aJ);aN.unbind(az,a5);aN.unbind(au,aZ);aN.unbind(R,I);if(P){aN.unbind(P,H)}ak(false)}function ay(bb){var ba=bb;var a9=aw();var a8=aj();var a7=a6();if(!a9||a7){ba=p}else{if(a8&&bb==j&&(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave)){ba=g}else{if(!a8&&bb==g&&aq.triggerOnTouchLeave){ba=p}}}return ba}function L(a9,a7){var a8=undefined;if(F()||S()){a8=aB(a9,a7,k)}else{if((M()||aT())&&a8!==false){a8=aB(a9,a7,s)}}if(aC()&&a8!==false){a8=aB(a9,a7,i)}else{if(al()&&a8!==false){a8=aB(a9,a7,b)}else{if(ad()&&a8!==false){a8=aB(a9,a7,x)}}}if(a7===p){a5(a9)}if(a7===g){if(a){if(a9.touches.length==0){a5(a9)}}else{a5(a9)}}return a8}function aB(ba,a7,a9){var a8=undefined;if(a9==k){aN.trigger("swipeStatus",[a7,aL||null,ac||0,Y||0,T]);if(aq.swipeStatus){a8=aq.swipeStatus.call(aN,ba,a7,aL||null,ac||0,Y||0,T);if(a8===false){return false}}if(a7==g&&aR()){aN.trigger("swipe",[aL,ac,Y,T]);if(aq.swipe){a8=aq.swipe.call(aN,ba,aL,ac,Y,T);if(a8===false){return false}}switch(aL){case o:aN.trigger("swipeLeft",[aL,ac,Y,T]);if(aq.swipeLeft){a8=aq.swipeLeft.call(aN,ba,aL,ac,Y,T)}break;case n:aN.trigger("swipeRight",[aL,ac,Y,T]);if(aq.swipeRight){a8=aq.swipeRight.call(aN,ba,aL,ac,Y,T)}break;case d:aN.trigger("swipeUp",[aL,ac,Y,T]);if(aq.swipeUp){a8=aq.swipeUp.call(aN,ba,aL,ac,Y,T)}break;case v:aN.trigger("swipeDown",[aL,ac,Y,T]);if(aq.swipeDown){a8=aq.swipeDown.call(aN,ba,aL,ac,Y,T)}break}}}if(a9==s){aN.trigger("pinchStatus",[a7,aF||null,am||0,Y||0,T,D]);if(aq.pinchStatus){a8=aq.pinchStatus.call(aN,ba,a7,aF||null,am||0,Y||0,T,D);if(a8===false){return false}}if(a7==g&&a4()){switch(aF){case c:aN.trigger("pinchIn",[aF||null,am||0,Y||0,T,D]);if(aq.pinchIn){a8=aq.pinchIn.call(aN,ba,aF||null,am||0,Y||0,T,D)}break;case w:aN.trigger("pinchOut",[aF||null,am||0,Y||0,T,D]);if(aq.pinchOut){a8=aq.pinchOut.call(aN,ba,aF||null,am||0,Y||0,T,D)}break}}}if(a9==x){if(a7===p||a7===g){clearTimeout(aS);if(V()&&!E()){K=ao();aS=setTimeout(e.proxy(function(){K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}},this),aq.doubleTapThreshold)}else{K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}}}}else{if(a9==i){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("doubletap",[ba.target]);if(aq.doubleTap){a8=aq.doubleTap.call(aN,ba,ba.target)}}}else{if(a9==b){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("longtap",[ba.target]);if(aq.longTap){a8=aq.longTap.call(aN,ba,ba.target)}}}}}return a8}function aj(){var a7=true;if(aq.threshold!==null){a7=ac>=aq.threshold}return a7}function a6(){var a7=false;if(aq.cancelThreshold!==null&&aL!==null){a7=(aP(aL)-ac)>=aq.cancelThreshold}return a7}function ab(){if(aq.pinchThreshold!==null){return am>=aq.pinchThreshold}return true}function aw(){var a7;if(aq.maxTimeThreshold){if(Y>=aq.maxTimeThreshold){a7=false}else{a7=true}}else{a7=true}return a7}function ah(a7,a8){if(aq.allowPageScroll===l||aT()){a7.preventDefault()}else{var a9=aq.allowPageScroll===r;switch(a8){case o:if((aq.swipeLeft&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case n:if((aq.swipeRight&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case d:if((aq.swipeUp&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break;case v:if((aq.swipeDown&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break}}}function a4(){var a8=aK();var a7=U();var a9=ab();return a8&&a7&&a9}function aT(){return !!(aq.pinchStatus||aq.pinchIn||aq.pinchOut)}function M(){return !!(a4()&&aT())}function aR(){var ba=aw();var bc=aj();var a9=aK();var a7=U();var a8=a6();var bb=!a8&&a7&&a9&&bc&&ba;return bb}function S(){return !!(aq.swipe||aq.swipeStatus||aq.swipeLeft||aq.swipeRight||aq.swipeUp||aq.swipeDown)}function F(){return !!(aR()&&S())}function aK(){return((T===aq.fingers||aq.fingers===h)||!a)}function U(){return aM[0].end.x!==0}function a2(){return !!(aq.tap)}function V(){return !!(aq.doubleTap)}function aQ(){return !!(aq.longTap)}function N(){if(K==null){return false}var a7=ao();return(V()&&((a7-K)<=aq.doubleTapThreshold))}function E(){return N()}function at(){return((T===1||!a)&&(isNaN(ac)||ac===0))}function aW(){return((Y>aq.longTapThreshold)&&(ac=0)){return o}else{if((a9<=360)&&(a9>=315)){return o}else{if((a9>=135)&&(a9<=225)){return n}else{if((a9>45)&&(a9<135)){return v}else{return d}}}}}function ao(){var a7=new Date();return a7.getTime()}function aU(a7){a7=e(a7);var a9=a7.offset();var a8={left:a9.left,right:a9.left+a7.outerWidth(),top:a9.top,bottom:a9.top+a7.outerHeight()};return a8}function B(a7,a8){return(a7.x>a8.left&&a7.xa8.top&&a7.y=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft()}else{config.wipeRight()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery); \ No newline at end of file diff --git a/js/jquery.slideview.js b/js/shop.mobile.main.js similarity index 93% rename from js/jquery.slideview.js rename to js/shop.mobile.main.js index 5b355c373..a0a93b01a 100644 --- a/js/jquery.slideview.js +++ b/js/shop.mobile.main.js @@ -117,8 +117,6 @@ if(check_animated()) return; - $(window).on("touchmove", blockMove); - idx = $slides.index($slides.filter("."+cfg.active_class)); next = (idx + 1) % count; @@ -151,8 +149,6 @@ $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); } - $(window).off("touchmove", blockMove); - $wrap.height(next_height); $tabs.eq(next).addClass(cfg.tab_active); } @@ -170,8 +166,6 @@ if(check_animated()) return; - $(window).on("touchmove", blockMove); - idx = $slides.index($slides.filter("."+cfg.active_class)); next = idx - 1; if(next < 0) @@ -206,8 +200,6 @@ $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); } - $(window).off("touchmove", blockMove); - $wrap.height(next_height); $tabs.eq(next).addClass(cfg.tab_active); } @@ -244,11 +236,6 @@ swipe_left(); } - function blockMove(event) - { - event.preventDefault(); - } - $(window).on("load", function(e) { swipe_init(); }); @@ -259,12 +246,20 @@ // swipe event - $(window).touchwipe({ - wipeLeft: function() { swipe_left(); }, - wipeRight: function() { swipe_right(); }, - min_move_x: 20, - min_move_y: 20, - preventDefaultEvents: false + this.swipe({ + swipe: function(event, direction, duration, fingerCount) { + switch(direction) { + case "left": + swipe_left(); + break; + case "right": + swipe_right(); + break; + } + }, + threshold: 50, + excludedElements:".noSwipe", + allowPageScroll:"vertical" }); } }(jQuery)); \ No newline at end of file diff --git a/mobile/shop/index.php b/mobile/shop/index.php index d3c2b0f92..ff9e05c30 100644 --- a/mobile/shop/index.php +++ b/mobile/shop/index.php @@ -6,8 +6,8 @@ define("_INDEX_", TRUE); include_once(G5_MSHOP_PATH.'/shop.head.php'); ?> - - + +
diff --git a/mobile/skin/shop/basic/item.form.skin.php b/mobile/skin/shop/basic/item.form.skin.php index bd0f5e389..eb0630a8a 100644 --- a/mobile/skin/shop/basic/item.form.skin.php +++ b/mobile/skin/shop/basic/item.form.skin.php @@ -3,7 +3,7 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 ?> - +
@@ -384,111 +384,86 @@ $(function(){ }); // 이전 다음상품 swipe - $(window).touchwipe({ - wipeLeft: function() { - - if($("#loading_message").length > 0) - return; - - var content = $("#container").clone() - .find("#form_btn_layer").remove() - .end().find(".sit_pvi_btn").remove() - .end().html(); - var pos = $("#container").position(); - var width = $("#container").width(); - var height = $("#container").height(); - var pad_top = $("#container").css("padding-top"); - var duration = 500; - - // 로딩 레이어 - load_message(); - - $("#container") - .css({ - width: width+"px", - height: height+"px" - }) - .before("
"+content+"
") - .find("*:visible").hide(); - - $("#container_clone") - .css({ - display: "block", - width: width+"px", - height: height+"px", - position: "absolute", - top: pos.top+"px", - left: pos.left+"px", - paddingTop: pad_top - }) - .animate( - { left: "-="+width+"px" }, duration, - function() { - $("#container_clone").remove(); - var str = ''; - var href = str.match(/https?:\/{2}[^\"]+/gi); - document.location.href = href[0]; - } - ); - - alert("다음 상품이 없습니다."); - + $("#container").swipe({ + swipe: function(event, direction) { + switch(direction) { + case "left": + + content_move(direction); + + alert("다음 상품이 없습니다."); + + break; + case "right": + + content_move(direction); + + alert("이전 상품이 없습니다."); + + break; + } }, - wipeRight: function() { - - if($("#loading_message").length > 0) - return; - - var content = $("#container").clone() - .find("#form_btn_layer").remove() - .end().find(".sit_pvi_btn").remove() - .end().html(); - var pos = $("#container").position(); - var width = $("#container").width(); - var height = $("#container").height(); - var pad_top = $("#container").css("padding-top"); - var duration = 500; - - // 로딩 레이어 - load_message(); - - $("#container") - .css({ - width: width+"px", - height: height+"px" - }) - .before("
"+content+"
") - .find("*:visible").hide(); - - $("#container_clone") - .css({ - display: "block", - width: width+"px", - height: height+"px", - position: "absolute", - top: pos.top+"px", - left: pos.left+"px", - zIndex: "1000", - paddingTop: pad_top - }) - .animate( - { left: "+="+width+"px" }, duration, - function() { - $("#container_clone").remove(); - var str = ''; - var href = str.match(/https?:\/{2}[^\"]+/gi); - document.location.href = href[0]; - } - ); - - alert("이전 상품이 없습니다."); - - }, - min_move_x: 50, - preventDefaultEvents: false + threshold: 50, + excludedElements:".noSwipe", + allowPageScroll:"vertical" }); }); +function content_move(direction) +{ + var content = $("#container").clone() + .find("#form_btn_layer").remove() + .end().find(".sit_pvi_btn").remove() + .end().html(); + var pos = $("#container").position(); + var width = $("#container").width(); + var height = $("#container").height(); + var pad_top = $("#container").css("padding-top"); + var next_href = ''; + var prev_href = ''; + var str, left_value; + var duration = 500; + + if(direction == "left") { + str = next_href; + left_value = "-="+width+"px"; + } else { + str = prev_href; + left_value = "+="+width+"px"; + } + + // 로딩 레이어 + load_message(); + + $("#container") + .css({ + width: width+"px", + height: height+"px" + }) + .before("
"+content+"
") + .find("*:visible").hide(); + + $("#container_clone") + .css({ + display: "block", + width: width+"px", + height: height+"px", + position: "absolute", + top: pos.top+"px", + left: pos.left+"px", + zIndex: "1000", + paddingTop: pad_top + }) + .animate( + { left: left_value }, duration, + function() { + $("#container_clone").remove(); + var href = str.match(/https?:\/{2}[^\"]+/gi); + document.location.href = href[0]; + } + ); +} + function load_message() { var w = $(window).width();