Implement navigation in carousel

languages/es.txt

@@ -11,4 +11,4 @@ editorial:editorial
 branding:marca
 other:otros
 About Alejandro:Acerca de Alejandro
-about & contact: acerca de & contacto
+about & contact:acerca de & contacto

layout/_base.html

@@ -110,14 +110,18 @@
 		<input name="next" type="hidden" value="{{ path }}"/>
 		<input type="hidden" name="language" value="es"/>
 	</form>
-  <dialog class="hidden" id="dialog-image-modal">
+  <dialog class="hidden" id="dialog-image-modal" data-work="" data-variant="">
 		<div id="modal-image-container" class="vbox">
 			<div class="hbox">
 				<div id="img-prev">{{ 'prev' | svg}}</div>
-				<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
+				<div class="vbox">
+					<div id="close-modal">{{ 'close' | svg}}</div>
+					<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
+				</div>
 				<div id="img-next">{{ 'next' | svg}}</div>
 			</div>
 		</div>
+		<select id="image-select" class="hidden"></select>
 	</dialog>
 	<script src="{{ 'js/image-modal.js' | static }}"></script>
 	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">

layout/work/poster.html

@@ -5,7 +5,7 @@
 
 {% block main %}
 {% for image in sorted(images("work/poster"), reverse=True) %}
-	<figure>
+	<figure class="work-item">
 		<img class="tile" src="{{ (image.main or image.filenames[0]) | static }}">
 		<figcaption class="hbox">
 			<div class="caption">
@@ -13,6 +13,11 @@
 				{{ image.category }}
 			</div>
 		</figcaption>
+		<datalist>
+		{% for variant in image.filenames %}
+			<option value="{{ variant | static }}"></option>
+		{% endfor %}
+		</datalist>
 	</figure>
 {% endfor %}
 {% endblock %}

plugins/alucho_images.py

@@ -62,6 +62,15 @@ def images(section):
 
 def init_plugin(env, config):
     global STATIC
+    # update var STATIC
     STATIC = config['STATIC']
-    env.globals['images'] = images
-    env.globals['sorted'] = sorted
+
+    functions = [
+        images,
+        sorted,
+        map,
+        str,
+        list
+    ]
+    for f in functions:
+        env.globals[f.__name__] = f

static/css/image-modal.css

@@ -26,3 +26,14 @@
 #img-prev, #img-next {
 	width: var(--tile-margin);
 }
+#close-modal {
+	position: absolute;
+	align-self: flex-end;
+	transform: translate(50%, -50%);
+	width: calc(2.5 * var(--tile-margin));
+	transition: .3s ease;
+}
+#close-modal:hover {
+	transform: translate(50%, -50%) rotate(90deg);
+	transition: .3s ease;
+}

static/js/image-modal.js

@@ -1,22 +1,81 @@
-(function() {
+(function () {
 
+    const tiles = document.getElementsByClassName('tile');
+    const figures = document.getElementsByClassName('work-item');
     var dialog = document.getElementById('dialog-image-modal');
-    dialog.returnValue = 'dialog-image-modal';
+    var image = document.getElementById('modal-image');
+    var closeButton = document.getElementById('close-modal');
+    var prevButton = document.getElementById('img-prev');
+    var nextButton = document.getElementById('img-next');
 
-    function openCheck(dialog) {
-        if(dialog.open) {
-            dialog.className = "";
-        } else {
-            dialog.className = "";
+    function saveImageIndex(work, variant) {
+        dialog.dataset.work = work.toString();
+        dialog.dataset.variant = variant.toString();
+    };
+    function updateImage(work, variant) {
+        saveImageIndex(work, variant);
+        const figure = figures[work];
+        const option = figure.lastElementChild.children[variant];
+        image.src = option.value;
+    };
+    function imgPrev() {
+        var work = Number.parseInt(dialog.dataset.work);
+        var variant = Number.parseInt(dialog.dataset.variant) - 1;
+        if (variant < 0) {
+            work -= 1;
+            if (work < 0) {
+                work = figures.length - 1;
+            }
+            const datalist = figures[work].lastElementChild;
+            variant = datalist.children.length - 1;
         }
-    }
+        updateImage(work, variant);
+    };
+    function imgNext() {
+        var work = Number.parseInt(dialog.dataset.work);
+        var variant = Number.parseInt(dialog.dataset.variant) + 1;
+        const datalist = figures[work].lastElementChild;
+        if (variant >= datalist.children.length) {
+            work += 1;
+            if (work >= figures.length) {
+                work = 0;
+            }
+            variant = 0;
+        }
+        updateImage(work, variant);
+    };
+    function imgClose() {
+        dialog.close();
+        dialog.className = "hidden"; // nedded for safari :man_shrugging:
+    };
 
-    const tiles = document.getElementsByClassName('tile');
     for (var i = 0; i < tiles.length; i++) {
-        // Update button opens a modal dialog
-        tiles.item(i).addEventListener('click', function() {
-            dialog.showModal();
-            openCheck(dialog);
-        });
+        (function (workIndex) {
+            tiles[workIndex].addEventListener('click', function () {
+                updateImage(workIndex, 0);
+                dialog.showModal();
+                dialog.className = "";
+            });
+        })(i);
     }
+    document.addEventListener('keydown', function (ev) {
+        if (dialog.open) {
+            switch (ev.key) {
+                case "ArrowLeft":
+                    imgPrev();
+                    break;
+                case "ArrowRight":
+                    imgNext();
+                    break;
+                case "Escape":
+                    imgClose();
+                    break;
+                default:
+                    return;
+            }
+        }
+    })
+    prevButton.addEventListener('click', imgPrev);
+    nextButton.addEventListener('click', imgNext);
+    closeButton.addEventListener('click', imgClose);
 })();