rearrange functions

TRMSC · Nov 13, 2023 · d4bb43d · d4bb43d
1 parent 61dbbf4
commit d4bb43d
Showing 1 changed file with 180 additions and 177 deletions.
diff --git a/docs/src/script.js b/docs/src/script.js
@@ -162,6 +162,111 @@ listenEvents = () => {
 };
 
 
+/**
+ * Load templates from templates.json
+ * 
+ * @function loadTemplates
+ * @returns {void}
+ *
+ */
+loadTemplates = () => {
+
+  // Build path
+  const baseUrl = window.location.href;
+  const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/';
+  const relativePath = '../templates/';
+  templatesPath = baseUrl.includes('github.io') ? originPath : relativePath;
+  let json = templatesPath + 'templates.json';
+
+  // Fetch data
+  fetch(json)
+    .then(response => response.json())
+    .then(data => {
+
+      // Handle template data
+      templatesData = data.templates;
+      let templatesSelect = document.getElementById('imagescene-template');
+      templatesSelect.innerHTML = '';
+
+      // Create options
+      templatesData.forEach((template, index) => {
+        const option = document.createElement('option');
+        option.textContent = template.name;
+        option.value = template.filename;
+        if (template.default === true) option.selected = 'selected';
+        templatesSelect.appendChild(option);
+      });
+
+      // Call function for changing status
+      changeStatus();
+
+      // Handle template selection
+      selectTemplates();
+
+    })
+    .catch(error => {
+      console.error('Error when loading templates.json: ' + error);
+    });
+
+};
+
+
+/**
+ * Handle file select when added via button or dropzone
+ * 
+ * @function handleFileSelect
+ * @param {File} file - The file added by user
+ * @returns {void}
+ */
+handleFileSelect = (file) => {
+
+  // Check if a file was provided
+  if (file) {
+
+    const reader = new FileReader();
+
+    reader.onload = function () {
+
+      // Convert image
+      const dataUri = reader.result;
+
+      // Handle values
+      const img = new Image();
+      img.src = dataUri;
+
+      img.onload = function () {
+
+        // Save values
+        const originalWidth = img.width;
+        const originalHeight = img.height;
+
+        // Transmit values
+        let width = document.getElementById('imagescene-w');
+        width.value = originalWidth;
+        let height = document.getElementById('imagescene-h');
+        height.value = originalHeight;
+
+        // Set Data URI directly to the textarea
+        let textarea = document.getElementById('imagescene-url');
+        textarea.value = dataUri;
+
+        // Save filename
+        originalFilename = file.name;
+
+        // Change status
+        changeStatus();
+
+      };
+
+    };
+
+    reader.readAsDataURL(file);
+
+  }
+
+};
+
+
 /**
  * Get images values
  * 
@@ -244,6 +349,31 @@ changeStatus = () => {
 };
 
 
+/**
+ * Handle template selection
+ * 
+ * @function selectTemplates
+ * @returns {void}
+ *
+ */
+selectTemplates = () => {
+
+  // Get selection
+  let templatesSelect = document.getElementById('imagescene-template');
+  const selectedFilename = templatesSelect.value;
+  const selectedTemplate = templatesData.find(template => template.filename === selectedFilename);
+
+  // Adjust details
+  const templatesName = document.getElementById('template-name');
+  const templatesAuthor = document.getElementById('template-author');
+  const templatesDescription = document.getElementById('template-description');
+  templatesName.textContent = selectedTemplate.name;
+  templatesAuthor.textContent = selectedTemplate.author;
+  templatesDescription.textContent = selectedTemplate.description;
+
+};
+
+
 /**
  * Handle cleaning progress for generator
  * 
@@ -290,80 +420,6 @@ cleanGenerator = (way) => {
 };
 
 
-/**
- * Load templates from templates.json
- * 
- * @function loadTemplates
- * @returns {void}
- *
- */
-loadTemplates = () => {
-
-  // Build path
-  const baseUrl = window.location.href;
-  const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/';
-  const relativePath = '../templates/';
-  templatesPath = baseUrl.includes('github.io') ? originPath : relativePath;
-  let json = templatesPath + 'templates.json';
-
-  // Fetch data
-  fetch(json)
-    .then(response => response.json())
-    .then(data => {
-
-      // Handle template data
-      templatesData = data.templates;
-      let templatesSelect = document.getElementById('imagescene-template');
-      templatesSelect.innerHTML = '';
-
-      // Create options
-      templatesData.forEach((template, index) => {
-        const option = document.createElement('option');
-        option.textContent = template.name;
-        option.value = template.filename;
-        if (template.default === true) option.selected = 'selected';
-        templatesSelect.appendChild(option);
-      });
-
-      // Call function for changing status
-      changeStatus();
-
-      // Handle template selection
-      selectTemplates();
-
-    })
-    .catch(error => {
-      console.error('Error when loading templates.json: ' + error);
-    });
-
-};
-
-
-/**
- * Handle template selection
- * 
- * @function selectTemplates
- * @returns {void}
- *
- */
-selectTemplates = () => {
-
-  // Get selection
-  let templatesSelect = document.getElementById('imagescene-template');
-  const selectedFilename = templatesSelect.value;
-  const selectedTemplate = templatesData.find(template => template.filename === selectedFilename);
-
-  // Adjust details
-  const templatesName = document.getElementById('template-name');
-  const templatesAuthor = document.getElementById('template-author');
-  const templatesDescription = document.getElementById('template-description');
-  templatesName.textContent = selectedTemplate.name;
-  templatesAuthor.textContent = selectedTemplate.author;
-  templatesDescription.textContent = selectedTemplate.description;
-
-};
-
-
 /**
  * Start generating the scene
  * 
@@ -492,62 +548,6 @@ scrollResult = () => {
 };
 
 
-/**
- * Handle hidden Settings within the result part
- * 
- * @function handleSettings
- * @returns {void}
- * 
- * @ignore
- * This function is actually not needed but maybe important for later.
- * The following eventlistener is neccessary within listenEvents() when this function will be active:
- * 
- * // Toggle settings
- * let settingToggle = document.getElementById('imagescene-edit');
- * settingToggle.addEventListener('click', handleSettings);
- *
- */
-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
- * 
- * @async
- * @function sharePage
- * @throws {error} When the share api isn't available or the share fails
- * 
- */
-sharePage = async () => {
-
-  if (navigator.share) {
-    try {
-      await navigator.share(shareData);
-      console.log('Shared successfully');
-    } catch (err) {
-      console.log(`Error: ${err}`);
-    }
-  } else {
-    alert(
-      'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' +
-      'Die URL der Projektseite wird daher zum Teilen in die Zwischenablage kopiert. ✔️'
-    );
-    copyClipboard('share');
-  }
-
-};
-
-
 /**
  * Copy to clipboard
  * 
@@ -669,61 +669,64 @@ downloadFile = (type) => {
 
 
 /**
- * Handle file select when added via button or dropzone
+ * Share page by using the share api
+ * 
+ * @async
+ * @function sharePage
+ * @throws {error} When the share api isn't available or the share fails
  * 
- * @function handleFileSelect
- * @param {File} file - The file added by user
- * @returns {void}
  */
