@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/layout/_theme.scss

@@ -1,15 +1,13 @@
-@import '../../core/_breakpoint.scss';
-@import '../../core/theme/index.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-layout__theme-values: (
-  divider-color:         $mdw-theme__divider-ink,
-) !default;
+$themeValues: () !default;
 
-@function mdwLayoutThemeValue($key, $type) {
-  @return mdwGetThemeValue('layout', $mdw-layout__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('layout', $themeValues, $key, $type);
 }
 
-@mixin mdw-layout__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   @if ($type == 'var') {
     .mdw-layout__appbar[mdw-fab-cut],
     .mdw-layout__appbar.mdw-theme[mdw-fab-cut] {
@@ -17,11 +15,11 @@ $mdw-layout__theme-values: (
     }
 
     .mdw-layout__appbar-shape {
-      color: RGB(var(--surface-color));
+      color: RGB(var(--mdw-surface));
     }
   }
 
-  @include mdw-breakpoint__medium-window__min {
+  @include breakpoint.minMediumWindow {
     .mdw-layout__body[mdw-navdrawer-style~="floating"]:not([mdw-navdrawer-style~="card"]) > .mdw-layout__navdrawer,
     .mdw-layout__body[mdw-sidesheet-style~="floating"]:not([mdw-sidesheet-style~="card"]) > .mdw-layout__sidesheet {
       & > .mdw-layout__sheet-content {
@@ -32,15 +30,15 @@ $mdw-layout__theme-values: (
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-layout__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-layout__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
 
-@include mdw-theme__add-component-variable-rules('layout', $mdw-layout__theme-values) {
-  @include mdw-layout__theme-rules();
+@include theme.addComponentCSSVariableRules('layout', $themeValues) {
+  @include addThemeRules();
 }
 

package/components/layout/index.js

@@ -1,5 +1,5 @@
-import { iterateArrayLike, getPassiveEventListenerOption } from '../../core/dom';
-import Throttler from '../../core/throttler';
+import { getPassiveEventListenerOption, iterateArrayLike } from '../../core/dom.js';
+import Throttler from '../../core/throttler.js';
 
 const MIN_SCROLL_DELTA = 24; // Avoid finger bounce
 
@@ -10,76 +10,20 @@ const TABLET_BREAKPOINT = 1024;
 // Smoother than using requestAnimationFrame
 const SCROLL_THROTTLE_TIME_MS = 20;
 
+/** @type {number} */
 let lastScrollY = null;
+/** @type {number} */
 let penultimateScrollY = null;
 let scrolledPastAppBar = false;
+/** @type {HTMLElement} */
 let appBarElement = null;
+/** @type {HTMLElement} */
 let layoutContentElement = null;
+/** @type {number} */
 let lastScrollBottomDistance = null;
+/** @type {Throttler} */
 let scrollThrottler = null;
 
-/** @return {void} */
-export function attach() {
-  const appBar = getAppBarElement();
-  if (appBar) {
-    // Initialize with scroll up
-    document.body.addEventListener('scroll', onBodyScroll, getPassiveEventListenerOption());
-    const contentElement = getContentElement();
-    if (contentElement) {
-      contentElement.addEventListener('scroll', onContentScroll, getPassiveEventListenerOption());
-    }
-    resetScroll();
-  }
-
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-toggle'),
-    el => el.addEventListener('click', toggleNavDrawer));
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-show'),
-    el => el.addEventListener('click', showNavDrawer));
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-hide'),
-    el => el.addEventListener('click', hideNavDrawer));
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-toggle'),
-    el => el.addEventListener('click', toggleSideSheet));
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-show'),
-    el => el.addEventListener('click', showSideSheet));
-  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-hide'),
-    el => el.addEventListener('click', hideSideSheet));
-  const scrim = document.getElementsByClassName('mdw-layout__scrim')[0];
-  if (scrim) {
-    scrim.addEventListener('click', onScrimClick);
-    scrim.addEventListener('scroll', onScrimScroll);
-    scrim.addEventListener('touchmove', onScrimScroll);
-    scrim.addEventListener('wheel', onScrimScroll);
-  }
-}
-
-/**
- * Run before document has loaded
- * @return {void}
- */
-export function onPrerender() {
-  if ('standalone' in navigator && navigator.standalone) {
-    document.documentElement.setAttribute('mdw-standalone', '');
-  }
-
-  const ua = navigator.userAgent.toLowerCase();
-  if (/iphone/.test(ua) || /ipad/.test(ua)) {
-    document.documentElement.setAttribute('mdw-ios', '');
-  }
-
-  // Auto lightness and fill
-  if (!document.documentElement.hasAttribute('mdw-surface')
-    && !document.documentElement.hasAttribute('mdw-light')
-    && !document.documentElement.hasAttribute('mdw-dark')) {
-    if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
-      document.documentElement.setAttribute('mdw-dark', '');
-      document.documentElement.setAttribute('mdw-surface', 'black');
-    } else {
-      document.documentElement.setAttribute('mdw-light', '');
-      document.documentElement.setAttribute('mdw-surface', 'white');
-    }
-  }
-}
-
 /** @return {Throttler} */
 export function getScrollThrottler() {
   if (!scrollThrottler) {
@@ -94,9 +38,9 @@ export function getScrollThrottler() {
  */
 export function onScrimScroll(event) {
   // JS needed for Safari
-  event.preventDefault();
   event.stopPropagation();
   if (event.type !== 'scroll') {
+    event.preventDefault();
     return;
   }
   /** @type {HTMLElement} */
@@ -109,81 +53,107 @@ export function onScrimScroll(event) {
   }
 }
 
-
-/** @return {void} */
-export function onScrimClick() {
-  const navdrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
-  if (navdrawer && navdrawer.getAttribute('aria-hidden') === 'false') {
-    if (window.innerWidth < TABLET_BREAKPOINT || document.body.getAttribute('mdw-navdrawer-style') === 'modal') {
-      hideNavDrawer();
-    }
+/** @return {boolean} */
+export function isNavDrawerModalShowing() {
+  const navDrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
+  if (!navDrawer) {
+    return false;
   }
-  const sidesheet = document.getElementsByClassName('mdw-layout__sidesheet')[0];
-  if (sidesheet && sidesheet.getAttribute('aria-hidden') === 'false') {
-    if (window.innerWidth < TABLET_BREAKPOINT || document.body.getAttribute('mdw-sidesheet-style') === 'modal') {
-      hideSideSheet();
-    }
+  if (window.location.hash !== `#${navDrawer.id}` && navDrawer.getAttribute('aria-hidden') !== 'false') {
+    return false;
   }
+  return (window.innerWidth < TABLET_BREAKPOINT || document.body.getAttribute('mdw-navdrawer-style') === 'modal');
 }
 
-/** @return {void} */
-export function showNavDrawer() {
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function showNavDrawer(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
   document.getElementsByClassName('mdw-layout__navdrawer')[0].setAttribute('aria-hidden', 'false');
 }
 
-/** @return {void} */
-export function hideNavDrawer() {
-  document.getElementsByClassName('mdw-layout__navdrawer')[0].setAttribute('aria-hidden', 'true');
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function hideNavDrawer(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
+  const navDrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
+  navDrawer.setAttribute('aria-hidden', 'true');
+  if (window.location.hash === `#${navDrawer.id}`) {
+    window.location.hash = '';
+  }
 }
 
-/** @return {void} */
-export function toggleNavDrawer() {
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function toggleNavDrawer(event) {
   if (document.getElementsByClassName('mdw-layout__navdrawer')[0].getAttribute('aria-hidden') === 'false') {
-    hideNavDrawer();
+    hideNavDrawer(event);
   } else {
-    showNavDrawer();
+    showNavDrawer(event);
   }
 }
 
-/** @return {void} */
-export function showSideSheet() {
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function showSideSheet(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
   document.getElementsByClassName('mdw-layout__sidesheet')[0].setAttribute('aria-hidden', 'false');
 }
 
-/** @return {void} */
-export function hideSideSheet() {
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function hideSideSheet(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
   document.getElementsByClassName('mdw-layout__sidesheet')[0].setAttribute('aria-hidden', 'true');
 }
 
-/** @return {void} */
-export function toggleSideSheet() {
-  if (document.getElementsByClassName('mdw-layout__sidesheet')[0].getAttribute('aria-hidden') === 'false') {
-    hideSideSheet();
-  } else {
-    showSideSheet();
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function onScrimClick(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
   }
-}
-
-/** @return {void} */
-export function detach() {
-  document.removeEventListener('scroll', onBodyScroll);
-  const content = getContentElement();
-  if (content) {
-    content.removeEventListener('scroll', onContentScroll);
+  if (isNavDrawerModalShowing()) {
+    hideNavDrawer();
   }
-  const scrim = document.getElementsByClassName('mdw-layout__scrim')[0];
-  if (scrim) {
-    scrim.removeEventListener('click', onScrimClick);
-    scrim.removeEventListener('scroll', onScrimScroll);
-    scrim.removeEventListener('touchmove', onScrimScroll);
-    scrim.removeEventListener('wheel', onScrimScroll);
+  const sidesheet = document.getElementsByClassName('mdw-layout__sidesheet')[0];
+  if (sidesheet && sidesheet.getAttribute('aria-hidden') === 'false') {
+    if (window.innerWidth < TABLET_BREAKPOINT || document.body.getAttribute('mdw-sidesheet-style') === 'modal') {
+      hideSideSheet();
+    }
   }
 }
 
-/** @return {void} */
-export function onBodyScroll() {
-  // position:sticky scrolling
-  getScrollThrottler().run(() => onScroll(true));
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function toggleSideSheet(event) {
+  if (document.getElementsByClassName('mdw-layout__sidesheet')[0].getAttribute('aria-hidden') === 'false') {
+    hideSideSheet(event);
+  } else {
+    showSideSheet(event);
+  }
 }
 
 /** @return {boolean} */
@@ -197,6 +167,15 @@ export function isTablet() {
     && window.innerWidth < TABLET_BREAKPOINT;
 }
 
+/** @return {HTMLElement} */
+export function getAppBarElement() {
+  if (!appBarElement) {
+    /** @type {HTMLElement} */
+    appBarElement = (document.getElementsByClassName('mdw-layout__appbar')[0]);
+  }
+  return appBarElement;
+}
+
 /** @return {boolean} */
 export function shouldAutoHideAppBar() {
   const appBar = getAppBarElement();
@@ -220,16 +199,18 @@ export function shouldAutoHideAppBar() {
 }
 
 /** @return {void} */
-export function onContentScroll() {
-  getScrollThrottler().run(() => onScroll(false));
-}
-
-/** @return {HTMLElement} */
-export function getAppBarElement() {
-  if (!appBarElement) {
-    appBarElement = document.getElementsByClassName('mdw-layout__appbar')[0];
+export function openAppBarFabCut() {
+  const appBar = getAppBarElement();
+  if (!appBar) {
+    return;
+  }
+  const fabCutAttr = appBar.getAttribute('mdw-fab-cut');
+  if (fabCutAttr == null) {
+    return;
+  }
+  if (fabCutAttr.indexOf('open') === -1) {
+    appBar.setAttribute('mdw-fab-cut', `open ${fabCutAttr}`.trim());
   }
-  return appBarElement;
 }
 
 /**
@@ -247,21 +228,6 @@ export function showFab(changeFabCut) {
   }
 }
 
-/** @return {void} */
-export function openAppBarFabCut() {
-  const appBar = getAppBarElement();
-  if (!appBar) {
-    return;
-  }
-  const fabCutAttr = appBar.getAttribute('mdw-fab-cut');
-  if (fabCutAttr == null) {
-    return;
-  }
-  if (fabCutAttr.indexOf('open') === -1) {
-    appBar.setAttribute('mdw-fab-cut', `open ${fabCutAttr}`.trim());
-  }
-}
-
 /** @return {void} */
 export function closeAppBarFabCut() {
   const appBar = getAppBarElement();
@@ -304,24 +270,12 @@ export function isFabShown() {
 /** @return {HTMLElement} */
 export function getContentElement() {
   if (!layoutContentElement) {
-    layoutContentElement = document.getElementsByClassName('mdw-layout__content')[0];
+    /** @type {HTMLElement} */
+    layoutContentElement = (document.getElementsByClassName('mdw-layout__content')[0]);
   }
   return layoutContentElement;
 }
 
-/** @return {void} */
-export function resetScroll() {
-  const appBar = getAppBarElement();
-  if (appBar) {
-    appBar.removeAttribute('mdw-hide');
-    appBar.removeAttribute('mdw-raise');
-  }
-  scrolledPastAppBar = false;
-  lastScrollY = 0 + MIN_SCROLL_DELTA;
-  penultimateScrollY = lastScrollY;
-  onScroll(true);
-}
-
 /**
  * @param {boolean} isBody
  * @return {void}
@@ -434,3 +388,77 @@ export function onScroll(isBody) {
     }
   }
 }
+
+/** @return {void} */
+export function onContentScroll() {
+  getScrollThrottler().run(() => onScroll(false));
+}
+
+/** @return {void} */
+export function onBodyScroll() {
+  // position:sticky scrolling
+  getScrollThrottler().run(() => onScroll(true));
+}
+
+/** @return {void} */
+export function resetScroll() {
+  const appBar = getAppBarElement();
+  if (appBar) {
+    appBar.removeAttribute('mdw-hide');
+    appBar.removeAttribute('mdw-raise');
+  }
+  scrolledPastAppBar = false;
+  lastScrollY = 0 + MIN_SCROLL_DELTA;
+  penultimateScrollY = lastScrollY;
+  onScroll(true);
+}
+
+/** @return {void} */
+export function attach() {
+  const appBar = getAppBarElement();
+  if (appBar) {
+    // Initialize with scroll up
+    document.body.addEventListener('scroll', onBodyScroll, getPassiveEventListenerOption());
+    const contentElement = getContentElement();
+    if (contentElement) {
+      contentElement.addEventListener('scroll', onContentScroll, getPassiveEventListenerOption());
+    }
+    resetScroll();
+  }
+
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-toggle'),
+    (el) => el.addEventListener('click', toggleNavDrawer));
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-show'),
+    (el) => el.addEventListener('click', showNavDrawer));
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__navdrawer-hide'),
+    (el) => el.addEventListener('click', hideNavDrawer));
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-toggle'),
+    (el) => el.addEventListener('click', toggleSideSheet));
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-show'),
+    (el) => el.addEventListener('click', showSideSheet));
+  iterateArrayLike(document.getElementsByClassName('mdw-layout__sidesheet-hide'),
+    (el) => el.addEventListener('click', hideSideSheet));
+  const scrim = document.getElementsByClassName('mdw-layout__scrim')[0];
+  if (scrim) {
+    scrim.addEventListener('click', onScrimClick);
+    scrim.addEventListener('scroll', onScrimScroll);
+    scrim.addEventListener('touchmove', onScrimScroll);
+    scrim.addEventListener('wheel', onScrimScroll);
+  }
+}
+
+/** @return {void} */
+export function detach() {
+  document.removeEventListener('scroll', onBodyScroll, getPassiveEventListenerOption());
+  const content = getContentElement();
+  if (content) {
+    content.removeEventListener('scroll', onContentScroll, getPassiveEventListenerOption());
+  }
+  const scrim = document.getElementsByClassName('mdw-layout__scrim')[0];
+  if (scrim) {
+    scrim.removeEventListener('click', onScrimClick);
+    scrim.removeEventListener('scroll', onScrimScroll);
+    scrim.removeEventListener('touchmove', onScrimScroll);
+    scrim.removeEventListener('wheel', onScrimScroll);
+  }
+}

package/components/layout/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';