@devgateway/dvz-ui-react 1.0.0

package/dist/esm/embeddable/tabbedposts/index.js

@@ -0,0 +1,265 @@
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import F, { useState as p, useRef as ne, useEffect as v } from "react";
+import { Container as S, Accordion as E, Icon as oe, Menu as z, Grid as _, Label as G, Button as ie } from "semantic-ui-react";
+import { PostProvider as re, PostConsumer as q, MediaProvider as V, MediaConsumer as U, PostIcon as Y, PostLabel as J } from "@devgateway/wp-react-lib";
+import { injectIntl as ae } from "react-intl";
+import { connect as le } from "react-redux";
+import K from "../connected-templates/PostIntro.js";
+import { useWindowDimensionsAndDevice as ce } from "../../lib/hooks/window-dimensions.js";
+const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.map((r) => /* @__PURE__ */ e(
+  z.Item,
+  {
+    onClick: () => i(r.slug),
+    className: r.slug === s ? "active" : "",
+    children: n ? /* @__PURE__ */ e(J, { post: r }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: r.title.rendered } }) })
+  },
+  r.id
+)) : null, de = ({
+  posts: t,
+  activeItem: s,
+  setActive: i,
+  showIcons: n,
+  showLabels: r
+}) => {
+  const l = t.length;
+  return t ? t.map((c) => {
+    var h, w;
+    return (h = c._embedded) != null && h["wp:featuredmedia"] && c._embedded["wp:featuredmedia"][0].source_url, /* @__PURE__ */ e(
+      _.Column,
+      {
+        className: (c.slug === s ? "active" : "") + (n ? " has-icon" : ""),
+        children: /* @__PURE__ */ b(
+          ie,
+          {
+            onClick: () => i(c.slug),
+            className: `nav  ${l === 1 ? "one" : ""}`,
+            children: [
+              n && /* @__PURE__ */ e(
+                V,
+                {
+                  id: (w = c.meta_fields) != null && w.icon ? c.meta_fields.icon[0] : null,
+                  children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) })
+                }
+              ),
+              r ? /* @__PURE__ */ e(J, { post: c }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+                "span",
+                {
+                  dangerouslySetInnerHTML: { __html: c.title.rendered }
+                }
+              ) })
+            ]
+          }
+        )
+      },
+      c.id
+    );
+  }) : null;
+}, Q = ({ posts: t, activeItem: s }) => (v(() => {
+  const i = document.querySelector(".ui.container.content-tab");
+  i && (i.scrollTop = 0);
+}, [s]), t ? t.map((i) => {
+  let n = {};
+  return i.slug !== s ? n = {
+    position: "absolute",
+    left: "-3000px",
+    width: "auto",
+    height: "0px",
+    overflow: "hidden",
+    visibility: "hidden"
+  } : n = {
+    visibility: "visible",
+    position: "relative",
+    width: "auto"
+  }, /* @__PURE__ */ e(K, { as: S, fluid: !0, post: i, style: n }, i.slug);
+}) : null), ue = ({ posts: t, activeItem: s, setActive: i }) => {
+  const [n, r] = p(
+    t.findIndex((o) => o.slug === s)
+  ), [l, c] = p(null), h = ne(null), [w, A] = p(window.innerWidth <= 1250);
+  v(() => {
+    if (l) {
+      const o = l.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: o,
+        behavior: "smooth"
+      });
+    }
+  }, [l]);
+  const C = () => {
+    var o;
+    return ((o = window.screen.orientation) == null ? void 0 : o.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
+  }, [m, L] = p(C()), g = () => {
+    setTimeout(() => {
+      L(C()), A(window.innerWidth <= 1250);
+    }, 100);
+  }, P = (o) => {
+    setTimeout(() => {
+      var d;
+      const u = o.querySelectorAll(
+        ".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section"
+      );
+      if (u.length !== 0)
+        for (const a of u) {
+          const x = a.closest(".ui.fluid.container.content"), f = x ? x.querySelector(".data-source") : null;
+          if (!f || a.offsetParent === null || f.offsetParent === null || a.offsetHeight === 0 || f.offsetHeight === 0)
+            continue;
+          const I = f.getBoundingClientRect(), D = a.getBoundingClientRect(), X = window.getComputedStyle(f), H = window.getComputedStyle(a), Z = Number.parseFloat(X.marginTop) || 0, ee = Number.parseFloat(H.marginBottom) || 0, M = D.bottom + ee, W = I.top - Z;
+          if (M > W) {
+            const y = M - W;
+            f.style.marginTop = `${y + 20}px`;
+          }
+          const N = (d = a.closest(
+            ".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
+          )) == null ? void 0 : d.nextElementSibling;
+          if (N) {
+            const y = N.getBoundingClientRect(), k = window.getComputedStyle(N), $ = Number.parseFloat(k.marginTop) || 0, T = y.top - $;
+            if (M > T) {
+              const j = M - T;
+              N.style.marginTop = `${j + 20}px`;
+            }
+          }
+          const R = a.closest(".chart.container");
+          if (R) {
+            const y = R.getBoundingClientRect(), k = window.getComputedStyle(R), $ = Number.parseFloat(k.marginBottom) || 0, T = y.bottom + $, j = Number.parseFloat(H.marginTop) || 0, O = D.top - j;
+            if (O < T) {
+              const te = T - O;
+              a.style.marginTop = `${te + 20}px`;
+            }
+          }
+        }
+    }, 10);
+  };
+  v(() => (window.screen.orientation && window.screen.orientation.addEventListener(
+    "change",
+    g
+  ), window.addEventListener("resize", g), () => window.removeEventListener("resize", g)), []), v(() => {
+    let o;
+    const u = [];
+    return n !== -1 && (o = setTimeout(() => {
+      document.querySelectorAll(".accordion").forEach((a) => P(a));
+    }, 0)), () => {
+      clearTimeout(o), u.forEach((d) => d.disconnect());
+    };
+  }, [n, w, m]);
+  const B = (o, u) => {
+    const { index: d } = u, a = n === d ? -1 : d;
+    r(a), i(t[d].slug), a !== -1 && c(o.currentTarget);
+  };
+  return /* @__PURE__ */ e(E, { fluid: !0, styled: !0, children: t.map((o, u) => {
+    var a;
+    const d = (a = o.meta_fields) != null && a.icon ? o.meta_fields.icon[0] : null;
+    return /* @__PURE__ */ b(F.Fragment, { children: [
+      /* @__PURE__ */ e(
+        E.Title,
+        {
+          active: n === u,
+          index: u,
+          onClick: B,
+          children: /* @__PURE__ */ b(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ b("div", { style: { display: "flex", alignItems: "center" }, children: [
+                  d && /* @__PURE__ */ e(V, { id: d, children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) }) }),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      dangerouslySetInnerHTML: { __html: o.title.rendered },
+                      style: { marginLeft: d ? "10px" : "0" }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(oe, { name: "chevron down" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        E.Content,
+        {
+          className: "accordion-post-content",
+          active: n === u,
+          children: /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(K, { post: o, as: S, fluid: !0 }) })
+        }
+      )
+    ] }, o.id);
+  }) });
+}, me = ({ posts: t, showLabels: s, height: i }) => {
+  const [n, r] = p(t ? t[0].slug : null);
+  return v(() => {
+    setTimeout(() => {
+      if (window.location.hash) {
+        const l = window.location.hash.substr(1), c = document.getElementById(l);
+        c && t.map((h) => h.slug).indexOf(l) > -1 && (r(l), c.scrollIntoView({ behavior: "auto", block: "start" }));
+      }
+    }, 0);
+  }, [t]), v(() => {
+    n && window.scrollTo({ top: 0, behavior: "smooth" });
+  }, [n]), /* @__PURE__ */ b(F.Fragment, { children: [
+    t.map((l) => /* @__PURE__ */ e("anchor", { id: l.slug }, l.slug)),
+    /* @__PURE__ */ e(z, { className: "tabbed posts", text: !0, children: /* @__PURE__ */ e(se, { showLabels: s, posts: t, setActive: r, activeItem: n }) }),
+    /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${i}px` }, children: /* @__PURE__ */ e(Q, { posts: t, activeItem: n }) })
+  ] });
+}, he = ({ posts: t, showLabels: s, showIcons: i, height: n }) => {
+  const [r, l] = p(t ? t[0].slug : null);
+  return /* @__PURE__ */ e(F.Fragment, { children: /* @__PURE__ */ b(_, { stackable: !0, className: "tabbed posts", columns: t.length, style: { height: n + "px" }, children: [
+    /* @__PURE__ */ e(de, { showIcons: i, showLabels: s, posts: t, activeItem: r, setActive: l }),
+    /* @__PURE__ */ e(_.Row, { style: { height: `${n}px` }, children: /* @__PURE__ */ e(_.Column, { width: 16, className: "content", children: /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${n}px` }, children: /* @__PURE__ */ e(Q, { className: "content-tab", posts: t, activeItem: r }) }) }) })
+  ] }) });
+}, ge = (t) => {
+  var I;
+  let {
+    "data-type": s,
+    "data-taxonomy": i,
+    "data-categories": n,
+    "data-items": r,
+    "data-theme": l = "light",
+    "data-show-icons": c,
+    "data-use-scrolls": h,
+    "data-show-labels": w,
+    "data-height": A,
+    "data-preview-mode": C = "Desktop",
+    pageModuleProps: m,
+    parent: L,
+    editing: g,
+    unique: P
+  } = t;
+  m != null && m.previewMode && (m != null && m.editing) && (C = m.previewMode, g = m.editing);
+  const B = t.intl.locale, o = h === "true", u = o ? A : void 0, { width: d } = ce(), a = d <= 1024, x = C !== "Desktop" && g, f = a && !g;
+  return /* @__PURE__ */ e(S, { className: `viz tabbed posts ${g ? "editing" : ""} ${o ? "scrollable" : ""}`, fluid: !0, children: /* @__PURE__ */ e(
+    re,
+    {
+      locale: B,
+      type: s,
+      taxonomy: i,
+      categories: n,
+      store: `tabbedposts_${L}_${P}`,
+      page: 1,
+      perPage: r,
+      children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(q, { children: f || x ? /* @__PURE__ */ e(ue, { posts: r, activeItem: (I = r[0]) == null ? void 0 : I.slug, setActive: () => {
+      } }) : l === "light" ? /* @__PURE__ */ e(me, { height: u, showLabels: w === "true" }) : /* @__PURE__ */ e(
+        he,
+        {
+          height: u,
+          showLabels: w === "true",
+          showIcons: c === "true"
+        }
+      ) }) })
+    }
+  ) });
+}, fe = (t, s) => {
+  const i = t.getIn([
+    "data",
+    "pageModuleProps"
+  ]), n = {};
+  return i && (n.pageModuleProps = i), n;
+}, we = {}, Ie = le(fe, we)(ae(ge));
+export {
+  Ie as default
+};

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

