comment of each method and properties, text and css for tutorial done

NolwennWM · Jun 10, 2024 · 40020da · 40020da
1 parent daf485e
commit 40020da
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 64 deletions.
diff --git a/assets/scripts/DevToolsHandler/DevToolsHandler.js b/assets/scripts/DevToolsHandler/DevToolsHandler.js
@@ -10,6 +10,8 @@ export default class DevToolsHandler
     tools = {};
     /** languages available for the app */
     langs = DevToolsHandlerText.langs;
+    /** title of the application */
+    title = DevToolsHandlerText.title;
     /** text for the search input */
     searchLangs = DevToolsHandlerText.searchLangs;
     /** navigation of the app */
@@ -30,6 +32,7 @@ export default class DevToolsHandler
         document.addEventListener("DOMContentLoaded", this.disableLoader.bind(this));
         this.generateMenu();
         this.handleTutorial();
+        this.titleLanguage();
     }
     /**
      * handle the first appearence of the tutorial.
@@ -39,6 +42,15 @@ export default class DevToolsHandler
         if(!this.tools.TutorialTool)return;
         this.tools.TutorialTool.firstTime(this.container);
     }
+    /**
+     * Select title for the current language
+     */
+    titleLanguage()
+    {
+        const title = document.querySelector(".main-title");
+        if(!title)return;
+        title.textContent = this.title[document.documentElement.lang]??this.title.en;
+    }
     /**
      * Generate Navigation Menu
      */

diff --git a/assets/scripts/DevToolsHandler/DevToolsHandlerText.js b/assets/scripts/DevToolsHandler/DevToolsHandlerText.js
@@ -1,4 +1,5 @@
 export const DevToolsHandlerText = {
     langs: {fr:"Français", en:"English"},
+    title: {fr: "Outils du Développeur NWM", en: "NWM Developper's Tools"},
     searchLangs: {fr: "Rechercher un Outil", en: "Search a Tool"}
 }
diff --git a/assets/scripts/index.js b/assets/scripts/index.js
@@ -15,7 +15,8 @@ Tool.setLocalStorageEvent();
 /* 
     TODO :
     - on ctrl + arrow move the window as windows arrow
-    - Ajouter worker
-    - finir le tutoriel
-    - ajouter un confirm optionnel à openOnce
+    - Ajouter worker ?
+    - switch between windows in header for mobile ?
+    - dark mode
+    - save language when selected and load it when no one is selected
 */