-handleFileSelect = (file) => {
-
-  // Check if a file was provided
-  if (file) {
-
-    const reader = new FileReader();
-
-    reader.onload = function () {
-
-      // Convert image
-      const dataUri = reader.result;
-
-      // Handle values
-      const img = new Image();
-      img.src = dataUri;
-
-      img.onload = function () {
-
-        // Save values
-        const originalWidth = img.width;
-        const originalHeight = img.height;
-
-        // Transmit values
-        let width = document.getElementById('imagescene-w');
-        width.value = originalWidth;
-        let height = document.getElementById('imagescene-h');
-        height.value = originalHeight;
-
-        // Set Data URI directly to the textarea
-        let textarea = document.getElementById('imagescene-url');
-        textarea.value = dataUri;
+sharePage = async () => {
 
-        // Save filename
-        originalFilename = file.name;
+  if (navigator.share) {
+    try {
+      await navigator.share(shareData);
+      console.log('Shared successfully');
+    } catch (err) {
+      console.log(`Error: ${err}`);
+    }
+  } else {
+    alert(
+      'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' +
+      'Die URL der Projektseite wird daher zum Teilen in die Zwischenablage kopiert. ✔️'
+    );
+    copyClipboard('share');
+  }
+
+};
 
-        // Change status
-        changeStatus();
-
-      };
 
-    };
+/**
+ * Handle hidden Settings within the result part
+ * 
+ * @function handleSettings
+ * @returns {void}
+ * 
+ * @ignore
+ * This function is actually not needed but maybe important for later.
+ * 
+ * The following eventlistener is neccessary within listenEvents() when this function will be active:
+ * // Toggle settings
+ * let settingToggle = document.getElementById('imagescene-edit');
+ * settingToggle.addEventListener('click', handleSettings);
+ * 
+ * Add the classes .edit-container and .ic-d-none for hidden parts in the index.html.
+ * Further the edit button is neccessary:
+ * <span id="imagescene-edit" class="ic-font-3" title="Bearbeiten">
+ *   <img class="ic-icon-3" src="icons/cog.svg">
+ * </span>
+ *
+ */
+handleSettings = () => {
 
-    reader.readAsDataURL(file);
+  // Declare target elements
+  let editContainers = document.querySelectorAll('.edit-container');
 
-  }
+  // Toggle each element
+  editContainers.forEach(container => {
+    container.classList.toggle('ic-d-none');
+  });
 
 };
 
 
-
-
-