From c7d6e82b8e1d90ba63434c284851830c44bb1306 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 14:32:17 +0100 Subject: [PATCH 01/24] implement part for generating filename from url --- docs/src/script.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index 987ff98..87977a6 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -11,12 +11,14 @@ * @param {boolean} hasGenerated State of the generating progress * @param {array} templatesData Empty array for the templates.json content * @param {array} templatePath Path to the template directory depending on github or server adress + * @param {string} defaultFilename The filename that is used as default for download actions * @param {array} shareData Site information for share method * */ let hasGenerated = false; let templatesData = []; let templatesPath; +let defaultFilename; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', @@ -386,6 +388,13 @@ generateScene = () => { const srcMatch = content.match(/src=["'](.*?)["']/); let url = srcMatch ? srcMatch[1] : content; + // Generate filename from url + if (!defaultFilename) { + const lastSlash = url.lastIndexOf('/'); + defaultFilename = lastSlash > 0 ? url.substring(lastSlash + 1, url.lastIndexOf('.')) : url.substring(lastSlash + 1, lastSlash + 9); + console.log(defaultFilename); + } + // Check completeness let check = true; From da1015092674f92f767feeddf64d4c61001fa228 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 14:42:32 +0100 Subject: [PATCH 02/24] define default filename for uploaded images --- docs/src/script.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 87977a6..da0eb93 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -389,11 +389,10 @@ generateScene = () => { let url = srcMatch ? srcMatch[1] : content; // Generate filename from url - if (!defaultFilename) { - const lastSlash = url.lastIndexOf('/'); - defaultFilename = lastSlash > 0 ? url.substring(lastSlash + 1, url.lastIndexOf('.')) : url.substring(lastSlash + 1, lastSlash + 9); - console.log(defaultFilename); - } + if (!defaultFilename) defaultFilename = url; + const lastSlash = defaultFilename.lastIndexOf('/'); + defaultFilename = lastSlash > 0 ? defaultFilename.substring(lastSlash + 1, defaultFilename.lastIndexOf('.')) : defaultFilename.substring(lastSlash + 1, lastSlash + 9); + console.log(defaultFilename); // Check completeness let check = true; @@ -667,6 +666,8 @@ handleFileSelect = (file) => { // Check if a file was provided if (file) { + defaultFilename = file.name; + const reader = new FileReader(); reader.onload = function () { From b2ba69ac37756185061f44891f43ed98ef949b58 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 14:44:06 +0100 Subject: [PATCH 03/24] clean code --- docs/src/script.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index da0eb93..c6539f8 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -391,7 +391,9 @@ generateScene = () => { // Generate filename from url if (!defaultFilename) defaultFilename = url; const lastSlash = defaultFilename.lastIndexOf('/'); - defaultFilename = lastSlash > 0 ? defaultFilename.substring(lastSlash + 1, defaultFilename.lastIndexOf('.')) : defaultFilename.substring(lastSlash + 1, lastSlash + 9); + defaultFilename = lastSlash > 0 + ? defaultFilename.substring(lastSlash + 1, defaultFilename.lastIndexOf('.')) + : defaultFilename.substring(lastSlash + 1, lastSlash + 9); console.log(defaultFilename); // Check completeness From 6ebaf20ebc749ae8855ea093bf79bb12e13a3b92 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 15:43:12 +0100 Subject: [PATCH 04/24] correct base for filename --- docs/src/script.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index c6539f8..d979966 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -388,13 +388,15 @@ generateScene = () => { const srcMatch = content.match(/src=["'](.*?)["']/); let url = srcMatch ? srcMatch[1] : content; - // Generate filename from url - if (!defaultFilename) defaultFilename = url; + // Get information for generating filename + defaultFilename = content.includes("data:image/") ? "/" + defaultFilename : url; const lastSlash = defaultFilename.lastIndexOf('/'); - defaultFilename = lastSlash > 0 - ? defaultFilename.substring(lastSlash + 1, defaultFilename.lastIndexOf('.')) + const lastDot = defaultFilename.lastIndexOf('.'); + + // Create filename + defaultFilename = (lastSlash !== -1 && lastDot > lastSlash) + ? defaultFilename.substring(lastSlash + 1, lastDot) : defaultFilename.substring(lastSlash + 1, lastSlash + 9); - console.log(defaultFilename); // Check completeness let check = true; From 3d84de9223980ad7407a42f0d9f5b850b264c042 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 16:24:49 +0100 Subject: [PATCH 05/24] revise area for filename --- docs/index.html | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index 9a025f0..619d5f6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -203,9 +203,21 @@

