checkbox for saving pretty state

This commit is contained in:
Zhora Shalyapin 2024-12-02 13:01:53 +00:00
parent 8c38c834bd
commit 27df530051

122
main.js
View File

@ -189,9 +189,9 @@
let storageLabel = `files-${this.dataset.index}`
let storedFiles = localStorage.getItem(storageLabel)
let storedFiles = sessionStorage.getItem(storageLabel)
if (storedFiles) {
let oldFiles = JSON.parse(localStorage.getItem(storageLabel))
let oldFiles = JSON.parse(sessionStorage.getItem(storageLabel))
for (const oldFile of oldFiles) {
let oldFileObj = dataURLtoFile(oldFile.data, oldFile.name)
dt.items.add(oldFileObj)
@ -230,9 +230,9 @@
if (!confirm("Точно?")) return
let storedFiles = JSON.parse(localStorage.getItem(storageLabel)) ?? []
let storedFiles = JSON.parse(sessionStorage.getItem(storageLabel)) ?? []
storedFiles.splice(storedFiles.length - this.files.length + index, 1)
localStorage.setItem(storageLabel, JSON.stringify(storedFiles))
sessionStorage.setItem(storageLabel, JSON.stringify(storedFiles))
let rdt = new DataTransfer()
for (const file of this.files) {
@ -255,9 +255,9 @@
displayedFile.src = e.target.result
downloadLink.setAttribute("href", displayedFile.src)
let storedFiles = JSON.parse(localStorage.getItem(storageLabel)) ?? []
let storedFiles = JSON.parse(sessionStorage.getItem(storageLabel)) ?? []
storedFiles.push({data: displayedFile.src, name: file.name})
localStorage.setItem(storageLabel, JSON.stringify(storedFiles))
sessionStorage.setItem(storageLabel, JSON.stringify(storedFiles))
}
reader.readAsDataURL(file)
}
@ -361,7 +361,53 @@
addDisplayedFile(document.querySelector(`input[name="${fileInput}\[\]"]`), type, fileUrl, preview, deleteUrl)
}
}
}
function moveInputValues(form, was, became) {
let inputValues = saveInputValues(was)
form.removeChild(was)
form.appendChild(became)
setInputValues(became, inputValues)
}
function prettify(form, was, became, insertedFileRows) {
moveInputValues(form, was, became)
prettifyFiles(insertedFileRows)
$("#cps_main").select2()
}
function createAlwaysPrettifyInput(index) {
let alwaysPrettify = document.createElement("div")
alwaysPrettify.classList.add("always-prettify-container")
let alwaysPrettifyLabel = document.createElement("label")
alwaysPrettifyLabel.setAttribute("for", "always-prettify-" + index)
alwaysPrettifyLabel.textContent = "Всегда"
alwaysPrettify.appendChild(alwaysPrettifyLabel)
let alwaysPrettifyCheckbox = document.createElement("input")
alwaysPrettifyCheckbox.type = "checkbox"
alwaysPrettifyCheckbox.id = "always-prettify-" + index
alwaysPrettifyCheckbox.name = "always-prettify-" + index
alwaysPrettifyCheckbox.addEventListener("change", function() {
let otherCheckboxes = document.querySelectorAll(`input[name^="always-prettify-"]`)
for (let checkbox of otherCheckboxes) {
if (checkbox.id !== this.id) {
checkbox.checked = this.checked
}
}
if (this.checked)
localStorage.setItem("always", "+")
else
localStorage.removeItem("always")
})
alwaysPrettify.appendChild(alwaysPrettifyCheckbox)
i++
return alwaysPrettify
}
function hide(elList) {
@ -444,6 +490,13 @@
align-items: center;
}
.buttons-row__content-wrapper {
display: flex;
justify-content: center;
gap: 10px;
font-weight: normal;
}
#new input#cp_number {
width: 3em;
}
@ -470,6 +523,17 @@
background: linear-gradient(white, #ddd);
}
.buttons > * > * {
display: flex;
gap: 10px;
}
.always-prettify-container {
display: flex;
align-items: center;
gap: 5px;
}
.header > * {
display: flex;
gap: 5px;
@ -640,7 +704,6 @@
document.querySelector(`#props input[name="new_file_type1"][value="l"]`).click()
document.querySelector(`#props input[name="new_file_type4"][value="l"]`).click()
/* CONTAINER */
let form = document.querySelector('form')
@ -687,33 +750,37 @@
let bottomButtonsContainer = topButtonsContainer.cloneNode(true)
document.querySelectorAll("#props tr:is(:first-child, :last-child) th").forEach(el => {
document.querySelectorAll("#props tr:is(:first-child, :last-child) th").forEach((el, index) => {
let rowContentWrapper = document.createElement("div")
rowContentWrapper.classList.add("buttons-row__content-wrapper")
while ([...el.children].length > 0) {
let child = el.firstChild
rowContentWrapper.appendChild(child)
}
let prettifyButton = document.createElement("button")
prettifyButton.type = "button"
prettifyButton.textContent = "Сделать красиво"
prettifyButton.addEventListener("click", () => {
let inputValues = saveInputValues(oldTable)
form.removeChild(oldTable)
form.appendChild(container)
setInputValues(container, inputValues)
prettifyFiles(insertedFileRows)
$("#cps_main").select2()
prettify(form, oldTable, container, insertedFileRows)
})
el.appendChild(prettifyButton)
rowContentWrapper.appendChild(prettifyButton)
rowContentWrapper.appendChild(createAlwaysPrettifyInput(index))
el.appendChild(rowContentWrapper)
})
;[topButtonsContainer, bottomButtonsContainer].forEach(el => {
;[topButtonsContainer, bottomButtonsContainer].forEach((el, index) => {
let unglifyButton = document.createElement("button")
unglifyButton.type = "button"
unglifyButton.textContent = "Сделать некрасиво"
unglifyButton.addEventListener("click", () => {
let inputValues = saveInputValues(container)
form.removeChild(container)
form.appendChild(oldTable)
setInputValues(oldTable, inputValues)
moveInputValues(form, container, oldTable)
})
el.querySelector("div > div > div").appendChild(unglifyButton)
el.querySelector("div > div > div").appendChild(createAlwaysPrettifyInput(index))
})
/* OPTIONS */
@ -903,9 +970,7 @@
})
document.querySelector("#map_controls").appendChild(panToCenter)
/* FILES */
localStorage.clear()
/* DIALOG */
let dialog = document.createElement("dialog")
dialog.id = "dialog"
document.body.appendChild(dialog)
@ -917,4 +982,11 @@
}
})
/* PRETTIFY CHECKBOX */
if (localStorage.getItem("always")) {
document.querySelector(`input[name^="always-prettify-0"]`).click()
prettify(form, oldTable, container, insertedFileRows)
}
})();