From 1090a2b52522cf474ecd317e1d2e273da17276f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolo=CC=80=20Maria=20Mezzopera?= Date: Mon, 3 Aug 2020 09:33:23 +0200 Subject: [PATCH] feat: bundle and serve font awesome icons --- README.md | 6 +++++- src/inject/inject.css | 7 ++++++- src/inject/inject.js | 46 +++++++++++++++++++++++++++---------------- 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 7cb48f5..d807f6e 100644 --- a/README.md +++ b/README.md @@ -44,4 +44,8 @@ Recently chrome disallowed to install packed `crx` extension that are not listed - Open manifest.json - Add your domain to `permissions` and `content_scripts -> matches` -- Open the browser and install or update the extension +- Open the browser and install or update the extension + +## Credits + +This project bundles some of the icon coming from [font-awesome](https://fontawesome.com/) icons as SVG diff --git a/src/inject/inject.css b/src/inject/inject.css index 966d9ea..a31b5ea 100644 --- a/src/inject/inject.css +++ b/src/inject/inject.css @@ -37,10 +37,15 @@ outline: 0; } +#conventionalCommentButtonContainer button svg { + height: 13px; + width: 13px; +} + #conventionalCommentButtonContainer button:focus { outline: 0; } -#conventionalCommentButtonContainer button i.blocking { +#conventionalCommentButtonContainer button.blocking { color: red; } diff --git a/src/inject/inject.js b/src/inject/inject.js index e9be4e3..785726e 100644 --- a/src/inject/inject.js +++ b/src/inject/inject.js @@ -1,37 +1,45 @@ +const trophyIcon = ``; +const searchIcon = ``; +const exclamationIcon = ``; +const bugIcon = ``; +const questionIcon = ``; +const commentIcon = ``; +const homeIcon = ``; + const semanticLabels = { praise: { text: "praise", - icon: "fa-trophy", + icon: trophyIcon, blocking: false, }, nitpick: { text: "nitpick", - icon: "fa-search", + icon: searchIcon, blocking: true, }, suggestion: { text: "suggestion", - icon: "fa-exclamation", + icon: exclamationIcon, blocking: true, }, issue: { text: "issue", - icon: "fa-bug", + icon: bugIcon, blocking: true, }, question: { text: "question", - icon: "fa-question", + icon: questionIcon, blocking: true, }, thought: { text: "thought", - icon: "fa-comment", + icon: commentIcon, blocking: false, }, chore: { text: "chore", - icon: "fa-home", + icon: homeIcon, blocking: true, }, }; @@ -42,7 +50,7 @@ const fillTextAreaValue = (textarea, value, emptySubject = true) => { textarea.value = value; textarea.focus(); - const length = textarea.value.length + const length = textarea.value.length; if (emptySubject) { textarea.setSelectionRange(length - 9, length); @@ -55,10 +63,17 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => { const semanticComment = semanticCommentStructure .replace("%text", semanticLabels[label].text) .replace("%decoration", decoration); - const cleanedValue = textarea.value.replace(/\*\*\w+(\s\(non-blocking\))?:\*\*\s?/, ''); + const cleanedValue = textarea.value.replace( + /\*\*\w+(\s\(non-blocking\))?:\*\*\s?/, + "" + ); if (cleanedValue && cleanedValue !== "") { - fillTextAreaValue(textarea, semanticComment.replace(":** ", `:** ${cleanedValue}`), false) + fillTextAreaValue( + textarea, + semanticComment.replace(":** ", `:** ${cleanedValue}`), + false + ); } else { fillTextAreaValue(textarea, semanticComment); } @@ -66,13 +81,10 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => { const buttonGenerator = (textarea, parent, label, blocking) => { const button = document.createElement("button"); - const i = document.createElement("i"); - i.classList.add("fa"); - i.classList.add(semanticLabels[label].icon); + button.innerHTML = semanticLabels[label].icon; if (blocking) { - i.classList.add("blocking"); + button.classList.add("blocking"); } - button.appendChild(i); button.addEventListener("click", (e) => semanticButtonClickHandler(e, { textarea, label, blocking }) ); @@ -102,8 +114,8 @@ const addSemanticButton = (element) => { document.addEventListener("click", (e) => { if ( - (e.target.id === "note_note" || e.target.id === "note-body") && - !e.target.dataset.semanticButtonInitialized + (e.target.id === "note_note" || e.target.id === "note-body") && + !e.target.dataset.semanticButtonInitialized ) { e.target.dataset.semanticButtonInitialized = true; addSemanticButton(e.target);