@eeacms/volto-flourish 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -4,11 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.4](https://github.com/eea/volto-flourish/compare/0.1.3...0.1.4) - 18 February 2025
+### [0.1.6](https://github.com/eea/volto-flourish/compare/0.1.5...0.1.6) - 24 February 2025
 
 #### :hammer_and_wrench: Others
 
-- Fix re-display of flourish [Tiberiu Ichim - [`9c6a2c0`](https://github.com/eea/volto-flourish/commit/9c6a2c06c746bf4fb00aa1ed06ed4122152462ae)]
+- Improve loading [Tiberiu Ichim - [`68ed505`](https://github.com/eea/volto-flourish/commit/68ed50596010f0a259eec3131ed7b620b1d10b0e)]
+- test: update snapshot [kreafox - [`b5a149e`](https://github.com/eea/volto-flourish/commit/b5a149e49fd568e890dfb9ceb4e8d0309292e590)]
+- Lower delay [Tiberiu Ichim - [`980d567`](https://github.com/eea/volto-flourish/commit/980d5673f2d34b1c20442e3354efb92148d6dd4c)]
+- Code cleanup [Tiberiu Ichim - [`8c02bb7`](https://github.com/eea/volto-flourish/commit/8c02bb75096190698b31b2ae674e5ee4dd0e433b)]
+- Try again [Tiberiu Ichim - [`c26d3e0`](https://github.com/eea/volto-flourish/commit/c26d3e02844932b7eac06698d21280c5ce094000)]
+### [0.1.5](https://github.com/eea/volto-flourish/compare/0.1.4...0.1.5) - 20 February 2025
+
+### [0.1.4](https://github.com/eea/volto-flourish/compare/0.1.3...0.1.4) - 18 February 2025
+
 ### [0.1.3](https://github.com/eea/volto-flourish/compare/0.1.2...0.1.3) - 17 February 2025
 
 #### :bug: Bug Fixes
@@ -24,9 +32,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Embed [Tiberiu Ichim - [`65a99d6`](https://github.com/eea/volto-flourish/commit/65a99d6a3cbf69a33e0b3a485a92afc53a2835b8)]
 - Embed [Tiberiu Ichim - [`0bd365b`](https://github.com/eea/volto-flourish/commit/0bd365b91802227f921b3d7127a2722f56d33e97)]
 - Embed [Tiberiu Ichim - [`1bc7ee6`](https://github.com/eea/volto-flourish/commit/1bc7ee667a6168a15f50a51b2263e216ffbecc52)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`9c0d692`](https://github.com/eea/volto-flourish/commit/9c0d692ee158e264bc33fe7d05eafcee1ccb6066)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`aae3813`](https://github.com/eea/volto-flourish/commit/aae3813cf0f792b7cdaedb9f7b4ebc9d4bb6cd53)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`5ca27c2`](https://github.com/eea/volto-flourish/commit/5ca27c29e49291471d6cd2585922c39e87d46a84)]
 ### [0.1.2](https://github.com/eea/volto-flourish/compare/0.1.1...0.1.2) - 16 September 2024
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-flourish",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "@eeacms/volto-flourish: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/blocks/EmbedFlourish/View.js

@@ -1,8 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { default as Flourish } from '@eeacms/volto-flourish/components/Flourish';
+import { v4 as uuid } from 'uuid';
 // import { Sources } from '@eeacms/volto-embed/Toolbar';
 
 import {
@@ -13,8 +14,24 @@ import {
   Enlarge,
 } from '@eeacms/volto-embed/Toolbar';
 
+// const overlayStyles = {
+//   position: 'absolute',
+//   top: 0,
+//   left: 0,
+//   width: '100%',
+//   backgroundColor: 'rgba(255, 255, 255, 0)',
+//   zIndex: 20000,
+//   pointerEvents: 'none',
+//   height: '100%',
+// };
+
 export default function View(props) {
-  const { id, data } = props;
+  const {
+    id,
+    data,
+    // mode = 'view'
+  } = props;
+  const uid = useMemo(() => uuid(), []);
 
   const {
     with_sources,
@@ -41,11 +58,18 @@ export default function View(props) {
     }
   }, [dispatch, vis_url, id]);
 
+  // const editOverlay =
+  //   mode === 'edit' ? (
+  //     <div className="edit-overlay" style={overlayStyles} />
+  //   ) : null;
+
   return (
     <div className="embed-flourish">
       {flourish_item_url ? (
-        <div>
-          <Flourish baseUrl={flourish_item_url} />
+        <>
+          <Flourish baseUrl={flourish_item_url} key={uid} id={uid} />
+          {/* {editOverlay} */}
+
           {flourishItemContent && (
             <div className="visualization-toolbar">
               <div className="left-col">
@@ -82,7 +106,7 @@ export default function View(props) {
               </div>
             </div>
           )}
-        </div>
+        </>
       ) : props.mode ? (
         <div>Embed flourish</div>
       ) : null}

package/src/components/Flourish.jsx

@@ -1,30 +1,45 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-export default function Flourish({ baseUrl }) {
+export default function Flourish({ baseUrl, id }) {
   const flourishUrl = `${baseUrl}/@@flourish/index.html`;
+  const nodeRef = useRef(null);
   const scriptUrl = `${baseUrl}/@@flourish/flourish.embed.js`;
 
   useEffect(() => {
     if (!baseUrl) return;
 
-    if (!window.FlourishLoaded) {
-      window.Flourish = { disable_autoload: true };
+    setTimeout(() => {
+      const container = nodeRef.current;
+      if (!container) {
+        return;
+      }
 
-      const script = document.createElement('script');
-      script.src = scriptUrl;
-      script.async = true;
-      script.onload = () => {};
+      container.setAttribute('data-src', flourishUrl);
 
-      document.body.appendChild(script);
-    } else {
-      setTimeout(() => {
-        const domNodes = document.querySelectorAll('.flourish-embed');
-        domNodes.forEach((domNode) => window.Flourish.loadEmbed(domNode));
-      }, 10);
-    }
+      if (
+        document.querySelectorAll('script.flourish-embed-script').length === 0
+      ) {
+        const script = document.createElement('script');
+        script.src = scriptUrl;
+        script.className = 'flourish-embed-script';
+        script.id = id;
+        script.onload = () => {
+          //eslint-disable-next-line no-console
+          console.log('loaded script', id);
+        };
+        document.body.appendChild(script);
+      } else {
+        const node = document.getElementById(id);
+        if (node && window.Flourish?.loadEmbed) {
+          //eslint-disable-next-line no-console
+          console.log('Loading embed', node.id);
+          window.Flourish.loadEmbed(node);
+        }
+      }
+    }, 200);
 
     return () => {};
-  }, [baseUrl, scriptUrl]);
+  }, [baseUrl, scriptUrl, id, flourishUrl]);
 
-  return <div className="flourish-embed" data-src={flourishUrl}></div>;
+  return <div className="flourish-embed" id={id} ref={nodeRef}></div>;
 }