Simplify by using shared elements 2

This commit is contained in:
Hans5958 2023-03-19 12:27:16 +07:00
parent db225f02e8
commit b836f86527
3 changed files with 31 additions and 38 deletions

View file

@ -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)

View file

@ -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 => {

View file

@ -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)
// const el = document.createElement('pwa-update')
// document.body.appendChild(el)