diff --git a/assets/scripts/nwmDevTools/GridTool/GridTool.js b/assets/scripts/nwmDevTools/GridTool/GridTool.js
@@ -55,7 +55,7 @@ export default class GridTool extends Tool
     settings;
     /**
      * prepare settings of the tool, generate title and HTML
-     * @param {object|undefined} settings 
+     * @param {object|undefined} settings old settings or nothing.
      */
     constructor(settings = undefined)
     {
@@ -70,7 +70,7 @@ export default class GridTool extends Tool
     connectedCallback()
     {
         super.connectedCallback();
-        if(!this.history)return;
+        // if(!this.history)return;
     }
     /**
      * Génère les éléments principaux du grid generator

diff --git a/assets/scripts/nwmDevTools/OverlayTool/OverlayTool.js b/assets/scripts/nwmDevTools/OverlayTool/OverlayTool.js
@@ -7,23 +7,43 @@ import { OverlayToolText } from "./OverlayToolText.js";
  */
 export default class Overlay extends HTMLElement
 {
-    #href = "./assets/scripts/nwmDevTool/OverlayTool/OverlayTool.css";
+    /** Source for CSS file */
+    #src = "./assets/scripts/nwmDevTools/OverlayTool/OverlayTool.css";
+    /** text for overlay */
     #text = OverlayToolText;
+    /** Is HTML currently displayed */
     showHTML = false;
+    /** @type {HTMLButtonElement} button for change between HTML and CSS */
+    changeBTN;
+    /** @type {HTMLElement} code tag for display code */
+    code;
+    /** @type {{copy: string, display: string}}  CSS code to display and copy*/
+    CSS;
+    /** @type {{copy: string, display: string}}  HTML code to display and copy*/
+    HTML;
+    /** @type {string} code to copy on click */
+    copy;
+    /**
+     * Set and display overlay for show tool code.
+     * @param {string} lang current lang for the overlay 
+     */
     constructor(lang)
     {
         super();
         this.lang = lang;
         this.#init();
     }
+    /**
+     * Initialize HTML and CSS for overlay
+     */
     #init()
     {
         this.attachShadow({mode:"open"});
         this.classList.add("overlay");
 
         const style = document.createElement("link");
         style.rel = "stylesheet";
-        style.href = this.#href;
+        style.href = this.#src;
 
         this.shadowRoot.prepend(style);
         const displayBlock = document.createElement("div");
@@ -57,30 +77,13 @@ export default class Overlay extends HTMLElement
 
 
 
-        copy.addEventListener("click", ()=>
-        {
-            navigator.clipboard.writeText(this.copy);
-            copy.textContent = this.#text.display.copied[this.lang];
-            setTimeout(() => {
-                copy.textContent = this.#text.display.copy[this.lang];
-
-            }, 2000);
-        });
-        changeCode.addEventListener("click", ()=>{
-            if(this.showHTML)
-            {
-                changeCode.textContent = this.#text.display.html[this.lang];
-                this.displayCSS();
-            }
-            else
-            {
-                changeCode.textContent = this.#text.display.css[this.lang];
-                this.displayHTML();
-            }
-            this.showHTML = !this.showHTML;
-        });
+        copy.addEventListener("click", ()=>this.copyCode(copy));
+        changeCode.addEventListener("click", ()=>this.changeCode(changeCode));
         close.addEventListener("click", ()=>this.remove());
     }
+    /**
+     * set CSS property if available otherwise display error in console
+     */
     set setCSS(content)
     {
         if(!content.copy || !content.display)
@@ -90,6 +93,9 @@ export default class Overlay extends HTMLElement
         }
         this.CSS = content;
     }
+    /**
+     * set HTML property if available otherwise display error in console
+     */
     set setHTML(content)
     {
         if(!content.copy || !content.display)
@@ -99,16 +105,57 @@ export default class Overlay extends HTMLElement
         }
         this.HTML = content;
     }
+    /**
+     * Copy current code in the clipboard.
+     * @param {HTMLButtonElement} copyBTN copy button
+     */
+    copyCode(copyBTN)
+    {
+        navigator.clipboard.writeText(this.copy);
+        copyBTN.textContent = this.#text.display.copied[this.lang];
+        setTimeout(() => {
+            copyBTN.textContent = this.#text.display.copy[this.lang];
+
+        }, 2000);
+    }
+    /**
+     * Change code between CSS and HTML
+     * @param {HTMLButtonElement} copyBTN change code button
+     */
+    changeCode(changeBTN)
+    {
+        if(this.showHTML)
+        {
+            changeBTN.textContent = this.#text.display.html[this.lang];
+            this.displayCSS();
+        }
+        else
+        {
+            changeBTN.textContent = this.#text.display.css[this.lang];
+            this.displayHTML();
+        }
+        this.showHTML = !this.showHTML;
+    }
+    /**
+     * Display CSS code.
+     */
     displayCSS()
     {
         this.code.innerHTML = this.CSS.display;
         this.copy = this.CSS.copy;
     }
+    /**
+     * Display HTML code.
+     */
     displayHTML()
     {
         this.code.innerHTML = this.HTML.display;
         this.copy = this.HTML.copy;
     }
+    /**
+     * Display CSS if available otherwise display HTML.
+     * If both are available CSS is displayed and button for change is visible.
+     */
     displayCode()
     {
         if(this.CSS)