@parameter1/base-cms-marko-web 4.8.0 → 4.10.0

package/eslint.log

@@ -0,0 +1,3 @@
+yarn run v1.22.10
+$ eslint --ext .js --ext .vue --max-warnings 5 ./
+Done in 3.75s.

package/express/asset-loader.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const { readFile } = require('fs').promises;
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+
+const readManifest = async (loc) => {
+  try {
+    const contents = await readFile(loc, 'utf8');
+    return JSON.parse(contents);
+  } catch (e) {
+    if (e.code === 'ENOENT') return null;
+    throw e;
+  }
+};
+
+const getRelPathFromManifest = async ({ distDir, type, entry }) => {
+  const file = path.resolve(distDir, type, 'manifest.json');
+  const manifest = await readManifest(file);
+  if (!manifest) throw new Error(`Unable to load the asset manifest for type ${type}`);
+
+  const asset = manifest[entry];
+  if (!asset) throw new Error(`Unable to extract an asset for type ${type} using manifest entry ${entry}`);
+  return `${type}/${asset.file}`;
+};
+
+const isProduction = process.env.NODE_ENV === 'production';
+const types = [
+  { type: 'js', entry: 'browser/index.js' },
+];
+
+module.exports = ({ distDir }) => asyncRoute(async (req, res, next) => {
+  const { cdn } = res.locals;
+  const { app } = req;
+
+  if (!app.locals.assets) app.locals.assets = {};
+  const { assets } = app.locals;
+
+  // when on production, only load the file paths from the manifest once
+  // as long as the cdn configs are the same (allows for changing the cdn env var in prod)
+  if (isProduction && assets.files && assets.cdn === cdn.enabled) return next();
+
+  // get file paths from manifests
+  const rels = await Promise.all(types.map(async ({ type, entry }) => {
+    const rel = await getRelPathFromManifest({ distDir, type, entry });
+    return { type, rel };
+  }));
+
+  assets.files = rels.reduce((map, { type, rel }) => {
+    const href = cdn.dist(rel);
+    map.set(type, [href]);
+    return map;
+  }, new Map());
+  assets.cdn = cdn.enabled;
+
+  return next();
+});

package/express/cdn.js

@@ -0,0 +1,27 @@
+const { cleanPath } = require('@parameter1/base-cms-utils');
+
+module.exports = ({ enabled = false, origin, siteVersion } = {}) => (req, res, next) => {
+  const { config, tenantKey } = req.app.locals;
+  const url = `${cleanPath(origin)}/web-assets/${tenantKey}/${config.website('id')}/v${siteVersion}`;
+
+  const key = '__cdn';
+  const values = new Set(['true', '1']);
+  let isEnabled = enabled;
+  if (values.has(req.query[key])) isEnabled = true;
+  if (values.has(req.cookies[key])) isEnabled = true;
+
+  res.locals.cdn = {
+    enabled: isEnabled,
+    origin,
+    url,
+    dist: (path) => {
+      const cleaned = `dist/${cleanPath(path)}`;
+      return isEnabled ? `${url}/${cleaned}` : `/${cleaned}`;
+    },
+    public: (path) => {
+      const cleaned = cleanPath(path);
+      return isEnabled ? `${url}/public/${cleaned}` : `/${cleaned}`;
+    },
+  };
+  next();
+};

