diff --git a/assets/scripts/DevToolsHandler/DevToolsHandler.js b/assets/scripts/DevToolsHandler/DevToolsHandler.js index efa4023..04d12b7 100644 --- 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 index e7034f3..534689d 100644 --- 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"} } \ No newline at end of file diff --git a/assets/scripts/index.js b/assets/scripts/index.js index 66a4256..cdcf53b 100644 --- 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 */ \ No newline at end of file diff --git a/assets/scripts/nwmDevTools/GridTool/GridTool.js b/assets/scripts/nwmDevTools/GridTool/GridTool.js index 0a7aa58..39c517b 100644 --- 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 index cd01a6d..879b009 100644 --- a/assets/scripts/nwmDevTools/OverlayTool/OverlayTool.js +++ b/assets/scripts/nwmDevTools/OverlayTool/OverlayTool.js @@ -7,15 +7,35 @@ 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"}); @@ -23,7 +43,7 @@ export default class Overlay extends HTMLElement 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) diff --git a/assets/scripts/nwmDevTools/ShadowTool/ShadowTool.js b/assets/scripts/nwmDevTools/ShadowTool/ShadowTool.js index b273c83..032603d 100644 --- a/assets/scripts/nwmDevTools/ShadowTool/ShadowTool.js +++ b/assets/scripts/nwmDevTools/ShadowTool/ShadowTool.js @@ -4,15 +4,23 @@ import Tool from "../Tool/Tool.js"; import { ShadowToolText } from "./ShadowToolText.js"; - +/** + * Generate box shadows or text shadows + */ export default class ShadowTool extends Tool { + /** Title of the application */ static title = ShadowToolText.title; text = ShadowToolText; + /** list of shadows values */ shadows = []; - #href = "ShadowTool/ShadowTool.css" + /** source of CSS file */ + #href = "ShadowTool/ShadowTool.css"; + /** Regex for hexadecimal color */ colorRegex = /^#[\da-fA-F]{3,6}$/; + /** the app is it in text shadow mode */ isTextShadow = false; + /** Default values for shadows */ defaultShadow = { offsetX: 5, offsetY: 5, @@ -22,6 +30,7 @@ export default class ShadowTool extends Tool opacity: 1, inset: false }; + /** List of inputs for each shadows form */ formInfo = [ {type: "number", name: "offsetX", min: -50, max:50, value: this.defaultShadow.offsetX, event:this.#setProperty.bind(this)}, {type: "number", name: "offsetY", min: -50, max:50, value: this.defaultShadow.offsetY, event:this.#setProperty.bind(this)}, @@ -31,7 +40,20 @@ export default class ShadowTool extends Tool {type: "number", name: "opacity", min:0, max:1, step: 0.1, value:this.defaultShadow.opacity, event:this.#setProperty.bind(this)}, {type: "checkbox", name: "inset", event:this.#setInset.bind(this), checked: this.defaultShadow.inset}, ]; + /** number of current shadows */ nbShadow = 0; + /** @type {object|undefined} settings of the app */ + settings; + /** @type {HTMLDivElement} target for shadow's example */ + target; + /** @type {HTMLInputElement} input able to modify text example */ + textExample; + /** @type {string} current value for shadow property */ + shadowProperty; + /** + * Initialize shadow tool + * @param {object|undefined} settings old settings or nothing. + */ constructor(settings = undefined) { super(); @@ -46,8 +68,11 @@ export default class ShadowTool extends Tool connectedCallback() { super.connectedCallback(); - if(!this.history)return; + // if(!this.history)return; } + /** + * Initialize HTML and CSS of the tool + */ #init() { this.setCSS(this.#href); @@ -58,6 +83,9 @@ export default class ShadowTool extends Tool this.#generateTarget(); this.#generateShadow(); } + /** + * Generate example target for shadows + */ #generateTarget() { this.target?.remove(); @@ -75,6 +103,9 @@ export default class ShadowTool extends Tool this.display.append(target); this.#updateShadow(); } + /** + * Generate commons buttons + */ #createForm() { const btnAdd = document.createElement("button"); @@ -101,6 +132,9 @@ export default class ShadowTool extends Tool this.generateCodeButton(this.display, this.#getCode); } + /** + * Generate a shadow form + */ #generateShadow() { const formContainer = this.form; @@ -137,11 +171,20 @@ export default class ShadowTool extends Tool this.#updateShadow(); } + /** + * Return the data-id of the shadow form parent of the selected element. + * @param {HTMLElement} target element in a shadow form + * @returns {string} data-id of the shadow + */ #getId(target) { const shadow = target.closest(".shadow-set"); return shadow.dataset.id; } + /** + * Save inputs change of the shadow form before launch example's update. + * @param {InputEvent} e Input event of the shadow form + */ #setProperty(e) { const @@ -154,12 +197,19 @@ export default class ShadowTool extends Tool this.#updateShadow(); } + /** + * Save value of the inset checkbox before launch example's update + * @param {InputEvent} e Input Event for inset + */ #setInset(e) { const id = this.#getId(e.target); this.shadows[id][e.target.name] = e.target.checked; this.#updateShadow(); } + /** + * Update example's shadow + */ #updateShadow() { let shadow = "\r\t\t"; @@ -184,7 +234,10 @@ export default class ShadowTool extends Tool else this.target.style.boxShadow = shadow; } - + /** + * Delete selected shadow form then launch example's update + * @param {MouseEvent|PointerEvent} e Click Event on the delete shadow button + */ #deleteShadow(e) { const id = this.#getId(e.target); @@ -192,6 +245,9 @@ export default class ShadowTool extends Tool e.target.closest(".shadow-set")?.remove(); this.#updateShadow(); } + /** + * Delete all shadows + */ #deleteShadows() { this.shadows = []; @@ -202,6 +258,10 @@ export default class ShadowTool extends Tool shadow.remove(); } } + /** + * Change text-shadow to box-shadow and vice versa. + * @param {MouseEvent|PointerEvent} e Click event on the change shadow type button + */ #switchShadow(e) { this.isTextShadow = !this.isTextShadow; @@ -219,17 +279,27 @@ export default class ShadowTool extends Tool this.#generateTarget(); this.#generateShadow(); } - #setExampleText(e) + /** + * Change text of the text example. + */ + #setExampleText() { if(!this.textExample.value)return; this.target.textContent = this.textExample.value; } + /** + * Display overlay with CSS code. + */ #getCode() { const overlay = this.generateOverlay(); overlay.setCSS = this.#getCSS(); overlay.displayCSS(); } + /** + * Get CSS of the shadow. + * @returns {object} object containing CSS to display and CSS to copy + */ #getCSS() { const shadow = this.isTextShadow?"text-shadow":"box-shadow"; @@ -237,16 +307,26 @@ export default class ShadowTool extends Tool let copyCode = `.target\r{\r\t${shadow}: ${this.shadowProperty};\r}`; return {display: displayCode, copy: copyCode} } + /** + * Return settings of the app that have to be saved. + * @returns {object} settings of the app to save + */ getToolSettings() { const tool = {isTextShadow: this.isTextShadow, shadows: this.shadows} return tool; } + /** + * Set tool settings before initialization. + */ setToolSettings() { if(!this.settings)return; this.isTextShadow = this.settings.isTextShadow; } + /** + * Set tool forms. + */ setToolElements() { if(!this.settings)return; diff --git a/assets/scripts/nwmDevTools/TaskManagerTool/TaskManagerTool.js b/assets/scripts/nwmDevTools/TaskManagerTool/TaskManagerTool.js index f3f2834..18a8f67 100644 --- a/assets/scripts/nwmDevTools/TaskManagerTool/TaskManagerTool.js +++ b/assets/scripts/nwmDevTools/TaskManagerTool/TaskManagerTool.js @@ -1,13 +1,25 @@ import WindowNWM from "../WindowNWM/WindowNWM.js"; import { TaskManagerToolText } from "./TaskManagerToolText.js"; +/** + * Task manager having power of life and death on other windows + */ export default class TaskManagerTool extends WindowNWM { /** url for the CSS file */ #href = "TaskManagerTool/TaskManagerTool.css"; + /** title of the window */ static title = TaskManagerToolText.title; text = TaskManagerToolText; + /** @type {MutationObserverInit} configuration of the observer */ configObserver = {childList: true}; + /** @type {MutationObserver} observer checking the add or delete of windows */ + obs; + /** @type {HTMLTableSectionElement} body of the table */ + tbody; + /** + * Generate the task manager + */ constructor() { super(); @@ -25,6 +37,9 @@ export default class TaskManagerTool extends WindowNWM super.disconnectedCallback(); this.obs?.disconnect(); } + /** + * Set observer for check if a new window appear or is deleted + */ setTaskObserver() { const toolsContainer = document.querySelector(".tools-container"); @@ -33,7 +48,7 @@ export default class TaskManagerTool extends WindowNWM this.obs.observe(toolsContainer, this.configObserver); } /** - * + * Generate or remove row in the task manager * @param {MutationRecord} mutations */ handleTaskObserver(mutations) @@ -52,6 +67,9 @@ export default class TaskManagerTool extends WindowNWM } } } + /** + * Initialize HTML table for the task manager + */ init() { this.setCSS(this.#href); @@ -95,6 +113,10 @@ export default class TaskManagerTool extends WindowNWM managerContainer.append(table); this.container.append(managerContainer); } + /** + * Generate the html of a row in the task manager table depending of the id gave in parameter + * @param {string} toolId window's id + */ generateRow(toolId) { const toolsList = this.getTaskManagerData()?.toolsList; @@ -134,12 +156,20 @@ export default class TaskManagerTool extends WindowNWM tr.append(tdName, tdId, tdDisplay, tdReload, tdClose); this.tbody.append(tr); } + /** + * Remove a row from the task manager table depending of the id. + * @param {string} toolId window's id + */ removeRow(toolId) { const row = this.tbody.querySelector(`.${toolId}`); if(!row) return; row.remove(); } + /** + * Handle action to make on a window + * @param {PointerEvent|MouseEvent} e event from the click on a button of the task manager table + */ handleToolAction(e) { const @@ -162,33 +192,5 @@ export default class TaskManagerTool extends WindowNWM break; } } - handleToolDisplay(e) - { - const - id = e.target.dataset.id, - /** @type {WindowNWM} tool selected by the manager */ - target = document.querySelector(`#${id}`); - if(!target)return; - target.setPosition(); - target.activeWindow(); - } - handleToolReload(e) - { - const - id = e.target.dataset.id, - /** @type {WindowNWM} tool selected by the manager */ - target = document.querySelector(`#${id}`); - if(!target)return; - target.reloadWindow(); - } - handleToolClose(e) - { - const - id = e.target.dataset.id, - /** @type {WindowNWM} tool selected by the manager */ - target = document.querySelector(`#${id}`); - if(!target)return; - target.closeWindow(); - } } customElements.define("nwm-task-manager", TaskManagerTool); \ No newline at end of file diff --git a/assets/scripts/nwmDevTools/Tool/Tool.js b/assets/scripts/nwmDevTools/Tool/Tool.js index 1519d6e..80e298e 100644 --- a/assets/scripts/nwmDevTools/Tool/Tool.js +++ b/assets/scripts/nwmDevTools/Tool/Tool.js @@ -226,4 +226,5 @@ export default class Tool extends WindowNWM * Have to be overided. */ setToolElements(){} + } \ No newline at end of file diff --git a/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.css b/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.css new file mode 100644 index 0000000..11da795 --- /dev/null +++ b/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.css @@ -0,0 +1,10 @@ +.tutorial-container +{ + width: fit-content; + margin: 0 auto; + overflow-y: auto; + & > h3 + { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.js b/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.js index c29db82..dbb7529 100644 --- a/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.js +++ b/assets/scripts/nwmDevTools/TutorialTool/TutorialTool.js @@ -5,6 +5,7 @@ import { TutorialToolText } from "./TutorialToolText.js"; export default class TutorialTool extends WindowNWM { + #src = "TutorialTool/TutorialTool.css"; static title = TutorialToolText.title; text = TutorialToolText; constructor() @@ -34,7 +35,20 @@ export default class TutorialTool extends WindowNWM } init() { - this.container.append("Work In Progress"); + this.setCSS(this.#src); + + const tutorialContainer = document.createElement("div"); + tutorialContainer.classList.add("tutorial-container"); + + for (const key in this.text.tutorial) + { + const tutorialSection = document.createElement("section"); + tutorialSection.classList.add("tutorial-section"); + tutorialSection.innerHTML = this.getText(`tutorial.${key}`); + tutorialContainer.append(tutorialSection); + } + + this.container.append(tutorialContainer); } } customElements.define("nwm-tutorial-tool", TutorialTool); diff --git a/assets/scripts/nwmDevTools/TutorialTool/TutorialToolText.js b/assets/scripts/nwmDevTools/TutorialTool/TutorialToolText.js index 5e33e8e..b3124e3 100644 --- a/assets/scripts/nwmDevTools/TutorialTool/TutorialToolText.js +++ b/assets/scripts/nwmDevTools/TutorialTool/TutorialToolText.js @@ -3,5 +3,20 @@ export const TutorialToolText = { title:{ fr:"Tutoriel des Outils", en:"Tools Tutorial" + }, + tutorial:{ + application:{ + fr:"

Bienvenue sur ce tutoriel

Description de l'Application

Sur cette application vous trouverez de nombreux outils pour vous aider dans le développement.

Pour accèder aux outils il vous suffit d'ouvrir le menu sur votre gauche.
Vous trouverez la liste des outils disponible ainsi que le choix de la langue, un outil de recherche et les info sur l'application et l'auteur.

", + en: "

Welcome to this tutorial

Application Description

On this application you will find tools to help you with development.

To access the tools simply open the menu on your left.
You will find the list of tools available as well as the choice of language, a search tool and info on the application and the author.

" + }, + window:{ + fr:"

Les fenêtres de l'Application

Chaque outils de cette application se présente dans une fenêtre comme celle de ce tutoriel.
Ces fenêtres peuvent être bougées d'un glissé déposé sur l'en-tête de celle ci.
Leurs tailles peuvent aussi être modifiées via l'encoche en bas à droite de chaque fenêtre.

Vous trouverez aussi dans l'en-tête quelques boutons permettant de:

", + en: "

Application Windows

Each tool in this application is presented in a window like the one in this tutorial.
These windows can be moved by drag and drop on their header.
Their size can also be changed using the notch at the bottom right of each window.

You'll also find some buttons in the header for:

" + } + }, + info:{ + fr:"

WebTool par Nolwenn WEBER-MARQUISET est sous licence Creative Commons BY-NC-SA 4.0
Vous pouvez donc partager et modifier l'application tant que l'auteur original est cité et qu'aucun usage commercial n'est faite de celle ci.

L'actualité et les notes de mise à jour sont disponible sur le github de l'application

", + en:"

WebTool by Nolwenn WEBER-MARQUISET is licensed under Creative Commons BY-NC-SA 4.0
You can therefore share and modify the application as long as the original author is cited and no commercial use is made of it.

News and release notes are available on the application's github.

" } + } \ No newline at end of file diff --git a/assets/scripts/nwmDevTools/WindowNWM/WindowNWM.js b/assets/scripts/nwmDevTools/WindowNWM/WindowNWM.js index ac55356..878d278 100644 --- a/assets/scripts/nwmDevTools/WindowNWM/WindowNWM.js +++ b/assets/scripts/nwmDevTools/WindowNWM/WindowNWM.js @@ -5,6 +5,7 @@ import { WindowNWMText } from "./WindowNWMText.js"; // interessant mais pas géré par firefox TODO : quand géré mettre text en voir config en json // import * as text from "./test.json" with {type: "json"}; // console.log(text); + /** * HTML custom element for a window */ @@ -269,12 +270,18 @@ export default class WindowNWM extends HTMLElement } this.id = id; } + /** + * close the window for reopen it. + */ reloadWindow() { const container = this.parentElement; this.remove(); container.append(new this.constructor()); } + /** + * Set the window to the default position and size + */ setPosition() { this.style.height = this.defaultPosition.height;