feat: improve code clarity

dewanakl · Dec 30, 2024 · fdc3064 · fdc3064
1 parent 88bf752
commit fdc3064
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -154,7 +154,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
             <!-- Love animation -->
             <div class="position-relative">
                 <div class="position-absolute" style="top: 0%; right: 5%;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 500, 'animate-love')" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 500, 'animate-love')" viewBox="0 0 16 16">
                         <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                     </svg>
                 </div>
@@ -172,7 +172,7 @@ <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Wahyu Siapa</h2>
                 <!-- Love animation -->
                 <div class="position-relative">
                     <div class="position-absolute" style="top: 0%; left: 5%;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
                             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                         </svg>
                     </div>
@@ -183,7 +183,7 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&amp;</h2>
                 <!-- Love animation -->
                 <div class="position-relative">
                     <div class="position-absolute" style="top: 0%; right: 5%;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
                             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                         </svg>
                     </div>
@@ -200,7 +200,7 @@ <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Riski Siapa</h2>
             <!-- Love animation -->
             <div class="position-relative">
                 <div class="position-absolute" style="top: 0%; left: 5%;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
                         <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                     </svg>
                 </div>
@@ -262,7 +262,7 @@ <h2 class="d-inline m-0 p-0" id="second">0</h2><small class="ms-1 me-0 my-0 p-0
                 <!-- Love animation -->
                 <div class="position-relative">
                     <div class="position-absolute" style="top: 0%; right: 5%;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 3000, 'animate-love')" viewBox="0 0 16 16">
                             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                         </svg>
                     </div>
@@ -285,7 +285,7 @@ <h2 class="font-esthetic m-0 py-2" style="font-size: 2rem;">Resepsi</h2>
                 <!-- Love animation -->
                 <div class="position-relative">
                     <div class="position-absolute" style="top: 0%; left: 5%;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="util.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="opacity-50" onload="guest.animate(this, 2000, 'animate-love')" viewBox="0 0 16 16">
                             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
                         </svg>
                     </div>

diff --git a/js/admin.js b/js/admin.js
@@ -41,7 +41,7 @@ export const admin = (() => {
     };
 
     const changeFilterBadWord = async (checkbox) => {
-        const label = util.addLoadingCheckbox(checkbox);
+        const label = util.disableCheckbox(checkbox);
 
         await request(HTTP_PATCH, '/api/user').
             token(session.getToken()).
@@ -54,7 +54,7 @@ export const admin = (() => {
     };
 
     const replyComment = async (checkbox) => {
-        const label = util.addLoadingCheckbox(checkbox);
+        const label = util.disableCheckbox(checkbox);
 
         await request(HTTP_PATCH, '/api/user').
             token(session.getToken()).
@@ -67,7 +67,7 @@ export const admin = (() => {
     };
 
     const editComment = async (checkbox) => {
-        const label = util.addLoadingCheckbox(checkbox);
+        const label = util.disableCheckbox(checkbox);
 
         await request(HTTP_PATCH, '/api/user').
             token(session.getToken()).
@@ -80,7 +80,7 @@ export const admin = (() => {
     };
 
     const deleteComment = async (checkbox) => {
-        const label = util.addLoadingCheckbox(checkbox);
+        const label = util.disableCheckbox(checkbox);
 
         await request(HTTP_PATCH, '/api/user').
             token(session.getToken()).

diff --git a/js/guest.js b/js/guest.js
@@ -175,6 +175,14 @@ export const guest = (() => {
      */
     const closeInformation = () => information.set('info', true);
 
+    /**
+     * @param {HTMLElement} svg
+     * @param {number} timeout
+     * @param {string} classes
+     * @returns {void}
+     */
+    const animate = (svg, timeout, classes) => util.timeOut(() => svg.classList.add(classes), timeout);
+
     /**
      * @returns {void}
      */
@@ -239,6 +247,7 @@ export const guest = (() => {
         open,
         name,
         modal,
+        animate,
         closeInformation,
     };
 })();
diff --git a/js/util.js b/js/util.js
@@ -31,11 +31,12 @@ export const util = (() => {
 
     /**
      * @param {HTMLElement} button
-     * @param {string} [message='Loading..']
+     * @param {string} [message='Loading']
      * @returns {object}
      */
     const disableButton = (button, message = 'Loading') => {
         button.disabled = true;
+
         const tmp = button.innerHTML;
         button.innerHTML = `<span class="spinner-border spinner-border-sm my-0 ms-0 me-1 p-0" style="height: 0.8rem; width: 0.8rem"></span>${message}`;
 
@@ -51,7 +52,7 @@ export const util = (() => {
      * @param {HTMLElement} checkbox
      * @returns {object}
      */
-    const addLoadingCheckbox = (checkbox) => {
+    const disableCheckbox = (checkbox) => {
         checkbox.disabled = true;
 
         const label = document.querySelector(`label[for="${checkbox.id}"]`);
@@ -66,14 +67,6 @@ export const util = (() => {
         };
     };
 
-    /**
-     * @param {HTMLElement} svg
-     * @param {number} timeout
-     * @param {string} classes
-     * @returns {void}
-     */
-    const animate = (svg, timeout, classes) => timeOut(() => svg.classList.add(classes), timeout);
-
     /**
      * @param {HTMLElement} button
      * @param {string} [message=null]
@@ -128,14 +121,12 @@ export const util = (() => {
     };
 
     return {
-        open,
         copy,
         timeOut,
-        animate,
         escapeHtml,
         base64Encode,
         base64Decode,
         disableButton,
-        addLoadingCheckbox,
+        disableCheckbox,
     };
 })();