diff --git a/docs/src/script.js b/docs/src/script.js index b6f7b81..fd38f3c 100644 --- 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: + * + * + * + * + */ +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'); + }); }; - - -