@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/core/transition/index.js

@@ -1,6 +1,7 @@
 // https://material.io/design/navigation/navigation-transitions.html
 
-import { nextTick } from '../dom.js';
+const EXPAND_DURATION_MS = 300;
+const COLLAPSE_DURATION_MS = 250;
 
 /**
  * @typedef {Object} ShapeTranformDetails
@@ -21,7 +22,7 @@ function pxToInteger(px) {
   if (!px) {
     return 0;
   }
-  return parseInt(px, 10);
+  return Number.parseInt(px, 10);
 }
 
 /**
@@ -42,26 +43,26 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
     let blurRadius = '';
     let spreadRadius = '';
     let color = '';
-    shadow.split(' ').forEach((value) => {
+    for (const value of shadow.trim().split(' ')) {
       if (value.toLowerCase() === 'inset') {
         inset = value;
-        return;
+        continue;
       }
-      if (value.indexOf('(') !== -1 || !value.match(/\d/).length) {
+      if (value.includes('(') || !value.match(/\d/).length) {
         color = value;
-        return;
+        continue;
       }
       const numberValue = pxToInteger(value);
       if (!offsetX) {
-        offsetX = `${numberValue / scaleX}${value.replace(/[0-9\\-\\.]/g, '')}`;
+        offsetX = `${numberValue / scaleX}${value.replace(/[\d.\\]/g, '')}`;
       } else if (!offsetY) {
-        offsetY = `${numberValue / scaleY}${value.replace(/[0-9\\-\\.]/g, '')}`;
+        offsetY = `${numberValue / scaleY}${value.replace(/[\d.\\]/g, '')}`;
       } else if (!blurRadius) {
-        blurRadius = `${numberValue / (scaleX * scaleY)}${value.replace(/[0-9\-\\.]/g, '')}`;
+        blurRadius = `${numberValue / (scaleX * scaleY)}${value.replace(/[\d.\\-]/g, '')}`;
       } else {
-        spreadRadius = `${numberValue / (scaleX * scaleY)}${value.replace(/[0-9\-\\.]/g, '')}`;
+        spreadRadius = `${numberValue / (scaleX * scaleY)}${value.replace(/[\d.\\-]/g, '')}`;
       }
-    });
+    }
     return [
       inset,
       offsetX,
@@ -69,7 +70,7 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
       blurRadius,
       spreadRadius,
       color,
-    ].filter((v) => v).join(' ');
+    ].filter(Boolean).join(' ');
   }
 
   if (!stringValue) {
@@ -79,15 +80,26 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
     // Strip spaces from anything parenthesized
     .replace(/\([^)]+\)/g, (substring) => substring.replace(/ /g, ''))
     // Split shadows by commas no inside parentheses
-    .match(/[^,(]+\([^)]+\)?[^,]*(|$)/g)
-    // Trim empty spaces
-    .map((shadow) => shadow.trim())
+    .match(/[^(,]+\([^)]+\)?[^,]*(|$)/g)
     // Convert values
-    .map(convertShadow)
+    .map((shadow) => convertShadow(shadow))
     // Rejoin shadows
     .join(', ');
 }
 
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function parsePercentage(value, length) {
+  const numValue = pxToInteger(value);
+  if (!value.includes('%')) {
+    return numValue;
+  }
+  return ((numValue * length) / 100);
+}
+
 /**
  * @param {string} stringValue
  * @param {number} width
@@ -95,19 +107,6 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
  * @return {{horizontal:number, vertical:number}}
  */
 function convertBorderRadius(stringValue, width, height) {
-  /**
-   * @param {string} value
-   * @param {number} length
-   * @return {number}
-   */
-  function parsePercentage(value, length) {
-    const numValue = pxToInteger(value);
-    if (value.indexOf('%') === -1) {
-      return numValue;
-    }
-    return ((numValue * length) / 100.0);
-  }
-
   if (!stringValue) {
     return {
       horizontal: 0,
@@ -222,9 +221,7 @@ function buildTransitionEndListener(element, property, callback, expectedDuratio
 export function transitionElement(options) {
   const toStyleSyle = window.getComputedStyle(options.toShapeElement);
 
-  const shapeTransform = getShapeTransform(
-    options.fromShapeElement, options.toShapeElement, toStyleSyle,
-  );
+  const shapeTransform = getShapeTransform(options.fromShapeElement, options.toShapeElement, toStyleSyle);
   const contentTransform = getShapeTransform(options.toContentElement, options.fromContentElement);
 
   const transitionProperties = [
@@ -240,17 +237,17 @@ export function transitionElement(options) {
     'visibility',
   ];
 
-  /** @type {Object.<string,string>} */
+  /** @type {Record<string,string>} */
   const oldFromShapeProperties = {};
-  /** @type {Object.<string,string>} */
+  /** @type {Record<string,string>} */
   const oldToShapeProperties = {};
-  /** @type {Object.<string,string>} */
+  /** @type {Record<string,string>} */
   const oldFromContentProperties = {};
-  /** @type {Object.<string,string>} */
+  /** @type {Record<string,string>} */
   const oldToContentProperties = {};
-  /** @type {Object.<string,string>} */
+  /** @type {Record<string,string>} */
   const newFromShapeProperties = {};
-  transitionProperties.forEach((prop) => {
+  for (const prop of transitionProperties) {
     oldFromShapeProperties[prop] = options.fromShapeElement.style.getPropertyValue(prop);
     oldToShapeProperties[prop] = options.toShapeElement.style.getPropertyValue(prop);
     oldFromContentProperties[prop] = options.fromContentElement.style.getPropertyValue(prop);
@@ -298,7 +295,7 @@ export function transitionElement(options) {
     } else {
       newFromShapeProperties[prop] = toStyleSyle.getPropertyValue(prop);
     }
-  });
+  }
 
   options.fromShapeElement.setAttribute('mdw-transition-busy', '');
   options.toShapeElement.setAttribute('mdw-transition-busy', '');
@@ -326,7 +323,7 @@ export function transitionElement(options) {
   options.toShapeElement.style.setProperty('visibility', 'visible');
 
   const revertFunction = () => {
-    transitionProperties.forEach((prop) => {
+    for (const prop of transitionProperties) {
       if (oldFromShapeProperties[prop] == null) {
         options.fromShapeElement.style.removeProperty(prop);
       } else {
@@ -347,22 +344,16 @@ export function transitionElement(options) {
       } else {
         options.toContentElement.style.setProperty(prop, oldToContentProperties[prop]);
       }
-    });
+    }
   };
 
-  nextTick(() => {
-    nextTick(() => {
-      let calculatedDuration = options.duration;
-      if (calculatedDuration == null) {
-        if (shapeTransform.scaleX * shapeTransform.scaleY >= 1) {
-          calculatedDuration = 300; // expand
-        } else {
-          calculatedDuration = 250; // collapse
-        }
-      }
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const calculatedDuration = options.duration
+        ?? ((shapeTransform.scaleX * shapeTransform.scaleY >= 1) ? EXPAND_DURATION_MS : COLLAPSE_DURATION_MS);
       const totalDuration = calculatedDuration.toString(10);
-      const fadeInTime = (calculatedDuration * 0.70).toString(10);
-      const fadeOutTime = (calculatedDuration * 0.30).toString(10);
+      const fadeInTime = (calculatedDuration * 0.7).toString(10);
+      const fadeOutTime = (calculatedDuration * 0.3).toString(10);
       const transformTransition = transitionProperties
         .filter((prop) => prop !== 'transform-origin' && prop !== 'opacity' && prop !== 'transition')
         .map((prop) => `${prop} ${totalDuration}ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s`)
@@ -374,27 +365,34 @@ export function transitionElement(options) {
       ].join(', ');
 
       options.fromShapeElement.style.setProperty('transition', transformTransition);
-      transitionProperties.forEach((prop) => {
-        if (prop === 'transform') {
-          options.fromShapeElement.style.setProperty('transform', shapeTransform.toString());
-        } else if (prop === 'transition') {
-          // noop;
-        } else if (prop === 'transform-origin') {
-          options.fromShapeElement.style.setProperty('transform-origin', '0 0 0');
-        } else if (prop === 'z-index') {
-          options.fromShapeElement.style.setProperty('z-index', '8');
-        } else if (prop === 'visibility') {
-          options.fromShapeElement.style.setProperty('visibility', 'hidden');
-        } else if (newFromShapeProperties[prop] == null) {
-          options.fromShapeElement.style.removeProperty(prop);
-        } else {
-          options.fromShapeElement.style.setProperty(prop, newFromShapeProperties[prop]);
+      for (const prop of transitionProperties) {
+        switch (prop) {
+          case 'transform': {
+            options.fromShapeElement.style.setProperty('transform', shapeTransform.toString());
+            continue;
+          }
+          case 'transition': continue;
+          case 'transform-origin':
+            options.fromShapeElement.style.setProperty('transform-origin', '0 0 0');
+            continue;
+          case 'z-index':
+            options.fromShapeElement.style.setProperty('z-index', '8');
+            continue;
+          case 'visibility':
+            options.fromShapeElement.style.setProperty('visibility', 'hidden');
+            continue;
+          default:
+            if (newFromShapeProperties[prop] == null) {
+              options.fromShapeElement.style.removeProperty(prop);
+            } else {
+              options.fromShapeElement.style.setProperty(prop, newFromShapeProperties[prop]);
+            }
         }
-      });
+      }
 
-      nextTick(() => {
+      requestAnimationFrame(() => {
         buildTransitionEndListener(options.fromShapeElement, 'transform', () => {
-          transitionProperties.forEach((prop) => {
+          for (const prop of transitionProperties) {
             if (prop === 'transition') {
               options.toShapeElement.style.setProperty('transition', 'none');
               options.toContentElement.style.setProperty('transition', 'none');
@@ -411,9 +409,8 @@ export function transitionElement(options) {
               }
             }
 
-            if (prop === 'visibility' && !options.revertFrom) {
-              return;
-            }
+            if (prop === 'visibility' && !options.revertFrom) continue;
+
             if (oldFromContentProperties[prop] == null) {
               options.fromContentElement.style.removeProperty(prop);
             } else {
@@ -424,11 +421,11 @@ export function transitionElement(options) {
             } else {
               options.fromShapeElement.style.setProperty(prop, oldFromShapeProperties[prop]);
             }
-          });
+          }
           if (options.onTransitionEnd) {
             options.onTransitionEnd(options);
           }
-          nextTick(() => {
+          requestAnimationFrame(() => {
             if (oldToShapeProperties.transition == null) {
               options.toShapeElement.style.removeProperty('transition');
             } else {

package/docs/_flex.scss

@@ -1,22 +1,28 @@
 .display-flex {
   display: flex;
 }
+
 .flex-column {
   display: flex;
   flex-direction: column;
 }
+
 [flex-column] {
   flex-direction: column;
 }
+
 [flex-justify-content="center"] {
   justify-content: center;
 }
+
 [flex-align-items="center"] {
   align-items: center;
 }
+
 .flex-wrap {
   flex-wrap: wrap;
 }
+
 .flex-1 {
   flex: 1;
-}
+}

package/docs/_menuoptions.js

@@ -57,10 +57,10 @@ export function setAltTheme(value, button) {
   const items = document.head.getElementsByTagName('link');
   for (let i = 0; i < items.length; i += 1) {
     const stylesheet = items.item(i);
-    if (stylesheet.href.indexOf(value ? 'theme-colored' : 'theme-default') !== -1) {
+    if (stylesheet.href.includes(value ? 'theme-colored' : 'theme-default')) {
       stylesheet.disabled = false;
     }
-    if (stylesheet.href.indexOf(value ? 'theme-default' : 'theme-colored') !== -1) {
+    if (stylesheet.href.includes(value ? 'theme-default' : 'theme-colored')) {
       stylesheet.disabled = true;
     }
   }

package/docs/_partials/_appbar.eta

@@ -11,19 +11,17 @@
     if (value === false || value == null) return false;
     return `${key}="${value}"`
   }).filter(v=>v).join(' ')-%>>
-  <div class="mdw-appbar__action">
-    <div class="mdw-appbar__start">
-      <%_~ it?.start?.map((icon) => includeFile(T, { button: {
-        class:'material-icons', icon:true, text:icon }})).join(' ') ?? '' _%>
-    </div>
-    <div class="mdw-appbar__title">
-      <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
-    </div>
-    <div class="mdw-appbar__end">
-      <%_~ it?.end?.map((icon) => includeFile(T, { button:{
-        class:'material-icons', icon:true, text:icon,
-        attributes: { 'mdw-more-button': icon === 'more_vert' }
-      }})).join(' ') ?? '' _%>
-    </div>
+  <div class="mdw-appbar__start">
+    <%_~ it?.start?.map((icon) => includeFile(T, { button: {
+      class:'material-icons', icon:true, text:icon }})).join(' ') ?? '' _%>
+  </div>
+  <div class="mdw-appbar__title">
+    <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
+  </div>
+  <div class="mdw-appbar__end">
+    <%_~ it?.end?.map((icon) => includeFile(T, { button:{
+      class:'material-icons', icon:true, text:icon,
+      attributes: { 'mdw-more-button': icon === 'more_vert' }
+    }})).join(' ') ?? '' _%>
   </div>
 </div>

package/docs/_partials/_header.eta

@@ -11,15 +11,14 @@
   <meta name="theme-color" content="#C2185B">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-capable" content="yes">
+
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
-  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:300,400,500">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,400,500">
   <link rel="stylesheet" href="docs.min.css">
-  <link rel="stylesheet" href="spec.min.css">
+  <link rel="stylesheet" href="framework.min.css">
   <link rel="stylesheet" href="theme-default.min.css" title="Default Theme">
-  <link rel="stylesheet" href="theme-default-fallbacks.min.css" media="all\0" title="Default Theme">
   <link rel="stylesheet" disabled href="theme-colored.min.css" title="Colored Theme">
-  <link rel="stylesheet" disabled href="theme-colored-fallbacks.min.css" media="all\0" title="Colored Theme">
   <script src="prerender.min.js"></script>
 </head>
 
@@ -91,46 +90,44 @@
   <a class="mdw-layout__scrim" href="#" tabindex="-1"></a>
   <div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark>
     <div class="mdw-layout__appbar-shape"></div>
-    <div class="mdw-appbar__action">
-      <div class="mdw-appbar__start">
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {
-               class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
-               text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
-            }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
-        </div>
+    <div class="mdw-appbar__start">
+      <div class="mdw-tooltip__wrapper">
+        <%~ includeFile(T, { button: {
+              class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
+              text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
+          }}) %>
+        <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
+      </div>
+    </div>
+    <div class="mdw-appbar__title"><%~ it.page %></div>
+    <div class="mdw-appbar__end" id="docs-menu-buttons">
+      <div class="mdw-tooltip__wrapper">
+        <%~ includeFile(T, { button: {
+            id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
+            text:'palette', icon:true,  attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' }, 
+          }}) %>
+        <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
+      </div>
+      <div class="mdw-tooltip__wrapper">
+        <%~ includeFile(T, { button: {
+            id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
+            text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+          }}) %>
+        <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
+      </div>
+      <div class="mdw-tooltip__wrapper">
+        <%~ includeFile(T, { button: {
+            id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
+            text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+          }}) %>
+        <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
       </div>
-      <div class="mdw-appbar__title"><%~ it.page %></div>
-      <div class="mdw-appbar__end" id="docs-menu-buttons">
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {
-              id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
-              text:'palette', icon:true,  attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' }, 
-           }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
-        </div>
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {
-              id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
-              text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
-            }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
-        </div>
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {
-              id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
-              text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
-            }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
-        </div>
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {
-              id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
-              text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
-            }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
-        </div>
+      <div class="mdw-tooltip__wrapper">
+        <%~ includeFile(T, { button: {
+            id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
+            text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+          }}) %>
+        <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
       </div>
     </div>
   </div>

package/docs/_sample-utils.js

@@ -1,5 +1,3 @@
-import { iterateArrayLike } from '../core/dom.js';
-
 /**
  * @param {Element|HTMLElement} element
  * @param {boolean} [pug=false]
@@ -12,19 +10,19 @@ function convertElementToCode(element, pug = false, linePrefix = '') {
   const attributes = [];
   /** @type {string[]} */
   const classes = [];
-  iterateArrayLike(element.classList, (c) => {
+  for (const c of element.classList) {
     classes.push(c);
-  });
-  iterateArrayLike(element.attributes, (attr) => {
+  }
+  for (const attr of element.attributes) {
     if (attr.name === 'class') {
-      return;
+      continue;
     }
     if (attr.value.length) {
       attributes.push(`${attr.name}="${attr.value}"`);
     } else {
       attributes.push(attr.name);
     }
-  });
+  }
   attributes.sort();
   const syntaxItems = [
     htmlType,
@@ -33,36 +31,33 @@ function convertElementToCode(element, pug = false, linePrefix = '') {
   ];
   const openingHTMLLine = pug
     ? `${htmlType === 'div' && classes.length ? '' : htmlType}${classes.length ? `.${classes.join('.')}` : ''}${attributes.length ? `(${attributes.join(' ')})` : ''}`
-    : `<${syntaxItems.filter((item) => item).join(' ').trim()}>`;
+    : `<${syntaxItems.filter(Boolean).join(' ').trim()}>`;
   const closingHTMLLine = pug ? '' : `</${htmlType}>`;
   const lines = [openingHTMLLine];
   /** @type {string[]} */
   const innerLines = [];
   let onlyText = true;
-  iterateArrayLike(element.childNodes, (child) => {
+  for (const child of element.childNodes) {
     let lineText;
     if (child instanceof HTMLElement) {
       lineText = convertElementToCode(child, pug, `  ${linePrefix}`);
       if (lineText.trim()) {
         onlyText = false;
       }
-    } else if (child.nodeValue) {
-      if (pug) {
-        lineText = `  ${child.nodeValue}`;
-      }
+    } else if (child.nodeValue && pug) {
+      lineText = `  ${child.nodeValue}`;
     }
     if (lineText && lineText.trim()) {
       innerLines.push(lineText);
     }
-  });
+  }
   if (onlyText) {
     if (pug) {
       return `${linePrefix + lines.join('')} ${innerLines.join('').trim()}`;
     }
     return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
   }
-  innerLines.forEach((line) => lines.push(line));
-  lines.push(linePrefix + closingHTMLLine);
+  lines.push(...innerLines, linePrefix + closingHTMLLine);
   return linePrefix + lines.filter((line) => line.trim()).join('\n');
 }
 
@@ -73,17 +68,17 @@ function convertElementToCode(element, pug = false, linePrefix = '') {
  */
 function changeElementTagName(element, tagname) {
   const newElement = document.createElement(tagname);
-  for (let i = element.attributes.length - 1; i >= 0; i -= 1) {
+  let i = element.attributes.length;
+  while (i--) {
     const attr = element.attributes.item(i);
-    /** @type {Attr} */
-    const clonedAttr = (attr.cloneNode());
+    const clonedAttr = /** @type {Attr} */ (attr.cloneNode());
     newElement.attributes.setNamedItem(clonedAttr);
   }
   while (element.firstChild) {
     newElement.appendChild(element.firstChild);
   }
 
-  element.parentElement.replaceChild(newElement, element);
+  element.replaceWith(newElement);
   return newElement;
 }