From 0663fbc604fec32d64f7b379c2363f7939146c9f Mon Sep 17 00:00:00 2001 From: Belle Aerni Date: Thu, 30 Mar 2023 23:01:08 -0700 Subject: [PATCH] Incorporate TinyZoom.JS --- src/Themes/Bootstrap/Config.yaml | 2 +- .../Bootstrap/Templates/default.html.twig | 25 +++++++++++++++++-- src/Themes/Default/Assets/Dist/TinyZoom.js | 1 + src/Themes/Default/Config.yaml | 6 +++++ .../Default/Templates/default.html.twig | 18 +++++++++++++ 5 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 src/Themes/Default/Assets/Dist/TinyZoom.js create mode 100644 src/Themes/Default/Config.yaml diff --git a/src/Themes/Bootstrap/Config.yaml b/src/Themes/Bootstrap/Config.yaml index b817b32..0003ac0 100644 --- a/src/Themes/Bootstrap/Config.yaml +++ b/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: diff --git a/src/Themes/Bootstrap/Templates/default.html.twig b/src/Themes/Bootstrap/Templates/default.html.twig index 2cca33d..88253e4 100644 --- a/src/Themes/Bootstrap/Templates/default.html.twig +++ b/src/Themes/Bootstrap/Templates/default.html.twig @@ -8,8 +8,29 @@ - - + + + + + + {{ AntCMSTitle }} diff --git a/src/Themes/Default/Assets/Dist/TinyZoom.js b/src/Themes/Default/Assets/Dist/TinyZoom.js new file mode 100644 index 0000000..e03f9a1 --- /dev/null +++ b/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")}); \ No newline at end of file diff --git a/src/Themes/Default/Config.yaml b/src/Themes/Default/Config.yaml new file mode 100644 index 0000000..0ba53fa --- /dev/null +++ b/src/Themes/Default/Config.yaml @@ -0,0 +1,6 @@ +config: + showAuthor: false + +defaultAttributes: + \League\CommonMark\Extension\CommonMark\Node\Inline\Image: + class: TinyZoom diff --git a/src/Themes/Default/Templates/default.html.twig b/src/Themes/Default/Templates/default.html.twig index 6e4c1f8..24b6460 100644 --- a/src/Themes/Default/Templates/default.html.twig +++ b/src/Themes/Default/Templates/default.html.twig @@ -10,6 +10,24 @@ + + + + {{ AntCMSTitle }}