sfc-utils 1.3.66 → 1.3.67

package/components/captioncredit.mjs

@@ -1,29 +1,29 @@
 import React from 'react'
-// import * as capcredStyles from "../styles/modules/captioncredit.module.less"
 
-const CaptionCredit = (props) => {
-  let {caption, credit, extraStyles} = props
-
-  let captionCss = ["topper-image", "caption"]; //capcredStyles.cFigCap, 
-  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+const CaptionCredit = ({ caption, credit, extraStyles, creditStyles = [] }) => {
+  let captionCss = ["topper-image", "caption"];
+  if (extraStyles) {
+    captionCss = captionCss.concat(extraStyles);
+  }
 
+  let creditCss = `credit ${creditStyles.join(" ")}`
   return (
     <>
-    {caption && credit && (
-      <figcaption className={captionCss.join(' ')}>
-        {caption} <span className="credit">{credit}</span>
-      </figcaption>
-    )}
-    {!caption && credit && (
-      <figcaption className={captionCss.join(' ')}>
-        <span className="credit">{credit}</span>
-      </figcaption>
-    )}
-    {caption && !credit && (
-      <figcaption className={captionCss.join(' ')}>
-        {caption}
-      </figcaption>
-    )}
+      {caption && credit && (
+        <figcaption className={captionCss.join(' ')}>
+          {caption} <span className={creditCss}>{credit}</span>
+        </figcaption>
+      )}
+      {!caption && credit && (
+        <figcaption className={captionCss.join(' ')}>
+          <span className={creditCss}>{credit}</span>
+        </figcaption>
+      )}
+      {caption && !credit && (
+        <figcaption className={captionCss.join(' ')}>
+          {caption}
+        </figcaption>
+      )}
     </>
   )
 }

package/components/ogpubdate.mjs

@@ -0,0 +1,18 @@
+import React from "react"
+
+import {
+  pubdateString,
+  moddateString
+} from './helpers/datehelpers.mjs'
+
+const OgPubDate = ({ settings }) => {
+  return (
+    <>
+      {moddateString && 
+        <p><i>Originally published on {pubdateString}</i></p>
+      }
+    </>
+  )
+}
+
+export default OgPubDate

package/components/slideshow/captioncreditslideshow.mjs

@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useRef } from "react"
 
