checkbox for saving pretty state

main.js

@@ -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)
+      prettify(form, oldTable, container, insertedFileRows)
-      form.removeChild(oldTable)
-      form.appendChild(container)
-      setInputValues(container, inputValues)
-      prettifyFiles(insertedFileRows)
-        
-      $("#cps_main").select2()
     })
-    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)
+      moveInputValues(form, container, oldTable)
-      form.removeChild(container)
-      form.appendChild(oldTable)
-      setInputValues(oldTable, inputValues)
     })
     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 */
+  /* DIALOG */
-  localStorage.clear()
-
   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)
+  }
+
 })();