package/express/css-loader.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const { readFile } = require('fs').promises;
+const { readFileSync } = require('fs');
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+
+const modes = new Set(['main', 'purged', 'optimized', 'critical']);
+
+const readManifest = async (loc) => {
+  try {
+    const contents = await readFile(loc, 'utf8');
+    return JSON.parse(contents);
+  } catch (e) {
+    if (e.code === 'ENOENT') return null;
+    throw e;
+  }
+};
+
+/**
+ * @typedef {import("@parameter1/base-cms-web-cli/build/utils/css.js")
+ *  .WrittenCSSOutputAsset} WrittenCSSOutputAsset
+ *
+ * @param {object} params
+ * @param {string} params.distDir
+ * @returns {Promise<WrittenCSSOutputAsset[]>}
+ */
+const loadManifestEntries = async ({ distDir }) => {
+  const file = path.resolve(distDir, 'css', 'manifest.json');
+  const manifest = await readManifest(file);
+  if (!manifest) throw new Error('Unable to load the CSS asset manifest');
+  return Object.keys(manifest).map((key) => {
+    const asset = { key, ...manifest[key] };
+    return asset;
+  });
+};
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = ({ distDir }) => asyncRoute(async (req, res, next) => {
+  const { cdn } = res.locals;
+  const { app } = req;
+  if (!app.locals.css) app.locals.css = {};
+  const { css } = app.locals;
+
+  // determine the current CSS mode
+  // use the env first and fallback to main (all).
+  let mode = process.env.CSS_MODE || 'main';
+  if (!modes.has(mode)) mode = 'main';
+
+  // then allow the request query or a cookie to override this.
+  const key = '__css';
+  if (modes.has(req.query[key])) {
+    mode = req.query[key];
+  } else if (modes.has(req.cookies[key])) {
+    mode = req.cookie[key];
+  }
+
+  // always set the mode to the app on every request.
+  css.mode = mode;
+
+  // when on production, only load the file paths and/or contents from the manifest once
+  // as long as the cdn configs are the same (allows for changing the cdn env var in prod)
+  if (isProduction && css.ready && css.cdn === cdn.enabled) return next();
+
+  css.cdn = cdn.enabled;
+
+  const items = await loadManifestEntries({ distDir });
+  const files = items.reduce((map, asset) => {
+    if (asset.embedded) return map;
+    map.set(asset.key, cdn.dist(`css/${asset.file}`));
+    return map;
+  }, new Map());
+  css.files = files;
+
+  const embeddable = items.reduce((map, asset) => {
+    if (!asset.embedded) return map;
+    map.set(asset.key, path.resolve(distDir, 'css', asset.file));
+    return map;
+  }, new Map());
+  css.embeddable = embeddable;
+
+  css.main = () => files.get('main');
+  css.purged = () => files.get('purged');
+
+  css.optimized = ({ kind, type } = {}) => {
+    // attempt to load the optimized file from most to least specific.
+    const keys = [];
+    if (kind && type) keys.push(`optimized-${kind}.${type}`);
+    if (kind) keys.push(`optimized-${kind}`);
+    keys.push('optimized');
+
+    return keys.reduce((file, k) => {
+      if (file) return file;
+      return files.get(k) || null;
+    }, null);
+  };
+
+  css.critical = ({ kind, type } = {}) => {
+    // attempt to load the critical file from most to least specific.
+    const keys = [];
+    if (kind && type) keys.push(`critical-${kind}.${type}`);
+    if (kind) keys.push(`critical-${kind}`);
+    keys.push('critical');
+
+    const critical = keys.reduce((file, k) => {
+      if (file) return file;
+      return embeddable.get(k) || null;
+    }, null);
+    if (!critical) return null;
+    // @todo determine if this should read contents all the time or store in memory?
+    const contents = readFileSync(critical, 'utf8');
+    return `/* ${critical.split('/').pop()} */ ${contents}`;
+  };
+
+  css.ready = true;
+
+  return next();
+});

package/express/embedded-media.js

@@ -11,13 +11,14 @@ module.exports = (app, { image, oembed, invalid } = {}) => {
   };
 
   // eslint-disable-next-line no-param-reassign
