@devgateway/dvz-ui-react 1.4.0 → 1.5.1

package/dist/esm/embeddable/time-line/mobile.js

@@ -1,70 +1,51 @@
-import { jsx as r, jsxs as at } from "react/jsx-runtime";
-import { PostProvider as bt, PostConsumer as Ct } from "@devgateway/wp-react-lib";
-import xt from "../connected-templates/PostIntro.js";
-import { useState as z, useEffect as wt, useRef as st, useCallback as G, useLayoutEffect as Tt } from "react";
-import { Container as vt, Modal as U } from "semantic-ui-react";
-import * as d from "d3";
-import { useWindowDimensionsAndDevice as Pt } from "../../lib/hooks/window-dimensions.js";
-import { useScreenOrientation as $t } from "../../lib/hooks/screen-orientation.js";
-import "../../utils/AppMedia.js";
-import "../../layout/Footer.js";
-import "../../layout/Header.js";
-import "react-router";
-import "../index.js";
-import "react-intl";
-import "react-redux";
-import "../../conf/index.js";
-import "../../lib/react-intl-redux/providers/IntlProvider.js";
-import "../../lib/react-intl-redux/providers/Provider.js";
-import "immutable";
-import "../../redux/store.js";
-import "../../layout/Favicon.js";
-import Dt from "../../layout/Loading.js";
-import "../../layout/CustomSemanticSearch.js";
-import "../../layout/SearchControl.js";
-import "../../layout/ClassicHeader.js";
-import "../../layout/FloatingMenuHeader.js";
-const Wt = {
+import { jsx as r, jsxs as nt } from "react/jsx-runtime";
+import { PostProvider as gt, PostConsumer as mt } from "@devgateway/wp-react-lib";
+import yt from "../connected-templates/PostIntro.js";
+import { Container as bt, Modal as F } from "semantic-ui-react";
+import * as p from "d3";
+import { useWindowDimensionsAndDevice as Ct } from "../../lib/hooks/window-dimensions.js";
+import { useScreenOrientation as xt } from "../../lib/hooks/screen-orientation.js";
+const wt = {
   visibility: "visible",
   position: "relative",
   height: "auto",
   width: "auto"
-}, Ht = 0, It = (f) => {
+}, vt = 0, Tt = (T) => {
   let {
-    posts: a,
-    lineWidth: h,
-    lineColor: P,
+    posts: s,
+    lineWidth: P,
+    lineColor: $,
     config: c,
-    marginLeft: N,
-    marginTop: R,
-    marginRight: J,
-    marginBottom: _,
-    fontSize: C,
-    subtitleWidth: B,
-    subtitleHeight: x,
-    enableTitlePopup: $,
+    marginLeft: q,
+    marginTop: L,
+    marginRight: G,
+    marginBottom: N,
+    fontSize: y,
+    subtitleWidth: R,
+    subtitleHeight: b,
+    enableTitlePopup: k,
     enableCirclePopup: D,
-    enableDefaultPopup: V,
-    closePopupOnMouseOut: X,
+    enableDefaultPopup: U,
+    closePopupOnMouseOut: J,
     unique: u
-  } = f;
-  B = 250;
-  const w = st(), W = st(), [H, g] = z(!1), [I, O] = z(0), [S, j] = z(null), { orientation: y } = $t(), { width: Y, deviceType: m, height: k } = Pt({
+  } = T;
+  R = 250;
+  const C = useRef(), S = useRef(), [W, h] = useState(!1), [H, I] = useState(0), [O, _] = useState(null), { orientation: g } = xt(), { width: V, deviceType: f, height: x } = Ct({
     getDeviceType: !0,
     getHeight: !0
-  }), F = G((t) => `circle${u}${t}`, [u]), ct = G((t) => `title${u}${t}`, [u]), pt = (t) => {
-    var i;
-    return ((i = c[t]) == null ? void 0 : i.size) || 10;
-  }, dt = ({ content: t, isOpen: i, style: l }) => {
-    const b = (n) => (n = n.replace(
+  }), B = useCallback((t) => `circle${u}${t}`, [u]), at = useCallback((t) => `title${u}${t}`, [u]), rt = (t) => {
+    var l;
+    return ((l = c[t]) == null ? void 0 : l.size) || 10;
+  }, st = ({ content: t, isOpen: l, style: i }) => {
+    const m = (n) => (n = n.replace(
       /<ul(.*?)>/g,
       '<ul class="has-white-color has-text-color has-standard-14-font-size" style="list-style-type:disc !important; list-style: initial !important; padding-left:20px; color:#fefefe;">'
     ), n = n.replace(/<a(.*?)>/g, '<a$1 style="color:#fefefe;">'), n);
-    return /* @__PURE__ */ at(
-      U,
+    return /* @__PURE__ */ nt(
+      F,
       {
-        open: i,
-        onClose: () => g(!1),
+        open: l,
+        onClose: () => h(!1),
         size: "fullscreen",
         closeIcon: !0,
         centered: !0,
@@ -72,17 +53,17 @@ const Wt = {
           maxHeight: "80vh",
           overflowY: "auto",
           padding: "0.5rem",
-          ...l
+          ...i
         },
         children: [
-          /* @__PURE__ */ r(U.Header, { style: { ...l, borderBottom: "none" } }),
+          /* @__PURE__ */ r(F.Header, { style: { ...i, borderBottom: "none" } }),
           /* @__PURE__ */ r(
-            U.Content,
+            F.Content,
             {
               className: "styled-list-content",
-              style: { ...l },
+              style: { ...i },
               dangerouslySetInnerHTML: {
-                __html: b(
+                __html: m(
                   t.props.children.props.post.content.rendered
                 )
               }
@@ -92,40 +73,40 @@ const Wt = {
       },
       `${t.props.children.key}modal`
     );
-  }, K = (t) => {
-    var i;
-    return (i = c[t]) == null ? void 0 : i.circleColor;
-  }, Q = (t) => c[t].titleColor, Z = (t) => c[t].lineColor, tt = (t) => c[t].tooltipFontColor || "#fff", ut = (t) => c[t].readMoreLabel, et = G((t, i) => {
+  }, X = (t) => {
+    var l;
+    return (l = c[t]) == null ? void 0 : l.circleColor;
+  }, Y = (t) => c[t].titleColor, K = (t) => c[t].lineColor, Q = (t) => c[t].tooltipFontColor || "#fff", ct = (t) => c[t].readMoreLabel, Z = useCallback((t, l) => {
     t.preventDefault();
-    const l = 260, b = 50;
+    const i = 260, m = 50;
     let n = [0, 0];
     if (t) {
-      const T = t.target.getBoundingClientRect(), A = t.target.closest(".time").getBoundingClientRect(), s = T.left - A.left, v = T.top + A.top;
-      n = [s + l, v + b];
+      const w = t.target.getBoundingClientRect(), A = t.target.closest(".time").getBoundingClientRect(), a = w.left - A.left, v = w.top + A.top;
+      n = [a + i, v + m];
       const M = 400;
-      T.left + s + M + l > window.innerWidth && (n[0] = s - M * 0.6);
+      w.left + a + M + i > window.innerWidth && (n[0] = a - M * 0.6);
     }
-    g(!0), j({ data: i, id: i.id, position: n }), ht(i.id);
-  }, []), mt = () => {
-    g(!1);
-  }, ft = (t) => {
-    d.selectAll(`#${F(t)}`).style("stroke", "none").style("fill", K(t)), d.selectAll(`#label${t}`).style("font-weight", "normal");
-  }, ht = (t) => {
-    ft(Ht), d.selectAll(`#${F(t)}`).style("stroke", K(t)).style("fill", "#fff"), d.selectAll(`#label${t}`).style("font-weight", "bold");
+    h(!0), _({ data: l, id: l.id, position: n }), ut(l.id);
+  }, []), dt = () => {
+    h(!1);
+  }, pt = (t) => {
+    p.selectAll(`#${B(t)}`).style("stroke", "none").style("fill", X(t)), p.selectAll(`#label${t}`).style("font-weight", "normal");
+  }, ut = (t) => {
+    pt(vt), p.selectAll(`#${B(t)}`).style("stroke", X(t)).style("fill", "#fff"), p.selectAll(`#label${t}`).style("font-weight", "bold");
   };
-  return Tt(() => {
-    var nt;
+  return useLayoutEffect(() => {
+    var lt;
     const t = {
-      top: R,
-      bottom: _
-    }, i = w.current.clientWidth, l = W.current.clientWidth;
-    l > 0 && O(l);
-    const b = k, n = {
+      top: L,
+      bottom: N
+    }, l = C.current.clientWidth, i = S.current.clientWidth;
+    i > 0 && I(i);
+    const m = x, n = {
       mobile: "75",
       tablet: "150",
       midTablet: "150",
       laptop: "150"
-    }, T = {
+    }, w = {
       mobile: "250",
       tablet: "350",
       midTablet: "350",
@@ -135,159 +116,154 @@ const Wt = {
       tablet: 30,
       midTablet: 30,
       laptop: 40
-    }, s = d.scaleLinear().domain([0, a.length - 1]).range([t.top, b - t.bottom]), v = d.select(w.current);
-    v.selectAll("*").remove(), v.attr("width", i).attr("height", b);
-    const M = d.line(), gt = [
-      [0, s(0)],
-      [0, s(a.length - 1)]
-    ], yt = M(gt);
-    let ot = `translate(${n[m]},0)`;
-    ((nt = process.env.REACT_APP_THEME) == null ? void 0 : nt.startsWith("cd")) && (ot = `translate(${n[m]},20)`);
-    const E = v.append("g").attr("transform", ot);
-    P = "#E4E5EA", h = 6, E.append("path").attr("d", yt).attr("stroke-width", h).attr("stroke", P).attr("class", "timeline-path"), E.selectAll(".circle").data(a).enter().append("circle").attr("id", (o, e) => F(e)).attr("cx", 0).attr("class", "timeline-circle").attr("cy", (o, e) => s(e)).attr("r", (o, e) => pt(e)).style("fill", (o, e) => {
-      var p;
-      return ((p = c[e]) == null ? void 0 : p.circleColor) || "#000";
+    }, a = p.scaleLinear().domain([0, s.length - 1]).range([t.top, m - t.bottom]), v = p.select(C.current);
+    v.selectAll("*").remove(), v.attr("width", l).attr("height", m);
+    const M = p.line(), ft = [
+      [0, a(0)],
+      [0, a(s.length - 1)]
+    ], ht = M(ft);
+    let tt = `translate(${n[f]},0)`;
+    ((lt = process.env.REACT_APP_THEME) == null ? void 0 : lt.startsWith("cd")) && (tt = `translate(${n[f]},20)`);
+    const z = v.append("g").attr("transform", tt);
+    $ = "#E4E5EA", P = 6, z.append("path").attr("d", ht).attr("stroke-width", P).attr("stroke", $).attr("class", "timeline-path"), z.selectAll(".circle").data(s).enter().append("circle").attr("id", (o, e) => B(e)).attr("cx", 0).attr("class", "timeline-circle").attr("cy", (o, e) => a(e)).attr("r", (o, e) => rt(e)).style("fill", (o, e) => {
+      var d;
+      return ((d = c[e]) == null ? void 0 : d.circleColor) || "#000";
     }).style("cursor", D ? "pointer" : "default").on("click", (o, e) => {
-      o.preventDefault(), D && et(o, e);
-    }), E.selectAll(".title").data(a).enter().append("foreignObject").attr("x", A[m]).attr("y", (o, e) => s(e) - Number.parseInt(x) / 2).attr("width", Number.parseInt(T[m])).attr("height", Number.parseInt(x)).attr("class", "timeline-title").append("xhtml:div").attr("id", (o, e) => ct(e)).style("font-size", `${Number.parseInt(C) + 1}px`).style("color", (o, e) => Q(e)).style("font-weight", "bold").style("line-height", "1.2rem").style("text-align", "left").style("cursor", $ ? "pointer" : "default").style("overflow", "hidden").style("display", "-webkit-box").style("-webkit-line-clamp", "2").style("-webkit-box-orient", "vertical").style("text-overflow", "ellipsis").style("overflow-wrap", "break-word").html((o, e) => {
-      const p = ut(e);
-      let L = o.title.rendered;
-      return p && (L += `<br><span style="font-size:${Number.parseInt(C) - 3}px;color:${Q(
+      o.preventDefault(), D && Z(o, e);
+    }), z.selectAll(".title").data(s).enter().append("foreignObject").attr("x", A[f]).attr("y", (o, e) => a(e) - Number.parseInt(b) / 2).attr("width", Number.parseInt(w[f])).attr("height", Number.parseInt(b)).attr("class", "timeline-title").append("xhtml:div").attr("id", (o, e) => at(e)).style("font-size", `${Number.parseInt(y) + 1}px`).style("color", (o, e) => Y(e)).style("font-weight", "bold").style("line-height", "1.2rem").style("text-align", "left").style("cursor", k ? "pointer" : "default").style("overflow", "hidden").style("display", "-webkit-box").style("-webkit-line-clamp", "2").style("-webkit-box-orient", "vertical").style("text-overflow", "ellipsis").style("overflow-wrap", "break-word").html((o, e) => {
+      const d = ct(e);
+      let E = o.title.rendered;
+      return d && (E += `<br><span style="font-size:${Number.parseInt(y) - 3}px;color:${Y(
         e
-      )};text-decoration:underline;text-underline-offset:3px">${p}</span>`), L;
+      )};text-decoration:underline;text-underline-offset:3px">${d}</span>`), E;
     }).each(function(o, e) {
-      const p = d.select(this.parentNode);
+      const d = p.select(this.parentNode);
       setTimeout(() => {
-        const L = this.getBoundingClientRect(), rt = Math.min(
-          L.height,
-          Number.parseInt(x) * 2
+        const E = this.getBoundingClientRect(), it = Math.min(
+          E.height,
+          Number.parseInt(b) * 2
         );
-        p.attr("height", rt), p.attr("y", s(e) - rt / 2);
+        d.attr("height", it), d.attr("y", a(e) - it / 2);
       }, 0);
-    }).on("click", (o, e, p) => {
-      o.preventDefault(), $ && et(o, e);
+    }).on("click", (o, e, d) => {
+      o.preventDefault(), k && Z(o, e);
     });
-    const it = +C + 1, lt = 60, q = it * 0.9;
-    E.selectAll(".year-fo").data(a).enter().append("foreignObject").attr("class", "year-fo").attr("x", -70).attr("y", (o, e) => s(e) - q / 2).attr("width", lt).attr("height", q).append("xhtml:div").style("display", "flex").style("align-items", "center").style("justify-content", "flex-end").style("width", `${lt}px`).style("height", `${q}px`).style("font-size", `${it}px`).style("line-height", "1em").style("font-weight", "400").style("color", "#4C4D50").html((o) => o.meta_fields.subtitle);
-  }, [m, y]), /* @__PURE__ */ at(
+    const et = +y + 1, ot = 60, j = et * 0.9;
+    z.selectAll(".year-fo").data(s).enter().append("foreignObject").attr("class", "year-fo").attr("x", -70).attr("y", (o, e) => a(e) - j / 2).attr("width", ot).attr("height", j).append("xhtml:div").style("display", "flex").style("align-items", "center").style("justify-content", "flex-end").style("width", `${ot}px`).style("height", `${j}px`).style("font-size", `${et}px`).style("line-height", "1em").style("font-weight", "400").style("color", "#4C4D50").html((o) => o.meta_fields.subtitle);
+  }, [f, g, x]), /* @__PURE__ */ nt(
     "div",
     {
       className: "time line",
       style: { position: "relative" },
-      ref: W,
+      ref: S,
       children: [
-        a.filter((t) => S && S.id === t.id).map((t) => {
-          const i = t.slug || "unknown-slug", l = a.indexOf(t);
+        s.filter((t) => O && O.id === t.id).map((t) => {
+          const l = t.slug || "unknown-slug", i = s.indexOf(t);
           return /* @__PURE__ */ r(
-            dt,
+            st,
             {
-              isOpen: H,
+              isOpen: W,
               content: /* @__PURE__ */ r(
                 "div",
                 {
                   style: {
-                    backgroundColor: Z(l),
-                    color: tt(l)
+                    backgroundColor: K(i),
+                    color: Q(i)
                   },
                   children: /* @__PURE__ */ r(
-                    xt,
+                    yt,
                     {
                       post: t,
-                      style: Wt
+                      style: wt
                     },
-                    i
+                    l
                   )
                 }
               ),
-              closeTooltip: mt,
+              closeTooltip: dt,
               style: {
-                backgroundColor: Z(l),
-                color: tt(l)
+                backgroundColor: K(i),
+                color: Q(i)
               }
             },
-            `${i}_modal`
+            `${l}_modal`
           );
         }),
-        /* @__PURE__ */ r("svg", { height: k, width: I, ref: w })
+        /* @__PURE__ */ r("svg", { height: x, width: H, ref: C, style: { overflow: "visible" } })
       ]
     },
-    u + m + y
+    u + f + g
   );
-}, Ot = (f) => {
+}, It = (T) => {
   const {
-    "data-type": a,
-    "data-taxonomy": h,
-    "data-categories": P,
+    "data-type": s,
+    "data-taxonomy": P,
+    "data-categories": $,
     "data-items": c,
-    "data-height": N,
-    "data-line-color": R = "#000",
-    "data-config": J = "{}",
-    "data-position": _ = "middle",
-    "data-line-width": C = "1",
-    "data-margin-left": B = 50,
-    "data-margin-top": x = 25,
-    "data-margin-right": $ = 50,
+    "data-height": q,
+    "data-line-color": L = "#000",
+    "data-config": G = "{}",
+    "data-position": N = "middle",
+    "data-line-width": y = "1",
+    "data-margin-left": R = 50,
+    "data-margin-top": b = 25,
+    "data-margin-right": k = 50,
     "data-margin-bottom": D = 25,
-    "data-font-size": V = 14,
-    "data-title-width": X = 100,
+    "data-font-size": U = 14,
+    "data-title-width": J = 100,
     "data-title-height": u = 50,
-    "data-subtitle-width": w = 250,
-    "data-subtitle-height": W = 60,
-    "data-enable-title-popup": H = "false",
-    "data-enable-circle-popup": g = "true",
-    "data-enable-default-popup": I = "false",
-    "data-close-popup-on-mouse-out": O = "false",
-    editing: S,
-    parent: j,
-    unique: y
-  } = f, Y = f.intl.locale, k = {
-    unique: y || Math.random().toString(36).substring(2, 9),
-    marginLeft: B,
-    marginTop: x,
-    marginRight: $,
+    "data-subtitle-width": C = 250,
+    "data-subtitle-height": S = 60,
+    "data-enable-title-popup": W = "false",
+    "data-enable-circle-popup": h = "true",
+    "data-enable-default-popup": H = "false",
+    "data-close-popup-on-mouse-out": I = "false",
+    editing: O,
+    parent: _,
+    unique: g
+  } = T, V = T.intl.locale, x = {
+    unique: g || Math.random().toString(36).substring(2, 9),
+    marginLeft: R,
+    marginTop: b,
+    marginRight: k,
     marginBottom: D,
-    lineWidth: C,
-    height: N,
-    position: _,
-    lineColor: decodeURIComponent(R),
-    config: JSON.parse(decodeURIComponent(J)),
-    fontSize: V,
-    titleWidth: X,
+    lineWidth: y,
+    height: q,
+    position: N,
+    lineColor: decodeURIComponent(L),
+    config: JSON.parse(decodeURIComponent(G)),
+    fontSize: U,
+    titleWidth: J,
     titleHeight: u,
-    subtitleWidth: w,
-    subtitleHeight: W,
-    enableTitlePopup: H == !0 || H == "true",
-    enableCirclePopup: g == !0 || g == "true",
-    enableDefaultPopup: I == !0 || I == "true",
-    closePopupOnMouseOut: O == !0 || O == "true"
+    subtitleWidth: C,
+    subtitleHeight: S,
+    enableTitlePopup: W == !0 || W == "true",
+    enableCirclePopup: h == !0 || h == "true",
+    enableDefaultPopup: H == !0 || H == "true",
+    closePopupOnMouseOut: I == !0 || I == "true"
   };
   return /* @__PURE__ */ r(
-    vt,
+    bt,
     {
-      style: { height: `${N}px` },
-      className: `viz time line ${S ? "editing" : ""}`,
+      style: { height: "auto" },
+      className: `viz time line ${O ? "editing" : ""} mobile`,
       fluid: !0,
       children: /* @__PURE__ */ r(
-        bt,
+        gt,
         {
-          locale: Y,
-          type: a,
-          taxonomy: h,
-          categories: P,
-          store: `carousel_${j}_${y}`,
+          locale: V,
+          type: s,
+          taxonomy: P,
+          categories: $,
+          store: `carousel_${_}_${g}`,
           page: 1,
           perPage: c,
-          children: /* @__PURE__ */ r(Ct, { children: /* @__PURE__ */ r(It, { ...k }) })
+          children: /* @__PURE__ */ r(mt, { children: /* @__PURE__ */ r(Tt, { ...x }) })
         }
       )
     }
   );
-}, ie = (f) => {
-  const [a, h] = z(!1);
-  return wt(() => {
-    h(!0);
-  }, []), a ? /* @__PURE__ */ r(Ot, { ...f }) : /* @__PURE__ */ r(Dt, {});
 };
 export {
-  ie as default
+  It as default
 };