Added screenshot gallery to lscom and composer backend

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

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');
         }
     }
-})
+});

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