@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/src/docs.scss

@@ -1,284 +0,0 @@
-html {
-  font-family: Roboto, sans-serif;
-  height: 100%;
-
-  // Prefer iOS Dynamic Type for accessibility support
-  font: -apple-system-body;
-}
-
-// Material Icon incorrectly changes RTL direction
-.material-icons {
-  direction: inherit;
-}
-
-
-body {
-  display: flex;
-  flex-direction: row;
-  margin: 0;
-  height: 100%;
-}
-
-.nav {
-  min-width: 150px;
-  max-width: 150px;
-}
-
-.comparison {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-.androidstatusbar {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  height: 24px;
-  padding: 0 8px;
-  font-size: 14px;
-  color: white;
-  [mdw-theme-fill~="light"] &:not([mdw-theme-fill]) {
-    background-color: #E0E0E0;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  [mdw-theme-fill~="dark"] &:not([mdw-theme-fill]) {
-    background-color: black;
-    color: rgba(255, 255, 255, 1);
-  }
-  .material-icons {
-    font-size: 18px;
-  }
-}
-
-.content {
-  flex: 1;
-  overflow-y: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  flex-direction: column;
-}
-
-.render {
-  max-width: 360px;
-  max-height: 640px;
-  border-color: #eee;
-  border-width: 1px;
-  border-style: solid;
-  box-sizing: border-box;
-  [mdw-theme-fill~="light"] & {
-    border-color: rgba(0,0,0,0.12);
-  }
-  [mdw-theme-fill~="dark"] & {
-    border-color: rgba(255,255,255,0.12);
-  }
-}
-
-.render,
-.target {
-  position: relative;
-  margin: 8px;
-  min-width: 360px;
-  height: 640px;
-  background-size: cover;
-  background-repeat: no-repeat;
-
-  display: flex;
-  flex-direction: column;
-  .clipped & {
-    max-height: 190px;
-  }
-  .clipped-236 & {
-    max-height: 236px;
-  }
-  .clipped-300 & {
-    max-height: 300px;
-  }
-  .clipped-304 & {
-    max-height: 304px;
-  }
-}
-
-
-.horizontal-controls {
-  display:inline-flex;
-  width:100%;
-  & > :not(:last-child) {
-    margin-right: 16px;
-    margin-left: 0;
-  }
-  [dir=rtl] & > :not(:last-child) {
-    margin-left: 16px;
-    margin-right: 0;
-  }
-}
-
-.display-flex {
-  display: flex;
-}
-[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;
-}
-
-.docs-render-overlay {
-  position:absolute;
-  left:0;
-  right:0;
-  bottom:0;
-  flex-direction:row-reverse
-}
-
-.component-sample {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  border-style: solid;
-  border-radius: 2px;
-  border-width: 1px;
-  min-height: 360px;
-  [mdw-theme-fill~="light"] & {
-    border-color: rgba(0,0,0,0.12);
-  }
-  [mdw-theme-fill~="dark"] & {
-    border-color: rgba(255,255,255,0.12);
-  }
-}
-
-.component-sample__container {
-  display: inline-flex;
-}
-
-.component-code {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 24px;
-  white-space: pre-wrap;
-  font-family: monospace;
-  flex-grow: 1;
-}
-
-
-.androidnavbar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  min-height: 48px;
-  height: 48px;
-  padding: 0 30px;
-  background-color: black;
-  color: white;
-  .material-icons {
-    font-size: 20px;
-  }
-  .material-icons.back-button {
-   transform: rotate(90deg);
-  }
-}
-
-
-#horizontalLine {
-  position: fixed;
-  width: 100%;
-  background-color: #0FF;
-  height: 1px;
-  left: 0px;
-  z-index: 25;
-  pointer-events: none;
-}
-
-.custom-no-results-indicator {
-  margin: 8px;
-  min-height: 48px;
-}
-
-#verticalLineLeft,
-#verticalLineRight {
-  height: 100%;
-  background-color: #0FF;
-  width: 1px;
-  top: 0px;
-  z-index: 25;
-  pointer-events: none;
-}
-
-#verticalLineLeft {
-  position: absolute;
-  margin-left: 8px;
-}
-
-#verticalLineRight {
-  position: fixed;
-}
-
-
-#Vintage50Input {
-  font-size: sp(34);
-}
-
-.type-comparison {
-  .content {
-    margin: 8px;
-    align-items: flex-start;
-    flex-direction: column;
-    display: flex;
-  }
-  .target {
-    margin-top: 42px;
-    background-position-x: -200px;
-    width: 760px;
-    height: 568px;
-  }
-  .mdw-type {
-    position: relative; // For tooltip position
-  }
-}
-.type-comparison-2 {
-  .target {
-    width: 760px;
-    height: 208px;
-  }
-}
-.type-comparison-3 {
-  .target {
-    width: 360px;
-    height: 300px;
-  }
-}
-
-.docs-layout {
-  .mdw-card {
-    padding: 16px 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-.mdw-button.docs-rtl:not([mdw-icon]) {
-  border-radius: 50%;
-  box-sizing: content-box;
-  max-width: 24px;
-  max-height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  font-size: 14px; // Don't scale
-}

package/docs/src/index.js

@@ -1,3 +0,0 @@
-import { setupMenuOptions } from './menuoptions';
-
-setupMenuOptions();

package/docs/src/index.pug

@@ -1,6 +0,0 @@
-include mixins.pug
-
-+header()
-  +navdrawer("Home")
-    h1.mdw-type Material Design Web
-  script(src='index.min.js')

package/docs/src/menuoptions.js

@@ -1,136 +0,0 @@
-import { setStorageItem, removeStorageItem, getStorageItem } from './storage';
-
-const darkAttribute = 'black dark';
-const lightAttribute = 'white light';
-
-/**
- * @param {boolean} value
- * @param {Element=} button
- * @return {void}
- */
-export function setRTLMode(value, button) {
-  if (value) {
-    document.documentElement.setAttribute('dir', 'rtl');
-    if (button) {
-      button.removeAttribute('mdw-inactive');
-    }
-    // element.setAttribute('mdw-active', '');
-    // Poor visibility even though spec says 70% opacity
-    setStorageItem('rtlmode', 'true');
-  } else {
-    document.documentElement.removeAttribute('dir');
-    if (button) {
-      button.setAttribute('mdw-inactive', '');
-    }
-    // element.removeAttribute('mdw-active');
-    removeStorageItem('rtlmode');
-  }
-}
-
-/**
- * @param {boolean} value
- * @param {Element=} button
- * @return {void}
- */
-export function setDarkMode(value, button) {
-  if (value) {
-    document.documentElement.setAttribute('mdw-theme-fill', darkAttribute);
-    if (button) {
-      button.removeAttribute('mdw-inactive');
-    }
-    // element.setAttribute('mdw-active', '');
-    // Poor visibility even though spec says 70% opacity
-  } else {
-    document.documentElement.setAttribute('mdw-theme-fill', lightAttribute);
-    if (button) {
-      button.setAttribute('mdw-inactive', '');
-    }
-    // element.removeAttribute('mdw-active');
-  }
-  setStorageItem('darkmode', value ? 'true' : 'false');
-}
-
-/**
- * @param {string} value
- * @param {Element=} button
- * @return {void}
- */
-export function setFontSize(value, button) {
-  if (value) {
-    document.documentElement.style.setProperty('font-size', value);
-    if (button) {
-      button.removeAttribute('mdw-inactive');
-    }
-    // element.setAttribute('mdw-active', '');
-    // Poor visibility even though spec says 70% opacity
-    setStorageItem('fontsize', value);
-  } else {
-    document.documentElement.style.removeProperty('font-size');
-    if (button) {
-      button.setAttribute('mdw-inactive', '');
-    }
-    // element.removeAttribute('mdw-active');
-    removeStorageItem('fontsize');
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-function setupRTLMode(element) {
-  if (getStorageItem('rtlmode') === 'true') {
-    setRTLMode(true, element);
-  }
-  element.addEventListener('click', () => {
-    if (document.documentElement.getAttribute('dir') === 'rtl') {
-      setRTLMode(false, element);
-    } else {
-      setRTLMode(true, element);
-    }
-  });
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-function setupDarkMode(element) {
-  if (getStorageItem('darkmode') === 'true') {
-    setDarkMode(true, element);
-  }
-  element.addEventListener('click', () => {
-    if (document.documentElement.getAttribute('mdw-theme-fill') === darkAttribute) {
-      setDarkMode(false, element);
-    } else {
-      setDarkMode(true, element);
-    }
-  });
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-function setupLargeFontMode(element) {
-  const fontsize = getStorageItem('fontsize');
-  setFontSize(fontsize, element);
-  element.addEventListener('click', () => {
-    if (document.documentElement.style.getPropertyValue('font-size')) {
-      setFontSize(null, element);
-    } else {
-      setFontSize('125%', element);
-    }
-  });
-}
-
-/** @return {void} */
-export function setupMenuOptions() {
-  const buttons = document.getElementById('docs-menu-buttons').getElementsByClassName('mdw-button');
-  const buttonRTLMode = buttons[0];
-  const buttonDarkMode = buttons[1];
-  const largeFontMode = buttons[2];
-  setupRTLMode(buttonRTLMode);
-  setupDarkMode(buttonDarkMode);
-  setupLargeFontMode(largeFontMode);
-}

package/docs/src/mixins.pug

@@ -1,139 +0,0 @@
-mixin androidstatusbar(fillColor)
-  .androidstatusbar(mdw-theme-fill=(fillColor ? fillColor : false))
-    div 12:30
-    i.material-icons(style="letter-spacing:2px;padding:0 2px") 
-
-mixin toolbar(fillColor, start, end)
-  .mdw-toolbar(mdw-theme-fill=(fillColor ? fillColor : false))
-    .mdw-toolbar__action
-      .mdw-toolbar__start
-        each icon in start
-          .mdw-button.material-icons(mdw-icon)= icon
-      .mdw-toolbar__title
-        block
-      .mdw-toolbar__end
-        each icon in end
-          .mdw-button.material-icons(mdw-icon mdw-more-button=(icon === 'more_vert'))= icon
-mixin androidnavbar
-  .androidnavbar
-    i.material-icons.back-button 
-    i.material-icons 
-    i.material-icons 
-mixin target(url)
-  .target(style=`background-image: url(${url})`)
-
-mixin header()
-  doctype html
-  html(lang='en')
-    head
-      title Material Design Web
-      meta(charset='utf-8')
-      meta(content='IE=edge', http-equiv='X-UA-Compatible')
-      meta(content='', name='description')
-      meta(content="width=device-width, initial-scale=1, viewport-fit=cover", name='viewport')
-      meta(name="theme-color" content="#E91E63")
-      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,700')
-      link(rel='stylesheet' href='docs.min.css')
-      link(rel='stylesheet' href='components.min.css')
-      link(rel='stylesheet' href='theming.min.css')
-      link(rel='stylesheet' href='theming.ie11.min.css' media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)")
-      script(src='prerender.min.js')
-    body.mdw-type
-      block
-
-mixin navdrawer(selected)
-  .mdw-navdrawer#docs-navdrawer
-    a.mdw-navdrawer__scrim(href="#")
-    .mdw-navdrawer__toolbar
-      .mdw-toolbar(mdw-theme-fill="accent-500 dark" mdw-app-bar)
-        .mdw-toolbar__action
-          .mdw-toolbar__start
-            .mdw-tooltip__wrapper
-              a.mdw-tooltip__target.mdw-button(mdw-icon href="#docs-navdrawer").material-icons menu
-              .mdw-tooltip Menu
-          .mdw-toolbar__title=selected
-          #docs-menu-buttons.mdw-toolbar__end
-            .mdw-tooltip__wrapper
-              .mdw-tooltip__target.mdw-button(mdw-inactive).docs-rtl RTL
-              .mdw-tooltip Right-to-Left
-            .mdw-tooltip__wrapper
-              .mdw-tooltip__target.mdw-button.material-icons(mdw-icon mdw-inactive) brightness_3
-              .mdw-tooltip Dark Mode
-            .mdw-tooltip__wrapper
-              .mdw-tooltip__target.mdw-button.material-icons(mdw-icon mdw-inactive) format_size
-              .mdw-tooltip Large Font
-    .mdw-navdrawer__drawer
-      .mdw-list
-        a.mdw-list__item(mdw-selected=selected=='Home' href='index.html' mdw-theme-color="primary")
-          .mdw-list__text Home
-        .mdw-list__subheader Components
-        a.mdw-list__item(mdw-selected=selected=='bottomnav' href="bottomnav.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons call_to_action
-          .mdw-list__text Bottom Navigation
-        a.mdw-list__item(mdw-selected=selected=='button' href="button.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons crop_landscape
-          .mdw-list__text Button
-        a.mdw-list__item(mdw-selected=selected=='card' href="card.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons crop_square
-          .mdw-list__text Card
-        a.mdw-list__item(mdw-selected=selected=='dialog' href="dialog.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons select_all
-          .mdw-list__text Dialog
-        a.mdw-list__item(mdw-selected=selected=='datatable' href="datatable.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons format_align_justify
-          .mdw-list__text Data Table
-        a.mdw-list__item(mdw-selected=selected=='elevation' href="elevation.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons layers
-          .mdw-list__text Elevation
-        a.mdw-list__item(mdw-selected=selected=='fab' href="fab.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons add_circle
-          .mdw-list__text Floating Action Button
-        a.mdw-list__item(mdw-selected=selected=='layout' href="layout.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons view_compact
-          .mdw-list__text Layout
-        a.mdw-list__item(mdw-selected=selected=='list' href="list.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons view_list
-          .mdw-list__text List
-        a.mdw-list__item(mdw-selected=selected=='menu' href="menu.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons picture_in_picture
-          .mdw-list__text Menu
-        a.mdw-list__item(mdw-selected=selected=='navdrawer' href="navdrawer.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons menu
-          .mdw-list__text Navigation Drawer
-        a.mdw-list__item(mdw-selected=selected=='progress' href="progress.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons timelapse
-          .mdw-list__text Progress
-        a.mdw-list__item(mdw-selected=selected=='search' href="search.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons search
-          .mdw-list__text Search
-        a.mdw-list__item(mdw-selected=selected=='selection' href="selection.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons toggle_on
-          .mdw-list__text Selection
-        a.mdw-list__item(mdw-selected=selected=='slider' href="slider.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons tune
-          .mdw-list__text Slider
-        a.mdw-list__item(mdw-selected=selected=='snackbar' href="snackbar.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons video_label
-          .mdw-list__text Snackbar
-        a.mdw-list__item(mdw-selected=selected=='tab' href="tab.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons tab
-          .mdw-list__text Tab
-        a.mdw-list__item(mdw-selected=selected=='textfield' href="textfield.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons text_fields
-          .mdw-list__text Text Field
-        a.mdw-list__item(mdw-selected=selected=='toolbar' href="toolbar.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons web_asset
-          .mdw-list__text Toolbar
-        a.mdw-list__item(mdw-selected=selected=='tooltip' href="tooltip.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons info
-          .mdw-list__text Tooltip
-        a.mdw-list__item(mdw-selected=selected=='type' href="type.html" mdw-theme-color="accent")
-          .mdw-list__icon.material-icons font_download
-          .mdw-list__text Typography
-    .mdw-navdrawer__content(style="padding-bottom:24px")
-      block
-      
-

package/docs/src/prerender.js

@@ -1,26 +0,0 @@
-import { setRTLMode, setDarkMode, setFontSize } from './menuoptions';
-import { getStorageItem } from './storage';
-
-const useRTLMode = getStorageItem('rtlmode') === 'true';
-const useDarkMode = getStorageItem('darkmode') === 'true';
-const fontsize = getStorageItem('fontsize');
-
-/** @return {boolean} */
-function checkIsStandaloneIOS() {
-  if (!navigator.standalone) {
-    return false;
-  }
-  const ua = navigator.userAgent.toLowerCase();
-  const isIPhone = /iphone/.test(ua);
-  const isIPad = /ipad/.test(ua);
-  return (isIPhone || isIPad);
-}
-
-setRTLMode(useRTLMode);
-setDarkMode(useDarkMode);
-setFontSize(fontsize);
-
-if (checkIsStandaloneIOS()) {
-  document.documentElement.setAttribute('mdw-ios', '');
-  document.documentElement.setAttribute('mdw-standalone', '');
-}

package/docs/src/sample-utils.js

@@ -1,108 +0,0 @@
-/**
- * @param {HTMLElement} element
- * @param {string=} linePrefix
- * @return {string}
- */
-function convertElementToCode(element, linePrefix = '') {
-  const htmlType = element.tagName.toLowerCase();
-  const attributes = [];
-  for (let i = 0; i < element.attributes.length; i += 1) {
-    const attribute = element.attributes.item(i);
-    if (attribute.value.length) {
-      attributes.push(`${attribute.name}="${attribute.value}"`);
-    } else {
-      attributes.push(attribute.name);
-    }
-  }
-  attributes.sort();
-  const syntaxItems = [htmlType, attributes.join(' ')];
-  const openingHTMLLine = `<${syntaxItems.filter(item => item).join(' ').trim()}>`;
-  const closingHTMLLine = `</${htmlType}>`;
-  const lines = [openingHTMLLine];
-  const innerLines = [];
-  let onlyText = true;
-  for (let i = 0; i < element.childNodes.length; i += 1) {
-    const child = element.childNodes.item(i);
-    let lineText;
-    if (child instanceof HTMLElement) {
-      lineText = convertElementToCode(child, `  ${linePrefix}`);
-      if (lineText.trim()) {
-        onlyText = false;
-      }
-    } else if (child.nodeValue) {
-      lineText = `  ${child.nodeValue}`;
-    }
-    if (lineText && lineText.trim()) {
-      innerLines.push(lineText);
-    }
-  }
-  if (onlyText) {
-    return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
-  }
-  innerLines
-    .filter(line => line.trim())
-    .forEach(line => lines.push(line));
-  lines.push(linePrefix + closingHTMLLine);
-  return linePrefix + lines.join('\n');
-}
-
-/**
- * @param {Element|NodeListOf<Element>} elements
- * @param {string} event
- * @param {Function} listener
- * @return {void}
- */
-function attachEventListener(elements, event, listener) {
-  let elementList;
-  if (elements instanceof Element) {
-    elementList = [elementList];
-  } else {
-    elementList = elements;
-  }
-  for (let i = 0; i < elementList.length; i += 1) {
-    const el = elementList[i];
-    el.addEventListener(event, listener);
-  }
-}
-
-/**
- * @param {Element} node
- * @return {Node}
- */
-function getChildTextNode(node) {
-  for (let i = 0; i < node.childNodes.length; i += 1) {
-    const childNode = node.childNodes[i];
-    if (childNode.nodeType === Node.TEXT_NODE) {
-      return childNode;
-    }
-  }
-  const textNode = document.createTextNode('');
-  node.appendChild(textNode);
-  return textNode;
-}
-
-/**
- * @param {Element} element
- * @param {string} tagname
- * @return {Element}
- */
-function changeElementTagName(element, tagname) {
-  const newElement = document.createElement(tagname);
-  for (let i = element.attributes.length - 1; i >= 0; i -= 1) {
-    const attr = element.attributes.item(i);
-    newElement.attributes.setNamedItem(attr.cloneNode());
-  }
-  while (element.firstChild) {
-    newElement.appendChild(element.firstChild);
-  }
-
-  element.parentElement.replaceChild(newElement, element);
-  return newElement;
-}
-
-export {
-  convertElementToCode,
-  attachEventListener,
-  getChildTextNode,
-  changeElementTagName,
-};