From d02352ed977f1d4c96cc30c05fafa981a8468a23 Mon Sep 17 00:00:00 2001 From: Herwin Date: Mon, 12 Dec 2022 19:48:57 +0100 Subject: [PATCH] Added screenshot gallery to lscom and composer backend Update composer.php, lscom-cli-dotnet.json, and 4 more files... --- commons/composer.php | 18 ++++++- content/items/lscom-cli-dotnet.json | 29 ++++++++++- readme.md | 6 +-- resources/Azias/js/nibblepoker.lu.js | 51 ++++++++++++++----- .../Azias/scss/halfmoon/css/modal.css.map | 1 + .../Azias/scss/halfmoon/css/modal.min.css | 1 + .../Azias/scss/halfmoon/css/modal.min.css.map | 1 + .../Azias/scss/halfmoon/element/modal.scss | 13 +++++ resources/Azias/scss/nibblepoker.lu.scss | 1 + 9 files changed, 103 insertions(+), 18 deletions(-) create mode 100644 resources/Azias/scss/halfmoon/css/modal.css.map create mode 100644 resources/Azias/scss/halfmoon/css/modal.min.css create mode 100644 resources/Azias/scss/halfmoon/css/modal.min.css.map create mode 100644 resources/Azias/scss/halfmoon/element/modal.scss diff --git a/commons/composer.php b/commons/composer.php index 6f23986..2dd5529 100644 --- a/commons/composer.php +++ b/commons/composer.php @@ -433,10 +433,13 @@ class ComposerElement { private ?string $source; private ?string $thumbnail; + // Galleries parameters + private array $images; + function __construct(string $type, ?array $modifiers, ?string $link, ?array $parts, ?string $content, bool $localize, ?int $padding, ?int $margin, ?int $size, ?array $head, ?array $body, int $colspan, int $rowspan, ?int $indent, ?array $code, ?string $codeLanguage, - bool $codeCopyable, ?string $color, ?string $source, ?string $thumbnail) { + bool $codeCopyable, ?string $color, ?string $source, ?string $thumbnail, ?array $images) { $this->type = $type; $this->modifiers = $modifiers; $this->link = $link; @@ -464,6 +467,11 @@ class ComposerElement { $this->color = $color; $this->source = $source; $this->thumbnail = $thumbnail; + if(is_null($images)) { + $this->images = array(); + } else { + $this->images = $images; + } } static function from_json_array(?array $json_dataArray) : array { @@ -498,6 +506,7 @@ class ComposerElement { key_exists("color", $json_data) ? $json_data["color"] : null, key_exists("source", $json_data) ? $json_data["source"] : null, key_exists("thumbnail", $json_data) ? $json_data["thumbnail"] : null, + key_exists("images", $json_data) ? $json_data["images"] : null, ); } @@ -826,6 +835,13 @@ class ComposerElement { break; case ComposerElementTypes::GALLERY: + $htmlCode .= '
'; + + foreach($this->images as $galleryImageUrl) { + $htmlCode .= ''; + } + + $htmlCode .= '
'; break; case ComposerElementTypes::VIDEO: diff --git a/content/items/lscom-cli-dotnet.json b/content/items/lscom-cli-dotnet.json index ee8db19..3c35575 100644 --- a/content/items/lscom-cli-dotnet.json +++ b/content/items/lscom-cli-dotnet.json @@ -34,7 +34,8 @@ "packages.self.1": "Larger builds that contain the exe and the .NET 6.0 Runtime as well as the required licenses.", "packages.msi.title": "MSI Installers", "packages.msi.1": "Windows installers that contain the relevant \"Self-Contained\" build with an option to automatically update existing installations and add the program to the %PATH%.
The install location is %ProgramFiles%\\NibblePoker\\lscom\\ and cannot be changed. (This will be possible in future releases)", - "links.title": "Links" + "links.title": "Links", + "screenshots.title": "Screenshots" }, "fr": { "meta.title": "DotNet-ListComPort", @@ -69,7 +70,8 @@ "packages.self.1": "Larger builds that contain the exe and the .NET 6.0 Runtime as well as the required licenses.", "packages.msi.title": "Installateurs MSI", "packages.msi.1": "Windows installers that contain the relevant \"Self-Contained\" build with an option to automatically update existing installations and add the program to the %PATH%.
The install location is %ProgramFiles%\\NibblePoker\\lscom\\ and cannot be changed. (This will be possible in future releases)", - "links.title": "Liens" + "links.title": "Liens", + "screenshots.title": "Captures d'écran" } }, "metadata": { @@ -158,6 +160,29 @@ ] }, + { + "type": "container", "padding": 20, + "modifiers": ["_no-top-padding", "no-bottom-padding"], + "parts": [ + {"type": "h1", "content": "screenshots.title"}, + { + "type": "container", "margin": 5, "padding": 0, + "modifiers": [], + "parts": [ + { + "type": "gallery", + "modifiers": [], + "images": [ + "/resources/Azias/imgs/lscom/screen-cli-stylish-2x-xBR.png", + "/resources/Azias/imgs/lscom/screen-cli-csv-2x-xBR.png", + "/resources/Azias/imgs/lscom/screen-cli-full-2x-xBR.png" + ] + } + ] + } + ] + }, + { "type": "container", "padding": 20, "modifiers": ["_no-top-padding", "no-bottom-padding"], diff --git a/readme.md b/readme.md index 3478a0d..2e88db5 100644 --- a/readme.md +++ b/readme.md @@ -8,12 +8,12 @@ In the event you wished to mirror and serve it, or modify it, you should make su the `.git` folder and the other files referenced in the [.dockerignore](.dockerignore) file are properly removed, even if measures are in place to prevent access to them. -The [.htaccess](.htaccess) file has been made public **on purpose** since it does not contains any +The [.htaccess](.htaccess) file has been made public **on purpose** since it does not contain any private information and because it could be used by other people to create their website more easily -since these files are a pain to work with.
+since these configuration files are a nightmare to work with.
Especially with the lang redirections. -It is also a good idea to server this website through a jailed instance of apache, just in case. +It is also a good idea to serve this website through a jailed instance of apache, just in case. ## Content ### Blog diff --git a/resources/Azias/js/nibblepoker.lu.js b/resources/Azias/js/nibblepoker.lu.js index b4de7ed..dcb8226 100644 --- a/resources/Azias/js/nibblepoker.lu.js +++ b/resources/Azias/js/nibblepoker.lu.js @@ -30,7 +30,7 @@ window.addEventListener('load', function(){ document.querySelectorAll(".glider").forEach(element => { new Glider(element, { slidesToShow: 1, - //draggable: true, + draggable: true, scrollLock: true, scrollLockDelay: 125, rewind: true, @@ -54,24 +54,51 @@ window.addEventListener('load', function(){ } ] }); - element.childNodes[0].childNodes.forEach(childElement => { - if(childElement.childNodes[0].tagName === "IMG") { - childElement.childNodes[0].onclick = function() { - let imageElement = document.getElementById("modal-img"); - imageElement.src = childElement.childNodes[0].src; - imageElement.alt = childElement.childNodes[0].alt; - halfmoon.toggleModal('modal-content-image-viewer'); - console.log("Opening image..."); - }; + + // Processing the images + const eImages = []; + + // Converting the Node to a HTMLElement if needed and desired. + element.childNodes[0].childNodes.forEach(childrenNode => { + if(childrenNode.nodeType !== Node.ELEMENT_NODE) { + return; } + + // Casting from a Node to a proper HTMLElement because of course we have to add this step in JS... + const eChildElement = childrenNode.cloneNode(true); + + if(eChildElement.tagName.toLowerCase() !== "img") { + return; + } + + eChildElement.onclick = function() { + let imageElement = document.getElementById("modal-img"); + imageElement.src = eChildElement.src; + imageElement.alt = eChildElement.alt; + halfmoon.toggleModal('modal-content-image-viewer'); + console.log("Opening image..."); + }; + + // Saving the element for later. + eImages.push(eChildElement); + }); + + // Removing the nodes so that the desired ones can be reinserted later. + // We start from the rear to prevent issues with de-ordering as we delete them ! + for(let i = element.childNodes[0].childNodes.length - 1; i >= 0; i--) { + element.childNodes[0].removeChild(element.childNodes[0].childNodes[i]); + } + + eImages.forEach(eImageElement => { + element.childNodes[0].appendChild(eImageElement); }); }); - // It looks like ass, jesus... + // The default modal animation looks like ass, jesus... let eImgModalCloseButton = document.getElementById("modal-img-close"); if(eImgModalCloseButton != null) { eImgModalCloseButton.onclick = function() { halfmoon.toggleModal('modal-content-image-viewer'); } } -}) \ No newline at end of file +}); diff --git a/resources/Azias/scss/halfmoon/css/modal.css.map b/resources/Azias/scss/halfmoon/css/modal.css.map new file mode 100644 index 0000000..de7fcc9 --- /dev/null +++ b/resources/Azias/scss/halfmoon/css/modal.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"modal.css"} \ No newline at end of file diff --git a/resources/Azias/scss/halfmoon/css/modal.min.css b/resources/Azias/scss/halfmoon/css/modal.min.css new file mode 100644 index 0000000..a39f2bb --- /dev/null +++ b/resources/Azias/scss/halfmoon/css/modal.min.css @@ -0,0 +1 @@ +/*# sourceMappingURL=modal.min.css.map */ diff --git a/resources/Azias/scss/halfmoon/css/modal.min.css.map b/resources/Azias/scss/halfmoon/css/modal.min.css.map new file mode 100644 index 0000000..3995aec --- /dev/null +++ b/resources/Azias/scss/halfmoon/css/modal.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"modal.min.css"} \ No newline at end of file diff --git a/resources/Azias/scss/halfmoon/element/modal.scss b/resources/Azias/scss/halfmoon/element/modal.scss new file mode 100644 index 0000000..239b1eb --- /dev/null +++ b/resources/Azias/scss/halfmoon/element/modal.scss @@ -0,0 +1,13 @@ + +/*@keyframes modalFadeIn { + 0% { opacity: 0; } + 50% { opacity: 0.25; } + 75% { opacity: 0.5; } + 100% { opacity: 1; } +} + +.modal { + transition: none; + animation: modalFadeIn 3s; +}*/ + diff --git a/resources/Azias/scss/nibblepoker.lu.scss b/resources/Azias/scss/nibblepoker.lu.scss index 892cdc9..fcd9506 100644 --- a/resources/Azias/scss/nibblepoker.lu.scss +++ b/resources/Azias/scss/nibblepoker.lu.scss @@ -24,6 +24,7 @@ @import 'halfmoon/element/glider'; @import 'halfmoon/element/hr'; @import 'halfmoon/element/image'; +@import 'halfmoon/element/modal'; @import 'halfmoon/element/video'; /* Highlight.JS */