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

package/components/directory-facets/facet-list/facet-list.marko.js

@@ -0,0 +1,140 @@
+// 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/directory-facets/facet-list/facet-list.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    theme_menu_toggle_button_template = require("../../menu-toggle-button.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_menu_toggle_button_tag = marko_loadTag(theme_menu_toggle_button_template),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    theme_directory_facet_list_template = require("./facet-list.marko"),
+    theme_directory_facet_list_tag = marko_loadTag(theme_directory_facet_list_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const block = "directory-facets";
+
+  const {
+  facets,
+  activeId,
+  aliases,
+  initiallyExpanded,
+  searchQuery,
+  contentTypes
+} = input;
+
+  const isActiveId = ({id}) => (activeId && (`${activeId}` === `${id}`));
+
+  facets.sort((a, b) => a.name.localeCompare(b.name));
+
+  if (facets && facets.length) {
+    const expandedClass = (initiallyExpanded) ? `${block}__list ${block}__list--open` : `${block}__list`;
+
+    out.w("<div" +
+      marko_classAttr(expandedClass) +
+      ">");
+
+    var $for$0 = 0;
+
+    marko_forOf(facets, function(facet) {
+      const children = getAsArray(facet, "children.edges").map(({ node }) => node);
+
+      const isOpen = aliases.includes(facet.alias);
+
+      const isActive = isActiveId(facet);
+
+      const classNames = [`${block}__item`, `${block}__item--${facet.id}`];
+
+      const linkClasses = [`${block}__link`]
+
+      if (isOpen) classNames.push(`${block}__item--open`);
+
+      if (isActive) linkClasses.push(`${block}__link--active`);
+
+      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+      out.w("<div" +
+        marko_classAttr(classNames) +
+        ">");
+
+      const querySringParams = [];
+
+      if (searchQuery) querySringParams.push(`searchQuery=${searchQuery}`)
+
+      if (contentTypes) querySringParams.push(`contentTypes=${contentTypes}`)
+
+      const facetLink = querySringParams ? `/${facet.alias}?${querySringParams.join('&')}` : `/${facet.alias}`;
+
+      out.w("<a" +
+        marko_classAttr(linkClasses) +
+        marko_attr("href", facetLink) +
+        ">" +
+        marko_escapeXml(facet.name) +
+        "</a>");
+
+      if (children.length) {
+        theme_menu_toggle_button_tag({
+            className: block + "__toggle",
+            targets: [
+                (("." + block) + "__item--") + facet.id
+              ],
+            toggleClass: block + "__item--open",
+            initiallyExpanded: isOpen,
+            iconModifiers: [
+                "sm"
+              ],
+            iconName: "plus",
+            expandedIconName: "dash"
+          }, out, __component, "3" + $keyScope$0);
+      }
+
+      if (isActive) {
+        marko_web_browser_component_tag({
+            name: "GlobalAutoScroll",
+            props: {
+                containerTarget: ((("." + block) + " > .") + block) + "__list",
+                elementTarget: ("." + block) + "__link--active",
+                offset: -12
+              }
+          }, out, __component, "4" + $keyScope$0);
+      }
+
+      theme_directory_facet_list_tag({
+          initiallyExpanded: false,
+          facets: children,
+          activeId: activeId,
+          aliases: aliases,
+          searchQuery: searchQuery
+        }, out, __component, "5" + $keyScope$0);
+
+      out.w("</div>");
+    });
+
+    out.w("</div>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/directory-facets/facet-list/facet-list.marko",
+    tags: [
+      "../../menu-toggle-button.marko",
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "./facet-list.marko"
+    ]
+  };

package/components/directory-facets/facet-list/marko.json

@@ -0,0 +1,23 @@
+{
+  "<theme-directory-facet-list>": {
+    "template": "./facet-list.marko",
+    "@content-types": "string",
+    "@search-query": "string",
+    "@facets": {
+      "type": "array",
+      "required": true
+    },
+    "@active-id": {
+      "type": "string",
+      "required": true
+    },
+    "@aliases": {
+      "type": "array",
+      "required": true
+    },
+    "@initially-expanded": {
+      "type": "boolean",
+      "default-value": false
+    }
+  }
+}

package/components/directory-facets/facet.marko

@@ -0,0 +1,15 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const facets = getAsArray(input, "facets");
+$ const aliases = getAsArray(input, "aliases");
+<theme-directory-facet-container
+  facets=facets
+  aliases=aliases
+  content-type=input.contentType
+  content-types=input.contentTypes
+  search-query=input.searchQuery
+  title=input.title
+  description=input.description
+  active-id=input.activeId
+  initially-expanded=input.initiallyExpanded
+/>

package/components/directory-facets/facet.marko.js

@@ -0,0 +1,44 @@
+// 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/directory-facets/facet.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    theme_directory_facet_container_template = require("./facet-container/facet-container.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_directory_facet_container_tag = marko_loadTag(theme_directory_facet_container_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const facets = getAsArray(input, "facets");
+
+  const aliases = getAsArray(input, "aliases");
+
+  theme_directory_facet_container_tag({
+      initiallyExpanded: input.initiallyExpanded,
+      facets: facets,
+      aliases: aliases,
+      contentType: input.contentType,
+      contentTypes: input.contentTypes,
+      searchQuery: input.searchQuery,
+      title: input.title,
+      description: input.description,
+      activeId: input.activeId
+    }, 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/directory-facets/facet.marko",
+    tags: [
+      "./facet-container/facet-container.marko"
+    ]
+  };

package/components/directory-facets/find-active-facet.js

@@ -0,0 +1,22 @@
+const build = (facets, entries, total = []) => {
+  facets.forEach((facet) => {
+    const { id, name, values } = facet;
+    const current = entries ? [{ id, name }, ...entries] : [{ id, name }];
+    total.push(current);
+    if (Array.isArray(values) && values.length) build(values, current, total);
+  });
+  return total;
+};
+
+module.exports = (facets, activeId) => {
+  const map = new Map();
+  const flat = build(facets);
+  flat.forEach((row) => {
+    const primary = row.shift();
+    const parentIds = row.map((r) => r.id);
+    map.set(`${primary.id}`, { ...primary, parentIds, activeIds: [primary.id, ...parentIds] });
+  });
+  const active = map.get(`${activeId}`);
+  if (active) return active;
+  return { parentIds: [], activeIds: [] };
+};

package/components/directory-facets/index.marko

@@ -0,0 +1,29 @@
+import { getAsArray } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import categorySectionsFragment from "../../graphql/fragments/category-sections"
+
+$ const activeId = defaultValue(input.activeId, null);
+$ const aliases = defaultValue(input.aliases, []);
+$ const contentType = defaultValue(input.contentType, "");
+$ const contentTypes = defaultValue(input.contentTypes, null);
+$ const searchQuery = defaultValue(input.searchQuery, null);
+$ const primaryAlias = defaultValue(input.primaryAlias, "directory");
+$ const title = defaultValue(input.title, "");
+$ const description = defaultValue(input.description, "");
+$ const withToggle = defaultValue(input.withToggle, false);
+<marko-web-query|{ node }|
+  name="website-section"
+  params={ alias: primaryAlias, queryFragment: categorySectionsFragment }
+>
+  $ const children = getAsArray(node, "children.edges").map(({ node }) => node);
+  <theme-directory-facet
+    title=title
+    description=description
+    facets=children
+    active-id=activeId
+    aliases=aliases
+    search-query=searchQuery
+    content-types=contentTypes
+    initially-expanded=input.initiallyExpanded
+  />
+</marko-web-query>

package/components/directory-facets/index.marko.js

@@ -0,0 +1,77 @@
+// 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/directory-facets/index.marko",
+    marko_component = require("./index.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_categorySectionsFragment = require("../../graphql/fragments/category-sections"),
+    categorySectionsFragment = module_categorySectionsFragment.default || module_categorySectionsFragment,
+    theme_directory_facet_template = require("./facet.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_directory_facet_tag = marko_loadTag(theme_directory_facet_template),
+    marko_web_query_template = require("@mindful-web/marko-core/components/queries/index.marko"),
+    marko_web_query_tag = marko_loadTag(marko_web_query_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const activeId = defaultValue(input.activeId, null);
+
+  const aliases = defaultValue(input.aliases, []);
+
+  const contentType = defaultValue(input.contentType, "");
+
+  const contentTypes = defaultValue(input.contentTypes, null);
+
+  const searchQuery = defaultValue(input.searchQuery, null);
+
+  const primaryAlias = defaultValue(input.primaryAlias, "directory");
+
+  const title = defaultValue(input.title, "");
+
+  const description = defaultValue(input.description, "");
+
+  const withToggle = defaultValue(input.withToggle, false);
+
+  marko_web_query_tag({
+      collapsible: true,
+      name: "website-section",
+      params: {
+          alias: primaryAlias,
+          queryFragment: categorySectionsFragment
+        },
+      renderBody: function(out, { node }) {
+        const children = getAsArray(node, "children.edges").map(({ node }) => node);
+
+        theme_directory_facet_tag({
+            initiallyExpanded: input.initiallyExpanded,
+            title: title,
+            description: description,
+            facets: children,
+            activeId: activeId,
+            aliases: aliases,
+            searchQuery: searchQuery,
+            contentTypes: contentTypes
+          }, out, __component, "1");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/directory-facets/index.marko",
+    component: "./index.marko",
+    tags: [
+      "./facet.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/directory-facets/marko.json

@@ -0,0 +1,40 @@
+{
+  "taglib-imports": [
+    "./facet-list/marko.json",
+    "./facet-container/marko.json"
+  ],
+  "<theme-directory-facet>": {
+    "template": "./facet.marko",
+    "@facets": "array",
+    "@content-type": "string",
+    "@content-types": "string",
+    "@search-query": "string",
+    "@aliases": "array",
+    "@active-id": "expression",
+    "@title": "string",
+    "@description": "string",
+    "@initially-expanded": {
+      "type": "boolean",
+      "default-value": false
+    }
+  },
+  "<theme-directory-facet-block>": {
+    "template": "./index.marko",
+    "@aliases": "array",
+    "@active-id": "number",
+    "@content-type": "string",
+    "@search-query": "string",
+    "@content-types": "string",
+    "@primary-alias": "string",
+    "@title": "string",
+    "@description": "string",
+    "@with-toggle": {
+      "type": "boolean",
+      "default-value": false
+    },
+    "@initially-expanded": {
+      "type": "boolean",
+      "default-value": false
+    }
+  }
+}

package/components/facebook-connect.marko

@@ -0,0 +1,52 @@
+import { getAsArray } from "@mindful-web/object-path";
+$ const ids = getAsArray(input, "ids");
+
+<if(ids.length)>
+  $ const inits = ids.map((id) => `fbq('init', '${id}');`).join('');
+  <!-- Facebook Pixel Code -->
+  <marko-web-deferred-script-loader-register
+    name="facebookConnect"
+    src="https://connect.facebook.net/en_US/fbevents.js"
+    init=`!function(f,b,e,v,n,t,s)
+    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+    n.queue=[];}(window)`
+    onScriptLoad=`${inits}fbq('track', 'PageView');`
+    on="load"
+    init-only=true
+  />
+
+  <script>
+    window.onload = (event) => {
+      // Create the observed element
+      var scrollDiv = document.createElement("div");
+      scrollDiv.id = "fb-scroll-load";
+      document.body.insertAdjacentElement("afterbegin", scrollDiv);
+
+      var facebookConnectLoad = function(script, distance) {
+        var observer = new IntersectionObserver(function (entries) {
+          entries.forEach(function(entry) {
+            if(entry.boundingClientRect.y < 0) {
+              // Execute scripts
+              script();
+
+              // Remove the listerner
+              observer.unobserve(entry.target);
+            }
+          });
+        }, { rootMargin: distance });
+        observer.observe(document.querySelector("#" + scrollDiv.id));
+      }
+      facebookConnectLoad(function() { deferScript('load', { name: 'facebookConnect' }); }, '50px');
+    };
+  </script>
+
+
+  <noscript>
+    <for|id| of=ids>
+      <img height="1" width="1" style="display:none" src=`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1` />
+    </for>
+  </noscript>
+  <!-- End Facebook Pixel Code -->
+</if>

package/components/facebook-connect.marko.js

@@ -0,0 +1,59 @@
+// 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/facebook-connect.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_web_deferred_script_loader_register_template = require("@mindful-web/marko-web-deferred-script-loader/components/register.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_deferred_script_loader_register_tag = marko_loadTag(marko_web_deferred_script_loader_register_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const ids = getAsArray(input, "ids");
+
+  if (ids.length) {
+    const inits = ids.map((id) => `fbq('init', '${id}');`).join('');
+
+    marko_web_deferred_script_loader_register_tag({
+        name: "facebookConnect",
+        src: "https://connect.facebook.net/en_US/fbevents.js",
+        init: "!function(f,b,e,v,n,t,s)\n    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n    n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n    n.queue=[];}(window)",
+        onScriptLoad: inits + "fbq('track', 'PageView');",
+        on: "load",
+        initOnly: true
+      }, out, __component, "0");
+
+    out.w("<script>\n    window.onload = (event) => {\n      // Create the observed element\n      var scrollDiv = document.createElement(\"div\");\n      scrollDiv.id = \"fb-scroll-load\";\n      document.body.insertAdjacentElement(\"afterbegin\", scrollDiv);\n\n      var facebookConnectLoad = function(script, distance) {\n        var observer = new IntersectionObserver(function (entries) {\n          entries.forEach(function(entry) {\n            if(entry.boundingClientRect.y < 0) {\n              // Execute scripts\n              script();\n\n              // Remove the listerner\n              observer.unobserve(entry.target);\n            }\n          });\n        }, { rootMargin: distance });\n        observer.observe(document.querySelector(\"#\" + scrollDiv.id));\n      }\n      facebookConnectLoad(function() { deferScript('load', { name: 'facebookConnect' }); }, '50px');\n    };\n  </script><noscript>");
+
+    var $for$0 = 0;
+
+    marko_forOf(ids, function(id) {
+      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+      out.w("<img height=\"1\" width=\"1\" style=\"display:none\"" +
+        marko_attr("src", ("https://www.facebook.com/tr?id=" + id) + "&ev=PageView&noscript=1") +
+        ">");
+    });
+
+    out.w("</noscript>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/facebook-connect.marko",
+    tags: [
+      "@mindful-web/marko-web-deferred-script-loader/components/register.marko"
+    ]
+  };

package/components/flows/card-deck.marko

@@ -0,0 +1,63 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = "card-deck-flow";
+$ const elementName = "node";
+$ const nodes = getAsArray(input, "nodes");
+
+$ const slots = getAsArray(input, "slots");
+$ const slotMap = getAsArray(input, "slots").reduce((map, slot) => {
+  const { index, position } = slot;
+  if (index == null && !position) {
+    map.set("default", slot);
+    return map;
+  }
+  if (!position) return map;
+  map.set(`${position}_${index}`, slot)
+  return map;
+}, new Map());
+
+$ const getSlot = (position, index) => (slotMap.get(`${position}_${index}`) || {});
+$ const defaultSlot = slotMap.get("default") || {};
+
+$ const cols = input.cols != null ? input.cols : 3;
+$ const modifiers = getAsArray(input, "modifiers");
+$ modifiers.push(`${cols}-cols`);
+
+<if(nodes.length)>
+  <marko-web-block
+    name=blockName
+    tag=input.tag
+    class=input.class
+    modifiers=modifiers
+    attrs=input.attrs
+  >
+    <for|node, index| of=nodes>
+      $ const at = getSlot("at", index);
+      $ const before = getSlot("before", index);
+      $ const after = getSlot("after", index);
+
+      <if(before.renderBody)>
+        <marko-web-element ...before name=elementName block-name=blockName modifiers=["position-before", ...getAsArray(before.modifiers)]>
+          <${before.renderBody} node=node index=index />
+        </marko-web-element>
+      </if>
+
+      <if(at.renderBody)>
+        <marko-web-element ...at name=elementName block-name=blockName modifiers=["position-at", ...getAsArray(at.modifiers)]>
+          <${at.renderBody} node=node index=index />
+        </marko-web-element>
+      </if>
+      <else-if(defaultSlot.renderBody)>
+        <marko-web-element ...defaultSlot name=elementName block-name=blockName>
+          <${defaultSlot.renderBody} node=node index=index />
+        </marko-web-element>
+      </else-if>
+
+      <if(after.renderBody)>
+        <marko-web-element ...after name=elementName block-name=blockName modifiers=["position-after", ...getAsArray(after.modifiers)]>
+          <${after.renderBody} node=node index=index />
+        </marko-web-element>
+      </if>
+    </for>
+  </marko-web-block>
+</if>