ublo-lib 1.0.0

package/es/common/components/admin-links/admin-links.js

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import { loadFileManager } from "../../utils/file-manager";
+import styles from "./index.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const ToggleIcon = () => {
+  return _jsx("svg", {
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    className: styles.toggleIcon,
+    children: _jsx("path", {
+      d: "M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+    })
+  });
+};
+
+const AdminLinks = ({
+  customLinks
+}) => {
+  const {
+    lang,
+    cmsMode,
+    config
+  } = useUbloContext();
+  const [open, setOpen] = React.useState(false);
+  const hasLangPrefix = config.langPrefix.links;
+  const {
+    plausibleLink
+  } = config;
+  const links = {
+    msemAdmin: {
+      name: "Administration MseM",
+      onClick: "https://admin.mon-sejour-en-montagne.com/",
+      target: "_blank"
+    },
+    tutoriels: {
+      name: "Tutoriels",
+      onClick: "http://esf-tutoriels.valraiso.net/",
+      target: "_blank"
+    },
+    popup: {
+      name: "Popup",
+      onClick: hasLangPrefix ? `/${lang.concat("/popup")}` : "/popup"
+    },
+    fileManager: {
+      name: "Photothèque",
+      onClick: loadFileManager
+    },
+    plausible: {
+      name: "Statistiques",
+      onClick: plausibleLink,
+      target: "_blank"
+    },
+    ...customLinks
+  };
+  return _jsx("div", {
+    className: styles.root,
+    children: cmsMode && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: styles.toggle,
+        onClick: () => setOpen(!open),
+        children: _jsx(ToggleIcon, {})
+      }), open && _jsxs("div", {
+        className: styles.links,
+        children: [_jsx("div", {
+          className: styles.linksTitle,
+          children: "Liens utiles"
+        }), Object.keys(links).map((key, i) => {
+          const link = links[key];
+          if (!link) return;
+          const {
+            name,
+            onClick,
+            target
+          } = link;
+          const isHrefValid = typeof onClick === "string" && onClick !== "";
+          const isFunction = typeof onClick === "function";
+
+          if (!isHrefValid && !isFunction) {
+            return null;
+          }
+
+          const Tag = isHrefValid ? "a" : "button";
+          const anchorProps = {
+            href: onClick,
+            target
+          };
+          const buttonProps = {
+            onClick
+          };
+          const props = isFunction ? buttonProps : anchorProps;
+          return _jsx(Tag, {
+            className: styles.link,
+            ...props,
+            children: name
+          }, i);
+        })]
+      })]
+    })
+  });
+};
+
+export default AdminLinks;

package/es/common/components/admin-links/admin-links.module.css

