Changes to blocks

2024-12-22 15:20:12 -08:00
parent cfbb860bf9
commit f3fbe0fa32
25 changed files with 612 additions and 1035 deletions
--- a/includes/blocks/lcp-gallery/components/LightGallery.js
+++ b/includes/blocks/lcp-gallery/components/LightGallery.js
@ -0,0 +1,103 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import LightGallery from 'lightgallery/react';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgHash from 'lightgallery/plugins/hash';
+import 'lightgallery/css/lightgallery.css';
+
+const LcpGallery = (props) => {
+  const [settings, setSettings] = useState({
+    elementClassNames: 'lcp-gallery grid',
+    plugins: [],
+    zoom: false,
+    hash: false,
+    download: false
+  });
+
+  const lightGallery = useRef(null);
+
+  // onInit callback to initialize the lightGallery instance
+  const onInit = useCallback((detail) => {
+    if (detail) {
+      lightGallery.current = detail.instance;
+    }
+  }, []);
+
+  // Update settings based on the props
+  useEffect(() => {
+    console.log("Props received:", props);
+
+    const plugins = [];
+
+    // Convert plugin strings to actual plugin functions
+    if (props.plugins) {
+      props.plugins.forEach((plugin) => {
+        console.log(`Adding plugin: ${plugin}`);
+        if (plugin === 'lgZoom') {
+          plugins.push(lgZoom); // Add lgZoom function
+        } else if (plugin === 'lgHash') {
+          plugins.push(lgHash); // Add lgHash function
+        }
+      });
+    }
+
+    // Update settings with new plugins and options
+    setSettings((prevSettings) => ({
+      ...prevSettings,
+      plugins,         // Updated plugins
+      zoom: props.zoom || false, // Default zoom option
+      hash: props.hash || false, // Default hash option
+      download: props.download || false
+    }));
+  }, [props]);
+
+  // Reinitialize gallery when settings change (with careful timing)
+  useEffect(() => {
+    console.log("Settings changed:", settings);
+
+    // Check if gallery instance exists and only refresh if initialized
+    if (lightGallery.current) {
+      console.log("Refreshing gallery...");
+      lightGallery.current.refresh();  // Refresh the gallery instance
+    }
+  }, [settings]);
+
+  return (
+    <LightGallery
+      ref={lightGallery}
+      plugins={settings.plugins}
+      elementClassNames={settings.elementClassNames}
+      zoom={settings.zoom}
+      hash={settings.hash}
+      download={settings.download}
+      onInit={onInit}  // Pass the onInit callback to initialize the gallery instance
+    >
+      {/* Gallery Items */}
+      <a
+        data-lg-size="1600-1067"
+        className="gallery-item"
+        data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
+        data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd' >Tobias Rademacher </a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>"
+      >
+        <img
+          alt="layers of blue."
+          className="img-responsive"
+          src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
+        />
+      </a>
+
+      <a
+        data-lg-size="1600-2400"
+        className="gallery-item"
+        data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
+        data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@therawhunter' >Massimiliano Morosinotto </a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo%2C-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>"
+      >
+        <img
+          className="img-responsive"
+          src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
+        />
+      </a>
+    </LightGallery>
+  );
+};
+
+export default LcpGallery;