@devgateway/dvz-ui-react 1.0.0

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

@@ -0,0 +1,141 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import H, { useRef as B, useState as _, useEffect as K } from "react";
+import { Container as x, Grid as P, Button as O, Dropdown as g, Icon as Q } from "semantic-ui-react";
+import { PostContent as L } from "@devgateway/wp-react-lib";
+import { domtoimage as C } from "./dom-to-image.js";
+import { saveAs as R } from "file-saver";
+import { connect as V } from "react-redux";
+const X = H.forwardRef((r, a) => /* @__PURE__ */ t("div", { ref: a, children: r.children })), Y = (r) => {
+  const a = B();
+  let {
+    childContent: h,
+    "data-height": te,
+    "data-button-label": T,
+    "data-png-label": U,
+    "data-jpg-label": J,
+    "data-jpg-text": S,
+    "data-png-text": j,
+    "data-check-png": G = "true",
+    "data-check-jpg": k = "true",
+    "data-title": q,
+    "data-default-format": w = "PNG",
+    "data-use-title": N = "false",
+    "data-style": F = "heavy",
+    "data-section-title": $ = "",
+    "data-download-tooltip": A = "",
+    "data-include-source-url": E = "false",
+    "data-source-urlmargin-left": I = 70,
+    "data-source-urlmargin-top": W = 10,
+    "data-source-urlfont-size": z = 18,
+    parent: ne,
+    editing: i,
+    component: oe,
+    unique: ae,
+    pageModuleProps: s
+  } = r;
+  const [p, m] = _(w), d = G == "true" || G === !0, u = k == "true" || k === !0;
+  K(() => {
+    m(w);
+  }, [w]);
+  const v = (n) => {
+    m(n.target.value);
+  };
+  function M(n) {
+    const o = n.attributes, y = [];
+    if (o)
+      for (let l = 0; l < o.length; l++)
+        y.push(o[l].nodeName);
+    const e = y.filter((l) => l.startsWith("data-"));
+    return e.length > 0 && e.forEach((l) => {
+      n.setAttribute(l, "");
+    }), n.classList ? !n.classList.contains("ignore") : !0;
+  }
+  const f = { filter: M, bgcolor: "#FFF" }, D = (n) => {
+    C.cloneNode(a.current).then(function(o) {
+      if ([...o.getElementsByTagName("input")].forEach((e) => e.remove()), [...o.querySelectorAll(".question.circle.icon")].forEach((e) => e.remove()), E === "true") {
+        const e = document.createElement("div");
+        e.style.marginLeft = I + "px", e.style.marginTop = W + "px", e.style.fontSize = z + "px", e.style.fontFamily = "Roboto, sans-serif", e.style.fontWeight = "400", e.style.color = "#66676d", e.style.opacity = "0.75", e.innerHTML = window.location.href, e.style.maxWidth = "90%", e.style.wordWrap = "break-word", e.style.overflowWrap = "break-word", o.appendChild(e);
+      }
+      f.height = a.current.scrollHeight + 90, f.width = a.current.scrollWidth + 30, o.style.padding = "20px", n === "PNG" && C.toPng(o, f).then(function(e) {
+        R(e, U);
+      }), n === "JPG" && C.toJpeg(o, f).then(function(e) {
+        R(e, J);
+      });
+    });
+  }, b = (n) => {
+    i ? alert("Not allowed when editing please preview page") : D(n);
+  };
+  return /* @__PURE__ */ t(
+    x,
+    {
+      className: `viz download ${F} ${N ? "has-title" : ""}
+        ${d || u ? "has-formats" : ""}
+        ${i || s != null && s.editing ? "editing" : ""}
+        ${d && u ? "multi-format" : ""}
+        ${d && !u || !d && u ? "single-format" : ""}`,
+      fluid: !0,
+      children: /* @__PURE__ */ c(X, { ref: a, children: [
+        /* @__PURE__ */ c(P, { stackable: !0, reversed: "mobile", className: "download-header", children: [
+          !i && N === "true" && /* @__PURE__ */ t(P.Column, { width: 12, children: /* @__PURE__ */ t(
+            L,
+            {
+              parentUnique: r.unique,
+              post: { content: { rendered: decodeURIComponent($) } }
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            P.Column,
+            {
+              className: i ? "editing ignore" : "ignore",
+              width: i || N !== "true" ? 16 : 4,
+              textAlign: "right",
+              children: /* @__PURE__ */ c("div", { className: "wrapper", children: [
+                /* @__PURE__ */ c(O, { className: "download", onClick: () => b(p), children: [
+                  T,
+                  " ",
+                  p === "PNG" ? "PNG" : "JPG"
+                ] }),
+                /* @__PURE__ */ t(
+                  g,
+                  {
+                    className: "download",
+                    "data-tooltip": decodeURIComponent(A),
+                    trigger: u && d ? /* @__PURE__ */ t(Q, { name: "download", className: "download-icon" }) : null,
+                    children: /* @__PURE__ */ c(g.Menu, { children: [
+                      q,
+                      d === !0 && /* @__PURE__ */ c(g.Item, { onClick: () => {
+                        m("PNG"), b("PNG");
+                      }, children: [
+                        /* @__PURE__ */ t("input", { type: "radio", value: "PNG", checked: p === "PNG", onChange: v }),
+                        /* @__PURE__ */ t("label", { children: j })
+                      ] }),
+                      u === !0 && /* @__PURE__ */ c(g.Item, { onClick: () => {
+                        m("JPG"), b("JPG");
+                      }, children: [
+                        /* @__PURE__ */ t("input", { type: "radio", value: "JPG", checked: p === "JPG", onChange: v }),
+                        /* @__PURE__ */ t("label", { children: S })
+                      ] })
+                    ] })
+                  }
+                )
+              ] })
+            }
+          )
+        ] }),
+        !i && /* @__PURE__ */ t(x, { fluid: !0, className: `download area ${i || s != null && s.editing ? "editing" : ""}`, children: /* @__PURE__ */ t(
+          L,
+          {
+            parentUnique: r.unique,
+            post: { content: { rendered: h } }
+          }
+        ) })
+      ] })
+    }
+  );
+}, Z = (r) => {
+  const a = r.getIn(["data", "pageModuleProps"]), h = {};
+  return a && (h.pageModuleProps = a), h;
+}, ee = {}, he = V(Z, ee)(Y);
+export {
+  he as default
+};

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

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import l, { useRef as m, useState as u } from "react";
+import { Container as w, Button as b } from "semantic-ui-react";
+l.forwardRef((d, o) => /* @__PURE__ */ t("div", { id: "divIdToPrint", ref: o, children: d.children }));
+const L = (d) => {
+  m();
+  const [o, n] = u(!1), {
+    childContent: g,
+    "data-height": p,
+    "data-button-label": i = "Download PDF",
+    "data-file-label": r,
+    "data-url": c,
+    editing: s
+  } = d, f = () => {
+    n(!0), fetch("/pdf/" + c).then((a) => a.blob()).then((a) => {
+      const h = window.URL.createObjectURL(a), e = document.createElement("a");
+      e.href = h, e.download = r, document.body.appendChild(e), e.click(), n(!1), e.remove();
+    });
+  };
+  return /* @__PURE__ */ t(w, { className: `viz download ${s ? "editing" : ""}`, fluid: !0, children: /* @__PURE__ */ t(l.Fragment, { children: /* @__PURE__ */ t("div", { className: "downloadPdf", children: /* @__PURE__ */ t(b, { loading: o, className: "download", onClick: f, children: i }) }) }) });
+};
+export {
+  L as default
+};

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

@@ -0,0 +1,207 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import z, { useState as p, useEffect as I } from "react";
+import { Container as M, Accordion as T, Icon as k, Grid as _, Segment as D, Label as P } from "semantic-ui-react";
+import { PostProvider as F, PostConsumer as q, MediaProvider as A, MediaConsumer as N, PostIcon as L, PostContent as E, PostTitle as H } from "@devgateway/wp-react-lib";
+import O from "../connected-templates/PostIntro.js";
+import { useWindowDimensionsAndDevice as R } from "../../lib/hooks/window-dimensions.js";
+import { connect as W } from "react-redux";
+const j = ({ post: n, onClick: h, active: a, moreLabel: l }) => {
+  const d = n._embedded ? n._embedded["wp:featuredmedia"] : null;
+  return /* @__PURE__ */ s("div", { className: "cover", style: { backgroundImage: `url(${d ? d[0].source_url : ""})` }, children: [
+    /* @__PURE__ */ e(O, { post: n }),
+    a ? /* @__PURE__ */ s(P, { onClick: h, children: [
+      /* @__PURE__ */ e(k, { name: "arrow alternate circle left outline", size: "large" }),
+      " Back "
+    ] }) : /* @__PURE__ */ s(P, { onClick: h, children: [
+      /* @__PURE__ */ e(k, { name: "search", size: "large" }),
+      " ",
+      l
+    ] })
+  ] });
+}, B = ({ post: n }) => {
+  const l = new DOMParser().parseFromString(n.content.rendered, "text/html").querySelector("figure");
+  return l ? /* @__PURE__ */ e("div", { style: {
+    flex: "0 0 40px"
+  }, dangerouslySetInnerHTML: { __html: l.outerHTML } }) : null;
+}, G = ({ posts: n, width: h, height: a, color: l, moreLabel: d }) => {
+  const [u, r] = p(null), [b, y] = p(!1), [v, C] = p([0, 0]), m = l.split(","), g = (t) => {
+    b ? (y(!1), r(t)) : (r(t), y(!0));
+  };
+  return I(() => {
+    u && C([window.scrollX, window.scrollY]), u == null && window.scrollTo(v[0], v[1]);
+  }, [u]), I(() => {
+    window.setTimeout(() => {
+      if (window.location.hash) {
+        const t = window.location.hash.substr(1), o = document.getElementById(t);
+        o && n && n.map((i) => i.slug).indexOf(t) > -1 && (r(t), o.scrollIntoView({ behavior: "auto", block: "start" }));
+      }
+    }, 0);
+  }, [n]), /* @__PURE__ */ e(M, { fluid: !0, className: "featured tabs", style: { minHeight: `${a}px` }, children: /* @__PURE__ */ e(_, { stackable: !0, columns: u != null ? 1 : n == null ? void 0 : n.length, className: "desktop", children: n == null ? void 0 : n.map((t, o) => {
+    var i;
+    return /* @__PURE__ */ s(z.Fragment, { children: [
+      /* @__PURE__ */ s(
+        _.Column,
+        {
+          style: u == null ? { display: "block", visibility: "visible", backgroundColor: m[o] } : { display: "none", visibility: "hidden" },
+          children: [
+            /* @__PURE__ */ e("a", { id: t.slug }),
+            /* @__PURE__ */ e(j, { post: t, moreLabel: d, onClick: () => g(t.slug) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ s(
+        _.Column,
+        {
+          className: "expanded",
+          style: u != t.slug ? { display: "none", visibility: "hidden" } : { display: "block", visibility: "visible" },
+          children: [
+            /* @__PURE__ */ s(D, { style: { backgroundColor: m[o] }, children: [
+              ((i = t.meta_fields) == null ? void 0 : i.icon) && /* @__PURE__ */ e(A, { id: t.meta_fields ? t.meta_fields.icon[0] : null, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(L, {}) }) }),
+              /* @__PURE__ */ e(H, { as: "h2", post: t, className: "has-standard-36-font-size has-white-color" }),
+              /* @__PURE__ */ e(P, { className: "closeIcon", onClick: () => r(null), children: /* @__PURE__ */ e(k, { name: "times circle outline", size: "large" }) })
+            ] }),
+            /* @__PURE__ */ e(
+              E,
+              {
+                as: "div",
+                fluid: !0,
+                post: t,
+                style: { maxHeight: `calc(${a}px - 150px)` }
+              }
+            ),
+            /* @__PURE__ */ s(P, { className: "closeIconText", style: { backgroundColor: `${m[o]}` }, onClick: () => r(null), children: [
+              /* @__PURE__ */ e(k, { name: "times circle outline", size: "large" }),
+              " Close "
+            ] })
+          ]
+        }
+      )
+    ] }, t.slug);
+  }) }) });
+}, V = ({ posts: n, activeItem: h, setActive: a, color: l }) => {
+  const [d, u] = p(n.findIndex((i) => i.slug === h)), [r, b] = p(null), y = l.split(","), v = () => {
+    var i;
+    return ((i = window.screen.orientation) == null ? void 0 : i.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
+  }, [C, m] = p(v()), g = () => {
+    setTimeout(() => {
+      m(v());
+    }, 100);
+  }, t = (i, f, c) => {
+    document.querySelectorAll(i).forEach((x) => {
+      x.querySelector(f) && x.classList.add(c);
+    });
+  };
+  I(() => {
+    if (r) {
+      const i = r.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: i,
+        behavior: "smooth"
+      });
+    }
+    t(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-ft-title", "has-accordion-title"), t(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-vft-content", "has-accordion-content"), t(".ui.fluid.container.viz.featured.tabs", "blockquote", "has-blockquote"), t(".ui.fluid.container.viz.featured.tabs", ".vt-accordion-post-intro figure", "has-vt-accordion-figure"), t(".ui.fluid.container.viz.featured.tabs", ".content.active.accordion-post-content .wp-block-columns", "has-wp-block-columns");
+  }, [r]), I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
+    "change",
+    g
+  ), window.addEventListener("resize", g), () => {
+    window.removeEventListener("resize", g), window.screen.orientation && window.screen.orientation.removeEventListener(
+      "change",
+      g
+    );
+  }), []);
+  const o = (i, f) => {
+    const { index: c } = f, w = d === c ? -1 : c;
+    u(w), a(n[c].slug), w !== -1 && b(i.currentTarget);
+  };
+  return /* @__PURE__ */ e(T, { fluid: !0, styled: !0, children: n.map((i, f) => {
+    var w;
+    const c = (w = i.meta_fields) != null && w.icon ? i.meta_fields.icon[0] : null;
+    return /* @__PURE__ */ s(z.Fragment, { children: [
+      /* @__PURE__ */ e(
+        T.Title,
+        {
+          active: d === f,
+          index: f,
+          onClick: o,
+          style: { backgroundColor: y[f] },
+          children: /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+            /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center" }, children: [
+              c && /* @__PURE__ */ e(A, { id: c, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(L, { className: "icon" }) }) }),
+              !c && /* @__PURE__ */ e(B, { post: i }),
+              /* @__PURE__ */ e("p", { className: "accordion-post-ft-title", dangerouslySetInnerHTML: { __html: i.title.rendered }, style: { marginLeft: "10px" } })
+            ] }),
+            /* @__PURE__ */ e(k, { name: "chevron down" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ e(T.Content, { className: "accordion-post-ft-content", active: d === f, children: /* @__PURE__ */ e(E, { post: i }) })
+    ] }, i.id);
+  }) });
+}, Y = (n) => {
+  var S;
+  let {
+    "data-width": h,
+    "data-height": a,
+    "data-type": l,
+    "data-taxonomy": d,
+    "data-categories": u,
+    "data-items": r,
+    "data-color": b,
+    "data-use-scrolls": y,
+    "data-read-more-label": v = "READ More",
+    "data-preview-mode": C = "Desktop",
+    editing: m,
+    parent: g,
+    unique: t,
+    pageModuleProps: o
+  } = n;
+  const i = n.intl.locale;
+  o != null && o.editing && (o != null && o.previewMode) && (m = o.editing, C = o.previewMode);
+  const f = y == "true", { width: c } = R(), w = c <= 1250, x = C !== "Desktop" && m, $ = w && !m;
+  return /* @__PURE__ */ e(
+    M,
+    {
+      className: `viz featured tabs ${m ? "editing" : ""} ${f ? "scrollable" : ""}`,
+      fluid: !0,
+      children: /* @__PURE__ */ e(
+        F,
+        {
+          locale: i,
+          type: l,
+          taxonomy: d,
+          categories: u,
+          store: `tabbedposts_${g}_${t}`,
+          page: 1,
+          perPage: r,
+          children: /* @__PURE__ */ e(q, { children: x || $ ? /* @__PURE__ */ e(
+            V,
+            {
+              posts: r,
+              activeItem: (S = r == null ? void 0 : r[0]) == null ? void 0 : S.slug,
+              color: b,
+              setActive: () => {
+              }
+            }
+          ) : /* @__PURE__ */ e(
+            G,
+            {
+              moreLabel: v,
+              color: b,
+              width: h,
+              height: a
+            }
+          ) })
+        }
+      )
+    }
+  );
+}, U = (n, h) => {
+  const a = n.getIn([
+    "data",
+    "pageModuleProps"
+  ]), l = {};
+  return a && (l.pageModuleProps = a), l;
+}, X = {}, ie = W(U, X)(Y);
+export {
+  ie as default
+};