-const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
+const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles, creditStyles = [] }) => {
   let captionCss = ["topper-image", "caption"];
-  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+  if (extraStyles) {
+    captionCss = extraStyles.concat(captionCss);
+  }
 
   const [index, setIndex] = useState(0);
   const timeoutRef = useRef(null);
@@ -29,16 +31,17 @@ const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
 
   const hasCaption = (captionList.length > 0)
   const hasCredit = (creditList.length > 0)
+  let creditCss = `credit ${creditStyles.join(" ")}`
   return (
     <>
       {hasCaption && hasCredit && (
         <figcaption className={captionCss.join(' ')}>
-          {captionList[index]} <span className="credit">{creditList[index]}</span>
+          {captionList[index]} <span className={creditCss}>{creditList[index]}</span>
         </figcaption>
       )}
       {!hasCaption && hasCredit && (
         <figcaption className={captionCss.join(' ')}>
-          <span className="credit">{creditList[index]}</span>
+          <span className={creditCss}>{creditList[index]}</span>
         </figcaption>
       )}
       {hasCaption && !hasCredit && (

package/components/slideshow/imageslideshow.mjs

@@ -4,7 +4,7 @@ import * as styles from "../../styles/modules/imageslideshow.module.less"
 import * as imageStyles from "../../styles/modules/topperimage.module.less"
 import { TransitionGroup, CSSTransition } from "react-transition-group"
 
-const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
+const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInverted = false }) => {
   const [index, setIndex] = useState(0);
   const timeoutRef = useRef(null);
 
@@ -31,7 +31,6 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
   const getContainerClass = () => {
     switch (topperStyle) {
       case "stacked":
-        return styles.containerStacked;
       case "full-screen":
         return styles.containerStacked;
       default:
@@ -45,6 +44,10 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
         return styles.imageWrapperStacked;
       case "full-screen":
         return styles.imageWrapperFullscreen;
+      case "side-by-side":
+        return styles.imageWrapperSideBySide;
+      case "side-by-side-portrait":
+        return styles.imageWrapperSideBySidePortrait;
       default:
         return "";
     }
@@ -56,6 +59,18 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
         return [imageStyles.cForceAspectRatio];
       case "full-screen":
         return [imageStyles.cImgSlideshowFullscreen];
+      case "side-by-side":
+        return [imageStyles.cImgSlideshowSideBySide].concat(
+          // Add styling for left padding on topper image
+          (isLayoutInverted) ? [imageStyles.cLargePaddingLeft] : [imageStyles.cLargePaddingRight]
+        );
+      case "side-by-side-portrait":
+        return [imageStyles.cImgSlideshowSideBySidePortrait].concat(
+          [
+            // Add styling for left padding on image caption
+            (isLayoutInverted) ? [] : [styles.sideBySidePortraitMarginLeft]
+          ]
+        );
       default:
         return [""];
     }

package/components/topper2.mjs

@@ -10,7 +10,9 @@ import * as imageStyles from "../styles/modules/topperimage.module.less"
 const Topper2 = ({ settings, wcmData }) => {
   const {
     Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Image_Caption, Image_Credits,
-    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors
+    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
+    HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
+    Topper_Background_Color
   } = settings
 
   const headerDekStyleList = () => {
@@ -35,6 +37,19 @@ const Topper2 = ({ settings, wcmData }) => {
           ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
         ];
       case "side-by-side":
+        return [
+          topperStyles.headerDekSideBySide,
+          // Add styling for left padding on header-deck
+          ... (Inverted_Layout === "headerdek-right-image-left") ? [topperStyles.largePaddingRight] : [topperStyles.largePaddingLeft]
+        ];
+      case "side-by-side-portrait":
+        return [
+          topperStyles.headerDekSideBySide,
+          // Add styling for left padding on header-deck
+          ... (Inverted_Layout === "headerdek-right-image-left") ? [topperStyles.largePaddingRight] : [topperStyles.largePaddingLeft]
+        ];
+      default:
+        console.error(`${Topper_Style} is not a valid topper style!`)
         return [];
     }
   }
@@ -49,7 +64,7 @@ const Topper2 = ({ settings, wcmData }) => {
   }
 
   const headerStyleList = () => {
-    let defaultStyles;
+    let defaultStyles = [];
     switch (Topper_Style) {
       case "stacked":
         defaultStyles = [];
@@ -61,7 +76,8 @@ const Topper2 = ({ settings, wcmData }) => {
         defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss()];
         break;
       case "side-by-side":
-        defaultStyles = [];
+      case "side-by-side-portrait":
+        defaultStyles = ["left"];
         break;
     }
 
@@ -83,11 +99,14 @@ const Topper2 = ({ settings, wcmData }) => {
       case "full-screen":
         return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss()];
       case "side-by-side":
-        return ["deck"];
+      case "side-by-side-portrait":
+        return ["deck left"];
+      default:
+        return [""]
     }
   }
 
-  /** get text alignment based on header-deck position **/
+  /** Get text alignment based on header-deck position **/
   const fullScreenTextAlignCss = () => {
     switch (HeaderDek_Horizontal_Position) {
       case "left": return topperStyles.textAlignLeft;
@@ -96,6 +115,27 @@ const Topper2 = ({ settings, wcmData }) => {
     }
   }
 
+  /** Add styling for text color on topper slideshow captions. Note that the credits 
+   * are grey when the caption is black and white when the captions are white. */
+  const sideBySideCapCredColorCss = () => {
+    return (Inverted_Text_Color === "black") ? topperStyles.captionTextColor : topperStyles.captionTextColorImportant;
+  }
+
+  /** Add styling for left padding on topper slideshow captions */
+  const sideBySideCapCredPaddingCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.captionLargePaddingLeft : topperStyles.captionLargePaddingRight
+  }
+
+  /** Add styling for left padding on topper slideshow captions */
+  const sideBySidePortraitCapCredPaddingCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.captionSmallPaddingLeft : topperStyles.captionSideBySidePortraitPadding;
+  }
+
+  /** Add styling for float position for side-by-side-portrait image */
+  const sideBySidePortraitFloatCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.floatLeftWhenDesktop : topperStyles.floatRightWhenDesktop;
+  }
+
   /** Converts wcm string from spreadsheet into a list of WCM ids */
   const getWcmIdList = (listStr) => {
     return listStr.split(";").map((d) => parseInt(d));
@@ -119,15 +159,52 @@ const Topper2 = ({ settings, wcmData }) => {
     return list;
   }
 
-  const ImageHTML = () => <TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} />
-  const FullScreenImageHTML = () => <TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} overrideCssList={[imageStyles.cImgFullscreen]} />
-  const ImageSlideshowHTML = () =>
-    <ImageSlideshow
-      wcmData={wcmData}
-      imageList={wcmIdList}
-      altList={convertStringToList(Image_Alt, wcmIdList.length)}
-      topperStyle={Topper_Style}
-    />
+  /* Returns the corresponding image HTML for each topper style and slideshow status */
+  const getImageHTML = (isSlideshow) => {
+    if (isSlideshow) return (
+      <ImageSlideshow
+        wcmData={wcmData}
+        imageList={wcmIdList}
+        altList={convertStringToList(Image_Alt, wcmIdList.length)}
+        topperStyle={Topper_Style}
+        isLayoutInverted={(Inverted_Layout === "headerdek-right-image-left")}
+      />
+    )
+
+    switch (Topper_Style) {
+      case "stacked":
+        return (<TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} />)
+      case "full-screen":
+        return (<TopperImage
+          wcm={Image}
+          alt={Image_Alt}
+          wcmData={wcmData}
+          overrideCssList={[imageStyles.cImgFullscreen]}
+        />)
+      case "side-by-side":
+        return (
+          <TopperImage
+            wcm={Image}
+            alt={Image_Alt}
+            wcmData={wcmData}
+            containerCssList={[imageStyles.cContainerSideBySide]}
+            overrideCssList={[imageStyles.cImgSideBySide]}
+          />)
+      case "side-by-side-portrait":
+        return (
+          <TopperImage
+            wcm={Image}
+            alt={Image_Alt}
+            wcmData={wcmData}
+            containerCssList={[imageStyles.cContainerSideBySidePortrait, sideBySidePortraitFloatCss()]}
+            overrideCssList={[imageStyles.cImgSideBySidePortrait]}
+          />
+        )
+      case "no-visual":
+      default:
+        return null
+    }
+  }
 
   const wcmIdList = getWcmIdList(Image);
   const TopperHtml = () => {
@@ -138,15 +215,14 @@ const Topper2 = ({ settings, wcmData }) => {
           <>
             <div className={containerCss}>
               <figure className={`topper-image ${topperStyles.imageFullScreen}`} aria-labelledby="topperCaptionText">
-                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
-                {!isSlideshow(wcmIdList) && <FullScreenImageHTML />}
+                {getImageHTML(isSlideshow(wcmIdList))}
 
                 {/* This caption-credit only shows when the screen size is tablet or mobile */}
                 {isSlideshow(wcmIdList) &&
                   <CaptionCreditSlideshow
                     captionList={convertStringToList(Image_Caption, wcmIdList.length)}
                     creditList={convertStringToList(Image_Credits, wcmIdList.length)}
-                    extraStyles={topperStyles.hideWhenDesktop}
+                    extraStyles={[topperStyles.hideWhenDesktop]}
                   />
                 }
                 {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={topperStyles.hideWhenDesktop} />}
@@ -193,8 +269,8 @@ const Topper2 = ({ settings, wcmData }) => {
                 />
               </div>
               <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
-                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
-                {!isSlideshow(wcmIdList) && <ImageHTML />}
+                {getImageHTML(isSlideshow(wcmIdList))}
+
                 {isSlideshow(wcmIdList) &&
                   <CaptionCreditSlideshow
                     captionList={convertStringToList(Image_Caption, wcmIdList.length)}
@@ -202,7 +278,7 @@ const Topper2 = ({ settings, wcmData }) => {
                     extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}/>}
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
               </figure>
             </div>
           </>
@@ -227,18 +303,90 @@ const Topper2 = ({ settings, wcmData }) => {
             </div>
           </>
         );
+
+      case "side-by-side":
+        let figureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySideSlideshow}` : `${topperStyles.imageSideBySide}`;
+        let sideBySideContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySide} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySide}`;
+        setBackgroundAndTextColor();
+        return (
+          <div className={sideBySideContainerCss}>
+            <div className={headerDekStyleList().join(' ')}>
+              <Heading
+                level={1}
+                text={Title}
+                className={headerStyleList().join(' ')}
+              />
+              <Heading
+                level={2}
+                text={Deck}
+                className={deckStyleList().join(' ')}
+              />
+            </div>
+            <figure className={figureCss}>
+              {getImageHTML(isSlideshow(wcmIdList))}
+
+              {isSlideshow(wcmIdList) &&
+                <CaptionCreditSlideshow
+                  captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                  creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                  extraStyles={[topperStyles.slideshowCaptionSideBySide, sideBySideCapCredColorCss(), sideBySideCapCredPaddingCss()]}
+                  creditStyles={[sideBySideCapCredColorCss()]}
+                />
+              }
+              {!isSlideshow(wcmIdList) && <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 sideBySidePortraitContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySidePortrait} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySidePortrait}`;
+        setBackgroundAndTextColor();
+        return (
+          <div className={topperStyles.fullWidthContainer}>
+            <div className={sideBySidePortraitContainerCss}>
+              <div className={headerDekStyleList().join(' ')}>
+                <Heading
+                  level={1}
+                  text={Title}
+                  className={headerStyleList().join(' ')}
+                />
+                <Heading
+                  level={2}
+                  text={Deck}
+                  className={deckStyleList().join(' ')}
+                />
+              </div>
+              <figure className={portraitFigureCss}>
+                {getImageHTML(isSlideshow(wcmIdList))}
+
+                {isSlideshow(wcmIdList) &&
+                  <CaptionCreditSlideshow
+                    captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                    creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                    extraStyles={[topperStyles.slideshowCaptionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitCapCredPaddingCss()]}
+                    creditStyles={[sideBySideCapCredColorCss()]}
+                  />
+                }
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+              </figure>
+            </div>
+          </div>
+        );
     }
   }
 
   /** Calculate offsets for header-deck container based on the spreadsheet, for full-screen toppers only **/
   const calculatefullScreenOffsets = () => {
-    var r = document.querySelector(':root');
+    let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
 
     let verticalOffset = convertStringToNumber(HeaderDek_Vertical_Offset, (HeaderDek_Vertical_Position === "bottom"));
     let horizontalOffset = convertStringToNumber(HeaderDek_Horizontal_Offset, (HeaderDek_Horizontal_Position === "right"));
 
-    r.style.setProperty('--headerDek-vertical-offset', verticalOffset + "px");
-    r.style.setProperty('--headerDek-horizontal-offset', horizontalOffset + "px");
+    if (r) {
+      r.style.setProperty('--headerDek-vertical-offset', verticalOffset + "px");
+      r.style.setProperty('--headerDek-horizontal-offset', horizontalOffset + "px");
+    }
   }
 
   /** Convert offset values from the spreadsheet into Number type **/
@@ -257,6 +405,19 @@ const Topper2 = ({ settings, wcmData }) => {
     return num;
   }
 
+  /** Sets the background and text color in topper for side-by-side and side-by-side-portrait topper styles **/
+  const setBackgroundAndTextColor = () => {
+    let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+
+    if (r && Topper_Background_Color) {
+      r.style.setProperty('--container-background-color', Topper_Background_Color)
+    }
+
+    if (r && Inverted_Text_Color) {
+      r.style.setProperty('--side-by-side-text-color', Inverted_Text_Color)
+    }
+  }
+
   return (
     <TopperHtml />
   )

package/components/topperimage.mjs

@@ -17,7 +17,7 @@ const ImageHTML = ({ fullPath, imageRez, alt, overrideCssList }) => {
   )
 }
 
-const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
+const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], overrideCssList = [] }) => {
   // When the wrapping div is rendered, we're going to figure out the best size for this image to be
   let picRef = useRef(null)
   let [imageRez, setImageRez] = useState(0)
@@ -61,6 +61,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
   // This calculation is not used for the topper impl, but keeping it here just in case
   // it is needed for the general WCMImage utils migration
   let photoRatio = "56.25%"; // Default to 16/9
+  let photoViewport = "56.25vw";
   let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
   if (!ratio) {
     let matchedPhoto = wcmData.nodes.find((item) => {
@@ -72,10 +73,12 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
     if (matchedPhoto) {
       // Set ratio of the actual photo like a legit hacker
       photoRatio = (matchedPhoto.photo.ratio * 100) + "%";
+      photoViewport = (matchedPhoto.photo.ratio * 50) + "vw";
 
       // If css :root is available, set the photo ratio
       if (r) {
         r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
+        r.style.setProperty('--img-height-viewport', photoViewport);
       }
 
       fullPath = matchedPhoto.photo.full_path;
@@ -90,6 +93,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
     // If css :root is available, set the photo ratio
     if (r) {
       r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
+      r.style.setProperty('--img-height-viewport', photoViewport);
     }
   }
 
@@ -99,7 +103,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
   }
 
   return (
-    <div ref={picRef}>
+    <div className={containerCssList.join(' ')} ref={picRef}>
       <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} overrideCssList={overrideCssList} />
     </div>
   )
@@ -110,6 +114,7 @@ TopperImage.propTypes = {
   alt: PropTypes.string.isRequired,
   ratio: PropTypes.string, // This prop is currently not being used, might be ok to delete? 
   wcmData: PropTypes.object,
+  containerCssList: PropTypes.array,
   overrideCssList: PropTypes.array
 }
 

package/example/gatsby-node.js

@@ -4,12 +4,12 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
-var {requestImage} = require("./tasks/node-helpers");
+var { requestImage } = require("./tasks/node-helpers");
 let topperData = require("./src/data/topper2_settings.sheet.json");
 
 // Import all the WCM photos you'd like to use in this project
 // NOTE: Leave this as an empty array if you aren't importing any WCM photos, but you won't be able to use the WCMImage component
-const wcmPhotos = [20374215]
+const wcmPhotos = ["20374215"]
 
 const addValidWcmId = (numStr, wcmPhotos) => {
   let isNum = /^\d+$/.test(numStr.trim())
@@ -23,11 +23,10 @@ if (numStr.includes(";")) {
   for (var num of numList) {
     addValidWcmId(num, wcmPhotos);
   }
-} else { 
+} else {
   addValidWcmId(numStr, wcmPhotos);
 }
 
-
 // Create nodes so GraphQL can access
 exports.sourceNodes = async ({
   actions,