Incorporate TinyZoom.JS

src/Themes/Bootstrap/Config.yaml

@@ -5,7 +5,7 @@ defaultAttributes:
   \League\CommonMark\Extension\Table\Table:
     class: table table-hover
   \League\CommonMark\Extension\CommonMark\Node\Inline\Image:
-    class: img-fluid
+    class: img-fluid TinyZoom
   \League\CommonMark\Extension\CommonMark\Node\Block\BlockQuote:
     class: blockquote
   \League\CommonMark\Extension\CommonMark\Node\Block\ListBlock:

src/Themes/Bootstrap/Templates/default.html.twig

@@ -8,8 +8,29 @@
   <meta name="author" content="{{ AntCMSAuthor }}">
   <meta name="keywords" content="{{ AntCMSKeywords }}">
 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
+    integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
+    crossorigin="anonymous"></script>
+
+  <script src="{{ "Themes/Default/Assets/Dist/TinyZoom.js"|absUrl }}" defer></script>
+
+  <style>
+    .fullscreen-image {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 999;
+      backdrop-filter: blur(5px);
+    }
+  </style>
 
   <title>{{ AntCMSTitle }}</title>
 </head>

src/Themes/Default/Assets/Dist/TinyZoom.js

@@ -0,0 +1 @@
+class TinyZoom{constructor(e){let t=document.querySelectorAll(e);t.forEach(e=>{e.style.cursor="pointer",e.addEventListener("click",()=>{this.makeFullscreen(e)}),e.addEventListener("touchstart",t=>{t.preventDefault(),this.makeFullscreen(e)})})}makeFullscreen(e){let t=document.createElement("div");t.classList.add("fullscreen-image");let i=document.createElement("canvas"),n=i.getContext("2d");i.width=e.width,i.height=e.height,n.drawImage(e,0,0,e.width,e.height);var l=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),a=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0);if(l>0)var d=e.width>l?l/e.width*.75:1;if(a>0)var r=e.height>a?a/e.height*.75:1;t.appendChild(i),document.body.appendChild(t),t.addEventListener("click",e=>{e.target===t&&t.remove()}),t.addEventListener("wheel",e=>{e.target===t&&e.preventDefault()});let s,h,o,c=1;function m(t){c*=t,i.style.transform=`scale(${c})`,n.clearRect(0,0,i.width,i.height),n.drawImage(e,0,0,e.width,e.height)}i.style.position="absolute",i.style.left=l/2-e.width/2+"px",i.style.top=a/2-e.height/2+"px",i.style.cursor="move",i.addEventListener("wheel",e=>{e.preventDefault();let t=e.deltaY>0?.9:1.1;m(t)}),i.addEventListener("mousedown",e=>{s=e.pageX-i.offsetLeft,h=e.pageY-i.offsetTop,o=!0}),i.addEventListener("mousemove",e=>{if(o){let t=e.pageX-s,n=e.pageY-h;i.style.left=`${t}px`,i.style.top=`${n}px`}}),i.addEventListener("mouseup",()=>{o=!1}),i.addEventListener("dblclick",e=>{m(e.shiftKey?.5:2)});var v=Math.min(1,d,r);1!=v&&m(v)}}window.addEventListener("load",()=>{new TinyZoom(".TinyZoom")});

src/Themes/Default/Config.yaml

@@ -0,0 +1,6 @@
+config:
+  showAuthor: false
+
+defaultAttributes:
+  \League\CommonMark\Extension\CommonMark\Node\Inline\Image:
+    class: TinyZoom

src/Themes/Default/Templates/default.html.twig

@@ -10,6 +10,24 @@
 
   <link href="{{ "Themes/Default/Assets/Dist/tailwind.css"|absUrl }}" rel="stylesheet">
 
+  <script src="{{ "Themes/Default/Assets/Dist/TinyZoom.js"|absUrl }}" defer></script>
+
+  <style>
+    .fullscreen-image {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 999;
+      backdrop-filter: blur(5px);
+    }
+  </style>
+
   <title>{{ AntCMSTitle }}</title>
 </head>