From 9c2f40b94be5274fbff27beca243724620833720 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 15 Nov 2023 06:47:58 +0100 Subject: [PATCH 01/19] add preview container --- docs/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/index.html b/docs/index.html index 4ab9b1d..65f079a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -226,6 +226,10 @@

+
+ Vorschau: +
+
From 2099fee8b38176d183fcf548b4023f1b0b8dda70 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 15 Nov 2023 07:02:17 +0100 Subject: [PATCH 02/19] style preview part --- docs/src/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/src/style.css b/docs/src/style.css index ae6d3b2..546bc3f 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -117,6 +117,15 @@ select { font-size: 11pt; background-color: #a1b1aa1a; } +#imagescene-result-preview { + margin: 0.7rem 0rem; +} +.preview-container { + margin-top: 1.4rem; +} +#result-container { + margin-bottom: 0.7rem; +} #imagescene-status { cursor: help; white-space: nowrap; From a5718a725bc8780cc26fd7c68e1fd5f45cc69b19 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 15 Nov 2023 22:59:03 +0100 Subject: [PATCH 03/19] show preview when generating result --- docs/src/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 3cd4f3b..81c5633 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -514,8 +514,9 @@ generateScene = () => { templateContent = templateContent.replace(/\$HEIGHT/g, hInput.value); templateContent = templateContent.replace(/\$ALT/g, altInput.value); - // Put the generated code to the textarea + // Put the generated code to the textarea and to results preview document.getElementById('imagescene-result').value = templateContent; + document.getElementById('imagescene-result-preview').innerHTML = templateContent; // Copy code to the clipboard copyClipboard(); From 3b4f65429e70fba70c7c2456e997e4374cafcf0d Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 00:06:08 +0100 Subject: [PATCH 04/19] document handling preview based on availability --- docs/src/script.js | 45 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 81c5633..9658ba9 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -514,9 +514,14 @@ generateScene = () => { templateContent = templateContent.replace(/\$HEIGHT/g, hInput.value); templateContent = templateContent.replace(/\$ALT/g, altInput.value); - // Put the generated code to the textarea and to results preview + // Put the generated code to the textarea document.getElementById('imagescene-result').value = templateContent; + + // Handle preview document.getElementById('imagescene-result-preview').innerHTML = templateContent; + + // Handle preview depending on availability + // handleResultPreview(url, templateContent); // Copy code to the clipboard copyClipboard(); @@ -528,6 +533,44 @@ generateScene = () => { }; +/** + * Check image url and implement preview if the source is available + * + * @function handleResultPreview + * @returns {void} + * + * @ignore + * This function is actually not implemented but maybe important for later. + * If the approach is to be used, it must be ensured that there are no overlaps with updates to the image scenes due to the calculation time. + * + */ +handleResultPreview = (url, content) => { + + let testImage = new Image(); + testImage.src = url + + return new Promise((resolve) => { + testImage.onload = function() { + resolve(true); + }; + + testImage.onerror = function() { + resolve(false); + }; + }).then((isValid) => { + + if (isValid) { + document.getElementById('imagescene-result-preview').innerHTML = content; + } else { + document.getElementById('imagescene-result-preview').textContent = + "Aktuell kann keine Vorschau angezeigt werden... Möglicherweise liegt das daran, dass die Bildquelle "; + } + + }); + +}; + + /** * Scroll to result * From 738d0076b57b1144ad201adf0d3c8eb8fb299dc4 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 00:10:17 +0100 Subject: [PATCH 05/19] add class for relative position --- 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 65f079a..8d83dc5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -227,7 +227,7 @@

- Vorschau: + Vorschau:
diff --git a/docs/src/style.css b/docs/src/style.css index 546bc3f..5d376e0 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -55,6 +55,9 @@ h3 { .ic-d-none { display: none!important; } +.ic-relative { + position: relative; +} input[type="button"] { cursor: pointer; border-radius: 3px; From 3244872092d8cf80111fbccddee865f70daeee52 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:36:32 +0100 Subject: [PATCH 06/19] add preview icon --- docs/icons/eye-slash.svg | 1 + docs/icons/eye.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 docs/icons/eye-slash.svg create mode 100644 docs/icons/eye.svg diff --git a/docs/icons/eye-slash.svg b/docs/icons/eye-slash.svg new file mode 100644 index 0000000..0a96d2a --- /dev/null +++ b/docs/icons/eye-slash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/icons/eye.svg b/docs/icons/eye.svg new file mode 100644 index 0000000..79b1d51 --- /dev/null +++ b/docs/icons/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file From 97b4d402e11e6b76b4e54878f0ac4c44c9f73952 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:45:11 +0100 Subject: [PATCH 07/19] conceal preview --- docs/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 8d83dc5..9433e72 100644 --- a/docs/index.html +++ b/docs/index.html @@ -199,6 +199,9 @@

Ergebnis

+ + +
@@ -226,7 +229,7 @@

-
+
Vorschau:
From d0bd15526d9ad5d14182f48da323903d4cebc323 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:46:22 +0100 Subject: [PATCH 08/19] add id --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 9433e72..f93aba0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -229,7 +229,7 @@

-
+
Vorschau:
From f46b1acc49b4eca30f71bdba96aeecd968dd7025 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:48:39 +0100 Subject: [PATCH 09/19] add event listener --- docs/src/script.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index 9658ba9..7f4b4b5 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -146,6 +146,10 @@ listenEvents = () => { let generateButton = document.getElementById('imagescene-generate'); generateButton.addEventListener('click', generateScene); + // Handle preview + let previewButton = document.getElementById('imagescene-result-preview'); + previewButton.addEventListener('click', handleResultPreview); + // Copy to clipboard let clipboardButton = document.getElementById('imagescene-copy'); clipboardButton.addEventListener('click', copyClipboard); From da15120288cebad873119ef913af7c1573e74a3c Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:49:07 +0100 Subject: [PATCH 10/19] correct id --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index f93aba0..1fdf1cc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -229,7 +229,7 @@

-
+
Vorschau:
From a7b48cf8e2dc59e0485a22f9f4dc2a16a3ef5d92 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 06:52:01 +0100 Subject: [PATCH 11/19] make image sources url global --- 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 7f4b4b5..1ee642f 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -12,6 +12,7 @@ * @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} originalFilename The filename that is used as default for download actions + * @param {string} url Stores the image source url * @param {array} shareData Site information for share method * */ @@ -19,6 +20,7 @@ let hasGenerated = false; let templatesData = []; let templatesPath; let originalFilename; +let url; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', @@ -445,7 +447,7 @@ generateScene = () => { // Search for embedded url using regex const srcMatch = content.match(/src=["'](.*?)["']/); - let url = srcMatch ? srcMatch[1] : content; + url = srcMatch ? srcMatch[1] : content; // Get information for generating filename originalFilename = content.includes("data:image/") ? "/" + originalFilename : url; From b08ae6f82e6e26a7998db13a4f7554d641aee209 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:21:16 +0100 Subject: [PATCH 12/19] work on handling results preview --- docs/src/script.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 1ee642f..033cb5d 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -13,6 +13,7 @@ * @param {array} templatePath Path to the template directory depending on github or server adress * @param {string} originalFilename The filename that is used as default for download actions * @param {string} url Stores the image source url + * @param {string} templateContent Includes the final content for templates imagescene * @param {array} shareData Site information for share method * */ @@ -21,6 +22,7 @@ let templatesData = []; let templatesPath; let originalFilename; let url; +let templateContent; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', @@ -149,7 +151,7 @@ listenEvents = () => { generateButton.addEventListener('click', generateScene); // Handle preview - let previewButton = document.getElementById('imagescene-result-preview'); + let previewButton = document.getElementById('ic-preview-show'); previewButton.addEventListener('click', handleResultPreview); // Copy to clipboard @@ -438,6 +440,10 @@ cleanGenerator = (way) => { */ generateScene = () => { + // Hide preview + let resultPreviewContainer = document.getElementById('result-preview-container'); + resultPreviewContainer.classList.add('ic-d-none'); + // Get user input let uInput = document.getElementById('imagescene-url'); let content = uInput.value; @@ -504,7 +510,6 @@ generateScene = () => { let template = templatesPath + templateName; // Fetch template content - let templateContent = ''; fetch(template) .then(response => { // Check @@ -524,7 +529,7 @@ generateScene = () => { document.getElementById('imagescene-result').value = templateContent; // Handle preview - document.getElementById('imagescene-result-preview').innerHTML = templateContent; + //document.getElementById('imagescene-result-preview').innerHTML = templateContent; // Handle preview depending on availability // handleResultPreview(url, templateContent); @@ -550,10 +555,10 @@ generateScene = () => { * If the approach is to be used, it must be ensured that there are no overlaps with updates to the image scenes due to the calculation time. * */ -handleResultPreview = (url, content) => { +handleResultPreview = () => { let testImage = new Image(); - testImage.src = url + testImage.src = url; return new Promise((resolve) => { testImage.onload = function() { @@ -566,12 +571,17 @@ handleResultPreview = (url, content) => { }).then((isValid) => { if (isValid) { - document.getElementById('imagescene-result-preview').innerHTML = content; + document.getElementById('imagescene-result-preview').innerHTML = templateContent; } else { document.getElementById('imagescene-result-preview').textContent = - "Aktuell kann keine Vorschau angezeigt werden... Möglicherweise liegt das daran, dass die Bildquelle "; + "Für diese Bildszene kann keine Vorschau angezeigt werden. " + + "Möglicherweise liegt das daran, dass die Bildquelle in einem passwortgeschützten Raum liegt " + + "(z.B. in Moodle) und im Browser dort aktuell keine Anmeldung besteht."; } + let resultPreviewContainer = document.getElementById('result-preview-container'); + resultPreviewContainer.classList.toggle('ic-d-none'); + }); }; From 76df069efc34591e38ad5a3980eb511d5bdc1885 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:22:04 +0100 Subject: [PATCH 13/19] clean code --- docs/src/script.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 033cb5d..f32ade4 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -528,12 +528,6 @@ generateScene = () => { // Put the generated code to the textarea document.getElementById('imagescene-result').value = templateContent; - // Handle preview - //document.getElementById('imagescene-result-preview').innerHTML = templateContent; - - // Handle preview depending on availability - // handleResultPreview(url, templateContent); - // Copy code to the clipboard copyClipboard(); }) @@ -549,10 +543,6 @@ generateScene = () => { * * @function handleResultPreview * @returns {void} - * - * @ignore - * This function is actually not implemented but maybe important for later. - * If the approach is to be used, it must be ensured that there are no overlaps with updates to the image scenes due to the calculation time. * */ handleResultPreview = () => { From fb42721535fb68fd7957f1e5c371c3a65f3d4f94 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:25:43 +0100 Subject: [PATCH 14/19] make text content of results preview bold --- docs/src/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/style.css b/docs/src/style.css index 5d376e0..3632834 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -122,6 +122,7 @@ select { } #imagescene-result-preview { margin: 0.7rem 0rem; + font-weight: bold; } .preview-container { margin-top: 1.4rem; From 35ad454fdaad6888eaebb02ef0ae3971f3d36b4b Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:35:48 +0100 Subject: [PATCH 15/19] toggle eye --- docs/src/script.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index f32ade4..ced2137 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -151,8 +151,10 @@ listenEvents = () => { generateButton.addEventListener('click', generateScene); // Handle preview - let previewButton = document.getElementById('ic-preview-show'); - previewButton.addEventListener('click', handleResultPreview); + let previewShowButton = document.getElementById('ic-preview-show'); + previewShowButton.addEventListener('click', handleResultPreview); + let previewHideButton = document.getElementById('ic-preview-hide'); + previewHideButton.addEventListener('click', handleResultPreview); // Copy to clipboard let clipboardButton = document.getElementById('imagescene-copy'); @@ -569,8 +571,14 @@ handleResultPreview = () => { "(z.B. in Moodle) und im Browser dort aktuell keine Anmeldung besteht."; } - let resultPreviewContainer = document.getElementById('result-preview-container'); - resultPreviewContainer.classList.toggle('ic-d-none'); + function toggleVisibility(elementId) { + let element = document.getElementById(elementId); + element.classList.toggle('ic-d-none'); + } + + toggleVisibility('result-preview-container'); + toggleVisibility('ic-preview-show'); + toggleVisibility('ic-preview-hide'); }); From 1a288f926786dfef223770a554dd76aee6875435 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:37:29 +0100 Subject: [PATCH 16/19] add slashed eye --- docs/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/index.html b/docs/index.html index 1fdf1cc..c26e8b0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -202,6 +202,9 @@

+ + +

From 8d5f74f5124e94a4f36562e05e7d9d86b1eddb36 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 07:41:33 +0100 Subject: [PATCH 17/19] toggle eye correctly --- docs/src/script.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index ced2137..6496c58 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -445,6 +445,10 @@ generateScene = () => { // Hide preview let resultPreviewContainer = document.getElementById('result-preview-container'); resultPreviewContainer.classList.add('ic-d-none'); + let previewShow = document.getElementById('ic-preview-show'); + previewShow.classList.remove('ic-d-none'); + let previewHide = document.getElementById('ic-preview-hide'); + previewHide.classList.add('ic-d-none'); // Get user input let uInput = document.getElementById('imagescene-url'); From 247294f0322d9e07ae586618364daf4198897631 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 19:36:05 +0100 Subject: [PATCH 18/19] open scroll function for other targets --- 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 6496c58..85ab0ac 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -509,7 +509,7 @@ generateScene = () => { // Show result let show = document.getElementById('resultpart'); show.style.display = ""; - scrollResult(); + scrollTarget('resultpart'); // Get template let templateName = document.getElementById('imagescene-template').value; @@ -590,16 +590,17 @@ handleResultPreview = () => { /** - * Scroll to result + * Scroll to target * - * @function scrollResult + * @function scrollTarget + * @param id The target ID * @returns {void} * */ -scrollResult = () => { +scrollTarget = (id) => { // Get target - const target = document.getElementById('resultpart'); + const target = document.getElementById(id); // Calculate position const targetPosition = target.getBoundingClientRect().top + window.scrollY - 50; From 2126c91e52c5b05ffa0935fc709e9a2ff89f7f0d Mon Sep 17 00:00:00 2001 From: TRMSC Date: Thu, 16 Nov 2023 19:54:12 +0100 Subject: [PATCH 19/19] clean code and adjust values --- docs/src/script.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 85ab0ac..4dacd62 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -509,7 +509,7 @@ generateScene = () => { // Show result let show = document.getElementById('resultpart'); show.style.display = ""; - scrollTarget('resultpart'); + scrollTarget('resultpart', 150); // Get template let templateName = document.getElementById('imagescene-template').value; @@ -553,10 +553,13 @@ generateScene = () => { */ handleResultPreview = () => { + // Create test image let testImage = new Image(); testImage.src = url; + // Check image return new Promise((resolve) => { + testImage.onload = function() { resolve(true); }; @@ -564,25 +567,37 @@ handleResultPreview = () => { testImage.onerror = function() { resolve(false); }; + }).then((isValid) => { if (isValid) { + + // Image source is given document.getElementById('imagescene-result-preview').innerHTML = templateContent; + } else { + + // Image source isn't available document.getElementById('imagescene-result-preview').textContent = "Für diese Bildszene kann keine Vorschau angezeigt werden. " + "Möglicherweise liegt das daran, dass die Bildquelle in einem passwortgeschützten Raum liegt " + "(z.B. in Moodle) und im Browser dort aktuell keine Anmeldung besteht."; + } + // Function for toggling visibility function toggleVisibility(elementId) { let element = document.getElementById(elementId); element.classList.toggle('ic-d-none'); } + // Function calls for toggling toggleVisibility('result-preview-container'); toggleVisibility('ic-preview-show'); - toggleVisibility('ic-preview-hide'); + toggleVisibility('ic-preview-hide'); + + // Scroll to preview + scrollTarget('resultpart', 50); }); @@ -593,17 +608,18 @@ handleResultPreview = () => { * Scroll to target * * @function scrollTarget - * @param id The target ID + * @param {string} id The target ID + * @param {number} value The scrolling distance * @returns {void} * */ -scrollTarget = (id) => { +scrollTarget = (id, value) => { // Get target const target = document.getElementById(id); // Calculate position - const targetPosition = target.getBoundingClientRect().top + window.scrollY - 50; + const targetPosition = target.getBoundingClientRect().top + window.scrollY - value; // Scroll to position window.scrollTo({