+
+
+ + +
+
- - +
From 48e44a895bad85d53e2d0b5dc85bc39bf004e45b Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 16:26:14 +0100 Subject: [PATCH 06/24] add style for nested container --- docs/src/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/style.css b/docs/src/style.css index a439c21..d0d15cc 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -88,6 +88,10 @@ input[type="button"]:hover { select { font-size: 12pt; } +.nested-container { + display: flex; + flex-direction: column; +} .miniheading { margin: 10px 0px 5px 0px; } From 9ce9805ee83d6498ba98af842859426dd8eed4ef Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sun, 12 Nov 2023 16:27:22 +0100 Subject: [PATCH 07/24] change class --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 619d5f6..fc32be0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -203,7 +203,7 @@

-
+
- - - - + + + + From 63c9b922577673d193408d322e4bd51897c1e948 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 07:59:17 +0100 Subject: [PATCH 09/24] change option order --- docs/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/index.html b/docs/index.html index 652e286..5f99c99 100644 --- a/docs/index.html +++ b/docs/index.html @@ -209,10 +209,10 @@

From 48a9ccb47994684f9343cbd744aed0e697450136 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:01:19 +0100 Subject: [PATCH 10/24] rename variable --- docs/src/script.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index d979966..804745e 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -11,14 +11,14 @@ * @param {boolean} hasGenerated State of the generating progress * @param {array} templatesData Empty array for the templates.json content * @param {array} templatePath Path to the template directory depending on github or server adress - * @param {string} defaultFilename The filename that is used as default for download actions + * @param {string} originalFilename The filename that is used as default for download actions * @param {array} shareData Site information for share method * */ let hasGenerated = false; let templatesData = []; let templatesPath; -let defaultFilename; +let originalFilename; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', @@ -389,14 +389,14 @@ generateScene = () => { let url = srcMatch ? srcMatch[1] : content; // Get information for generating filename - defaultFilename = content.includes("data:image/") ? "/" + defaultFilename : url; - const lastSlash = defaultFilename.lastIndexOf('/'); - const lastDot = defaultFilename.lastIndexOf('.'); + originalFilename = content.includes("data:image/") ? "/" + originalFilename : url; + const lastSlash = originalFilename.lastIndexOf('/'); + const lastDot = originalFilename.lastIndexOf('.'); // Create filename - defaultFilename = (lastSlash !== -1 && lastDot > lastSlash) - ? defaultFilename.substring(lastSlash + 1, lastDot) - : defaultFilename.substring(lastSlash + 1, lastSlash + 9); + originalFilename = (lastSlash !== -1 && lastDot > lastSlash) + ? originalFilename.substring(lastSlash + 1, lastDot) + : originalFilename.substring(lastSlash + 1, lastSlash + 9); // Check completeness let check = true; From fa5e13b047a31f4118c83905712ebc66a4b69970 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:17:34 +0100 Subject: [PATCH 11/24] add option values with accordingly placeholders --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 5f99c99..66f5164 100644 --- a/docs/index.html +++ b/docs/index.html @@ -207,12 +207,12 @@

From e042b63e5167d03f79edcf0d46ca0a5e44125306 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:25:35 +0100 Subject: [PATCH 12/24] parse option for filename --- docs/src/script.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index 804745e..8ef9400 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -639,6 +639,15 @@ downloadFile = (type) => { let defaultFilename = currentDate + '-imagescene-' + template; let filename = userInput.value.trim() !== '' ? userInput.value + '.' + type : defaultFilename + // Create new filename + let option = document.getElementById("imagescene-filename-select").value; + option = option + .replace('{file}', originalFilename) + .replace('{template}', template) + .replace('{date}', currentDate) + .replace('{type}', type); + console.log(option); + // Add XML declaration for SVG type if (type === 'svg') html = `\n${html}`; From 44c2edc793f2e8f11bf23b2dc6b666dec5ea373f Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:26:46 +0100 Subject: [PATCH 13/24] add type to option values --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 66f5164..71c9f3f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -207,12 +207,12 @@

From 054ffcfa83364e076bba7f6715f7db74f3b8046a Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:30:22 +0100 Subject: [PATCH 14/24] remove raw extension --- docs/src/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 8ef9400..1fd5a76 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -622,7 +622,7 @@ showInfo = (content) => { downloadFile = (type) => { // Get values let html = document.getElementById('imagescene-result').value; - let template = document.getElementById('imagescene-template').value.replace("raw", type); + let template = document.getElementById('imagescene-template').value.replace("raw", ""); // Get date and time for filename const date = new Date(); From e91f999902f15ee906af3d955832a905334a24de Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:31:11 +0100 Subject: [PATCH 15/24] replace signs for option values --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 71c9f3f..04462f7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -207,12 +207,12 @@

From cb23bc999afa535d3188b66de6a6ff09eb7f9ac4 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:32:58 +0100 Subject: [PATCH 16/24] revise spelling --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 04462f7..10ac597 100644 --- a/docs/index.html +++ b/docs/index.html @@ -207,12 +207,12 @@

From 0e2302e6f317af31c80fa92eb73391d2c2c517e4 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:33:42 +0100 Subject: [PATCH 17/24] add dot for replacing --- docs/src/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 1fd5a76..e9b4c5b 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -622,7 +622,7 @@ showInfo = (content) => { downloadFile = (type) => { // Get values let html = document.getElementById('imagescene-result').value; - let template = document.getElementById('imagescene-template').value.replace("raw", ""); + let template = document.getElementById('imagescene-template').value.replace(".raw", ""); // Get date and time for filename const date = new Date(); From 0c751a5f5b91de9b43ac9c9d4ebb7ba3cb23426a Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:39:15 +0100 Subject: [PATCH 18/24] correct generating filename --- docs/src/script.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index e9b4c5b..8762374 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -636,17 +636,14 @@ downloadFile = (type) => { // Get filename let userInput = document.getElementById('imagescene-filename'); - let defaultFilename = currentDate + '-imagescene-' + template; - let filename = userInput.value.trim() !== '' ? userInput.value + '.' + type : defaultFilename - - // Create new filename let option = document.getElementById("imagescene-filename-select").value; option = option .replace('{file}', originalFilename) .replace('{template}', template) .replace('{date}', currentDate) .replace('{type}', type); - console.log(option); + let filename = userInput.value.trim() !== '' ? userInput.value + '.' + type : option; + // Add XML declaration for SVG type if (type === 'svg') html = `\n${html}`; From 507b5a4a60e72e5a295a7b3da9b0a1b3b53b6f75 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 08:42:03 +0100 Subject: [PATCH 19/24] correct saving filename when uploading an image --- docs/src/script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 8762374..cffc9fa 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -676,8 +676,6 @@ handleFileSelect = (file) => { // Check if a file was provided if (file) { - defaultFilename = file.name; - const reader = new FileReader(); reader.onload = function () { @@ -705,6 +703,9 @@ handleFileSelect = (file) => { let textarea = document.getElementById('imagescene-url'); textarea.value = dataUri; + // Save filename + originalFilename = file.name; + // Change status changeStatus(); From 49f58d28adf712462d9b396cacdcffa2f01ae022 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 13:10:54 +0100 Subject: [PATCH 20/24] deactivate function for handling settings --- docs/src/script.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index cffc9fa..b6f7b81 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -143,10 +143,6 @@ 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); @@ -497,10 +493,18 @@ scrollResult = () => { /** - * Handle Settings + * 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 = () => { From 61dbbf4e238e72d9a86f3fc383097bfdf2a1cbfe Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 13:15:14 +0100 Subject: [PATCH 21/24] remove unused setting parts --- docs/index.html | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/index.html b/docs/index.html index 10ac597..64f37da 100644 --- a/docs/index.html +++ b/docs/index.html @@ -199,11 +199,8 @@

Ergebnis

- - - -
+
-
+
From d4bb43dff47737bd5f331b593c0bb78ff25c8d19 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 13:22:07 +0100 Subject: [PATCH 22/24] rearrange functions --- docs/src/script.js | 357 +++++++++++++++++++++++---------------------- 1 file changed, 180 insertions(+), 177 deletions(-) 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'); + }); }; - - - From f2bfd74e92b5900f476511e54bf5656ad4a31610 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 13:32:45 +0100 Subject: [PATCH 23/24] rephrase text content for filename options --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 64f37da..1804a49 100644 --- a/docs/index.html +++ b/docs/index.html @@ -204,12 +204,12 @@

From 60698e831d57dcf0d784a52c47826987bd1a4b46 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Mon, 13 Nov 2023 19:27:20 +0100 Subject: [PATCH 24/24] add class --- docs/index.html | 2 +- docs/src/style.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 1804a49..4ab9b1d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -214,7 +214,7 @@

- +
diff --git a/docs/src/style.css b/docs/src/style.css index d0d15cc..ae6d3b2 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -49,6 +49,9 @@ h3 { .ic-hidden { visibility: hidden; } +.ic-no-overflow { + overflow: hidden; +} .ic-d-none { display: none!important; }