sfc-utils 1.4.55 → 1.4.57

package/components/datawrapper.mjs

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Helmet } from "react-helmet"
+import { getFigureWidth } from './helpers/utilfunctions.mjs'
+
+const Datawrapper = ({ altText, id, height, figureWidth = 'text-width' }) => {
+
+  const url = `https://datawrapper.dwcdn.net/${id}`
+  const nu_id = `datawrapper-chart-${id}`
+
+  // width options: float-left, float-right, text-width, large, wide, full
+  const width = getFigureWidth(figureWidth);
+
+  return (
+    <>
+      {/* responsive DW script */}
+      <Helmet>
+        <script
+          type="text/javascript"
+          src="https://datawrapper.dwcdn.net/lib/embed.min.js"
+        ></script>
+      </Helmet>
+      <div className={`iframe_Container graphic-wrapper inline-figure ${width}`}>
+        <figure>
+          <iframe title={altText} aria-label={altText} id={nu_id} src={url} scrolling="no" frameborder="0" style={{ width: 0, minWidth: "100%", border: "none" }} height={height}></iframe>
+        </figure>
+      </div>
+    </>
+  )
+}
+
+export default Datawrapper

package/components/geocoder.mjs

@@ -1,179 +1,179 @@
-import React, { useRef, useState } from 'react'
-import * as geocoderStyles from '../styles/modules/geocoder.module.less'
+import React, { useRef, useState } from "react";
+import * as geocoderStyles from "../styles/modules/geocoder.module.less";
 
 // This is a singleton event listener that we can use to add/remove event listeners
 // Don't call it during SSR
 var setSingletonEventListener = (function (element) {
-  var handlers = {}
+  var handlers = {};
   return function (evtName, func) {
     handlers.hasOwnProperty(evtName) &&
-      element.removeEventListener(evtName, handlers[evtName])
+      element.removeEventListener(evtName, handlers[evtName]);
     if (func) {
-      handlers[evtName] = func
-      element.addEventListener(evtName, func)
+      handlers[evtName] = func;
+      element.addEventListener(evtName, func);
     } else {
-      delete handlers[evtName]
+      delete handlers[evtName];
     }
-  }
-})(typeof document !== 'undefined' && document)
+  };
+})(typeof document !== "undefined" && document);
 
 // Our new and improved geocoder! Hits PositionStack first and then falls back to classic geocoder
 // Accepts a region to filter results by -- this can be custom but if it's not passed in, it will default to the state where the market resides
 const Geocoder = ({
   filterRegion, // You need to test results, but could also pass in a neighbourhood, district, city, county, state or administrative area
-  market,       // Will filter by the market's state if no filterRegion provided
+  market, // Will filter by the market's state if no filterRegion provided
   resultFunc,
   buttonTrackingId,
-  placeholder
+  placeholder,
 }) => {
   // Show a loader when we're requesting
-  const [loading, setLoading] = useState(false)
-  const [locData, setLocData] = useState(null)
-  const [inputValue, setInputValue] = useState('')
-  const [activeKeyboardIndex, setActiveKeyboardIndex] = useState(null)
-  const resultsRef = useRef(null)
-  const geocoderInputRef = useRef(null)
-  const latestFetchRef = useRef(null)
+  const [loading, setLoading] = useState(false);
+  const [locData, setLocData] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [activeKeyboardIndex, setActiveKeyboardIndex] = useState(null);
+  const resultsRef = useRef(null);
+  const geocoderInputRef = useRef(null);
+  const latestFetchRef = useRef(null);
 
   if (!filterRegion) {
     switch (market) {
-      case 'SFC':
-        filterRegion = 'California'
-        break
-      case 'Houston':
-      case 'San Antonio':
-        filterRegion = 'Texas'
-        break
-      case 'Albany':
-        filterRegion = 'New York'
-        break
-      case 'CT':
-        filterRegion = 'Connecticut'
+      case "SFC":
+        filterRegion = "California";
+        break;
+      case "Houston":
+      case "San Antonio":
+        filterRegion = "Texas";
+        break;
+      case "Albany":
+        filterRegion = "New York";
+        break;
+      case "CT":
+        filterRegion = "Connecticut";
       default:
-        filterRegion = 'United States'
+        filterRegion = "United States";
     }
   }
 
   // We don't want this CONSTANTLY firing, so we debounce it
   const search = (query) => {
     // Save value of query so we can check if it's the last one
-    latestFetchRef.current = query
+    latestFetchRef.current = query;
     // If we're already loading, don't fire another request, the request will be re-requested after the first one finishes
     if (loading) {
-      return false
+      return false;
     }
     // POST as form url encoded data
-    let formData = new FormData()
-    formData.append('query', query)
-    formData.append('region', filterRegion)
+    let formData = new FormData();
+    formData.append("query", query);
+    formData.append("region", filterRegion);
     // Remove any existing event listeners
-    setSingletonEventListener('keydown')
+    setSingletonEventListener("keydown");
     // Make req
-    fetch('https://projects.sfchronicle.com/feeds/geocode/v2.php', {
-      method: 'POST',
+    fetch("https://projects.sfchronicle.com/feeds/geocode/v2.php", {
+      method: "POST",
       body: formData,
     })
       .then((resp) => {
         // Sometimes, there's a junk response, so let's handle that gracefully
         if (!resp || !resp.ok) {
-          return null
+          return null;
         }
-        return resp.json()
+        return resp.json();
       })
       .then((output) => {
         // If this is not the latest fetch, bail and fetch latest
         if (latestFetchRef.current !== query) {
           setTimeout(() => {
             // Delay a bit because it seems like we're still typing
-            search(latestFetchRef.current)
-          }, 1000)
-          return
+            search(latestFetchRef.current);
+          }, 1000);
+          return;
         } else {
           // Uncomment this to see what request was actually honored
           //console.log('OK VALID RESULTS FOR', latestFetchRef.current)
         }
         // Unset loading
-        setLoading(false)
+        setLoading(false);
         // Remove any existing event listeners
-        setSingletonEventListener('keydown')
+        setSingletonEventListener("keydown");
         // Show results
-        setLocData(output.data)
+        setLocData(output.data);
         // Bail early if there's no data
         if (!output) {
-          return false
+          return false;
         }
         // Handle result
         if (output.data.length === 0) {
           // We could show something saying "No results" ... or we could not
         } else {
           // Create a keydown event listener
-          setSingletonEventListener('keydown', function resultsKeyHandler(e) {
+          setSingletonEventListener("keydown", function resultsKeyHandler(e) {
             setActiveKeyboardIndex((prevIndex) => {
-              let newIndex = prevIndex
+              let newIndex = prevIndex;
               switch (e.key) {
-                case 'ArrowDown':
+                case "ArrowDown":
                   // Handle the index
                   if (prevIndex === null) {
-                    newIndex = 0
+                    newIndex = 0;
                   } else if (prevIndex < output.data.length - 1) {
-                    newIndex = prevIndex + 1
+                    newIndex = prevIndex + 1;
                   } else {
-                    newIndex = 0
+                    newIndex = 0;
                   }
-                  break
-                case 'ArrowUp':
+                  break;
+                case "ArrowUp":
                   // Handle the index
                   if (prevIndex === null) {
-                    newIndex = output.data.length - 1
+                    newIndex = output.data.length - 1;
                   } else if (prevIndex > 0) {
-                    newIndex = prevIndex - 1
+                    newIndex = prevIndex - 1;
                   } else {
-                    newIndex = output.data.length - 1
+                    newIndex = output.data.length - 1;
                   }
-                  break
-                case 'Enter':
+                  break;
+                case "Enter":
                   // Do something with the data
-                  const selectedLocation = output.data[prevIndex]
+                  const selectedLocation = output.data[prevIndex];
                   // Update the input value with the choice
                   if (selectedLocation) {
-                    setInputValue(selectedLocation.name)
+                    setInputValue(selectedLocation.name);
                     // Call function if it exists
                     if (resultFunc) {
-                      resultFunc(selectedLocation)
+                      resultFunc(selectedLocation);
                     }
                   }
                   // Hide the list now
-                  setLocData(null)
+                  setLocData(null);
               }
-              return newIndex
-            })
-          })
+              return newIndex;
+            });
+          });
 
           // Start listening for a click outside the div
-          document.addEventListener('click', function resultsClickHandler(e) {
+          document.addEventListener("click", function resultsClickHandler(e) {
             // Whether we clicked inside or outside, we hide the list
-            setLocData(null)
+            setLocData(null);
             // Also cancel the keydown listener
-            setSingletonEventListener('keydown')
+            setSingletonEventListener("keydown");
             // Received click, cancel this listener
-            this.removeEventListener('click', resultsClickHandler)
-          })
+            this.removeEventListener("click", resultsClickHandler);
+          });
         }
-      })
-  }
+      });
+  };
 
   // Handle the change event
   const handleChange = (event) => {
     // Set the input value
-    const inputValue = event.target.value
-    setInputValue(inputValue)
-    setActiveKeyboardIndex(null)
+    const inputValue = event.target.value;
+    setInputValue(inputValue);
+    setActiveKeyboardIndex(null);
     // Only query if the value is not empty
     if (inputValue) {
-      setLoading(true)
-      search(inputValue)
+      setLoading(true);
+      search(inputValue);
     }
-  }
+  };
 
   return (
     <div className={geocoderStyles.wrapper}>
@@ -192,44 +192,43 @@ const Geocoder = ({
       {locData && (
         <ul className={geocoderStyles.resultsWrapper} ref={resultsRef}>
           {locData.map((loc, i) => {
-            let thisClass = geocoderStyles.result
+            let thisClass = geocoderStyles.result;
             if (activeKeyboardIndex === i) {
-              thisClass += ' ' + geocoderStyles.active
+              thisClass += " " + geocoderStyles.active;
             }
             return (
               <li
                 className={thisClass}
                 key={i}
                 onClick={() => {
-                  setInputValue(locData[i].name)
+                  setInputValue(locData[i].name);
                   // Call function if it exists
                   if (resultFunc) {
-                    resultFunc(locData[i])
+                    resultFunc(locData[i]);
                   }
                 }}
               >
                 <button
-                  id={buttonTrackingId ? buttonTrackingId : ""}
-                  className={buttonTrackingId ? geocoderStyles.button + " devhub-ga-tracking" : geocoderStyles.button}
+                  className={geocoderStyles.button}
                   onFocus={(e) => {
                     // Set index
-                    setActiveKeyboardIndex(i)
+                    setActiveKeyboardIndex(i);
                   }}
                 >
                   <div className={geocoderStyles.name}>{loc.name}</div>
                   <div className={geocoderStyles.details}>
                     {loc.locality}
-                    {loc.locality && loc.region && ', '}
+                    {loc.locality && loc.region && ", "}
                     {loc.region}
                   </div>
                 </button>
               </li>
-            )
+            );
           })}
         </ul>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Geocoder
+export default Geocoder;

package/components/helpers/utilfunctions.mjs

@@ -50,7 +50,7 @@ function appendLayoutScripts(isEmbedded, isAdRemoved, marketKey) {
       document.body.appendChild(script)
 
       // Init sailthru
-      if (window && window.Sailthru && marketKey){
+      if (window && window.Sailthru && marketKey) {
         window.Sailthru.init({ customerId: getBrands2(marketKey).attributes.sailCustomer })
       }
     }
@@ -81,4 +81,25 @@ function formatHDN(isEmbedded, url_add, meta) {
   return stringHDN;
 }
 
-export { debounce, appendLayoutScripts, formatHDN }
+function getFigureWidth(maxWidth) {
+  switch (maxWidth) {
+    case "text-width":
+      return "text-width";
+    case "large":
+      return "large mw-lg mt-md mb-md ml-auto mr-auto";
+    case "wide":
+      return "wide mw-xl mt-md mb-md ml-auto mr-auto";
+    case "full":
+      return "full mw-100 mt-md mb-md ml-auto mr-auto";
+    case "embed":
+      return "mw-xl ml-auto mr-auto";
+    case "float-right":
+      return "float-right";
+    case "float-left":
+      return "float-left";
+    default:
+      return "text-width";
+  }
+}
+
+export { debounce, appendLayoutScripts, formatHDN, getFigureWidth }

package/components/slideshow/imageslideshow.mjs

@@ -28,6 +28,22 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInve
     };
   }, [index]);
 
+  useEffect(() => {
+    // Find the max height ratio within an wcm image list, this is only used for the small visual slideshow
+    if (wcmData.nodes) {
+      let ratioList = wcmData.nodes.map((d) => d.photo.ratio)
+      console.log(ratioList)
+      let minRatio = Math.max(...ratioList)
+
+      // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
+      // to make sure that the site does not crash during SSR
+      let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+      if (r) {
+        r.style.setProperty('--small-visual-height-ratio', minRatio);
+      }
+    }
+  }, [])
+
   const getContainerClass = () => {
     switch (topperStyle) {
       case "stacked":

package/components/topper2.mjs

@@ -6,13 +6,14 @@ import CaptionCreditSlideshow from "./slideshow/captioncreditslideshow.mjs"
 import ImageSlideshow from "./slideshow/imageslideshow.mjs"
 import * as topperStyles from "../styles/modules/topper2.module.less"
 import * as imageStyles from "../styles/modules/topperimage.module.less"
+import Datawrapper from "./datawrapper.mjs"
 
 const Topper2 = ({ settings, wcmData, mods }) => {
   let {
-    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Kicker, Video_Mp4, Image_Caption, Image_Credits,
-    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
-    HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
-    Topper_Background_Color, Small_Visual_Max_Width, Small_Visual_Topper_Url
+    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Kicker, Video_Mp4, Datawrapper_Id,
+    Image_Caption, Image_Credits, HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset,
+    HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout,
+    Inverted_Text_Color, Topper_Background_Color, Small_Visual_Max_Width, Small_Visual_Topper_Url
   } = settings
 
   // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
@@ -216,6 +217,11 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     return (wcmIdList.length > 1);
   }
 
+  /** Checks if the media type is a datawrapper chart */
+  const isDatawrapper = () => {
+    return Datawrapper_Id && Datawrapper_Id !== 0;
+  }
+
   /** Converts string from spreadsheet into a list and pads the list if the length is incorrect */
   const convertStringToList = (str, size) => {
     // If the string is empty (ie caption/credit is not filled out), return early 
@@ -262,8 +268,18 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     )
   }
 
+  const getDatawrapperHtml = () => {
+    let datawrapperCss = ""
+
+    return (
+      <Datawrapper altText={Image_Alt} id={Datawrapper_Id} />
+    )
+  }
+
   /* Returns the corresponding image HTML for each topper style and slideshow status */
   const getMediaHTML = (isSlideshow) => {
+    if (isDatawrapper()) return getDatawrapperHtml();
+
     if (Video_Mp4) return getVideoHtml();
 
     if (isSlideshow) return (
@@ -426,17 +442,18 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                     extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
+                {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
               </figure>
             </div>
           </>
         );
 
       case "small-visual":
+        let smallVisualCss = (isDatawrapper()) ? `${topperStyles.imageSmallVisualDatawrapper}` : `${topperStyles.imageSmallVisual}`;
         return (
           <>
             <div>
-              <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageSmallVisual}`}>
+              <figure className={`mw-xl ml-auto mr-auto ${smallVisualCss}`}>
                 {getMediaHTML(isSlideshow(wcmIdList))}
               </figure>
               {Kicker && <Heading level={6} text={Kicker} className={kickerStyleList().join(' ')} />}
@@ -478,7 +495,15 @@ const Topper2 = ({ settings, wcmData, mods }) => {
         );
 
       case "side-by-side":
-        let figureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySideSlideshow}` : `${topperStyles.imageSideBySide}`;
+        let figureCss = "";
+        if (isSlideshow(wcmIdList)) {
+          figureCss = `${topperStyles.imageSideBySideSlideshow}`
+        } else if (isDatawrapper()) {
+          figureCss = `${topperStyles.imageSideBySideDatawrapper}`
+        } else {
+          figureCss = `${topperStyles.imageSideBySide}`
+        }
+
         let sideBySideContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySide} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySide}`;
         setBackgroundAndTextColor();
         return (
@@ -508,13 +533,20 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                   creditStyles={[sideBySideCapCredColorCss()]}
                 />
               }
-              {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySide, sideBySideCapCredColorCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+              {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySide, sideBySideCapCredColorCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
             </figure>
           </div>
         );
 
       case "side-by-side-portrait":
-        let portraitFigureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySidePortraitSlideshow}` : `${topperStyles.imageSideBySidePortrait}`;
+        let portraitFigureCss = "";
+        if (isSlideshow(wcmIdList)) {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortraitSlideshow}`
+        } else if (isDatawrapper()) {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortraitDatawrapper}`
+        } else {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortrait}`
+        }
         let sideBySidePortraitContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySidePortrait} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySidePortrait}`;
         setBackgroundAndTextColor();
         return (
@@ -546,7 +578,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                     creditStyles={[sideBySideCapCredColorCss()]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+                {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
               </figure>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.55",
+  "version": "1.4.57",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -14,4 +14,4 @@
     "react-transition-group": "^4.4.5",
     "write": "^2.0.0"
   }
-}
+}

package/styles/modules/imageslideshow.module.less

@@ -1,5 +1,9 @@
 @import (less) '../values';
 
+:root {
+  --small-visual-height-ratio: 2/3;
+}
+
 .container-stacked {
   margin: 0 auto;
   white-space: nowrap;
@@ -36,7 +40,7 @@
 
 .container-small-visual {
   width: 150px;
-  height: calc(150px*2/3);
+  height: calc(150px*var(--small-visual-height-ratio))
 }
 
 .image-wrapper-stacked {
@@ -69,7 +73,10 @@
 .image-wrapper-small-visual {
   position: absolute;
   width: 150px;
-  height: calc(150px*2/3)
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
 }
 
 .image-wrapper-side-by-side-portrait {

package/styles/modules/topper2.module.less

@@ -98,6 +98,20 @@
   }
 }
 
+.imageSmallVisualDatawrapper {
+  position: relative;
+  height: auto;
+  width: 100%;
+  margin: @s24 auto 0 auto;
+
+  @media (max-width: 960px) {
+    margin-left: @s16;
+    margin-right: @s16;
+    width: auto;
+    height: auto;
+  }
+}
+
 .imageSideBySide {
   width: 50%;
   float: left;
@@ -110,6 +124,18 @@
   }
 }
 
+.imageSideBySideDatawrapper {
+  width: 50%;
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: 100%;
+    float: none;
+    padding-bottom: 0;
+  }
+}
+
 .imageSideBySideSlideshow {
   width: 50%;
   height: calc(50vw*2/3 + 10px);
@@ -136,6 +162,22 @@
   }
 }
 
+.imageSideBySidePortraitDatawrapper {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: 100%;
+    float: none;
+    height: auto;
+    padding-bottom: 0;
+    min-height: unset;
+  }
+}
+
 .imageSideBySidePortraitSlideshow {
   width: 50%;
   height: 90vh;