Merge pull request #20 from TRMSC:result-edit-mode

Result-edit-mode #16
TRMSC · Nov 11, 2023 · feddbaa · feddbaa
2 parents 14513d3 + 6c9ee07
commit feddbaa
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/docs/icons/cog.svg b/docs/icons/cog.svg
diff --git a/docs/index.html b/docs/index.html
@@ -195,9 +195,18 @@ <h3>
       </div>
 
       <div id="resultpart" class="smallpart" style="display: none;">
-        <h3>
-          Ergebnis
-        </h3>
+        <div class="stretchpart">
+          <h3>
+            Ergebnis
+          </h3>
+          <span id="imagescene-edit" class="ic-font-3" title="Bearbeiten">
+            <img class="ic-icon-3" src="icons/cog.svg">
+          </span>
+        </div>
+        <div class="input-container edit-container ic-d-none">
+          <label for="imagescene-filename" class="miniheading">Dateiname (ohne Endung):</label>
+          <textarea class="generate" id="imagescene-filename" name="imagescene-filename" rows="1" spellcheck="false" wrap="off" placeholder="Freilassen für automatische Bezeichnung..."></textarea>
+        </div>
         <div class="input-container">
           <label for="imagescene-result" class="miniheading">Code:</label>
           <textarea id="imagescene-result" name="imagescene-result" rows="6" spellcheck="false" wrap="off" readonly></textarea>

diff --git a/docs/src/script.js b/docs/src/script.js
@@ -141,6 +141,10 @@ listenEvents = () => {
   let generateButton = document.getElementById('imagescene-generate');
   generateButton.addEventListener('click', generateScene);
 
+  // Toggle settings
+  let settingToggle = document.getElementById('imagescene-edit');
+  settingToggle.addEventListener('click', handleSettings);
+
   // Copy to clipboard
   let clipboardButton = document.getElementById('imagescene-copy');
   clipboardButton.addEventListener('click', copyClipboard);
@@ -480,6 +484,26 @@ scrollResult = () => {
 };
 
 
+/**
+ * Handle Settings
+ * 
+ * @function handleSettings
+ * @returns {void}
+ *
+ */
+handleSettings = () => {
+
+  // Declare target elements
+  let editContainers = document.querySelectorAll('.edit-container');
+
+  // Toggle each element
+  editContainers.forEach(container => {
+    container.classList.toggle('ic-d-none');
+  });
+
+};
+
+
 /**
  * Share page by using the share api
  * 
@@ -598,6 +622,11 @@ downloadFile = (type) => {
   const seconds = String(date.getSeconds()).padStart(2, '0');
   const currentDate = `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`;
 
+  // Get filename
+  let userInput = document.getElementById('imagescene-filename');
+  let defaultFilename = currentDate + '-imagescene-' + template;
+  let filename = userInput.value.trim() !== '' ? userInput.value + '.' + type : defaultFilename
+
   // Add XML declaration for SVG type
   if (type === 'svg') html = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${html}`;
 
@@ -608,7 +637,7 @@ downloadFile = (type) => {
   // Download
   const a = document.createElement('a');
   a.href = url;
-  a.download = currentDate + '-' + 'imagescene-' + template;
+  a.download = filename;
   a.click();
 
   // Release URL resource

diff --git a/docs/src/style.css b/docs/src/style.css
@@ -49,6 +49,9 @@ h3 {
 .ic-hidden {
     visibility: hidden;
 }
+.ic-d-none {
+    display: none!important;
+}
 input[type="button"] {
     cursor: pointer;
     border-radius: 3px;