From 3f15f3823d2351ec7a488bb60773f531c521841e Mon Sep 17 00:00:00 2001
From: Kazerlelutin <b@bouteiller.contact>
Date: Thu, 1 Aug 2024 21:15:31 +0200
Subject: [PATCH] change return button

---
 ctrl/link.js                |  7 +++++--
 ctrl/returnButton.js        |  6 ++++--
 pages/index.html            |  1 -
 pages/ressource.html        |  1 -
 templates/404.html          |  1 -
 templates/basic-layout.html |  5 ++++-
 templates/returnButton.html | 13 +++++++++++--
 templates/sections.html     |  4 +---
 utils/displayReturnBtn.js   | 11 +++++++++++
 9 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 utils/displayReturnBtn.js

diff --git a/ctrl/link.js b/ctrl/link.js
index eeda85c..9504269 100644
--- a/ctrl/link.js
+++ b/ctrl/link.js
@@ -1,9 +1,12 @@
 import { kll } from '../main.js'
+import { displayReturnBtn } from '../utils/displayReturnBtn.js'
+
 export const link = {
-  onClick(_, el, e) {
+  async onClick(_, el, e) {
     e.preventDefault()
     const path = el.getAttribute('href')
     window.history.pushState({}, '', path)
-    kll.injectPage(path)
+    await kll.injectPage(path)
+    displayReturnBtn()
   },
 }
diff --git a/ctrl/returnButton.js b/ctrl/returnButton.js
index 02ec897..44aab39 100644
--- a/ctrl/returnButton.js
+++ b/ctrl/returnButton.js
@@ -1,9 +1,10 @@
 import { kll } from '../main'
+import { displayReturnBtn } from '../utils/displayReturnBtn'
 import { getByDataAttr } from '../utils/getByDataAttr'
 
 export const returnButton = {
-  onInit(_, el) {
-    el.render()
+  async onInit(_, el) {
+    await el.render()
   },
   render(_, el) {
     const textEl = getByDataAttr(el, 'text')
@@ -26,5 +27,6 @@ export const returnButton = {
     arrow.setAttribute('href', el.href)
 
     kll.plugins.translate(textEl)
+    displayReturnBtn()
   },
 }
diff --git a/pages/index.html b/pages/index.html
index e14151a..7311850 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -3,6 +3,5 @@
     <div class="lg:text-base text-sm max-w-[600px] mx-auto mb-2" kll-md></div>
     <div kll-ctrl="categories" kll-id="categories"></div>
   </div>
-
   <div kll-ctrl="mdToHtml"></div>
 </div>
\ No newline at end of file
diff --git a/pages/ressource.html b/pages/ressource.html
index b53e118..9fa324c 100644
--- a/pages/ressource.html
+++ b/pages/ressource.html
@@ -1,7 +1,6 @@
 <div kll-t="basicLayout">
     <div class="gap-5 flex flex-col bold items-center h-full p-3 m-auto max-w-[500px]">
         <div kll-t="fullLoader" data-source-loader></div>
-        <div kll-tc="returnButton" class="w-full"></div>
         <div kll-ctrl="ressource" class="flex flex-col gap-1" kll-id="ressource"></div>
         <div class="border-t border-dashed border-rd-urban_gray w-full mt-5 pt-4 text-center">
             <p xmlns:cc="http://creativecommons.org/ns#" class="text-sm flex flex-col gap-2">
diff --git a/templates/404.html b/templates/404.html
index 96728fb..42e41f8 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,6 +1,5 @@
 <template id="notFound">
     <div class="h-full w-full m-auto">
-        <div kll-tc="returnButton" class="w-full"></div>
         <div class="flex items-center justify-center h-full">
             <div class="text-center">
                 <h1 class="text-4xl font-bold">404</h1>
diff --git a/templates/basic-layout.html b/templates/basic-layout.html
index b667439..c14a03c 100644
--- a/templates/basic-layout.html
+++ b/templates/basic-layout.html
@@ -1,6 +1,9 @@
 <template id="basicLayout">
-  <div class="dark:bg-dark-bg bg-rd-bg dark:text-dark-text grid grid-rows-[auto_1fr_auto] h-[100dvh]">
+  <div class="dark:bg-dark-bg bg-rd-bg dark:text-dark-text grid grid-rows-[auto_auto_1fr_auto] h-[100dvh]">
     <header kll-tc="header"></header>
+    <div>
+      <div kll-tc="returnButton"></div>
+    </div>
     <main kll-ctrl="translate">
       <div class="h-full relative">
         <div class="inset-0 absolute overflow-y-auto">
diff --git a/templates/returnButton.html b/templates/returnButton.html
index 9190e73..b756c0f 100644
--- a/templates/returnButton.html
+++ b/templates/returnButton.html
@@ -1,7 +1,16 @@
 <template id="returnButton">
-  <div class="flex gap-2 uppercase items-center" id="return_button">
+  <div class="flex gap-2 uppercase items-center w-full px-2" id="return_button">
     <a href="/#" kll-ctrl="link" class="w-4 fill-rd-sagwa_young text-sm" data-arrow>
-      🔙
+      <svg width="20px" height="20px" viewBox="0 0 210 297" class="inline">
+        <g id="path1" transform="translate(35.070111,39.088561)">
+          <path id="path5" class="fill-current"
+            d="M 69.467343,29.687012 -68.457271,109.41246 c 45.976504,26.57164 91.950003,53.14849 137.924614,79.72341 V 133.86583 H 208.31705 V 84.957743 H 69.467343 Z">
+          </path>
+          <g id="g2" transform="translate(10.594096,5.1143911)">
+            <g id="path2" transform="translate(-22.649446,-26.667897)" />
+          </g>
+        </g>
+      </svg>
     </a>
     <a href="/#" kll-ctrl="link" data-text class="text-xs dark:text-rd-sagwa_young"></a>
   </div>
diff --git a/templates/sections.html b/templates/sections.html
index e368cb3..04ad9fc 100644
--- a/templates/sections.html
+++ b/templates/sections.html
@@ -1,5 +1,3 @@
 <template id="sections">
-    <div class="flex gap-3 flex-wrap mx-auto min-w-[50dvw] max-w-[800px]">
-        <div kll-tc="returnButton" class="w-full"></div>
-    </div>
+    <div class="flex gap-3 flex-wrap mx-auto min-w-[50dvw] max-w-[800px]"></div>
 </template>
\ No newline at end of file
diff --git a/utils/displayReturnBtn.js b/utils/displayReturnBtn.js
new file mode 100644
index 0000000..ff3c0b2
--- /dev/null
+++ b/utils/displayReturnBtn.js
@@ -0,0 +1,11 @@
+import { kll } from '../main'
+
+export function displayReturnBtn() {
+  const returnButtonEl = document.querySelector('#return_button')
+  if (!returnButtonEl) return
+  const { route } = kll.parseRoute()
+
+  if (route.match(/category|ressource/))
+    returnButtonEl.classList.remove('hidden')
+  else returnButtonEl.classList.add('hidden')
+}