From b836f865276c80e289f0b453a7c244c743dd285e Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 19 Mar 2023 12:27:16 +0700 Subject: [PATCH] Simplify by using shared elements 2 --- web/_js/draw.js | 48 ++++++++++++++----------------- web/_js/infoblock.js | 15 +++++----- web/_js/pwabuilder-sw-register.js | 6 ++-- 3 files changed, 31 insertions(+), 38 deletions(-) diff --git a/web/_js/draw.js b/web/_js/draw.js index ce81a735..e9b053db 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -73,6 +73,17 @@ drawBackButton.className = "btn btn-outline-primary" drawBackButton.id = "drawBackButton" drawBackButton.textContent = "Exit Draw Mode" +const baseInputAddon = document.createElement("span") +baseInputAddon.className = "input-group-text" + +const baseInputGroup = document.createElement("div") +baseInputGroup.className = "input-group" + +const baseInputField = document.createElement("input") +baseInputField.className = "form-control" +baseInputField.spellcheck = false +baseInputField.type = "text" + ;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => { el.addEventListener("input", function () { this.style.height = "auto" @@ -525,14 +536,11 @@ function initDraw() { } function addWebsiteFields(link, index, array) { - const inputGroup = document.createElement("div") - inputGroup.className = "input-group" + const inputGroup = baseInputGroup.cloneNode() websiteGroup.appendChild(inputGroup) - const inputField = document.createElement("input") + const inputField = baseInputField.cloneNode() inputField.type = "url" - inputField.name = "url" - inputField.className = "form-control" inputField.id = "websiteField" + index inputField.placeholder = "https://example.com" inputField.pattern = "https?://.*" @@ -560,26 +568,21 @@ function initDraw() { } function addSubredditFields(link, index, array) { - const inputGroup = document.createElement("div") - inputGroup.className = "input-group" + const inputGroup = baseInputGroup.cloneNode() subredditGroup.appendChild(inputGroup) - const inputAddon = document.createElement("span") - inputAddon.className = "input-group-text" + const inputAddon = baseInputAddon.cloneNode() inputAddon.id = "subredditField" + index + "-addon" inputAddon.textContent = "reddit.com/" inputGroup.appendChild(inputAddon) - const inputField = document.createElement("input") - inputField.type = "text" - inputField.className = "form-control" + const inputField = baseInputField.cloneNode() inputField.id = "subredditField" + index inputField.placeholder = "r/example" inputField.pattern = "^r\/[A-Za-z0-9][A-Za-z0-9_]{1,20}$" inputField.title = "Subreddit in format of r/example" inputField.minLength = "4" inputField.maxLength = "23" - inputField.spellcheck = false inputField.setAttribute("aria-labelledby", "subredditLabel") inputField.setAttribute("aria-describedby", "subredditField" + index + "-addon") if (link) { @@ -618,22 +621,17 @@ function initDraw() { } function addDiscordFields(link, index, array) { - const inputGroup = document.createElement("div") - inputGroup.className = "input-group" + const inputGroup = baseInputGroup.cloneNode() discordGroup.appendChild(inputGroup) - const inputAddon = document.createElement("span") - inputAddon.className = "input-group-text" + const inputAddon = baseInputAddon.cloneNode() inputAddon.id = "discordField" + index + "-addon" inputAddon.textContent = "discord.gg/" inputGroup.appendChild(inputAddon) - const inputField = document.createElement("input") - inputField.type = "text" - inputField.className = "form-control" + const inputField = baseInputField.cloneNode() inputField.id = "discordField" + index inputField.placeholder = "pJkm23b2nA" - inputField.spellcheck = false inputField.setAttribute("aria-labelledby", "discordLabel") inputField.setAttribute("aria-describedby", "discordField" + index + "-addon") inputField.value = link @@ -668,16 +666,12 @@ function initDraw() { } function addWikiFields(link, index, array) { - const inputGroup = document.createElement("div") - inputGroup.className = "input-group" + const inputGroup = baseInputGroup.cloneNode() wikiGroup.appendChild(inputGroup) - const inputField = document.createElement("input") - inputField.type = "text" - inputField.className = "form-control" + const inputField = baseInputField.cloneNode() inputField.id = "wikiField" + index inputField.placeholder = "Page title" - inputField.spellcheck = false inputField.setAttribute("aria-labelledby", "wikiLabel") inputField.value = link inputGroup.appendChild(inputField) diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 7a05a788..62da50fb 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -18,6 +18,9 @@ baseLinkElement.className = "btn btn-primary text-truncate" baseLinkElement.target = "_blank" baseLinkElement.rel = "noopener noreferrer" +const baseGroupElement = document.createElement("div") +baseGroupElement.className = "btn-group-vertical" + function createLabel(name, value, parent) { const nameElement = document.createElement("span") nameElement.className = "fw-bold" @@ -101,8 +104,7 @@ function createInfoBlock(entry, isPreview) { } if (!(entry.links.subreddit === undefined || entry.links.subreddit.length === 0)) { - const subredditGroupElement = document.createElement("div") - subredditGroupElement.className = "btn-group-vertical" + const subredditGroupElement = baseGroupElement.cloneNode() linkListElement.appendChild(subredditGroupElement) entry.links.subreddit.forEach(subreddit => { @@ -117,8 +119,7 @@ function createInfoBlock(entry, isPreview) { } if (!(entry.links.website === undefined || entry.links.website.length === 0)) { - const websiteGroupElement = document.createElement("div") - websiteGroupElement.className = "btn-group-vertical" + const websiteGroupElement = baseGroupElement.cloneNode() linkListElement.appendChild(websiteGroupElement) entry.links.website.forEach(link => { @@ -137,8 +138,7 @@ function createInfoBlock(entry, isPreview) { } if (!(entry.links.discord === undefined || entry.links.discord.length === 0)) { - const discordGroupElement = document.createElement("div") - discordGroupElement.className = "btn-group-vertical" + const discordGroupElement = baseGroupElement.cloneNode() linkListElement.appendChild(discordGroupElement) entry.links.discord.forEach(link => { @@ -152,8 +152,7 @@ function createInfoBlock(entry, isPreview) { } if (!(entry.links.wiki === undefined || entry.links.wiki.length === 0)) { - const wikiGroupElement = document.createElement("div") - wikiGroupElement.className = "btn-group-vertical" + const wikiGroupElement = baseGroupElement.cloneNode() linkListElement.appendChild(wikiGroupElement) entry.links.wiki.forEach(link => { diff --git a/web/_js/pwabuilder-sw-register.js b/web/_js/pwabuilder-sw-register.js index bcd13874..a4e84e5d 100644 --- a/web/_js/pwabuilder-sw-register.js +++ b/web/_js/pwabuilder-sw-register.js @@ -1,4 +1,4 @@ -import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate' +// import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate' -const el = document.createElement('pwa-update') -document.body.appendChild(el) \ No newline at end of file +// const el = document.createElement('pwa-update') +// document.body.appendChild(el) \ No newline at end of file