From bbc52b95e4b69344cad465e7a992176c36a20875 Mon Sep 17 00:00:00 2001
From: Andre Beging <github@beging.de>
Date: Tue, 18 Aug 2020 12:48:50 +0200
Subject: [PATCH] Added zooming to images

---
 content/anreise.md           | 10 ++++++++--
 content/location.md          | 30 +++++++++++-------------------
 content/merch.md             | 15 ++++++++++-----
 layouts/partials/footer.html |  1 +
 static/js/zooming.min.js     |  1 +
 5 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 static/js/zooming.min.js

diff --git a/content/anreise.md b/content/anreise.md
index d37cea8..7dad1bf 100644
--- a/content/anreise.md
+++ b/content/anreise.md
@@ -17,7 +17,7 @@ Daubachtal 1\
 
 Sowohl Google Maps als auch sonstige Routenplaner und Navigationssysteme sollten die Adresse schlucken. Falls nicht, findet ihr hier eine kleine Abbildung, die euch vom Ort aus den Weg weist:
 
-<a href="../assets/anfahrt.png" target="_blank"><img src="../assets/anfahrt.png" /></a>
+<img src="../assets/anfahrt.png" class="zoom" />
 <small>(KLICKEN ZUM VERGRÖßERN)</small>
 
 
@@ -40,4 +40,10 @@ Dennoch hier zwei Beispiel-Verbindungen mit dem ÖPNV:
 
 **Beispiel-Verbindung ab Koblenz**
 <a href="../assets/oeffi_koblenz.png" target="_blank"><img src="../assets/oeffi_koblenz.png" /></a>
-<small>(KLICKEN ZUM VERGRÖßERN)</small>
\ No newline at end of file
+<small>(KLICKEN ZUM VERGRÖßERN)</small>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 
\ No newline at end of file
diff --git a/content/location.md b/content/location.md
index 3dbc0fc..dc6ab2a 100644
--- a/content/location.md
+++ b/content/location.md
@@ -17,9 +17,7 @@ Daubachtal 1\
             Mit Parkplätzen
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg" class="zoom" />
         </div>
     </article>
     <article class="card">
@@ -28,9 +26,7 @@ Daubachtal 1\
             Kinder bitte wegdenken
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg" class="zoom"  />
         </div>
     </article>
     <article class="card">
@@ -39,9 +35,7 @@ Daubachtal 1\
             Eingehend geprüfte Flunkyballeignung
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg" class="zoom"  />
         </div>
     </article>
     <article class="card">
@@ -50,9 +44,7 @@ Daubachtal 1\
             Von innen viel größer. 80qm
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg" class="zoom"  />
         </div>
     </article>
     <article class="card">
@@ -61,9 +53,7 @@ Daubachtal 1\
             Gulasch? Gulasch!
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg" class="zoom"  />
         </div>
     </article>
     <article class="card">
@@ -72,13 +62,15 @@ Daubachtal 1\
             Morgens ein paar Bahnen schwimmen
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg"  />
-            </a>
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg" class="zoom"  />
         </div>
     </article>
 </section>
 
-
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 
 
 
diff --git a/content/merch.md b/content/merch.md
index 4e4313d..f31fb5c 100644
--- a/content/merch.md
+++ b/content/merch.md
@@ -89,7 +89,7 @@ date: '2020-02-18'
             <strong>T-Shirt</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/shirt.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/shirt.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Vorne im klassischen &lt;DD&gt;-Design<br />
                 Die Rückseite mit Event-Motiv<br />
@@ -103,7 +103,7 @@ date: '2020-02-18'
             <strong>Bierkrug</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/bierkrug.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/bierkrug.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Rundherum bedruckt im coolen &lt;DD&gt;-Design<br />
                 Personalisiert mit Hex-ID<br />
@@ -117,7 +117,7 @@ date: '2020-02-18'
             <strong>Weißbierglas</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/weizen.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/weizen.png" data-original="../assets/weizen.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Hochwertige Lasergravur<br />
                 im coolen &lt;DD&gt;-Design<br />
