Added screenshot gallery to lscom and composer backend

Update composer.php, lscom-cli-dotnet.json, and 4 more files...

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 .= '<div class="glider ' . $this->get_modifiers_classes() . '">';
+				
+				foreach($this->images as $galleryImageUrl) {
+					$htmlCode .= '<img src="'.$galleryImageUrl.'">';
+				}
+				
+				$htmlCode .= '</div>';
 				break;
 			
 			case ComposerElementTypes::VIDEO:

content/items/lscom-cli-dotnet.json

@@ -34,7 +34,8 @@
       "packages.self.1": "Larger builds that contain the exe and the <a href=\"https://dotnet.microsoft.com/en-us/download\">.NET 6.0 Runtime</a> 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 <kbd>%PATH%</kbd>.<br>The install location is <kbd>%ProgramFiles%\\NibblePoker\\lscom\\</kbd> and cannot be changed. <i>(This will be possible in future releases)</i>",
-      "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 <a href=\"https://dotnet.microsoft.com/en-us/download\">.NET 6.0 Runtime</a> 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 <kbd>%PATH%</kbd>.<br>The install location is <kbd>%ProgramFiles%\\NibblePoker\\lscom\\</kbd> and cannot be changed. <i>(This will be possible in future releases)</i>",
-      "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"],

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.<br>
+since these configuration files are a nightmare to work with.<br>
 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

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") {
+        // Processing the images
-                childElement.childNodes[0].onclick = function() {
+        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 = childElement.childNodes[0].src;
+                imageElement.src = eChildElement.src;
-                    imageElement.alt = childElement.childNodes[0].alt;
+                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');
         }
     }
-})
+});

resources/Azias/scss/halfmoon/css/modal.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"modal.css"}

resources/Azias/scss/halfmoon/css/modal.min.css

@@ -0,0 +1 @@
+/*# sourceMappingURL=modal.min.css.map */

resources/Azias/scss/halfmoon/css/modal.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"modal.min.css"}

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;
+}*/
+

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 */