@datawheel/bespoke 0.3.20 → 0.3.22

package/dist/index.js

@@ -2957,16 +2957,17 @@ var init_actions = __esm({
   }
 });
 function ResourceProvider(props) {
-  const { pathSegment, profilePrefix } = props;
+  const { pathSegment, profilePrefix, siteProps } = props;
   const formatters2 = useFormatterList();
   const value = useMemo(() => ({
     profilePrefix,
     pathSegment,
+    siteProps,
     formatterFunctions: locales3.reduce((acc, locale) => ({
       ...acc,
       [locale]: formatters2.data ? funcifyFormattersByLocale(formatters2.data, locale) : {}
     }), {})
-  }), [formatters2, pathSegment, profilePrefix]);
+  }), [formatters2, pathSegment, profilePrefix, siteProps]);
   return /* @__PURE__ */ jsx(ResourceContext.Provider, { value, children: props.children });
 }
 function useBespoke() {
@@ -2987,7 +2988,8 @@ var init_ResourceProvider = __esm({
     initialContext = {
       pathSegment: "path",
       formatterFunctions: locales3.reduce((acc, d) => ({ ...acc, [d]: {} }), {}),
-      profilePrefix: "path"
+      profilePrefix: "path",
+      siteProps: {}
     };
     ResourceContext = createContext(initialContext);
   }
@@ -8029,41 +8031,69 @@ var init_DataTab = __esm({
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
-  const vizBlocks = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
+  const vizAvailable = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
   const [imageContext, setImageContext] = useState(contextOptions.section);
   const [imageFormat, setImageFormat] = useState(formatOptions2.png);
   const [imageProcessing, setImageProcessing] = useState(false);
   const [svgAvailable, setSvgAvailable] = useState(false);
-  const [vizAvailable, setVizAvailable] = useState(vizBlocks);
   const [vizPreviews, setVizPreviews] = useState([]);
   const [vizSelected, setVizSelected] = useState(vizAvailable.length > 0 ? vizAvailable[0].id : null);
   const [transparentBackground, setTransparentBackground] = useState(true);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
   const optionsTranslations = useBespokeTranslations("options");
   const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
+  const { siteProps } = useBespoke();
+  const includeLogo = siteProps?.logoSrc && typeof siteProps.logoSrc === "string";
+  const sectionId = section?.settings?.name || `section-${section.id}`;
+  const sectionHash = `#${sectionId}`;
+  const theme = useMantineTheme();
   const vizSelectedHasSVG = () => {
-    const vizNode = getVizNode(section.id, vizSelected);
+    const vizNode = getVizNode(vizSelected);
     const svgCount = select(vizNode).select("svg").size();
     return svgCount === 1;
   };
-  const getFileName = () => `${slugify_default("export-name")}`;
-  const getSectionNode = (sectionId) => {
-    const sectionNode = document.getElementById(`section-${sectionId}`);
+  const getFileName = () => `${slugify_default(sectionId)}`;
+  const getSectionNode = () => {
+    const sectionNode = document.getElementById(sectionId);
     return select(sectionNode).select(".bespoke-section-content").node();
   };
-  const getVizNode = (sectionId, vizId) => {
-    const sectionNode = getSectionNode(sectionId);
+  const getVizNode = (vizId) => {
+    const sectionNode = getSectionNode();
     return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
   };
-  const getSelectedNode = () => {
+  const getSelectedNode = () => new Promise((resolve) => {
     let node;
     if (imageContext === contextOptions.section) {
-      node = getSectionNode(section.id);
+      node = getSectionNode();
     } else if (imageContext === contextOptions.viz) {
-      node = getVizNode(section.id, vizSelected);
+      node = getVizNode(vizSelected);
     }
-    return node;
-  };
+    const sourceContainer = document.createElement("div");
+    sourceContainer.style.display = "flex";
+    sourceContainer.style.justifyContent = "space-between";
+    sourceContainer.classList.add("bespoke-Viz-source");
+    sourceContainer.style.padding = theme.spacing.xs;
+    sourceContainer.style.width = "100%";
+    const sourceNode = document.createElement("div");
+    sourceNode.innerText = translations["source"].replace("{src}", `${window.location}${sectionHash}`);
+    sourceNode.style.fontSize = theme.fontSizes.xs;
+    sourceContainer.appendChild(sourceNode);
+    if (includeLogo) {
+      const sourceImage = document.createElement("img");
+      sourceImage.src = siteProps.logoSrc;
+      sourceImage.style.height = "30px";
+      sourceImage.onload = () => resolve(node);
+      sourceImage.onerror = () => {
+        sourceImage.remove();
+        resolve(node);
+      };
+      sourceContainer.appendChild(sourceImage);
+      node.appendChild(sourceContainer);
+    } else {
+      node.appendChild(sourceContainer);
+      resolve(node);
+    }
+  });
   const getBackground = (elem) => {
     if (transparentBackground)
       return "transparent";
@@ -8086,9 +8116,6 @@ function ImageTab(props) {
             return !config.exclusionClasses.some((classname) => innerNode.classList.contains(classname));
           }
           return true;
-        },
-        style: {
-          // background: "green",
         }
       }
     ).then((dataUrl) => {
@@ -8096,6 +8123,7 @@ function ImageTab(props) {
       link.download = `${config.filename}.png`;
       link.href = dataUrl;
       link.click();
+      cleanDOM();
       setImageProcessing(false);
     }).catch((err) => {
       console.log(err);
@@ -8108,9 +8136,9 @@ function ImageTab(props) {
       { background: config.background }
     );
   };
-  const onSaveClick = () => {
+  const onSaveClick = async () => {
     setImageProcessing(true);
-    const node = getSelectedNode();
+    const node = await getSelectedNode();
     const exportConfig = {
       background: getBackground(node),
       exclusionClasses: ["export-hidden"],
@@ -8130,7 +8158,7 @@ function ImageTab(props) {
   const generatePreviews = async () => {
     const { toCanvas } = await import('html-to-image');
     Promise.all(
-      vizAvailable.map((viz) => toCanvas(getVizNode(section.id, viz.id)))
+      vizAvailable.map((viz) => toCanvas(getVizNode(viz.id)))
     ).then((canvases) => {
       setVizPreviews(canvases.map((canvas) => canvas.toDataURL()));
       setLoadingPreviews(false);
@@ -8157,7 +8185,7 @@ function ImageTab(props) {
   }, [vizSelected]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
+    vizAvailable.length > 0 ? /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
       SegmentedControl,
       {
         fullWidth: true,
@@ -8185,7 +8213,7 @@ function ImageTab(props) {
           }
         }
       }
-    ) }),
+    ) }) : /* @__PURE__ */ jsx(Text, { fw: "700", color: "gray.7", children: `${translations["entire_section"]}:` }),
     imageContext === contextOptions.viz && vizAvailable.length > 0 && /* @__PURE__ */ jsxs(
       Input.Wrapper,
       {
@@ -8239,7 +8267,7 @@ function ImageTab(props) {
       Checkbox,
       {
         checked: transparentBackground,
-        label: `${translations["transparent_bg"]}:`,
+        label: `${translations["transparent_bg"]}`,
         onChange: () => setTransparentBackground(!transparentBackground),
         radius: "xl"
       }
@@ -8256,13 +8284,14 @@ function ImageTab(props) {
     )
   ] });
 }
-var contextOptions, formatOptions2, DEFAULT_TRANSLATIONS3;
+var contextOptions, formatOptions2, cleanDOM, DEFAULT_TRANSLATIONS3;
 var init_ImageTab = __esm({
   "components/options/tabs/ImageTab.tsx"() {
     init_esm_shims();
     init_slugify();
     init_store2();
     init_TranslationsProvider();
+    init_ResourceProvider();
     contextOptions = {
       viz: "viz",
       section: "section"
@@ -8271,6 +8300,10 @@ var init_ImageTab = __esm({
       png: "PNG",
       svg: "SVG"
     };
+    cleanDOM = () => {
+      const sourceNodes = document.getElementsByClassName("bespoke-Viz-source");
+      Array.from(sourceNodes).forEach((node) => node.remove());
+    };
     DEFAULT_TRANSLATIONS3 = {
       "wrong_node": "Wrong node in export",
       "choose_area": "Choose image area",
@@ -8280,7 +8313,8 @@ var init_ImageTab = __esm({
       "processing": "Processing image...",
       "download": "Download {imageFormat}",
       "entire_section": "Entire section",
-      "viz_only": "Visualization only"
+      "viz_only": "Visualization only",
+      "source": "Source: {src}"
     };
   }
 });
@@ -9181,6 +9215,7 @@ var init_ImageCredits = __esm({
   }
 });
 function SectionWrapper({
+  name,
   children,
   id,
   sectionSettings: sectionSettings2,
@@ -9204,7 +9239,7 @@ function SectionWrapper({
             className: `bespoke-Section-${id} bespoke-Section-container `,
             settings: sectionSettings2,
             styles: sectionStyles?.container,
-            id: `section-${id}`,
+            id: name || `section-${id}`,
             pos: "relative",
             children: [
               !print && /* @__PURE__ */ jsxs(Group, { position: "right", mb: "xs", children: [
@@ -9356,6 +9391,7 @@ function Section({ section }) {
     SectionWrapper,
     {
       id,
+      name: section?.settings?.name,
       previews: comparisonPreviews,
       sectionSettings: sectionSettings2,
       sectionStyles,
@@ -16677,6 +16713,7 @@ function BespokeRenderer({
   translations,
   bespokeStyles,
   buildTime,
+  siteProps,
   profilePrefix = "/defaultPath",
   loader = /* @__PURE__ */ jsx(LoadingOverlay, { visible: true }),
   mantineProviderProps = {}
@@ -16684,7 +16721,7 @@ function BespokeRenderer({
   const loading = useInitialState(pathSegmentsKey);
   if (loading)
     return /* @__PURE__ */ jsx(Fragment, { children: loader });
-  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, children: [
+  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, siteProps, children: [
     /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(ComparisonProvider, { children: /* @__PURE__ */ jsx(PdfProvider, { children: /* @__PURE__ */ jsx(Report_default, {}) }) }) }),
     /* @__PURE__ */ jsx("small", { className: "bespoke-timestamp", children: buildTime })
   ] }) });

package/dist/server.js

@@ -5900,7 +5900,8 @@ var { locales: locales8 } = getLocales_default();
 var initialContext = {
   pathSegment: "path",
   formatterFunctions: locales8.reduce((acc, d) => ({ ...acc, [d]: {} }), {}),
-  profilePrefix: "path"
+  profilePrefix: "path",
+  siteProps: {}
 };
 createContext(initialContext);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -130,4 +130,4 @@
   "peerDependencies": {
     "next": "^13.4.0"
   }
-}
+}