@@ -0,0 +1,240 @@
+import { jsx as d, jsxs as bt } from "react/jsx-runtime";
+import { PostProvider as yt, PostConsumer as vt } from "@devgateway/wp-react-lib";
+import Ct from "../connected-templates/PostIntro.js";
+import { useRef as xt, useState as nt, useEffect as Ot } from "react";
+import { Container as rt } from "semantic-ui-react";
+import * as c from "d3";
+const wt = {
+  visibility: "visible",
+  position: "relative",
+  height: "auto",
+  width: "auto"
+}, Pt = {
+  position: "absolute",
+  overflow: "hidden",
+  display: "none"
+}, M = 0, Mt = (T) => {
+  const {
+    posts: r,
+    position: v,
+    lineWidth: L,
+    meta: U,
+    locale: H,
+    lineColor: S,
+    height: u,
+    config: l,
+    marginLeft: W,
+    marginTop: z,
+    marginRight: E,
+    marginBottom: R,
+    fontSize: C,
+    titleWidth: k,
+    titleHeight: $,
+    subtitleWidth: I,
+    subtitleHeight: N,
+    enableTitlePopup: g,
+    enableCirclePopup: p,
+    enableDefaultPopup: A,
+    closePopupOnMouseOut: f,
+    unique: x
+  } = T, O = xt(), [J, a] = nt(!1), [m, b] = nt(null), _ = (e) => l[e].position, V = (e) => l[e].connectorLineHeight, st = (e) => l[e].subtitleOffset, at = (e) => l[e].titleOffset, j = (e) => {
+    var i;
+    return (i = l[e]) == null ? void 0 : i.circleColor;
+  }, K = (e) => l[e].lineColor, Q = (e) => l[e].titleColor, ct = (e) => l[e].labelColor, dt = (e) => l[e].tooltipFontColor || "#fff", ut = (e) => l[e].size, pt = (e) => l[e].readMoreLabel, w = (e) => "circle" + x + e, X = (e) => "title" + x + e, P = (e) => {
+    c.selectAll("#" + w(e)).style("stroke", "none").style("fill", j(e)), c.selectAll("#label" + e).style("font-weight", "normal");
+  }, Y = (e) => {
+    P(M), c.selectAll("#" + w(e)).style("stroke", j(e)).style("fill", "#fff"), c.selectAll("#label" + e).style("font-weight", "bold");
+  };
+  return Ot(() => {
+    const e = {
+      top: z,
+      right: E,
+      bottom: R,
+      left: W
+    };
+    let i = u / 2;
+    v == "middle" && (i = u / 2), v == "top" && (i = e.top), v == "bottom" && (i = u - e.bottom);
+    const s = {};
+    r.forEach((o, t) => {
+      s[o.id] = t;
+    });
+    const Z = O.current.clientWidth, ft = u, h = c.scaleLinear().domain([0, r.length - 1]).range([e.left, Z - e.right]), tt = c.line(), ht = [
+      [h(0), 0],
+      [h(r.length - 1), 0]
+    ], gt = tt(ht), B = c.select(O.current);
+    B.attr("width", Z).attr("height", ft), B.node().parentNode;
+    const et = (o, t, n) => {
+      let q = [0, 0];
+      if (o) {
+        const F = o.target.getBoundingClientRect(), it = o.target.closest(".time").getBoundingClientRect(), G = F.left - it.left, mt = F.top - it.top;
+        q = [G + 30, mt + 50];
+        const lt = 600;
+        F.left + G + lt + 30 > window.innerWidth && (q[0] = G - lt * 0.6);
+      }
+      a(!0), b({ data: t, index: n, position: q }), Y(n);
+    }, ot = (o, t, n) => {
+      P(n);
+    }, y = B.append("g");
+    if (y.attr("transform", `translate(0,${i})`), y.append("path").attr("d", gt).attr("stroke-width", L).attr("stroke", S), y.selectAll(".tick").data(r).enter().append("path").attr(
+      "d",
+      (o, t) => tt([
+        [h(t), 0],
+        [
+          h(t),
+          _(t) === "top" ? V(t) * -1 : V(t)
+        ]
+      ])
+    ).attr("stroke-width", L).attr("stroke", (o, t) => K(t)).on("mouseover", function(o, t, n) {
+    }), y.selectAll(".circle").data(r).enter().append("circle").attr("id", (o, t) => w(t)).attr("cx", (o, t) => h(t)).attr("cy", 0).attr("id", (o, t) => w(t)).attr("r", (o, t) => ut(t)).style("stroke-width", 3).style("cursor", p ? "pointer" : "default").style("fill", (o, t) => j(t)).on("mouseover", function(o, t) {
+      p && et(o, t, s[t.id]);
+    }).on("mouseout", function(o, t, n) {
+      p && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
+    }), y.selectAll(".label").data(r).enter().append("foreignObject").attr("id", (o, t) => "label" + t).attr("x", function(o, t) {
+      return h(t) - I / 2;
+    }).attr("width", I).attr("height", N).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => st(t)).append("xhtml:div").style("color", (o, t) => ct(t)).style("font-size", parseInt(C) - 2 + "px").style("line-height", "100%").style("text-align", "center").html((o, t) => o.meta_fields.subtitle).on("mouseover", (o, t, n) => {
+    }).on("mouseout", (o, t, n) => {
+    }).classed("subtitle-class", !0), y.selectAll(".title").data(r).enter().append("foreignObject").attr("x", function(o, t) {
+      return h(t) - k / 2;
+    }).attr("width", k).attr("height", $).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => at(t)).append("xhtml:div").attr("id", (o, t) => X(t)).style("font-size", parseInt(C) + 1 + "px").style("color", (o, t) => Q(t)).style("font-weight", (o) => "bold").style("line-height", "100%").style("text-align", "center").style("cursor", g ? "pointer" : "default").style("overflow-wrap", "break-word").html((o, t) => {
+      const n = pt(t);
+      let D = o.title.rendered;
+      return n && (D += `<br><span style="font-size:${parseInt(C) - 3}px;color:${Q(t)}">${n}</span>`), D;
+    }).on("mouseover", (o, t, n) => {
+      g && et(o, t, s[t.id]);
+    }).on("mouseout", (o, t, n, D) => {
+      g && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
+    }), A) {
+      let o = !1;
+      p && (o = !0, c.select("#" + w(M)).dispatch(
+        "mouseover"
+      )), !o && g && c.select("#" + X(M)).dispatch(
+        "mouseover"
+      );
+    }
+  }, []), /* @__PURE__ */ bt(
+    "div",
+    {
+      className: "time line",
+      onMouseLeave: (e) => {
+        e.target.getAttribute("class") !== "ui fluid container excerpt" && (a(!1), b(null), P(M));
+      },
+      onMouseEnter: (e) => {
+        f && (a(!1), b(null), P(M));
+      },
+      style: { position: "relative" },
+      children: [
+        r.map((e, i) => {
+          const s = m && m.index == i;
+          return /* @__PURE__ */ d(
+            "div",
+            {
+              className: "tooltip",
+              onMouseOver: () => Y(i),
+              onMouseOut: () => {
+                P(i);
+              },
+              style: {
+                left: s ? m.position[0] : 0,
+                top: s ? m.position[1] : 0,
+                position: "absolute",
+                pointerEvents: f ? "none" : "all"
+              },
+              children: s && /* @__PURE__ */ d(
+                "div",
+                {
+                  className: "tooltip",
+                  style: {
+                    backgroundColor: K(i),
+                    color: dt(i)
+                  },
+                  children: /* @__PURE__ */ d(
+                    Ct,
+                    {
+                      post: e,
+                      as: rt,
+                      style: s ? wt : Pt
+                    },
+                    e.slug
+                  )
+                }
+              )
+            }
+          );
+        }),
+        /* @__PURE__ */ d("svg", { height: u, width: "100%", ref: O })
+      ]
+    }
+  );
+}, Ht = (T) => {
+  const {
+    "data-type": r,
+    "data-taxonomy": v,
+    "data-categories": L,
+    "data-items": U,
+    "data-height": H,
+    "data-line-color": S = "#000",
+    "data-config": u = "{}",
+    "data-position": l = "middle",
+    "data-line-width": W = "1",
+    "data-margin-left": z = 50,
+    "data-margin-top": E = 25,
+    "data-margin-right": R = 50,
+    "data-margin-bottom": C = 25,
+    "data-font-size": k = 14,
+    "data-title-width": $ = 100,
+    "data-title-height": I = 50,
+    "data-subtitle-width": N = 50,
+    "data-subtitle-height": g = 20,
+    "data-enable-title-popup": p = "false",
+    "data-enable-circle-popup": A = "true",
+    "data-enable-default-popup": f = "false",
+    "data-close-popup-on-mouse-out": x = "false",
+    editing: O,
+    parent: J,
+    unique: a
+  } = T, m = T.intl.locale, _ = {
+    unique: a || Math.random().toString(36).substring(2, 9),
+    marginLeft: z,
+    marginTop: E,
+    marginRight: R,
+    marginBottom: C,
+    lineWidth: W,
+    height: H,
+    position: l,
+    lineColor: decodeURIComponent(S),
+    config: JSON.parse(decodeURIComponent(u)),
+    fontSize: k,
+    titleWidth: $,
+    titleHeight: I,
+    subtitleWidth: N,
+    subtitleHeight: g,
+    enableTitlePopup: p == !0 || p == "true",
+    enableCirclePopup: A == !0 || A == "true",
+    enableDefaultPopup: f == !0 || f == "true",
+    closePopupOnMouseOut: x == !0 || x == "true"
+  };
+  return /* @__PURE__ */ d(
+    rt,
+    {
+      style: { height: `${H}px` },
+      className: `viz time line ${O ? "editing" : ""}`,
+      fluid: !0,
+      children: /* @__PURE__ */ d(
+        yt,
+        {
+          locale: m,
+          type: r,
+          taxonomy: v,
+          categories: L,
+          store: "carousel_" + J + "_" + a,
+          page: 1,
+          perPage: U,
+          children: /* @__PURE__ */ d(vt, { children: /* @__PURE__ */ d(Mt, { ..._ }) })
+        }
+      )
+    }
+  );
+};
+export {
+  Ht as default
+};

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

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import { connect as n } from "react-redux";
+import r from "./mobile.js";
+import s from "./desktop.js";
+import c from "../../utils/deviceType.js";
+const m = (o) => {
+  const e = o.getIn(["data", "pageModuleProps"]), t = {};
+  return e && (t.pageModuleProps = e), t;
+}, a = {}, p = (o) => {
+  const { pageModuleProps: e } = o;
+  let t;
+  return e != null && e.editing && (e != null && e.previewMode) ? (e == null ? void 0 : e.previewMode) === "Desktop" ? t = s : t = r : ["tablet", "mobile", "midTablet"].includes(c()) ? t = r : t = s, /* @__PURE__ */ i(t, { ...o });
+}, k = n(m, a)(p);
+export {
+  k as default
+};