From d7935bae44cb82fbb192d1823e0bd70bef53a548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Thu, 9 Jun 2022 21:39:33 +0200
Subject: [PATCH] Lightbox (#1144)

---
 package-lock.json                | 17 +++++++++++++++++
 package.json                     |  5 +++++
 src/pages/_data/libs.json        |  1 +
 src/pages/_data/menu.yml         |  4 ++++
 src/pages/lightbox.html          | 18 ++++++++++++++++++
 src/scss/tabler-vendors.scss     |  1 +
 src/scss/vendor/_fslightbox.scss | 13 +++++++++++++
 7 files changed, 59 insertions(+)
 create mode 100644 src/pages/lightbox.html
 create mode 100644 src/scss/vendor/_fslightbox.scss

diff --git a/package-lock.json b/package-lock.json
index 83490e335..13b22d315 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "critical": "^4.0.1",
         "cross-spawn": "^7.0.3",
         "flatpickr": "^4.6.13",
+        "fslightbox": "^3.3.1",
         "gulp": "^4.0.2",
         "gulp-clean": "^0.4.0",
         "gulp-clean-css": "^4.3.0",
@@ -74,6 +75,7 @@
         "choices.js": "^10.1.0",
         "countup.js": "^2.1.0",
         "flatpickr": "^4.6.13",
+        "fslightbox": "^3.3.1",
         "imask": "^6.4.2",
         "jsvectormap": "^1.4.5",
         "list.js": "^2.3.1",
@@ -99,6 +101,9 @@
         "flatpickr": {
           "optional": true
         },
+        "fslightbox": {
+          "optional": true
+        },
         "imask": {
           "optional": true
         },
@@ -6426,6 +6431,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fslightbox": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.3.1.tgz",
+      "integrity": "sha512-r8mS2lnqw+4F7fQmIXZ4Y+tulxqGsZyG7wzMhWKl8MHvVZRJnclUyt+n+hfTkUa+e1bvlzpw4tY/X9mwqC4wCg==",
+      "dev": true
+    },
     "node_modules/ftp": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz",
@@ -21107,6 +21118,12 @@
       "dev": true,
       "optional": true
     },
+    "fslightbox": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.3.1.tgz",
+      "integrity": "sha512-r8mS2lnqw+4F7fQmIXZ4Y+tulxqGsZyG7wzMhWKl8MHvVZRJnclUyt+n+hfTkUa+e1bvlzpw4tY/X9mwqC4wCg==",
+      "dev": true
+    },
     "ftp": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz",
diff --git a/package.json b/package.json
index c801d27e7..a205161eb 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "flatpickr": "^4.6.13",
+    "fslightbox": "^3.3.1",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -114,6 +115,7 @@
     "choices.js": "^10.1.0",
     "countup.js": "^2.1.0",
     "flatpickr": "^4.6.13",
+    "fslightbox": "^3.3.1",
     "imask": "^6.4.2",
     "jsvectormap": "^1.4.5",
     "list.js": "^2.3.1",
@@ -139,6 +141,9 @@
     "flatpickr": {
       "optional": true
     },
+    "fslightbox": {
+      "optional": true
+    },
     "imask": {
       "optional": true
     },
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index 1fd592bb6..c78f118cd 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -19,6 +19,7 @@
     "jsvectormap": "jsvectormap/dist/js/jsvectormap.min.js",
     "jsvectormap-world": "jsvectormap/dist/maps/world.js",
     "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
+    "fslightbox": "fslightbox/index.js",
     "tinymce" :"tinymce/tinymce.min.js",
     "plyr": "plyr/dist/plyr.min.js"
   },
diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index b2b282e1f..efe1adfd4 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -96,6 +96,10 @@ base:
     markdown:
       title: Markdown
       url: markdown.html
+    lightbox:
+      title: Lightbox
+      url: lightbox.html
+      badge: New
     tinymce:
       title: TinyMCE
       url: tinymce.html
diff --git a/src/pages/lightbox.html b/src/pages/lightbox.html
new file mode 100644
index 000000000..20adcd888
--- /dev/null
+++ b/src/pages/lightbox.html
@@ -0,0 +1,18 @@
+---
+title: Lightbox
+page-header: Lightbox
+libs: fslightbox
+menu: base.lightbox
+---
+
+{% assign photos = site.data.photos | where: "horizontal", true %}
+
+<div class="row row-cols-6 g-3">
+	{% for photo in photos %}
+	<div class="col">
+		<a data-fslightbox="gallery" href="/static/photos/{{ photo.file }}">
+			<img src="/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="rounded">
+		</a>
+	</div>
+	{% endfor %}
+</div>
diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss
index a60ebca8a..c5dc0f70d 100644
--- a/src/scss/tabler-vendors.scss
+++ b/src/scss/tabler-vendors.scss
@@ -5,5 +5,6 @@
 @import "vendor/tom-select";
 @import "vendor/apexcharts";
 @import "vendor/jsvectormap";
+@import "vendor/fslightbox";
 @import "vendor/plyr";
 @import "vendor/tinymce";
diff --git a/src/scss/vendor/_fslightbox.scss b/src/scss/vendor/_fslightbox.scss
new file mode 100644
index 000000000..037cd4981
--- /dev/null
+++ b/src/scss/vendor/_fslightbox.scss
@@ -0,0 +1,13 @@
+.fslightbox-container {
+  font-family: inherit !important;
+  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  backdrop-filter: blur($modal-backdrop-blur) !important;
+}
+
+.fslightbox-slide-number-container {
+  color: inherit !important;
+}
+
+.fslightbox-slash {
+  background: currentColor !important;
+}
\ No newline at end of file