Skip to content

Instantly share code, notes, and snippets.

@kugimiya
Created January 4, 2019 07:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kugimiya/27ea76e627eed343e3e9474d26df57ce to your computer and use it in GitHub Desktop.
Save kugimiya/27ea76e627eed343e3e9474d26df57ce to your computer and use it in GitHub Desktop.
diff --git a/design/themes/responsive/templates/blocks/product_templates/bigpicture_template.tpl b/design/themes/responsive/templates/blocks/product_templates/bigpicture_template.tpl
index fbbad3a97f..e066a3edb3 100644
--- a/design/themes/responsive/templates/blocks/product_templates/bigpicture_template.tpl
+++ b/design/themes/responsive/templates/blocks/product_templates/bigpicture_template.tpl
@@ -1,4 +1,5 @@
{script src="js/tygh/exceptions.js"}
+{script src="js/tygh/products_pages/big_picture.js"}
<div class="ty-product-bigpicture">
{hook name="products:view_main_info"}
{if $product}
diff --git a/design/themes/responsive/templates/blocks/product_templates/default_template.tpl b/design/themes/responsive/templates/blocks/product_templates/default_template.tpl
index 5c75d3c096..071ac4757e 100644
--- a/design/themes/responsive/templates/blocks/product_templates/default_template.tpl
+++ b/design/themes/responsive/templates/blocks/product_templates/default_template.tpl
@@ -1,4 +1,5 @@
{script src="js/tygh/exceptions.js"}
+{script src="js/tygh/products_pages/default.js"}
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
{hook name="products:view_main_info"}
diff --git a/design/themes/responsive/templates/common/scripts.tpl b/design/themes/responsive/templates/common/scripts.tpl
index 3e52f7b9fd..2463cee0fb 100644
--- a/design/themes/responsive/templates/common/scripts.tpl
+++ b/design/themes/responsive/templates/common/scripts.tpl
@@ -29,6 +29,8 @@
{script src="js/tygh/editors/`$settings.Appearance.default_wysiwyg_editor`.editor.js"}
{script src="js/tygh/responsive.js"}
+{script src="js/lib/swipe/jquery.touchSwipe.min.js"}
+{script src="js/tygh/product_page_swipes.js"}
{if $runtime.customization_mode.live_editor}
{script src="js/lib/autosize/jquery.autosize.js"}
diff --git a/js/lib/swipe/jquery.touchSwipe.min.js b/js/lib/swipe/jquery.touchSwipe.min.js
new file mode 100644
index 0000000000..a22d6acbae
--- /dev/null
+++ b/js/lib/swipe/jquery.touchSwipe.min.js
@@ -0,0 +1,2 @@
+/* jquery.touch v1.1.0 | (c) @ajlkn | github.com/ajlkn/jquery.touch | MIT licensed */
+!function(e){function t(e,t,n){var r=this;r.settings=n,r.$element=e,r.$sourceElement=t,r.inTap=!1,r.inTapAndHold=!1,r.inDrag=!1,r.tapStart=null,r.dragStart=null,r.timerTap=null,r.timerTapAndHold=null,r.mouseDown=!1,r.x=null,r.y=null,r.ex=null,r.ey=null,r.xStart=null,r.yStart=null,r.exStart=null,r.eyStart=null,r.taps=0,r.started=!1,r.ended=!1}function n(e,n,r){var a=e[0];return"undefined"==typeof a._touch&&(a._touch=new t(e,n,r)),a._touch}function r(e,t,n){var r,a,o,s,i;return r=e.$element.offset(),a=e.$element.width(),o=e.$element.height(),s=Math.min(Math.max(t,r.left),r.left+a),i=Math.min(Math.max(n,r.top),r.top+o),{x:s,y:i}}var a=e(document),o=null,s=null,i={useTouch:!0,useMouse:!0,trackDocument:!1,trackDocumentNormalize:!1,noClick:!1,dragThreshold:10,dragDelay:200,swipeThreshold:30,tapDelay:250,tapAndHoldDelay:500,delegateSelector:null,dropFilter:!1,dropFilterTraversal:!0,coordinates:"page",preventDefault:{drag:!1,swipe:!1,tap:!1}};t.prototype.uses=function(t){var n=e._data(this.$sourceElement[0],"events");switch(t){case"swipe":return n.hasOwnProperty(t)||n.hasOwnProperty("swipeUp")||n.hasOwnProperty("swipeDown")||n.hasOwnProperty("swipeLeft")||n.hasOwnProperty("swipeRight");case"drag":return n.hasOwnProperty(t)||n.hasOwnProperty("dragStart")||n.hasOwnProperty("dragEnd");case"tapAndHold":case"doubleTap":return n.hasOwnProperty(t);case"tap":return n.hasOwnProperty(t)||n.hasOwnProperty("doubleTap")||n.hasOwnProperty("tapAndHold")}return!1},t.prototype.cancel=function(e){var t=this;t.taps=0,t.inTap=!1,t.inTapAndHold=!1,t.inDrag=!1,t.tapStart=null,t.dragStart=null,t.xStart=null,t.yStart=null,t.exStart=null,t.eyStart=null,e&&(t.mouseDown=!1)},t.prototype.doStart=function(e,t,n){var r=this,a=r.$element.offset();e.stopPropagation(),(r.uses("drag")&&r.settings.preventDefault.drag(r)||r.uses("swipe")&&r.settings.preventDefault.swipe(r)||r.uses("tap")&&r.settings.preventDefault.tap(r))&&e.preventDefault(),r.uses("tapAndHold")&&r.$element.css("-webkit-tap-highlight-color","rgba(0,0,0,0)").css("-webkit-touch-callout","none").css("-webkit-user-select","none"),r.x=t,r.y=n,r.ex=t-a.left,r.ey=n-a.top,r.tapStart=Date.now(),clearTimeout(r.timerTap),r.timerTap=setTimeout(function(){r.inTap&&r.taps>0&&(r.$element.trigger(2==r.taps?"doubleTap":"tap",{taps:r.taps,x:r.x,y:r.y,ex:r.ex,ey:r.ey,duration:Date.now()-r.tapStart,event:e}),r.cancel()),r.timerTap=null},r.settings.tapDelay),r.uses("tapAndHold")&&(clearTimeout(r.timerTapAndHold),r.timerTapAndHold=setTimeout(function(){r.inTap&&(r.$element.trigger("tapAndHold",{x:r.x,y:r.y,ex:r.ex,ey:r.ey,duration:Date.now()-r.tapStart,event:e}),r.cancel()),r.timerTapAndHold=null,r.inTapAndHold=!0},r.settings.tapAndHoldDelay)),r.inTap=!0},t.prototype.doMove=function(t,n,r){var i,l,u=this,d=u.$element.offset(),p=(Math.abs(u.x-n)+Math.abs(u.y-r))/2;if(t.stopPropagation(),(u.uses("swipe")&&u.settings.preventDefault.swipe(u)||u.uses("drag")&&u.settings.preventDefault.drag(u))&&t.preventDefault(),p>2&&clearTimeout(u.timerTapAndHold),u.inDrag&&o==u){if(u.$element.trigger("drag",{x:n,y:r,ex:n-d.left,ey:r-d.top,start:{x:u.xStart,y:u.yStart,ex:u.exStart,ey:u.eyStart},event:t,exStart:u.exStart,eyStart:u.eyStart}),u.$element.css("pointer-events","none"),i="fixed"==u.$element.css("position")?document.elementFromPoint(n-a.scrollLeft(),r-a.scrollTop()):document.elementFromPoint(n,r),u.$element.css("pointer-events",""),i){if(u.settings.dropFilter!==!1)switch(l=typeof u.settings.dropFilter){case"string":if(u.settings.dropFilterTraversal)for(;i&&!e(i).is(u.settings.dropFilter);)i=i.parentElement;else e(i).is(u.settings.dropFilter)||(i=null);break;case"function":if(u.settings.dropFilterTraversal)for(;i&&u.settings.dropFilter(u.$element[0],i)!==!0;)i=i.parentElement;else u.settings.dropFilter(u.$element[0],i)===!1&&(i=null);break;default:case"boolean":if(u.settings.dropFilter===!0)for(;i.parentElement!=u.$element[0].parentElement;)if(i=i.parentElement,!i){i=null;break}}i===u.$element[0]&&(i=null)}s&&s!==i&&(u.$element.trigger("dragLeave",{element:s,event:t}),s=null),!s&&i&&(s=i,u.$element.trigger("dragEnter",{element:s,event:t})),s&&(d=e(s).offset(),u.$element.trigger("dragOver",{element:s,event:t,x:n,y:r,ex:n-d.left,ey:r-d.top}))}else if(p>u.settings.dragThreshold){if(Date.now()-u.tapStart<u.settings.dragDelay)return void u.cancel();u.cancel(),u.inDrag=!0,u.dragStart=Date.now(),u.xStart=n,u.yStart=r,u.exStart=n-d.left,u.eyStart=r-d.top,u.uses("drag")&&u.settings.preventDefault.drag(u)&&t.preventDefault(),u.$element.trigger("dragStart",{x:u.xStart,y:u.yStart,ex:u.exStart,ey:u.eyStart,event:t}),o=u}},t.prototype.doEnd=function(t,n,r){var a,i,l,u=this,d=u.$element.offset(),p=Math.abs(u.x-n),c=Math.abs(u.y-r);t.stopPropagation(),u.inTap?(clearTimeout(u.timerTapAndHold),u.taps++,(!u.timerTap||1==u.taps&&!u.uses("doubleTap")||2==u.taps&&u.uses("doubleTap"))&&(u.$element.trigger(2==u.taps?"doubleTap":"tap",{taps:u.taps,x:u.x,y:u.y,ex:u.ex,ey:u.ey,duration:Date.now()-u.tapStart,event:t}),u.cancel())):u.inDrag?(s&&(d=e(s).offset(),u.$element.trigger("drop",{element:s,event:t,x:n,y:r,ex:n-d.left,ey:r-d.top}),s=null),l=Date.now()-u.dragStart,a=Math.sqrt(Math.pow(Math.abs(u.x-n),2)+Math.pow(Math.abs(u.y-r),2)),i=a/l,u.$element.trigger("dragEnd",{start:{x:u.x,y:u.y,ex:u.ex,ey:u.ey},end:{x:n,y:r,ex:n-d.left,ey:r-d.top},distance:a,duration:l,velocity:i,event:t}),o=null,(p>u.settings.swipeThreshold||c>u.settings.swipeThreshold)&&(u.$element.trigger("swipe",{distance:a,duration:l,velocity:i,event:t}),p>c?(i=p/l,n<u.x?u.$element.trigger("swipeLeft",{distance:p,duration:l,velocity:i,event:t}):u.$element.trigger("swipeRight",{distance:p,duration:l,velocity:i,event:t})):c>p&&(i=c/l,r<u.y?u.$element.trigger("swipeUp",{distance:c,duration:l,velocity:i,event:t}):u.$element.trigger("swipeDown",{distance:c,duration:l,velocity:i,event:t}))),u.inDrag=!1):u.inTapAndHold&&(clearTimeout(u.timerTapAndHold),u.$element.trigger("tapAndHoldEnd",{x:u.x,y:u.y,event:t}),u.inTapAndHold=!1)},e.fn.touch=function(t){var n=e(this);if(this.length>1)for(var r=0;r<this.length;r++)e.touch(e(this[r]),t);else 1==this.length&&e.touch(n,t);return n},e.fn.enableTouch=function(t){return e(this).touch(t)},e.touch=function(t,o){var s={};if(s=e.extend(s,i),s=e.extend(s,o),"function"!=typeof s.preventDefault.drag&&(s.preventDefault.drag=s.preventDefault.drag===!0?function(e){return!0}:function(e){return!1}),"function"!=typeof s.preventDefault.swipe&&(s.preventDefault.swipe=s.preventDefault.swipe===!0?function(e){return!0}:function(e){return!1}),"function"!=typeof s.preventDefault.tap&&(s.preventDefault.tap=s.preventDefault.tap===!0?function(e){return!0}:function(e){return!1}),s.noClick&&t.on("click",function(e){e.preventDefault()}),s.useTouch){var l=function(r){var a=e(this),o=n(a,t,s);o.started=!0,o.doStart(r,r.originalEvent.touches[0][s.coordinates+"X"],r.originalEvent.touches[0][s.coordinates+"Y"]),setTimeout(function(){o.started=!1},1e3)};t.on("touchstart",l),s.delegateSelector&&t.on("touchstart",s.delegateSelector,l);var u=function(a){var o=e(this),i=n(o,t,s),l=a.originalEvent.touches[0][s.coordinates+"X"],u=a.originalEvent.touches[0][s.coordinates+"Y"];if(i.settings.trackDocument&&i.settings.trackDocumentNormalize){var d=r(i,l,u);l=d.x,u=d.y}i.doMove(a,l,u)};t.on("touchmove",u),s.delegateSelector&&t.on("touchmove",s.delegateSelector,u);var d=function(a){var o=e(this),i=n(o,t,s);i.ended=!0;var l=r(i,a.originalEvent.changedTouches[0][s.coordinates+"X"],a.originalEvent.changedTouches[0][s.coordinates+"Y"]);i.doEnd(a,l.x,l.y),setTimeout(function(){i.ended=!1},1e3)};t.on("touchend",d),s.delegateSelector&&t.on("touchend",s.delegateSelector,d)}if(s.useMouse){var p=function(r){var a=e(this),o=n(a,t,s);return!o.started&&(o.mouseDown=!0,void o.doStart(r,r[s.coordinates+"X"],r[s.coordinates+"Y"]))};t.on("mousedown",p),s.delegateSelector&&t.on("mousedown",s.delegateSelector,p);var c=function(r){var a=e(this),o=n(a,t,s);o.mouseDown&&o.doMove(r,r[s.coordinates+"X"],r[s.coordinates+"Y"])};t.on("mousemove",c),s.delegateSelector&&t.on("mousemove",s.delegateSelector,c);var g=function(r){var o=e(this),i=n(o,t,s);return!i.ended&&(a.triggerHandler("mouseup",r),i.doEnd(r,r[s.coordinates+"X"],r[s.coordinates+"Y"]),void(i.mouseDown=!1))};t.on("mouseup",g),s.delegateSelector&&t.on("mouseup",s.delegateSelector,g)}s.trackDocument||t.on("mouseleave",function(r){var a=e(this),o=n(a,t,s);o.doEnd(r,r[s.coordinates+"X"],r[s.coordinates+"Y"]),o.mouseDown=!1})},a.on("mousemove",function(e){var t=o;if(t&&t.settings.useMouse&&t.mouseDown&&t.settings.trackDocument){var n=e[t.settings.coordinates+"X"],a=e[t.settings.coordinates+"Y"];if(t.settings.trackDocumentNormalize){var s=r(t,n,a);n=s.x,a=s.y}t.doMove(e,n,a)}}).on("mouseup",function(e,t){var n=o;if(n&&n.settings.useMouse&&n.settings.trackDocument){if("undefined"!=typeof t&&(e=t),!(n.settings.coordinates+"X"in e))return;var a=e[n.settings.coordinates+"X"],s=e[n.settings.coordinates+"Y"];if(n.settings.trackDocumentNormalize){var i=r(n,a,s);a=i.x,s=i.y}n.doEnd(e,a,s),n.mouseDown=!1}})}(jQuery);
\ No newline at end of file
diff --git a/js/tygh/previewers/fancybox.previewer.js b/js/tygh/previewers/fancybox.previewer.js
index 748db9ddda..17a8facd74 100644
--- a/js/tygh/previewers/fancybox.previewer.js
+++ b/js/tygh/previewers/fancybox.previewer.js
@@ -47,6 +47,7 @@
});
elm.click();
+ $.ceEvent('trigger', 'ce.image-previewers.fancybox.initend', []);
}
}
});
diff --git a/js/tygh/previewers/lightbox.previewer.js b/js/tygh/previewers/lightbox.previewer.js
index 056d6df556..0945fbfc7c 100644
--- a/js/tygh/previewers/lightbox.previewer.js
+++ b/js/tygh/previewers/lightbox.previewer.js
@@ -22,6 +22,7 @@
});
elm.click();
+ $.ceEvent('trigger', 'ce.image-previewers.lightbox.initend', []);
}
}
});
diff --git a/js/tygh/previewers/magnific.previewer.js b/js/tygh/previewers/magnific.previewer.js
index 270a9ca73e..c262b498a7 100644
--- a/js/tygh/previewers/magnific.previewer.js
+++ b/js/tygh/previewers/magnific.previewer.js
@@ -34,6 +34,8 @@
});
elm.click();
+ } else {
+ $.ceEvent('trigger', 'ce.image-previewers.magnificpopup.initend', []);
}
}
});
diff --git a/js/tygh/previewers/prettyphoto.previewer.js b/js/tygh/previewers/prettyphoto.previewer.js
index aad3be6f4e..3167f969ab 100644
--- a/js/tygh/previewers/prettyphoto.previewer.js
+++ b/js/tygh/previewers/prettyphoto.previewer.js
@@ -40,6 +40,8 @@
$.prettyPhoto.close();
}
});
+
+ $.ceEvent('trigger', 'ce.image-previewers.prettyphoto.initend', []);
});
});
diff --git a/js/tygh/product_page_swipes.js b/js/tygh/product_page_swipes.js
new file mode 100644
index 0000000000..1ba673502e
--- /dev/null
+++ b/js/tygh/product_page_swipes.js
@@ -0,0 +1,172 @@
+(function (_, $) {
+ var defaultOpts = {
+ preventDefault: {
+ drag: false,
+ swipe: false,
+ tap: false
+ },
+
+ trackDocument: true,
+ trackDocumentNormalize: true,
+
+ useTouch: true,
+ useMouse: true
+ };
+
+
+ $.swipesManagers = {
+
+
+ defaultProductPage: function () {
+ $('.ty-product-block__img-wrapper').touch(defaultOpts);
+
+ $('.ty-product-block__img-wrapper').on('swipeLeft', function () {
+ processProductImage('left');
+ });
+
+ $('.ty-product-block__img-wrapper').on('swipeRight', function () {
+ processProductImage('right');
+ });
+ },
+
+
+ bigPictureProductPage: function () {
+ $('.ty-product-bigpicture__img').touch(defaultOpts);
+
+ $('.ty-product-bigpicture__img').on('swipeLeft', function () {
+ processProductImage('left');
+ });
+
+ $('.ty-product-bigpicture__img').on('swipeRight', function () {
+ processProductImage('right');
+ });
+ },
+
+
+ productPagePreviewers: function () {
+
+
+ // Bind listening FancyBox
+ $.ceEvent('on', 'ce.image-previewers.fancybox.initend', function () {
+ $('#fancybox-wrap')
+ .touch(defaultOpts)
+ .on('swipeLeft', function () {
+ processFancyBox('left');
+ })
+ .on('swipeRight', function () {
+ processFancyBox('right');
+ });
+ });
+
+
+ // Bind listening LightBox
+ $.ceEvent('on', 'ce.image-previewers.lightbox.initend', function () {
+ $('#jquery-lightbox')
+ .touch(defaultOpts)
+ .on('swipeLeft', function () {
+ processLightBox('left');
+ })
+ .on('swipeRight', function () {
+ processLightBox('right');
+ });
+ });
+
+
+ // Bind listening MagnificPopup
+ $.ceEvent('on', 'ce.image-previewers.magnificpopup.initend', function () {
+ $('.mfp-content')
+ .touch(defaultOpts)
+ .on('swipeLeft', function () {
+ processMagnificPopup('left');
+ })
+ .on('swipeRight', function () {
+ processMagnificPopup('right');
+ });
+ });
+
+ // Bind listetning PrettyPhoto
+ $.ceEvent('on', 'ce.image-previewers.prettyphoto.initend', function () {
+ $('.pp_default')
+ .touch(defaultOpts)
+ .on('swipeLeft', function () {
+ $.prettyPhoto.changePage('next');
+ })
+ .on('swipeRight', function () {
+ $.prettyPhoto.changePage('previous');
+ });
+ });
+
+ }
+ };
+
+ function processMagnificPopup (direction) {
+ if (direction == 'left') {
+ $('.mfp-arrow-right').click();
+ }
+
+ if (direction == 'right') {
+ $('.mfp-arrow-left').click();
+ }
+ }
+
+ function processLightBox (direction) {
+ if (direction == 'left') {
+ $('#lightbox-nav-btnNext').click();
+ }
+
+ if (direction == 'right') {
+ $('#lightbox-nav-btnPrev').click();
+ }
+ }
+
+ function processFancyBox (direction) {
+ if (direction == 'left') {
+ $('#fancybox-right').click();
+ }
+
+ if (direction == 'right') {
+ $('#fancybox-left').click();
+ }
+ }
+
+ function processProductImage (direction) {
+ var currentItem = $('.cm-thumbnails-mini.active'),
+ itemsCount = currentItem.parent().children().length;
+
+ if ( (currentItem.index() == 0) && (direction == 'right') ) {
+ _click(currentItem.siblings().last());
+ return;
+ }
+
+ if ( (currentItem.index() == 0) && (direction == 'left') ) {
+ _click(currentItem.next());
+ return;
+ }
+
+ if ( (currentItem.index() + 1 == itemsCount) && (direction == 'left') ) {
+ _click(currentItem.siblings().first());
+ return;
+ }
+
+ if ( (currentItem.index() + 1 == itemsCount) && (direction == 'right') ) {
+ _click(currentItem.prev());
+ return;
+ }
+
+ if ( (currentItem.index() != 0) && (currentItem.index() + 1 != itemsCount) ) {
+ if (direction == 'right') {
+ _click(currentItem.prev());
+ return;
+ }
+
+ if (direction == 'left') {
+ _click(currentItem.next());
+ return;
+ }
+ }
+ }
+
+ function _click (elm) {
+ $(elm).find('img').click(0);
+ }
+})(Tygh, Tygh.$);
\ No newline at end of file
diff --git a/js/tygh/products_pages/big_picture.js b/js/tygh/products_pages/big_picture.js
new file mode 100644
index 0000000000..d928557c5b
--- /dev/null
+++ b/js/tygh/products_pages/big_picture.js
@@ -0,0 +1,10 @@
+(function (_, $) {
+ $.ceEvent('on', 'ce.commoninit', function () {
+ initSwipesListeners();
+ });
+
+ function initSwipesListeners() {
+ $.swipesManagers.bigPictureProductPage();
+ $.swipesManagers.productPagePreviewers();
+ }
+})(Tygh, Tygh.$);
\ No newline at end of file
diff --git a/js/tygh/products_pages/default.js b/js/tygh/products_pages/default.js
new file mode 100644
index 0000000000..d5600f6268
--- /dev/null
+++ b/js/tygh/products_pages/default.js
@@ -0,0 +1,10 @@
+(function (_, $) {
+ $.ceEvent('on', 'ce.commoninit', function () {
+ initSwipesListeners();
+ });
+
+ function initSwipesListeners() {
+ $.swipesManagers.defaultProductPage();
+ $.swipesManagers.productPagePreviewers();
+ }
+})(Tygh, Tygh.$);
\ No newline at end of file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment