mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-28 18:34:45 +01:00
Simplify by using shared elements 2
This commit is contained in:
parent
db225f02e8
commit
b836f86527
3 changed files with 31 additions and 38 deletions
|
@ -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)
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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)
|
Loading…
Reference in a new issue