@mindful-web/marko-web 1.0.0

package/components/node/header.marko.js

@@ -0,0 +1,63 @@
+// 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$1.0.0/components/node/header.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_element_template = require("./element.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_element_tag = marko_loadTag(marko_web_node_element_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const left = getAsObject(input, "left");
+
+  const right = getAsObject(input, "right");
+
+  marko_web_node_element_tag({
+      show: true,
+      tag: input.tag,
+      blockName: input.blockName,
+      name: "header",
+      modifiers: input.modifiers,
+      attrs: input.attrs,
+      renderBody: function(out) {
+        if (left.renderBody) {
+          marko_web_node_element_tag(marko_assign({
+              show: true,
+              tag: "div",
+              blockName: "node"
+            }, left, {
+              name: "header-left"
+            }), out, __component, "1");
+        }
+
+        if (right.renderBody) {
+          marko_web_node_element_tag(marko_assign({
+              show: true,
+              tag: "div",
+              blockName: "node"
+            }, right, {
+              name: "header-right"
+            }), out, __component, "2");
+        }
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/node/header.marko",
+    tags: [
+      "./element.marko"
+    ]
+  };

package/components/node/image-inner-wrapper.marko

@@ -0,0 +1,61 @@
+import { get, getAsObject } from "@mindful-web/object-path";
+import imageValues from "./utils/image-values";
+import imageHeight from "./utils/image-height";
+
+$ const blockName = input.blockName || "node";
+$ const element = `${blockName}__image-inner-wrapper`;
+
+$ const {
+  src,
+  alt,
+  isLogo,
+  lazyload,
+  imageAttrs,
+} = input;
+
+$ const usePlaceholder = input.usePlaceholder == null ? true : input.usePlaceholder;
+$ const hasImage = Boolean(src);
+$ const hasLink = Boolean(get(input, "link.href"));
+$ const isPlaceholder = !hasImage && usePlaceholder;
+
+$ const { width, height, modifier } = imageValues(input);
+
+$ const modifiers = [];
+$ if (modifier) modifiers.push(modifier);
+$ if (input.gradient) modifiers.push("gradient");
+$ if (isPlaceholder) modifiers.push("placeholder");
+$ const classNames = [element, ...modifiers.map(mod => `${element}--${mod}`), input.class];
+
+$ const options = {
+  ...input.options,
+  w: input.width,
+  h: input.ar ? imageHeight(input.width, input.ar) : undefined,
+};
+
+$ const imageInput = {
+  src,
+  alt,
+  width,
+  height,
+  options,
+  isLogo,
+  usePlaceholder,
+  lazyload,
+  attrs: imageAttrs,
+};
+
+<!-- @todo add modifiers -->
+
+<if(hasImage || usePlaceholder)>
+  <if(hasLink)>
+    $ const linkAttrs = { ...input.attrs, ...getAsObject(input, "link.attrs") };
+    <marko-web-link ...input.link attrs=linkAttrs class=classNames>
+      <marko-web-node-image ...imageInput />
+    </marko-web-link>
+  </if>
+  <else>
+    <div ...input.attrs class=classNames>
+      <marko-web-node-image ...imageInput />
+    </div>
+  </else>
+</if>

package/components/node/image-inner-wrapper.marko.js

@@ -0,0 +1,116 @@
+// 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$1.0.0/components/node/image-inner-wrapper.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_imageValues = require("./utils/image-values"),
+    imageValues = module_imageValues.default || module_imageValues,
+    module_imageHeight = require("./utils/image-height"),
+    imageHeight = module_imageHeight.default || module_imageHeight,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_image_template = require("./image.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_image_tag = marko_loadTag(marko_web_node_image_template),
+    marko_web_link_template = require("../element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_mergeAttrs = require("marko/dist/runtime/html/helpers/merge-attrs");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "node";
+
+  const element = `${blockName}__image-inner-wrapper`;
+
+  const {
+  src,
+  alt,
+  isLogo,
+  lazyload,
+  imageAttrs,
+} = input;
+
+  const usePlaceholder = input.usePlaceholder == null ? true : input.usePlaceholder;
+
+  const hasImage = Boolean(src);
+
+  const hasLink = Boolean(get(input, "link.href"));
+
+  const isPlaceholder = !hasImage && usePlaceholder;
+
+  const { width, height, modifier } = imageValues(input);
+
+  const modifiers = [];
+
+  if (modifier) modifiers.push(modifier);
+
+  if (input.gradient) modifiers.push("gradient");
+
+  if (isPlaceholder) modifiers.push("placeholder");
+
+  const classNames = [element, ...modifiers.map(mod => `${element}--${mod}`), input.class];
+
+  const options = {
+  ...input.options,
+  w: input.width,
+  h: input.ar ? imageHeight(input.width, input.ar) : undefined,
+};
+
+  const imageInput = {
+  src,
+  alt,
+  width,
+  height,
+  options,
+  isLogo,
+  usePlaceholder,
+  lazyload,
+  attrs: imageAttrs,
+};
+
+  if (hasImage || usePlaceholder) {
+    if (hasLink) {
+      const linkAttrs = { ...input.attrs, ...getAsObject(input, "link.attrs") };
+
+      marko_web_link_tag(marko_assign({}, input.link, {
+          attrs: linkAttrs,
+          class: classNames,
+          renderBody: function(out) {
+            marko_web_node_image_tag(marko_assign({
+                lazyload: true
+              }, imageInput), out, __component, "1");
+          }
+        }), out, __component, "0");
+    } else {
+      out.w("<div" +
+        marko_mergeAttrs(input.attrs, {
+          class: classNames
+        }) +
+        ">");
+
+      marko_web_node_image_tag(marko_assign({
+          lazyload: true
+        }, imageInput), out, __component, "3");
+
+      out.w("</div>");
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/node/image-inner-wrapper.marko",
+    tags: [
+      "./image.marko",
+      "../element/link.marko"
+    ]
+  };

package/components/node/image-wrapper.marko

@@ -0,0 +1,34 @@
+import { getAsArray } from "@mindful-web/object-path";
+import imageValues from "./utils/image-values";
+
+$ const usePlaceholder = input.usePlaceholder == null ? true : input.usePlaceholder;
+$ const hasImage = Boolean(input.src);
+$ const { width, height } = imageValues(input);
+
+$ const style = [];
+$ if (width) {
+  style.push(`width: ${input.width}px;`);
+  // Add min-width for IE11
+  style.push(`min-width: ${input.width}px;`);
+}
+$ if (height) style.push(`height: ${height}px;`);
+
+$ const { header, body, align } = input;
+$ delete input.header;
+$ delete input.body;
+$ delete input.align;
+
+$ const modifiers = [];
+$ if (align) modifiers.push(`align-${align}`);
+
+<if(hasImage || usePlaceholder)>
+  <marko-web-node-element name="image-wrapper" block-name=input.blockName attrs={ style } modifiers=modifiers>
+    <marko-web-node-image-inner-wrapper ...input />
+    <if(header)>
+      <marko-web-node-header ...header modifiers=["overlay", ...getAsArray(header, "modifiers")] />
+    </if>
+    <if(body)>
+      <marko-web-node-body ...body modifiers=["overlay", ...getAsArray(header, "modifiers")] />
+    </if>
+  </marko-web-node-element>
+</if>

package/components/node/image-wrapper.marko.js

@@ -0,0 +1,98 @@
+// 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$1.0.0/components/node/image-wrapper.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_imageValues = require("./utils/image-values"),
+    imageValues = module_imageValues.default || module_imageValues,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_image_inner_wrapper_template = require("./image-inner-wrapper.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_image_inner_wrapper_tag = marko_loadTag(marko_web_node_image_inner_wrapper_template),
+    marko_web_node_header_template = require("./header.marko"),
+    marko_web_node_header_tag = marko_loadTag(marko_web_node_header_template),
+    marko_web_node_body_template = require("./body.marko"),
+    marko_web_node_body_tag = marko_loadTag(marko_web_node_body_template),
+    marko_web_node_element_template = require("./element.marko"),
+    marko_web_node_element_tag = marko_loadTag(marko_web_node_element_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const usePlaceholder = input.usePlaceholder == null ? true : input.usePlaceholder;
+
+  const hasImage = Boolean(input.src);
+
+  const { width, height } = imageValues(input);
+
+  const style = [];
+
+  if (width) {
+  style.push(`width: ${input.width}px;`);
+  // Add min-width for IE11
+  style.push(`min-width: ${input.width}px;`);
+}
+
+  if (height) style.push(`height: ${height}px;`);
+
+  const { header, body, align } = input;
+
+  delete input.header;
+
+  delete input.body;
+
+  delete input.align;
+
+  const modifiers = [];
+
+  if (align) modifiers.push(`align-${align}`);
+
+  if (hasImage || usePlaceholder) {
+    marko_web_node_element_tag({
+        show: true,
+        tag: "div",
+        blockName: input.blockName,
+        name: "image-wrapper",
+        attrs: {
+            style: style
+          },
+        modifiers: modifiers,
+        renderBody: function(out) {
+          marko_web_node_image_inner_wrapper_tag(marko_assign({
+              lazyload: true
+            }, input), out, __component, "1");
+
+          if (header) {
+            marko_web_node_header_tag(marko_assign({}, header, {
+                modifiers: ["overlay", ...getAsArray(header, "modifiers")]
+              }), out, __component, "2");
+          }
+
+          if (body) {
+            marko_web_node_body_tag(marko_assign({}, body, {
+                modifiers: ["overlay", ...getAsArray(header, "modifiers")]
+              }), out, __component, "3");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/node/image-wrapper.marko",
+    tags: [
+      "./image-inner-wrapper.marko",
+      "./header.marko",
+      "./body.marko",
+      "./element.marko"
+    ]
+  };

package/components/node/image.marko

@@ -0,0 +1,51 @@
+import { buildImgixUrl, getRelativeAspectRatioHeight, getRelativeAspectRatioWidth } from "@mindful-web/image";
+import { get, getAsObject } from "@mindful-web/object-path";
+
+$ const element = "node__image";
+$ const hasImage = Boolean(input.src);
+
+<!--
+1. If either width or height input is set, use them as the options.w and options.h
+2. Using options.w and options.h, determine relative w and h when not present
+3. Finally, using options, set the image width and height attrs
+-->
+
+$ const { width, height } = input;
+$ const options = getAsObject(input, "options");
+
+$ if (width || height) {
+  options.w = width || undefined;
+  options.h = height || undefined;
+}
+$ if (input.ar) options.ar = input.ar;
+
+$ const {
+  w,
+  h,
+  ar,
+  fit,
+} = options;
+$ if (w && !h) options.h = ar ? getRelativeAspectRatioHeight(w, ar) : undefined;
+$ if (h && !w) options.w = ar ? getRelativeAspectRatioWidth(h, ar) : undefined;
+$ if (!fit) options.fit = options.w && options.h ? "crop" : undefined;
+
+$ const attrs = { ...input.attrs, width: options.w, height: options.h };
+
+<if(hasImage)>
+  $ const src = buildImgixUrl(input.src, options, input.defaultOptions, input.isLogo);
+  $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+  <marko-web-img
+    src=src
+    srcset=srcset
+    alt=input.alt
+    attrs=attrs
+    class=[element, input.class]
+    lazyload=input.lazyload
+  />
+</if>
+<else-if(input.usePlaceholder)>
+  <div
+    ...attrs
+    class=[element, `${element}--placeholder`, input.class]
+  />
+</else-if>

package/components/node/image.marko.js

@@ -0,0 +1,93 @@
+// 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$1.0.0/components/node/image.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_image_module = require("@mindful-web/image"),
+    image_module = module_image_module.default || module_image_module,
+    buildImgixUrl = module_image_module.buildImgixUrl,
+    getRelativeAspectRatioHeight = module_image_module.getRelativeAspectRatioHeight,
+    getRelativeAspectRatioWidth = module_image_module.getRelativeAspectRatioWidth,
+    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,
+    marko_web_img_template = require("../element/img.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_img_tag = marko_loadTag(marko_web_img_template),
+    marko_mergeAttrs = require("marko/dist/runtime/html/helpers/merge-attrs");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const element = "node__image";
+
+  const hasImage = Boolean(input.src);
+
+  const { width, height } = input;
+
+  const options = getAsObject(input, "options");
+
+  if (width || height) {
+  options.w = width || undefined;
+  options.h = height || undefined;
+}
+
+  if (input.ar) options.ar = input.ar;
+
+  const {
+  w,
+  h,
+  ar,
+  fit,
+} = options;
+
+  if (w && !h) options.h = ar ? getRelativeAspectRatioHeight(w, ar) : undefined;
+
+  if (h && !w) options.w = ar ? getRelativeAspectRatioWidth(h, ar) : undefined;
+
+  if (!fit) options.fit = options.w && options.h ? "crop" : undefined;
+
+  const attrs = { ...input.attrs, width: options.w, height: options.h };
+
+  if (hasImage) {
+    const src = buildImgixUrl(input.src, options, input.defaultOptions, input.isLogo);
+
+    const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+
+    marko_web_img_tag({
+        lazyload: input.lazyload,
+        src: src,
+        srcset: srcset,
+        alt: input.alt,
+        attrs: attrs,
+        class: [
+            element,
+            input.class
+          ]
+      }, out, __component, "0");
+  } else if (input.usePlaceholder) {
+    out.w("<div" +
+      marko_mergeAttrs(attrs, {
+        class: [
+            element,
+            element + "--placeholder",
+            input.class
+          ]
+      }) +
+      "></div>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/node/image.marko",
+    tags: [
+      "../element/img.marko"
+    ]
+  };

package/components/node/index.marko

@@ -0,0 +1,35 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = input.blockName || "node";
+$ const tag = input.tag || "div";
+
+$ const modifiers = [...getAsArray(input.modifiers)];
+$ if (input.imagePosition) modifiers.push(`image-${input.imagePosition}`);
+$ if (input.flush) modifiers.push("flush");
+$ if (input.flushX) modifiers.push("flush-x");
+$ if (input.flushY) modifiers.push("flush-y");
+$ if (input.card) modifiers.push("card");
+$ if (input.imageFlush) modifiers.push("image-flush");
+$ if (input.fullHeight) modifiers.push("full-height");
+$ if (input.type) modifiers.push(`${input.type}-type`);
+
+$ const classNames = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`), input.class];
+
+<${tag} ...input.attrs class=classNames>
+  <if(input.header)>
+    <marko-web-node-header ...input.header />
+  </if>
+
+  <marko-web-node-element name="contents">
+    <if(input.image)>
+      <marko-web-node-image-wrapper ...input.image />
+    </if>
+    <if(input.body)>
+      <marko-web-node-body ...input.body />
+    </if>
+  </marko-web-node-element>
+
+  <if(input.footer)>
+    <marko-web-node-footer ...input.footer />
+  </if>
+</>

package/components/node/index.marko.js

@@ -0,0 +1,100 @@
+// 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$1.0.0/components/node/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,
+    marko_web_node_header_template = require("./header.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_header_tag = marko_loadTag(marko_web_node_header_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_image_wrapper_template = require("./image-wrapper.marko"),
+    marko_web_node_image_wrapper_tag = marko_loadTag(marko_web_node_image_wrapper_template),
+    marko_web_node_body_template = require("./body.marko"),
+    marko_web_node_body_tag = marko_loadTag(marko_web_node_body_template),
+    marko_web_node_element_template = require("./element.marko"),
+    marko_web_node_element_tag = marko_loadTag(marko_web_node_element_template),
+    marko_web_node_footer_template = require("./footer.marko"),
+    marko_web_node_footer_tag = marko_loadTag(marko_web_node_footer_template),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "node";
+
+  const tag = input.tag || "div";
+
+  const modifiers = [...getAsArray(input.modifiers)];
+
+  if (input.imagePosition) modifiers.push(`image-${input.imagePosition}`);
+
+  if (input.flush) modifiers.push("flush");
+
+  if (input.flushX) modifiers.push("flush-x");
+
+  if (input.flushY) modifiers.push("flush-y");
+
+  if (input.card) modifiers.push("card");
+
+  if (input.imageFlush) modifiers.push("image-flush");
+
+  if (input.fullHeight) modifiers.push("full-height");
+
+  if (input.type) modifiers.push(`${input.type}-type`);
+
+  const classNames = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`), input.class];
+
+  marko_dynamicTag(out, tag, function() {
+    return marko_assign({}, input.attrs, {
+        class: classNames
+      });
+  }, function(out) {
+    if (input.header) {
+      marko_web_node_header_tag(input.header, out, __component, "1");
+    }
+
+    marko_web_node_element_tag({
+        show: true,
+        tag: "div",
+        blockName: "node",
+        name: "contents",
+        renderBody: function(out) {
+          if (input.image) {
+            marko_web_node_image_wrapper_tag(marko_assign({
+                ar: "1:1",
+                width: 320,
+                lazyload: true
+              }, input.image), out, __component, "3");
+          }
+
+          if (input.body) {
+            marko_web_node_body_tag(input.body, out, __component, "4");
+          }
+        }
+      }, out, __component, "2");
+
+    if (input.footer) {
+      marko_web_node_footer_tag(input.footer, out, __component, "5");
+    }
+  }, null, null, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/node/index.marko",
+    tags: [
+      "./header.marko",
+      "./image-wrapper.marko",
+      "./body.marko",
+      "./element.marko",
+      "./footer.marko"
+    ]
+  };