@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/layout/_theme.scss

@@ -0,0 +1,44 @@
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/theme/_mixins.scss' as theme;
+
+$themeValues: () !default;
+
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('layout', $themeValues, $key, $type);
+}
+
+@mixin addThemeRules($type: 'var') {
+  @if ($type == 'var') {
+    .mdw-layout__appbar[mdw-fab-cut],
+    .mdw-layout__appbar.mdw-theme[mdw-fab-cut] {
+      background-color: transparent;
+    }
+
+    .mdw-layout__appbar-shape {
+      color: RGB(var(--mdw-surface));
+    }
+  }
+
+  @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 {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
+}
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
+}
+
+
+@include theme.addComponentCSSVariableRules('layout', $themeValues) {
+  @include addThemeRules();
+}
+

package/components/layout/index.js

@@ -0,0 +1,464 @@
+import { getPassiveEventListenerOption, iterateArrayLike } from '../../core/dom.js';
+import Throttler from '../../core/throttler.js';
+
+const MIN_SCROLL_DELTA = 24; // Avoid finger bounce
+
+const MOBILE_BREAKPOINT = 600;
+const TABLET_BREAKPOINT = 1024;
+
+// Throttler will execute at earliest convenience
+// 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 {Throttler} */
+export function getScrollThrottler() {
+  if (!scrollThrottler) {
+    scrollThrottler = new Throttler(SCROLL_THROTTLE_TIME_MS);
+  }
+  return scrollThrottler;
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onScrimScroll(event) {
+  // JS needed for Safari
+  event.stopPropagation();
+  if (event.type !== 'scroll') {
+    event.preventDefault();
+    return;
+  }
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (element.scrollTop !== element.scrollHeight / 4) {
+    element.scrollTop = element.scrollHeight / 4;
+  }
+  if (element.scrollLeft !== element.scrollWidth / 4) {
+    element.scrollLeft = element.scrollWidth / 4;
+  }
+}
+
+/** @return {boolean} */
+export function isNavDrawerModalShowing() {
+  const navDrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
+  if (!navDrawer) {
+    return false;
+  }
+  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');
+}
+
+/**
+ * @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');
+}
+
+/**
+ * @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 = '';
+  }
+}
+
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function toggleNavDrawer(event) {
+  if (document.getElementsByClassName('mdw-layout__navdrawer')[0].getAttribute('aria-hidden') === 'false') {
+    hideNavDrawer(event);
+  } else {
+    showNavDrawer(event);
+  }
+}
+
+/**
+ * @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');
+}
+
+/**
+ * @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');
+}
+
+/**
+ * @param {MouseEvent} [event]
+ * @return {void}
+ */
+export function onScrimClick(event) {
+  if (event && event.target instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
+  if (isNavDrawerModalShowing()) {
+    hideNavDrawer();
+  }
+  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();
+    }
+  }
+}
+
+/**
+ * @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} */
+export function isMobile() {
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
+
+/** @return {boolean} */
+export function isTablet() {
+  return window.innerWidth >= MOBILE_BREAKPOINT
+    && 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();
+  if (!appBar) {
+    return false;
+  }
+  const autoHide = appBar.getAttribute('mdw-autohide');
+  if (autoHide == null) {
+    return false;
+  }
+  if (autoHide === '') {
+    return true;
+  }
+  if (autoHide.indexOf('tablet') !== -1 && isTablet()) {
+    return true;
+  }
+  if (autoHide.indexOf('mobile') !== -1 && isMobile()) {
+    return true;
+  }
+  return false;
+}
+
+/** @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());
+  }
+}
+
+/**
+ * @param {boolean} [changeFabCut=true]
+ * @return {void}
+ */
+export function showFab(changeFabCut) {
+  const fabElement = document.getElementsByClassName('mdw-layout__fab')[0];
+  if (!fabElement) {
+    return;
+  }
+  fabElement.setAttribute('aria-hidden', 'false');
+  if (changeFabCut !== false) {
+    openAppBarFabCut();
+  }
+}
+
+/** @return {void} */
+export function closeAppBarFabCut() {
+  const appBar = getAppBarElement();
+  if (!appBar) {
+    return;
+  }
+  const fabCutAttr = appBar.getAttribute('mdw-fab-cut');
+  if (!fabCutAttr) {
+    return;
+  }
+  if (fabCutAttr.indexOf('open') !== -1) {
+    appBar.setAttribute('mdw-fab-cut', fabCutAttr.replace('open', '').trim());
+  }
+}
+
+/**
+ * @param {boolean} [changeFabCut=true]
+ * @return {void}
+ */
+export function hideFab(changeFabCut) {
+  const fabElement = document.getElementsByClassName('mdw-layout__fab')[0];
+  if (!fabElement) {
+    return;
+  }
+  fabElement.setAttribute('aria-hidden', 'true');
+  if (changeFabCut !== false) {
+    closeAppBarFabCut();
+  }
+}
+
+/** @return {boolean} */
+export function isFabShown() {
+  const fabElement = document.getElementsByClassName('mdw-layout__fab')[0];
+  if (!fabElement) {
+    return false;
+  }
+  return fabElement.getAttribute('aria-hidden') !== 'true';
+}
+
+/** @return {HTMLElement} */
+export function getContentElement() {
+  if (!layoutContentElement) {
+    /** @type {HTMLElement} */
+    layoutContentElement = (document.getElementsByClassName('mdw-layout__content')[0]);
+  }
+  return layoutContentElement;
+}
+
+/**
+ * @param {boolean} isBody
+ * @return {void}
+ */
+export function onScroll(isBody) {
+  const contentElement = getContentElement();
+  const scrollElement = isBody ? document.body : contentElement;
+  const currentScrollY = scrollElement.scrollTop;
+  const change = currentScrollY - lastScrollY;
+  const delta = Math.abs(change);
+  if (delta === 0) {
+    // Horizontal scroll?
+    return;
+  }
+  if (currentScrollY < 0 && lastScrollY <= 0) {
+    // Repeated overscroll event
+    return;
+  }
+
+  const scrollBottom = scrollElement.scrollHeight - scrollElement.clientHeight;
+  const scrollBottomDistance = scrollBottom - currentScrollY;
+  const scrollTopChange = currentScrollY <= 0
+    || lastScrollY <= 0;
+  const scrollBottomChange = scrollBottomDistance === 0 && lastScrollBottomDistance !== 0;
+
+  lastScrollBottomDistance = scrollBottomDistance;
+  if (delta < MIN_SCROLL_DELTA && !scrollTopChange && !scrollBottomChange) {
+    return;
+  }
+
+  const didScrollUp = (scrollBottomDistance > 0) && (change < 0);
+  const isAtScrollTop = didScrollUp && currentScrollY <= 0;
+  const newScrollUp = didScrollUp && lastScrollY >= penultimateScrollY;
+  const didScrollDown = (change > 0);
+  const isAtScrollBottom = didScrollDown && (scrollBottomDistance <= 0);
+  const newScrollDown = didScrollDown && lastScrollY <= penultimateScrollY;
+
+  penultimateScrollY = lastScrollY;
+  lastScrollY = currentScrollY;
+
+  // To avoid DOM read, abort if scrolling in same direction and has already past app bar
+  if ((change === 0) || (!isAtScrollTop && !newScrollUp && !isAtScrollBottom && !newScrollDown
+    && scrolledPastAppBar)) {
+    return;
+  }
+
+  const appBar = getAppBarElement();
+  if (!appBar) {
+    return;
+  }
+
+  const bottomAppBar = appBar.hasAttribute('mdw-bottom');
+
+  const scrolledAway = bottomAppBar ? didScrollUp : didScrollDown;
+  const newScrollAway = scrolledAway && (bottomAppBar ? newScrollUp : newScrollDown);
+
+  // For code readability
+  const scrolledBack = !scrolledAway;
+  const newScrollBack = scrolledBack && (bottomAppBar ? newScrollDown : newScrollUp);
+
+  const isAtRest = (bottomAppBar ? isAtScrollBottom : isAtScrollTop);
+
+  if (scrolledBack) {
+    // scrolledPastAppBar needs to be recalculated
+    scrolledPastAppBar = false;
+  }
+
+  // Don't perform on each scroll back, only on first
+  if (newScrollBack || isAtRest) {
+    if (appBar.hasAttribute('mdw-autohide')) {
+      appBar.removeAttribute('mdw-hide');
+      appBar.style.removeProperty('margin-top');
+    }
+  }
+
+  if (!scrolledPastAppBar) {
+    if (bottomAppBar) {
+      scrolledPastAppBar = currentScrollY <= scrollBottom - appBar.clientHeight;
+    } else {
+      scrolledPastAppBar = currentScrollY > appBar.clientHeight;
+    }
+  }
+
+  if (isAtRest) {
+    if (appBar.hasAttribute('mdw-autoprominent')) {
+      appBar.setAttribute('mdw-prominent', '');
+    }
+    if (appBar.hasAttribute('mdw-autoraise')) {
+      appBar.removeAttribute('mdw-raise');
+    }
+    return;
+  }
+
+  // Not at rest
+  if (scrolledAway && scrolledPastAppBar) {
+    if (shouldAutoHideAppBar()) {
+      appBar.setAttribute('mdw-hide', '');
+      if (!isBody) {
+        appBar.style.setProperty('margin-top', `${-appBar.clientHeight}px`);
+      }
+    }
+    if (appBar.hasAttribute('mdw-autoprominent')) {
+      appBar.removeAttribute('mdw-prominent');
+    }
+  }
+
+  if (newScrollAway) {
+    if (appBar.hasAttribute('mdw-autoraise')) {
+      appBar.setAttribute('mdw-raise', '');
+    }
+  }
+}
+
+/** @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

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