@mindful-web/marko-web-theme-monorail 1.0.0

package/components/nodes/product-feed-content.marko.js

@@ -0,0 +1,137 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/nodes/product-feed-content.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_image_module = require("@mindful-web/image"),
+    image_module = module_image_module.default || module_image_module,
+    buildImgixUrl = module_image_module.buildImgixUrl,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    section_sponsor_template = require("./components/section-sponsor.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    section_sponsor_tag = marko_loadTag(section_sponsor_template),
+    marko_web_content_short_name_template = require("@mindful-web/marko-web/components/element/content/short-name.marko"),
+    marko_web_content_short_name_tag = marko_loadTag(marko_web_content_short_name_template),
+    marko_web_content_teaser_template = require("@mindful-web/marko-web/components/element/content/teaser.marko"),
+    marko_web_content_teaser_tag = marko_loadTag(marko_web_content_teaser_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_img_template = require("@mindful-web/marko-web/components/element/img.marko"),
+    marko_web_img_tag = marko_loadTag(marko_web_img_template),
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const content = getAsObject(input, "node");
+
+  const primaryImage = getAsObject(content, "primaryImage");
+
+  const primarySection = getAsObject(content, "primarySection");
+
+  const withSection = defaultValue(input.withSection, true);
+
+  const imageOptions = {
+  w: 176,
+  h: 176,
+  fit: "crop",
+};
+
+  const blockName = "product-feed-content-node";
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      renderBody: function(out) {
+        marko_web_element_tag({
+            name: "contents",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              marko_web_element_tag({
+                  name: "body",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    if (withSection) {
+                      section_sponsor_tag({
+                          blockName: blockName,
+                          section: primarySection,
+                          labels: content.labels
+                        }, out, __component, "3");
+                    }
+
+                    marko_web_content_short_name_tag({
+                        tag: "h5",
+                        blockName: blockName,
+                        obj: content,
+                        link: true
+                      }, out, __component, "4");
+
+                    marko_web_content_teaser_tag({
+                        blockName: blockName,
+                        obj: content,
+                        link: true
+                      }, out, __component, "5");
+                  }
+                }, out, __component, "2");
+            }
+          }, out, __component, "1");
+
+        marko_web_element_tag({
+            name: "image-wrapper",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              if (primaryImage.src) {
+                const src = buildImgixUrl(primaryImage.src, imageOptions);
+
+                const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+
+                marko_web_link_tag({
+                    href: get(content, "siteContext.path"),
+                    renderBody: function(out) {
+                      marko_web_img_tag({
+                          lazyload: true,
+                          src: src,
+                          srcset: srcset,
+                          alt: primaryImage.alt,
+                          class: [
+                              blockName + "__image"
+                            ]
+                        }, out, __component, "8");
+                    }
+                  }, out, __component, "7");
+              }
+            }
+          }, out, __component, "6");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/nodes/product-feed-content.marko",
+    tags: [
+      "./components/section-sponsor.marko",
+      "@mindful-web/marko-web/components/element/content/short-name.marko",
+      "@mindful-web/marko-web/components/element/content/teaser.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/img.marko",
+      "@mindful-web/marko-web/components/element/link.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/nodes/section-feed-content.marko

@@ -0,0 +1,256 @@
+import { getAsObject, getAsArray, get } from "@mindful-web/object-path";
+import { buildImgixUrl } from "@mindful-web/image";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site, i18n } = out.global;
+
+$ const content = getAsObject(input, "node");
+$ const { company } = content;
+$ const authors = getAsArray(content, "authors.edges");
+$ const contentType = defaultValue(content.type, 'article');
+$ const modifiers = [...getAsArray(input, "modifiers"), `${contentType}-content-type`]
+$ const withCompany = (company) ? defaultValue(input.withCompany, true) : false;
+$ const withAuthors = (authors.length) ? defaultValue(input.withAuthors, false) : false;
+$ const bylinePrefix = withAuthors ? defaultValue(input.bylinePrefix, "By ") : "";
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+$ const containerAttrs = getAsObject(input, "containerAttrs");
+$ const linkAttrs = getAsObject(input, "linkAttrs");
+
+$ const withBody = defaultValue(input.withBody, false);
+$ const withAddress = defaultValue(input.withAddress, (content.type === "company"));
+$ const withDates = defaultValue(input.withDates, true);
+$ const withSpeakers = defaultValue(input.withSpeakers, true);
+$ const dateFormat = defaultValue(input.dateFormat, "MMMM D, YYYY");
+$ const multiDateFormats = input.multiDateFormats;
+
+$ const isUpcoming = content.startDate > Date.now();
+$ if (isUpcoming) modifiers.push("upcoming");
+$ const withSection = defaultValue(input.withSection, true);
+$ const withSponsorLogo = defaultValue(input.withSponsorLogo, false);
+$ const withTeaser = defaultValue(input.withTeaser, true);
+$ const displayImage = defaultValue(input.displayImage, true);
+$ const lazyload = defaultValue(input.lazyload, true);
+// linkOffsite is an object like the following:
+/**
+  {
+    webinar: 'linkUrl',
+    event: 'website'
+  }
+  Keys are content types (all lowercase), values are the field to use when available on that type.
+**/
+$ const linkOffsite = getAsObject(site, "config.linkOffsite");
+$ const linkField = get(linkOffsite, contentType);
+$ const linkTarget = linkField && get(content, linkField) ? defaultValue(get(linkOffsite, "target"), "") : "";
+
+$ const imageOptions = {
+  w: 250,
+  h: 167,
+  fit: "crop",
+  // account for and apply fill & fill color of transparent if fit is fill.
+  ...(input.imageOptions && { ...getAsObject(input, "imageOptions") }),
+};
+$ const mobileImageOptions = {
+  ...imageOptions,
+  w: 112,
+  h: 112,
+  ...(input.mobileImageOptions && { ...getAsObject(input, "mobileImageOptions") }),
+}
+
+$ const blockName = "section-feed-content-node";
+
+<marko-web-block name=blockName modifiers=modifiers attrs=containerAttrs>
+  <marko-web-element block-name=blockName name="contents">
+    <marko-web-element block-name=blockName name="body">
+      <if(input.sponsoredBy)>
+        <marko-web-element block-name=blockName name="sponsored-by">
+          ${i18n("Sponsored By")} ${input.sponsoredBy}
+        </marko-web-element>
+      </if>
+      <else-if(withSection)>
+        <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+      </else-if>
+      <marko-web-content-short-name
+        tag="h5"
+        block-name=blockName
+        obj=content
+        link={ field: linkField, target: linkTarget, attrs: linkAttrs }
+      />
+      <if(withAuthors)>
+        <marko-web-element block-name=blockName name="content-authors">
+          <marko-web-obj-nodes|{ node, index, length }| type="content" block-name=blockName obj=content field="authors" tag="span">
+            <if(index === 0)>
+              <marko-web-element tag="span" block-name=blockName name="content-authors-label">
+                ${bylinePrefix}
+              </marko-web-element>
+            </if>
+            <marko-web-content-name tag="span" block-name=blockName obj=node link=true />
+            <if(index + 1 !== length)>, </if>
+          </marko-web-obj-nodes>
+        </marko-web-element>
+      </if>
+      <if(withCompany)>
+        <marko-web-content-name class=`${blockName}__content-company` obj=content.company link=true />
+      </if>
+      <if(withTeaser)>
+        <marko-web-content-teaser
+          block-name=blockName
+          obj=content
+          link={ field: linkField, target: linkTarget, attrs: linkAttrs }
+        />
+        <if(input.teaserCTA)>
+          <marko-web-link
+            class="teaser-link"
+            href=content.siteContext.path
+            title=content.shortName
+          >
+            ${input.teaserCTA}
+          </marko-web-link>
+        </if>
+      </if>
+      <if(withBody)>
+        <marko-web-content-body
+          block-name=blockName
+          obj=content
+        />
+      </if>
+      <if(withAddress && (content.address1 || content.address2 || content.cityStateZip))>
+        <marko-web-block name=blockName modifiers=["contact-info"] >
+          <marko-web-content-address1 block-name=blockName obj=content />
+          <marko-web-content-address2 block-name=blockName obj=content />
+          <marko-web-content-city-state-zip block-name=blockName obj=content />
+        </marko-web-block>
+      </if>
+      <else-if(withDates && input.date)>
+        <${input.date} />
+      </else-if>
+      <else-if(withDates && multiDateFormats && (content.startDate || content.endDate))>
+        <marko-web-element block-name=blockName name="multidates" modifiers=modifiers >
+          <for|dateObj| of=multiDateFormats>
+            $ const dateFormat =  dateObj.dateFormat || dateFormat;
+            $ const timezone = dateObj.timezone  || "America/Chicago";
+            <div class=`${blockName}__content-event-dates`>
+              <marko-web-content-start-date tag="span" block-name=blockName obj=content format=dateFormat timezone=timezone />
+              <marko-web-content-end-date tag="span" block-name=blockName obj=content format=dateFormat timezone=timezone />
+            </div>
+          </for>
+        </marko-web-element>
+      </else-if>
+      <else-if(withDates && (content.startDate || content.endDate))>
+        <div class=`${blockName}__content-event-dates`>
+          <marko-web-content-start-date tag="span" block-name=blockName obj=content format=dateFormat />
+          <marko-web-content-end-date tag="span" block-name=blockName obj=content format=dateFormat />
+        </div>
+      </else-if>
+      <else-if(withDates && multiDateFormats)>
+        <marko-web-element block-name=blockName name="multidates" modifiers=modifiers >
+          <for|dateObj| of=multiDateFormats>
+            $ const dateFormat = dateObj.dateFormat || dateFormat;
+            $ const timezone = dateObj.timezone  || "America/Chicago";
+            <marko-web-content-published
+              block-name=blockName
+              obj=content
+              format=dateFormat
+              timezone=timezone
+            />
+          </for>
+        </marko-web-element>
+      </else-if>
+      <else-if(withDates)>
+        <marko-web-content-published
+          block-name=blockName
+          obj=content
+          format=dateFormat
+        />
+      </else-if>
+
+      <if(withSpeakers && getAsArray(content, 'speakers.edges').length && content.type === 'webinar')>
+        <marko-web-element block-name=blockName name="content-speakers">
+          <marko-web-obj-nodes|{ node, index, length }| type="content" block-name=blockName obj=content field="speakers" tag="span">
+            <if(index === 0)>
+              <marko-web-element tag="span" block-name=blockName name="content-speakers-label">
+                <if(length === 1)>Speaker: </if>
+                <else>Speakers: </else>
+              </marko-web-element>
+            </if>
+            <marko-web-content-name tag="span" block-name=blockName obj=node link=false />
+            <span>, </span>
+            <marko-web-content-title tag="span" block-name=blockName obj=node />
+            <if(index + 1 !== length)>; </if>
+          </marko-web-obj-nodes>
+        </marko-web-element>
+      </if>
+
+      $ const hasSponsorsImage = getAsArray(content, "sponsors.edges").map(edge => getAsObject(edge, "node")).some(({primaryImage}) => primaryImage);
+      $ const sponsorsModifiers = hasSponsorsImage ? ['has-logo'] : [];
+      <marko-web-element block-name=blockName name="content-sponsors" modifiers=sponsorsModifiers>
+        <marko-web-obj-nodes|{ node, index, length }| type="content" block-name=blockName obj=content field="sponsors" tag="span">
+          <if(index === 0)>
+            <marko-web-element tag="span" block-name=blockName name="content-sponsors-label">${i18n("Sponsored By")}: </marko-web-element>
+          </if>
+          <if(withSponsorLogo && node.primaryImage)>
+            $ const src = buildImgixUrl(node.primaryImage.src, imageOptions, null, true);
+            $ const srcset = [src, `${buildImgixUrl(src, { dpr: 2 })} 2x`];
+
+            $ const srcMobile = buildImgixUrl(node.primaryImage.src, mobileImageOptions, null, true);
+            $ const srcsetMobile = [srcMobile, `${buildImgixUrl(srcMobile, { dpr: 2 })} 2x`];
+            $ const link = linkField && get(node, linkField) ? get(node, linkField) : get(node, "siteContext.path");
+            <marko-web-picture>
+              <@link href=link target=linkTarget attrs=linkAttrs />
+              <@source srcset=srcset media="(min-width: 768px)" width=120 height=80 />
+              <@image
+                src=srcMobile
+                srcset=srcsetMobile
+                class=[`${blockName}__image`]
+                alt=node.primaryImage.alt
+                lazyload=lazyload
+                attrs={ width: "120", height: "80" }
+              />
+            </marko-web-picture>
+          </if>
+          <else>
+            <marko-web-content-name tag="span" block-name=blockName obj=node link=true />
+          </else>
+
+          <if(index + 1 !== length && !hasSponsorsImage)>
+            <marko-web-element tag="span" block-name=blockName name="contentsponsors-seporator">, </marko-web-element>
+          </if>
+        </marko-web-obj-nodes>
+      </marko-web-element>
+      <!-- Force display of CTA button on webinars -->
+      <if(withDates && content.type === "webinar")>
+        $ const linkUrl = (content.linkUrl) ? content.linkUrl : get(content, "siteContext.path");
+        $ const target = (content.linkUrl) ? "_blank" : "_self";
+        $ const obj = { ...content, linkUrl };
+        <theme-content-link-url
+          obj=obj
+          label=(isUpcoming ? `${i18n("Register for Webinar")}` : `${i18n("View Webinar")}`)
+          target=target
+        />
+      </if>
+    </marko-web-element>
+  </marko-web-element>
+  <if(displayImage && primaryImage.src)>
+    <marko-web-element block-name=blockName name="image-wrapper">
+      $ const isLogo = content.type === "company" ? true : get(primaryImage, "isLogo");
+      $ const src = buildImgixUrl(primaryImage.src, imageOptions, null, isLogo);
+      $ const srcset = [src, `${buildImgixUrl(src, { dpr: 2 })} 2x`];
+
+      $ const srcMobile = buildImgixUrl(primaryImage.src, mobileImageOptions, null, isLogo);
+      $ const srcsetMobile = [srcMobile, `${buildImgixUrl(srcMobile, { dpr: 2 })} 2x`];
+      $ const link = linkField && get(content, linkField) ? get(content, linkField) : get(content, "siteContext.path");
+      <marko-web-picture>
+        <@link href=link target=linkTarget attrs=linkAttrs />
+        <@source srcset=srcset media="(min-width: 768px)" width=imageOptions.w height=imageOptions.h />
+        <@image
+          src=srcMobile
+          srcset=srcsetMobile
+          class=[`${blockName}__image`]
+          alt=primaryImage.alt
+          lazyload=lazyload
+          attrs={ width: mobileImageOptions.w, height: mobileImageOptions.h }
+        />
+      </marko-web-picture>
+    </marko-web-element>
+  </if>
+</marko-web-block>