@@ -0,0 +1,85 @@
+.root {
+  position: absolute;
+  bottom: 5px;
+  left: 30px;
+  font-family: "Open Sans", sans-serif;
+  z-index: 900;
+}
+
+.toggle {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  user-select: none;
+  z-index: 2;
+}
+
+.toggleIcon {
+  width: 14px;
+  height: 14px;
+  fill: #484848;
+}
+
+.links {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  color: var(--cms-grey-000, #ffffff);
+  background: var(
+    --cms-blue-gradient,
+    linear-gradient(
+      175deg,
+      var(--cms-secondary-color, #4177f6),
+      var(--cms-primary-color, #004cc2)
+    )
+  );
+  border-radius: var(--cms-radius-300, 15px);
+  box-shadow: var(--cms-shadow-300, 0 5px 10px rgba(0, 0, 0, 0.24));
+  transform-origin: bottom left;
+  animation: admin-links-appearance 240ms
+    var(--cms-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+@keyframes admin-links-appearance {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  70% {
+    transform: scale(1.025);
+  }
+}
+
+.linksTitle {
+  margin-bottom: 5px;
+  font-size: 17px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.link {
+  font-size: 15px;
+  font-family: inherit;
+  color: inherit;
+  font-weight: 400;
+  text-transform: none;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.link:hover,
+.link:active,
+.link:focus {
+  text-decoration: underline;
+}

package/es/common/components/admin-links/index.js

@@ -0,0 +1,2 @@
+import AdminLinks from "./admin-links";
+export default AdminLinks;

package/es/common/components/analytics.js

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { useUbloContext } from "ublo/with-ublo";
+
+const loadGTag = id => new Promise(resolve => {
+  const script = document.createElement("script");
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+  script.onload = resolve;
+  document.body.appendChild(script);
+});
+
+const Analytics = ({
+  consent,
+  gaAccountOverride
+}) => {
+  const {
+    config
+  } = useUbloContext();
+  const {
+    gaAccount
+  } = config;
+  const gaId = gaAccountOverride || gaAccount;
+  useEffect(() => {
+    const startGTag = async () => {
+      await loadGTag(gaId);
+      window.dataLayer = window.dataLayer || [];
+
+      function gtag() {
+        window.dataLayer.push(arguments);
+      }
+
+      gtag("js", new Date());
+      gtag("config", gaId);
+    };
+
+    const allowAnalytics = consent && gaId;
+
+    if (allowAnalytics) {
+      startGTag();
+    }
+
+    window[`ga-disable-${gaId}`] = !allowAnalytics;
+  }, [consent, gaId]);
+  return null;
+};
+
+export default Analytics;

package/es/common/components/breadcrumb.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import Link from "ublo/link";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Item = ({
+  page,
+  path,
+  itemTitle,
+  nextItem,
+  isCurrent
+}) => {
+  const hasTemplate = page !== undefined;
+  const isExternalUrl = /^((http|https):\/\/)/.test(path);
+  const noHref = isCurrent || !hasTemplate;
+  const Tag = isExternalUrl ? "a" : noHref ? "span" : Link;
+  const linkProps = {
+    title: itemTitle,
+    page,
+    as: path
+  };
+  const spanProps = {
+    dangerouslySetInnerHTML: {
+      __html: itemTitle
+    }
+  };
+  const anchorProps = { ...spanProps,
+    href: path
+  };
+  const props = isExternalUrl ? anchorProps : noHref ? spanProps : linkProps;
+  return _jsxs(_Fragment, {
+    children: [_jsx(Tag, {
+      className: "breadcrumb__item",
+      ...props
+    }), nextItem]
+  });
+};
+
+const renderBreadcrumbItems = (rawItem, exclusions) => {
+  const {
+    next,
+    title,
+    path,
+    page,
+    shortTitle
+  } = rawItem;
+  const isCurrent = next === undefined;
+  const isNextExcluded = !isCurrent && exclusions.includes(next.name);
+  const itemToRender = isNextExcluded ? next.next : next;
+  const nextItem = !isCurrent && renderBreadcrumbItems(itemToRender, exclusions);
+  return _jsx(Item, {
+    page: page,
+    path: path,
+    itemTitle: shortTitle || title,
+    nextItem: nextItem,
+    isCurrent: isCurrent
+  });
+};
+
+const Breadcrumb = ({
+  breadcrumb,
+  exclusions = []
+}) => _jsx("div", {
+  className: "breadcrumb",
+  children: renderBreadcrumbItems(breadcrumb, exclusions)
+});
+
+export default Breadcrumb;

package/es/common/components/carousel-zone.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import Zone from "ublo/zone";
+import { useUbloContext } from "ublo/with-ublo";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const CarouselZone = ({
+  id,
+  options = {},
+  ...props
+}) => {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const {
+    duration = 5000,
+    transition = 160,
+    fade = true,
+    auto = true,
+    prevButton,
+    nextButton,
+    navigation
+  } = options;
+  const carouselOpt = {
+    duration,
+    transition,
+    fade: cmsMode === "editing" ? false : fade,
+    auto,
+    prevButton: cmsMode === "editing" ? _jsx("div", {
+      className: "carousel__button carousel__button--editing carousel__button--left",
+      children: _jsx("svg", {
+        className: "carousel__icon",
+        viewBox: "0 0 24 24",
+        children: _jsx("path", {
+          d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+        })
+      })
+    }) : prevButton,
+    nextButton: cmsMode === "editing" ? _jsx("div", {
+      className: "carousel__button carousel__button--editing carousel__button--right",
+      children: _jsx("svg", {
+        className: "carousel__icon",
+        viewBox: "0 0 24 24",
+        children: _jsx("path", {
+          d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+        })
+      })
+    }) : nextButton,
+    navigation
+  };
+  return _jsx("div", {
+    className: "carousel-zone",
+    children: _jsx(Zone, {
+      id: id,
+      carousel: true,
+      carouselOpt: carouselOpt,
+      ...props
+    })
+  });
+};
+
+export default CarouselZone;