-  app.locals.parseEmbeddedMedia = (body, res, options) => {
+  app.locals.parseEmbeddedMedia = (body, res, options, lazyloadFirstImage = true) => {
     const $global = buildMarkoGlobal(res);
 
-    const replacements = extractEmbeddedTags(body).map((tag) => {
+    const replacements = extractEmbeddedTags(body).map((tag, index) => {
       const type = ['image', 'oembed'].includes(tag.type) && tag.isValid() ? tag.type : 'invalid';
       const pattern = tag.getRegExp();
-      const replacement = handlers[type](tag, $global, options);
+      const replacementOptions = (index === 0 && type === 'image' && !lazyloadFirstImage) ? { ...options, lazyloadImages: false } : options;
+      const replacement = handlers[type](tag, $global, replacementOptions);
       return { pattern, replacement };
     });
 

package/express/error-handlers.js

@@ -1,5 +1,6 @@
 const { STATUS_CODES } = require('http');
 const createError = require('http-errors');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const errorTemplate = require('../components/document/components/error');
 const getRedirect = require('./get-redirect');
 const findContentAlias = require('./find-content-alias');
@@ -16,6 +17,7 @@ const noCache = (res) => {
 };
 
 const renderError = (res, { statusCode, err, template }) => {
+  setRouteKind(res, { kind: 'error', type: statusCode });
   res.status(statusCode);
   res.marko(template || errorTemplate, {
     statusCode,

package/express/index.js

@@ -12,7 +12,9 @@ const embeddedMedia = require('./embedded-media');
 const loadObject = require('./load-object');
 const loadDocument = require('./load-document');
 const oembed = require('./oembed');
-const purgedCSS = require('./purged-css');
+const cdn = require('./cdn');
+const assetLoader = require('./asset-loader');
+const cssLoader = require('./css-loader');
 const rss = require('./rss');
 const sitemaps = require('./sitemaps');
 const { version } = require('../package.json');
@@ -117,14 +119,21 @@ module.exports = (config = {}) => {
   // Set website context.
   app.use(websiteContext(app.locals.config));
 
+  // Load CDN info before dist and CSS loading (but after the website context).
+  app.use(cdn({
+    enabled: ['true', '1'].includes(process.env.USE_ASSET_CDN),
+    origin: process.env.ASSET_CDN_ORIGIN || 'https://cdn.parameter1.com',
+    siteVersion: sitePackage.version,
+  }));
+  app.use(cssLoader({ distDir }));
+  app.use(assetLoader({ distDir }));
+
   // Register the Marko middleware.
   app.use(markoMiddleware());
-  app.use(purgedCSS());
   app.use(cleanMarkoResponse());
 
   // Serve static assets
   app.use('/dist/css', express.static(`${distDir}/css`, { maxAge: '2y', immutable: true }));
-  app.use('/dist/js/lazysizes', express.static(path.resolve(__dirname, '../public/lazysizes'), { maxAge: '2y', immutable: true }));
   app.use('/dist/js', express.static(`${distDir}/js`, { maxAge: '2y', immutable: true }));
   app.use('/dist', express.static(distDir));
 

package/middleware/with-content.js

@@ -2,6 +2,7 @@ const { get } = require('@parameter1/base-cms-object-path');
 const { asyncRoute, isFunction: isFn } = require('@parameter1/base-cms-utils');
 const { content: loader } = require('@parameter1/base-cms-web-common/page-loaders');
 const { blockContent: queryFactory } = require('@parameter1/base-cms-web-common/query-factories');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const PageNode = require('./page-node');
 const buildContentInput = require('../utils/build-content-input');
 const applyQueryParams = require('../utils/apply-query-params');
@@ -22,6 +23,9 @@ module.exports = ({
 
   const additionalInput = buildContentInput({ req });
   const content = await loader(apollo, { id, additionalInput, queryFragment: loaderQueryFragment });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'content', type: content.type });
   const redirectTo = isFn(redirectToFn) ? redirectToFn({ content }) : content.redirectTo;
   const path = isFn(pathFn) ? pathFn({ content }) : get(content, 'siteContext.path');
 

package/middleware/with-dynamic-page.js

@@ -2,6 +2,7 @@ const { get } = require('@parameter1/base-cms-object-path');
 const { asyncRoute, isFunction: isFn } = require('@parameter1/base-cms-utils');
 const { dynamicPage: loader } = require('@parameter1/base-cms-web-common/page-loaders');
 const { blockDynamicPage: queryFactory } = require('@parameter1/base-cms-web-common/query-factories');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const PageNode = require('./page-node');
 const applyQueryParams = require('../utils/apply-query-params');
 
@@ -15,6 +16,9 @@ module.exports = ({
   const { apollo, query } = req;
 
   const page = await loader(apollo, { alias });
+
+  setRouteKind(res, { kind: 'dynamic-page', type: alias });
+
   const { redirectTo } = page;
   const path = get(page, 'siteContext.path');
   if (redirectTo) {

package/middleware/with-magazine-issue.js

@@ -1,6 +1,7 @@
 const { asyncRoute } = require('@parameter1/base-cms-utils');
 const { magazineIssue: loader } = require('@parameter1/base-cms-web-common/page-loaders');
 const { blockMagazineIssue: queryFactory } = require('@parameter1/base-cms-web-common/query-factories');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const PageNode = require('./page-node');
 
 module.exports = ({
@@ -10,6 +11,9 @@ module.exports = ({
   const { apollo } = req;
   const id = Number(req.params.id);
   const issue = await loader(apollo, { id });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'magazine-issue', type: '' });
   const pageNode = new PageNode(apollo, {
     queryFactory,
     queryFragment,

package/middleware/with-magazine-publication.js

@@ -1,6 +1,7 @@
 const { asyncRoute } = require('@parameter1/base-cms-utils');
 const { magazinePublication: loader } = require('@parameter1/base-cms-web-common/page-loaders');
 const { blockMagazinePublication: queryFactory } = require('@parameter1/base-cms-web-common/query-factories');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const PageNode = require('./page-node');
 
 module.exports = ({
@@ -10,6 +11,9 @@ module.exports = ({
   const { apollo } = req;
   const { id } = req.params;
   const publication = await loader(apollo, { id });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'magazine-publication', type: '' });
   const pageNode = new PageNode(apollo, {
     queryFactory,
     queryFragment,

package/middleware/with-website-section.js

@@ -1,6 +1,7 @@
 const { asyncRoute, isFunction: isFn } = require('@parameter1/base-cms-utils');
 const { websiteSection: loader } = require('@parameter1/base-cms-web-common/page-loaders');
 const { blockWebsiteSection: queryFactory } = require('@parameter1/base-cms-web-common/query-factories');
+const setRouteKind = require('@parameter1/base-cms-marko-express/utils/set-route-kind');
 const PageNode = require('./page-node');
 const applyQueryParams = require('../utils/apply-query-params');
 
@@ -16,6 +17,9 @@ module.exports = ({
   const cleanedAlias = alias.replace(/\/+$/, '').replace(/^\/+/, '');
 
   const section = await loader(apollo, { alias: cleanedAlias });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'website-section', type: section.alias });
   const { redirectTo, canonicalPath } = section;
   if (redirectTo) {
     return res.redirect(301, applyQueryParams({ path: redirectTo, query }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parameter1/base-cms-marko-web",
-  "version": "4.8.0",
+  "version": "4.10.0",
   "description": "Core Marko+Express components for BaseCMS websites",
   "author": "Jacob Bare <jacob@parameter1.com>",
   "main": "index.js",
@@ -31,7 +31,7 @@
     "@parameter1/base-cms-html": "^4.5.12",
     "@parameter1/base-cms-image": "^4.6.0",
     "@parameter1/base-cms-inflector": "^4.5.12",
-    "@parameter1/base-cms-marko-express": "^4.6.0",
+    "@parameter1/base-cms-marko-express": "^4.9.0",
     "@parameter1/base-cms-marko-node-require": "^4.5.12",
     "@parameter1/base-cms-marko-web-deferred-script-loader": "^4.5.12",
     "@parameter1/base-cms-object-path": "^4.5.12",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dcef09f69fd79065c563e850f19bf3c3826b4802"
+  "gitHead": "9aa14f8e69134504ed3b30fda0a6cf1b926da9d9"
 }

package/scss/fonts/alata-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: alata-fallback;
+  size-adjust: 102.30000000000004%;
+  ascent-override: 110%;
+  src: local("Arial");
+}

package/scss/fonts/arimo-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: arimo-fallback;
+  size-adjust: 100%;
+  ascent-override: 90%;
+  src: local("Arial");
+}

package/scss/fonts/fira-sans-fallback.scss

@@ -1,4 +1,5 @@
 @font-face {
+  /*! critical */
   font-family: fira-sans-fallback;
   size-adjust: 102.56%;
   ascent-override: 92%;

package/scss/fonts/ibm-plex-sans-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: ibm-plex-sans-fallback;
+  size-adjust: 101.44000000000005%;
+  ascent-override: 106%;
+  src: local("Arial");
+}

package/scss/fonts/informapro-fallback.scss

@@ -0,0 +1,6 @@
+@font-face {
+  /*! critical */
+  font-family: informapro-fallback;
+  size-adjust: 96.59999999999997%;
+  src: local("Arial");
+}

package/scss/fonts/lato-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: lato-fallback;
+  size-adjust: 97.38%;
+  ascent-override: 101%;
+  src: local("Arial");
+}

package/scss/fonts/montserrat-fallback.scss

@@ -1,4 +1,5 @@
 @font-face {
+  /*! critical */
   font-family: montserrat-fallback;
   size-adjust: 113.39999999999998%;
   ascent-override: 82%;

package/scss/fonts/open-sans-condensed-fallback.scss

@@ -1,6 +1,6 @@
 @font-face {
+  /*! critical */
   font-family: open-sans-condensed-fallback;
-  size-adjust: 102.56%;
-  ascent-override: 92%;
+  size-adjust: 89.60000000000002%;
   src: local("Arial");
 }

package/scss/fonts/open-sans-fallback.scss

@@ -1,4 +1,5 @@
 @font-face {
+  /*! critical */
   font-family: open-sans-fallback;
   size-adjust: 105.42999999999994%;
   ascent-override: 105%;

package/scss/fonts/oswold-fallback.scss

@@ -1,4 +1,5 @@
 @font-face {
+  /*! critical */
   font-family: oswald-fallback;
   size-adjust: 81.91000000000001%;
   ascent-override: 154%;

package/scss/fonts/roboto-condensed-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: roboto-condensed-fallback;
+  size-adjust: 88.91000000000001%;
+  ascent-override: 110%;
+  src: local("Arial");
+}

package/scss/fonts/roboto-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: roboto-fallback;
+  size-adjust: 100.06%;
+  ascent-override: 95%;
+  src: local("Arial");
+}

package/scss/fonts/roboto-slab-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: roboto-slab-fallback;
+  size-adjust: 117.79999999999995%;
+  ascent-override: 87%;
+  src: local("Times New Roman");
+}

package/scss/fonts/solitaire-mvb-pro-fallback.scss

@@ -0,0 +1,6 @@
+@font-face {
+  /*! critical */
+  font-family: "solitaire-mvb-pro-fallback";
+  size-adjust: 94.70000000000002%;
+  src: local("Arial");
+}

package/scss/fonts/source-sans-4-fallback.scss

@@ -1,4 +1,5 @@
 @font-face {
+  /*! critical */
   font-family: source-sans-4-fallback;
   size-adjust: 93.75%;
   ascent-override: 110%;

package/scss/fonts/source-serif-pro-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: source-serif-pro-fallback;
+  size-adjust: 110.86999999999993%;
+  ascent-override: 84%;
+  src: local("Times New Roman");
+}

package/scss/fonts/synthese-fallback.scss

@@ -0,0 +1,6 @@
+@font-face {
+  /*! critical */
+  font-family: synthese-fallback; /* stylelint-disable-line property-no-unknown */
+  size-adjust: 112%; /* stylelint-disable-line property-no-unknown */
+  src: local("Arial");
+}

package/config/dist-loader.js

@@ -1,42 +0,0 @@
-const path = require('path');
-const { readFileSync } = require('fs');
-
-const read = (file) => {
-  try {
-    return JSON.parse(readFileSync(file, 'utf8'));
-  } catch (e) {
-    if (e.code === 'ENOENT') return null;
-    throw e;
-  }
-};
-
-const loadFromManifest = ({ distDir, type, entry }) => {
-  const file = path.resolve(distDir, type, 'manifest.json');
-  const manifest = read(file);
-  if (!manifest) throw new Error(`Unable to load the asset manifest for type ${type}`);
-  const asset = manifest[entry];
-  if (!asset) throw new Error(`Unable to extract an asset for type ${type} using manifest entry ${entry}`);
-  return `/dist/${type}/${asset.file}`;
-};
-
-const load = ({ distDir, file }) => readFileSync(path.resolve(distDir, `.${file.replace('/dist/', '/')}`), 'utf8');
-
-module.exports = ({ distDir, type, entry }) => {
-  let file;
-  let contents;
-  return ({ embedded } = {}) => {
-    const isDevelopment = process.env.NODE_ENV !== 'production';
-    // when on dev, always return the file from the manifest
-    // as it may have changed during build.
-    if (isDevelopment) {
-      const f = loadFromManifest({ distDir, type, entry });
-      if (!embedded) return f;
-      return load({ distDir, file: f });
-    }
-    // otherwise, only retrieve it once
-    if (!file) file = loadFromManifest({ distDir, type, entry });
-    if (!embedded) return file;
-    if (!contents) contents = load({ distDir, file });
-    return contents;
-  };
-};

package/express/purged-css.js

@@ -1,11 +0,0 @@
-module.exports = () => (req, res, next) => {
-  res.locals.usePurgedCSS = ['cookies', 'query'].some((key) => {
-    const { __purgecss: purge } = req[key];
-    return purge && !['false', '0', 'null'].includes(purge);
-  });
-  res.locals.embedCSS = ['cookies', 'query'].some((key) => {
-    const { __embedcss: embed } = req[key];
-    return embed && !['false', '0', 'null'].includes(embed);
-  });
-  next();
-};

package/public/lazysizes/v5.3.2.js

@@ -1,2 +0,0 @@
-/*! lazysizes - v5.3.2 */
-!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});