beenull/AntCMS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Incorporate TinyZoom.JS

Browse source
This commit is contained in:
Belle Aerni 2023-03-30 23:01:08 -07:00
parent c084208db6
commit 0663fbc604
5 changed files with 49 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Themes/Bootstrap/Config.yaml
View file

@ -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:

25
src/Themes/Bootstrap/Templates/default.html.twig
View file

@ -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">
<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>
<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">
<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>

1
src/Themes/Default/Assets/Dist/TinyZoom.js Normal file
View file

@ -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")});

6
src/Themes/Default/Config.yaml Normal file
View file

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

18
src/Themes/Default/Templates/default.html.twig
View file

@ -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>