@@ -131,7 +131,7 @@ date: '2020-02-18'
             <strong>Emaille Tasse</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/emaille.jpg" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/emaille.jpg" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Rundherum bedruckt im coolen &lt;DD&gt;-Design<br />
                 &nbsp;<br />
@@ -140,4 +140,9 @@ date: '2020-02-18'
             <h2>€ 10,00</h2>
         </div>
     </article>
-</section>
\ No newline at end of file
+</section>
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 299416a..b93266f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -24,4 +24,5 @@
   </div>
 </footer>
 
+<script src='{{ "js/zooming.min.js" | absURL }}'></script>
 <script src='{{ "js/script.js" | absURL }}'></script>
\ No newline at end of file
diff --git a/static/js/zooming.min.js b/static/js/zooming.min.js
new file mode 100644
index 0000000..7e7c1ee
--- /dev/null
+++ b/static/js/zooming.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Zooming=e()}(this,function(){"use strict";var t="auto",n="zoom-in",o="zoom-out",r="grab",a="move";function l(t,e,i){var n={passive:!1};!(3<arguments.length&&void 0!==arguments[3])||arguments[3]?t.addEventListener(e,i,n):t.removeEventListener(e,i,n)}function h(t,e){if(t){var i=new Image;i.onload=function(){e&&e(i)},i.src=t}}function s(t){return t.dataset.original?t.dataset.original:"A"===t.parentNode.tagName?t.parentNode.getAttribute("href"):null}function c(t,e,i){if(e.transition){var n=e.transition;delete e.transition,e.transition=n}if(e.transform){var s=e.transform;delete e.transform,e.transform=s}var o=t.style,r={};for(var a in e)i&&(r[a]=o[a]||""),o[a]=e[a];return r}var e=function(){},i={enableGrab:!0,preloadImage:!1,closeOnWindowResize:!0,transitionDuration:.4,transitionTimingFunction:"cubic-bezier(0.4, 0, 0, 1)",bgColor:"rgb(255, 255, 255)",bgOpacity:1,scaleBase:1,scaleExtra:.5,scrollThreshold:40,zIndex:998,customSize:null,onOpen:e,onClose:e,onGrab:e,onMove:e,onRelease:e,onBeforeOpen:e,onBeforeClose:e,onBeforeGrab:e,onBeforeRelease:e,onImageLoading:e,onImageLoaded:e},u={init:function(t){var e,i;e=this,i=t,Object.getOwnPropertyNames(Object.getPrototypeOf(e)).forEach(function(t){e[t]=e[t].bind(i)})},click:function(t){if(t.preventDefault(),f(t))return window.open(this.target.srcOriginal||t.currentTarget.src,"_blank");this.shown?this.released?this.close():this.release():this.open(t.currentTarget)},scroll:function(){var t=document.documentElement||document.body.parentNode||document.body,e=window.pageXOffset||t.scrollLeft,i=window.pageYOffset||t.scrollTop;null===this.lastScrollPosition&&(this.lastScrollPosition={x:e,y:i});var n=this.lastScrollPosition.x-e,s=this.lastScrollPosition.y-i,o=this.options.scrollThreshold;(Math.abs(s)>=o||Math.abs(n)>=o)&&(this.lastScrollPosition=null,this.close())},keydown:function(t){var e;("Escape"===((e=t).key||e.code)||27===e.keyCode)&&(this.released?this.close():this.release(this.close))},mousedown:function(t){if(d(t)&&!f(t)){t.preventDefault();var e=t.clientX,i=t.clientY;this.pressTimer=setTimeout(function(){this.grab(e,i)}.bind(this),200)}},mousemove:function(t){this.released||this.move(t.clientX,t.clientY)},mouseup:function(t){d(t)&&!f(t)&&(clearTimeout(this.pressTimer),this.released?this.close():this.release())},touchstart:function(t){t.preventDefault();var e=t.touches[0],i=e.clientX,n=e.clientY;this.pressTimer=setTimeout(function(){this.grab(i,n)}.bind(this),200)},touchmove:function(t){if(!this.released){var e=t.touches[0],i=e.clientX,n=e.clientY;this.move(i,n)}},touchend:function(t){void t.targetTouches.length||(clearTimeout(this.pressTimer),this.released?this.close():this.release())},clickOverlay:function(){this.close()},resizeWindow:function(){this.close()}};function d(t){return 0===t.button}function f(t){return t.metaKey||t.ctrlKey}var p={init:function(t){this.el=document.createElement("div"),this.instance=t,this.parent=document.body,c(this.el,{position:"fixed",top:0,left:0,right:0,bottom:0,opacity:0}),this.updateStyle(t.options),l(this.el,"click",t.handler.clickOverlay.bind(t))},updateStyle:function(t){c(this.el,{zIndex:t.zIndex,backgroundColor:t.bgColor,transition:"opacity\n        "+t.transitionDuration+"s\n        "+t.transitionTimingFunction})},insert:function(){this.parent.appendChild(this.el)},remove:function(){this.parent.removeChild(this.el)},fadeIn:function(){this.el.offsetWidth,this.el.style.opacity=this.instance.options.bgOpacity},fadeOut:function(){this.el.style.opacity=0}},m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}(),g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},v={init:function(t,e){this.el=t,this.instance=e,this.srcThumbnail=this.el.getAttribute("src"),this.srcset=this.el.getAttribute("srcset"),this.srcOriginal=s(this.el),this.rect=this.el.getBoundingClientRect(),this.translate=null,this.scale=null,this.styleOpen=null,this.styleClose=null},zoomIn:function(){var t=this.instance.options,e=t.zIndex,i=t.enableGrab,n=t.transitionDuration,s=t.transitionTimingFunction;this.translate=this.calculateTranslate(),this.scale=this.calculateScale(),this.styleOpen={position:"relative",zIndex:e+1,cursor:i?r:o,transition:"transform\n        "+n+"s\n        "+s,transform:"translate3d("+this.translate.x+"px, "+this.translate.y+"px, 0px)\n        scale("+this.scale.x+","+this.scale.y+")",height:this.rect.height+"px",width:this.rect.width+"px"},this.el.offsetWidth,this.styleClose=c(this.el,this.styleOpen,!0)},zoomOut:function(){this.el.offsetWidth,c(this.el,{transform:"none"})},grab:function(t,e,i){var n=b(),s=n.x-t,o=n.y-e;c(this.el,{cursor:a,transform:"translate3d(\n        "+(this.translate.x+s)+"px, "+(this.translate.y+o)+"px, 0px)\n        scale("+(this.scale.x+i)+","+(this.scale.y+i)+")"})},move:function(t,e,i){var n=b(),s=n.x-t,o=n.y-e;c(this.el,{transition:"transform",transform:"translate3d(\n        "+(this.translate.x+s)+"px, "+(this.translate.y+o)+"px, 0px)\n        scale("+(this.scale.x+i)+","+(this.scale.y+i)+")"})},restoreCloseStyle:function(){c(this.el,this.styleClose)},restoreOpenStyle:function(){c(this.el,this.styleOpen)},upgradeSource:function(){if(this.srcOriginal){var t=this.el.parentNode;this.srcset&&this.el.removeAttribute("srcset");var e=this.el.cloneNode(!1);e.setAttribute("src",this.srcOriginal),e.style.position="fixed",e.style.visibility="hidden",t.appendChild(e),setTimeout(function(){this.el.setAttribute("src",this.srcOriginal),t.removeChild(e)}.bind(this),50)}},downgradeSource:function(){this.srcOriginal&&(this.srcset&&this.el.setAttribute("srcset",this.srcset),this.el.setAttribute("src",this.srcThumbnail))},calculateTranslate:function(){var t=b(),e=this.rect.left+this.rect.width/2,i=this.rect.top+this.rect.height/2;return{x:t.x-e,y:t.y-i}},calculateScale:function(){var t=this.el.dataset,e=t.zoomingHeight,i=t.zoomingWidth,n=this.instance.options,s=n.customSize,o=n.scaleBase;if(!s&&e&&i)return{x:i/this.rect.width,y:e/this.rect.height};if(s&&"object"===(void 0===s?"undefined":m(s)))return{x:s.width/this.rect.width,y:s.height/this.rect.height};var r=this.rect.width/2,a=this.rect.height/2,l=b(),h=(l.x-r)/r,c=(l.y-a)/a,u=o+Math.min(h,c);if(s&&"string"==typeof s){var d=i||this.el.naturalWidth,f=e||this.el.naturalHeight,p=parseFloat(s)*d/(100*this.rect.width),y=parseFloat(s)*f/(100*this.rect.height);if(p<u||y<u)return{x:p,y:y}}return{x:u,y:u}}};function b(){var t=document.documentElement;return{x:Math.min(t.clientWidth,window.innerWidth)/2,y:Math.min(t.clientHeight,window.innerHeight)/2}}function w(e,i,n){["mousedown","mousemove","mouseup","touchstart","touchmove","touchend"].forEach(function(t){l(e,t,i[t],n)})}return function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.target=Object.create(v),this.overlay=Object.create(p),this.handler=Object.create(u),this.body=document.body,this.shown=!1,this.lock=!1,this.released=!0,this.lastScrollPosition=null,this.pressTimer=null,this.options=g({},i,t),this.overlay.init(this),this.handler.init(this)}return y(e,[{key:"listen",value:function(t){if("string"==typeof t)for(var e=document.querySelectorAll(t),i=e.length;i--;)this.listen(e[i]);else"IMG"===t.tagName&&(t.style.cursor=n,l(t,"click",this.handler.click),this.options.preloadImage&&h(s(t)));return this}},{key:"config",value:function(t){return t?(g(this.options,t),this.overlay.updateStyle(this.options),this):this.options}},{key:"open",value:function(t){var e=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:this.options.onOpen;if(!this.shown&&!this.lock){var n="string"==typeof t?document.querySelector(t):t;if("IMG"===n.tagName){if(this.options.onBeforeOpen(n),this.target.init(n,this),!this.options.preloadImage){var s=this.target.srcOriginal;null!=s&&(this.options.onImageLoading(n),h(s,this.options.onImageLoaded))}this.shown=!0,this.lock=!0,this.target.zoomIn(),this.overlay.insert(),this.overlay.fadeIn(),l(document,"scroll",this.handler.scroll),l(document,"keydown",this.handler.keydown),this.options.closeOnWindowResize&&l(window,"resize",this.handler.resizeWindow);return l(n,"transitionend",function t(){l(n,"transitionend",t,!1),e.lock=!1,e.target.upgradeSource(),e.options.enableGrab&&w(document,e.handler,!0),i(n)}),this}}}},{key:"close",value:function(){var e=this,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.options.onClose;if(this.shown&&!this.lock){var n=this.target.el;this.options.onBeforeClose(n),this.lock=!0,this.body.style.cursor=t,this.overlay.fadeOut(),this.target.zoomOut(),l(document,"scroll",this.handler.scroll,!1),l(document,"keydown",this.handler.keydown,!1),this.options.closeOnWindowResize&&l(window,"resize",this.handler.resizeWindow,!1);return l(n,"transitionend",function t(){l(n,"transitionend",t,!1),e.shown=!1,e.lock=!1,e.target.downgradeSource(),e.options.enableGrab&&w(document,e.handler,!1),e.target.restoreCloseStyle(),e.overlay.remove(),i(n)}),this}}},{key:"grab",value:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.options.scaleExtra,n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:this.options.onGrab;if(this.shown&&!this.lock){var s=this.target.el;this.options.onBeforeGrab(s),this.released=!1,this.target.grab(t,e,i);return l(s,"transitionend",function t(){l(s,"transitionend",t,!1),n(s)}),this}}},{key:"move",value:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.options.scaleExtra,n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:this.options.onMove;if(this.shown&&!this.lock){this.released=!1,this.body.style.cursor=a,this.target.move(t,e,i);var s=this.target.el;return l(s,"transitionend",function t(){l(s,"transitionend",t,!1),n(s)}),this}}},{key:"release",value:function(){var e=this,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.options.onRelease;if(this.shown&&!this.lock){var n=this.target.el;this.options.onBeforeRelease(n),this.lock=!0,this.body.style.cursor=t,this.target.restoreOpenStyle();return l(n,"transitionend",function t(){l(n,"transitionend",t,!1),e.lock=!1,e.released=!0,i(n)}),this}}}]),e}()});