@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/src/complex/search.js

@@ -1,207 +0,0 @@
-import { List, ListItem } from '../../../components/core/list/index';
-import { TextField } from '../../../components/core/textfield/index';
-import { Search } from '../../../components/complex/search/index';
-
-const componentMap = new WeakMap();
-/** @return {void} */
-function buildCustomSearch1() {
-  const textfield = componentMap.get(document.getElementById('search-textfield-custom1'));
-  const list = componentMap.get(document.getElementById('search-list-custom1'));
-  const busyIndicator = textfield.element.querySelector('.custom-busy-indicator');
-  let resultsCache;
-  let listUpdated = false;
-  const customPerformSearch = () => {
-    if (listUpdated) {
-      return Promise.resolve();
-    }
-    if (resultsCache != null) {
-      return Promise.resolve(resultsCache);
-    }
-    return new Promise((resolve) => {
-      busyIndicator.style.setProperty('display', '');
-      const myData = [];
-      for(let key in window.navigator) {
-        myData.push({ line1: key, line2: navigator[key] });
-      }
-      setTimeout(() => {
-        resultsCache = myData;
-        resolve(myData);
-      }, 2000);
-    });
-  };
-  const customUpdateList = (items) => {
-    if (listUpdated) {
-      return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-      list.clear(componentMap);
-      busyIndicator.style.setProperty('display', 'none');
-      const markup = `
-      <div class="mdw-list__text">
-        <div class="mdw-list__text-line"></div>
-        <div class="mdw-list__text-line"></div>
-      </div>
-      `.trim();
-      items.forEach((item) => {
-        const listItem = document.createElement('li');
-        listItem.classList.add('mdw-list__item');
-        listItem.innerHTML = markup;
-        const lines = listItem.querySelectorAll('.mdw-list__text-line');
-        lines[0].textContent = item.line1;
-        lines[1].textContent = item.line2;
-        componentMap.set(listItem, new ListItem(listItem));
-        list.element.appendChild(listItem);
-      });
-      listUpdated = true;
-      resolve();
-    });
-  };
-  
-  const searchDocsCustom = new Search({
-    textfield,
-    list,
-    searchOnFocus: false,
-    dropdown: true,
-    textFilter: 'startsWith',
-    suggestionMethod: 'append',
-    performSearch: customPerformSearch,
-    updateList: customUpdateList,
-  });
-}
-
-/** @return {void} */
-function buildCustomSearch2() {
-  /**
-   * @param {HTMLElement} element
-   * @return {Promise}
-   */
-  function hideElement(element) {
-    return new Promise((resolve) => {
-      element.style.setProperty('display', 'none');
-      resolve();
-    });
-  }
-  /**
-   * @param {HTMLElement} element
-   * @return {Promise}
-   */
-  function showElement(element) {
-    return new Promise((resolve) => {
-      element.style.setProperty('display', '');
-      resolve();
-    });
-  }
-  const textfield = componentMap.get(document.getElementById('search-textfield-custom2'));
-  const list = componentMap.get(document.getElementById('search-list-custom2'));
-  const busyIndicator = textfield.element.querySelector('.custom-busy-indicator');
-  const noResultsIndicator = textfield.element.querySelector('.custom-no-results-indicator');
-  const customPerformSearch = (searchTerm) => {
-    /**
-     * @return {Promise}
-     */
-    function clearList() {
-      return new Promise((resolve) => {
-        list.clear(componentMap);
-        resolve();
-      });
-    }
-    /**
-     * @param {string} searchTerm
-     * @return {Promise}
-     */
-    function performSearch(searchTerm) {
-      return new Promise((resolve) => {
-        const myData = [];
-        for(let key in window.navigator) {
-          const value = navigator[key] && navigator[key].toString();
-          if (key.indexOf(searchTerm) !== -1 || (value && value.indexOf(searchTerm) !== -1)) {
-            myData.push({ line1: key, line2: navigator[key] });
-          }
-        }
-        setTimeout(() => {
-          resolve(myData);
-        }, 1000);
-      });
-    }
-    return clearList()
-      .then(() => showElement(busyIndicator))
-      .then(() => hideElement(noResultsIndicator))
-      .then(() => performSearch(searchTerm))
-      .catch((error) => {
-        console.error(error);
-      });
-  };
-  const customUpdateList = (items) => {
-    return hideElement(busyIndicator).then(() => {
-      if (!items.length) {
-        return showElement(noResultsIndicator);
-      }
-      const markup = `
-      <div class="mdw-list__text">
-        <div class="mdw-list__text-line"></div>
-        <div class="mdw-list__text-line"></div>
-      </div>
-      `.trim();
-      items.forEach((item) => {
-        const listItem = document.createElement('li');
-        listItem.classList.add('mdw-list__item');
-        listItem.innerHTML = markup;
-        const lines = listItem.querySelectorAll('.mdw-list__text-line');
-        lines[0].textContent = item.line1;
-        lines[1].textContent = item.line2;
-        componentMap.set(listItem, new ListItem(listItem));
-        list.element.appendChild(listItem);
-      });
-      return Promise.resolve();
-    });
-  };
-  const searchDocsCustom = new Search({
-    textfield,
-    list,
-    debounce: 300,
-    dropdown: true,
-    filterItems: false,
-    performSearch: customPerformSearch,
-    updateList: customUpdateList,
-  });
-}
-
-/** @return {void} */
-function setupSearches() {
-  const searchDocsSimple = new Search({
-    textfield: componentMap.get(document.getElementById('search-textfield-simple')),
-    list: componentMap.get(document.getElementById('search-list-simple')),
-  });
-  const searchDocsMultiline = new Search({
-    textfield: componentMap.get(document.getElementById('search-textfield-multiline')),
-    list: componentMap.get(document.getElementById('search-list-multiline')),
-    suggestionMethod: 'none',
-  });
-
-  buildCustomSearch1();
-  buildCustomSearch2();
-}
-
-/** @return {void} */
-function initializeMdwComponents() {
-  let components;
-
-  components = document.querySelectorAll('.js .mdw-textfield');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new TextField(components[i]));
-  }
-
-  components = document.querySelectorAll('.js .mdw-list');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new List(components[i]));
-  }
-
-  components = document.querySelectorAll('.js .mdw-list__item');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new ListItem(components[i]));
-  }
-}
-
-initializeMdwComponents();
-setupSearches();
-

package/docs/src/complex/search.pug

@@ -1,143 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("search")
-    .comparison.js
-      .render
-        +androidstatusbar('primary-700 dark')
-        .mdw-toolbar(mdw-theme-fill="primary-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__start
-              .mdw-button(mdw-icon).material-icons arrow_back
-            .mdw-toolbar__title
-              .mdw-textfield#search-textfield-simple(mdw-solo mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder="Search")
-            .mdw-toolbar__end
-              .mdw-button(mdw-icon).material-icons clear
-        .content(mdw-theme-fill="background-50 light")
-          ul.mdw-list#search-list-simple
-            li.mdw-list__item Attractions
-            li.mdw-list__item Dining
-            li.mdw-list__item Education
-            li.mdw-list__item Family
-            li.mdw-list__item Health
-            li.mdw-list__item Office
-            li.mdw-list__item Promotions
-            li.mdw-list__item Radio
-            li.mdw-list__item Recipes
-            li.mdw-list__item Sports
-            li.mdw-list__item Travel
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
-
-    .comparison.js
-      .render
-        +androidstatusbar('primary-700 dark')
-        .mdw-toolbar(mdw-theme-fill="primary-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__start
-              .mdw-button(mdw-icon).material-icons arrow_back
-            .mdw-toolbar__title
-              .mdw-textfield#search-textfield-multiline(mdw-solo mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder="Search")
-            .mdw-toolbar__end
-              .mdw-button(mdw-icon).material-icons clear
-        .content(mdw-theme-fill="background-50 light")
-          ul.mdw-list#search-list-multiline
-            li.mdw-list__subheader Today
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Brunch this weekend?
-                .mdw-list__text-block Ali Connors 
-                  span  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Summer BBQ
-                  span  4
-                .mdw-list__text-block to Alex, Scott, Jennifer
-                  span  — Wish I could come. but I'm out of town this weekend.
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Oui oui
-                .mdw-list__text-block Sandra Adams
-                  span  — Do you have Paris recommendations? Have you ever been?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Birthday gift
-                .mdw-list__text-block Trevor Hansen
-                  span  — Have any ideas about what we should get Heidi for her birthday?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Recipe to try
-                .mdw-list__text-block Britta Holt
-                  span  — We should eat this: Grated Squash, Corn, and tomatillo Tacos J
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Giants game
-                .mdw-list__text-block David Park
-                  span  — Any interest in seeing
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Montauk weekend
-                .mdw-list__text-block -----
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
-
-    .comparison.js
-      .render
-        .content.display-flex(mdw-theme-fill="background-100 light" style="padding:8px")
-          .flex-1.display-flex(flex-column)
-            p Text field dropdown with:
-            ul
-              li one-time search on first input
-              li startsWith text filter
-              li append input on selection
-            div
-              label.mdw-textfield#search-textfield-custom1(mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder=" ")
-                .mdw-textfield__label Property
-                .mdw-textfield__border-line
-                .mdw-textfield__dropdown(mdw-type="list" mdw-hide)
-                  .custom-busy-indicator.display-flex(flex-align-items="center")
-                    .mdw-progress-circle
-                      svg(viewBox="0 0 24 24")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                    span Searching...
-                  .mdw-list#search-list-custom1
-            p Text field dropdown with:
-            ul
-              li input-based search
-              li 300ms debounce
-              li replace input on selection
-              li disabled item filter
-            div
-              label.mdw-textfield#search-textfield-custom2(mdw-box)
-                input.mdw-textfield__input(placeholder=" ")
-                .mdw-textfield__label Property
-                .mdw-textfield__border-line
-                .mdw-textfield__dropdown(mdw-type="list" mdw-hide)
-                  .custom-busy-indicator.display-flex(flex-align-items="center")
-                    .mdw-progress-circle
-                      svg(viewBox="0 0 24 24")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                    span Searching...
-                  .custom-no-results-indicator.display-flex(flex-align-items="center" style="display:none")
-                    span No results found.
-                  .mdw-list#search-list-custom2
-  script(src='search.min.js')

package/docs/src/components.scss

@@ -1 +0,0 @@
-@import "../../components/all-components.scss";

package/docs/src/core/bottomnav.js

@@ -1,22 +0,0 @@
-import setupImageTargets from '../targetHandler';
-import { Bottomnav, BottomnavItem } from '../../../components/core/bottomnav/index';
-
-const componentMap = new WeakMap();
-
-/** @return {void} */
-function initializeMdwComponents() {
-  let components;
-  components = document.querySelectorAll('.js .mdw-bottomnav');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new Bottomnav(components[i]));
-  }
-
-  components = document.querySelectorAll('.js .mdw-bottomnav__item');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new BottomnavItem(components[i]));
-  }
-}
-
-initializeMdwComponents();
-setupImageTargets();
-

package/docs/src/core/bottomnav.pug

@@ -1,93 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("bottomnav")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison.clipped-300
-      .render.mdw-theme-bottomnav
-        .content.display-flex(mdw-theme-fill="background-50 light")
-          .flex-1
-          form.mdw-bottomnav(mdw-theme-color="primary")
-            label.mdw-bottomnav__item
-              input(type="radio" name="bottomnav" value="recents")
-              .mdw-bottomnav__icon.material-icons history
-              .mdw-bottomnav__label Recents
-            label.mdw-bottomnav__item
-              input(type="radio" name="bottomnav" value="favorites" checked)
-              .mdw-bottomnav__icon.material-icons favorite
-              .mdw-bottomnav__label Favorites
-            label.mdw-bottomnav__item
-              input(type="radio" name="bottomnav" value="nearby")
-              .mdw-bottomnav__icon.material-icons near_me
-              .mdw-bottomnav__label Nearby
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZjN1eld5MjRXb2s/components-bottomnavigation-usage1.png')
-
-    .comparison.clipped-300
-      .render.mdw-theme-bottomnav
-        .content.display-flex(mdw-theme-fill="background-50 light")
-          .flex-1
-          form.mdw-bottomnav(mdw-theme-fill="primary-700 dark" mdw-shifting)
-            input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
-            label.mdw-bottomnav__item(for='value1')
-              .mdw-bottomnav__icon.material-icons tv
-              .mdw-bottomnav__label Movies & TV
-            input(type="radio" name="shiftingbottomnav" value="music" id='value2' checked )
-            label.mdw-bottomnav__item(for='value2')
-              .mdw-bottomnav__icon.material-icons music_note
-              .mdw-bottomnav__label Music
-            input(type="radio" name="shiftingbottomnav" value="books" id='value3')
-            label.mdw-bottomnav__item(for='value3')
-              .mdw-bottomnav__icon.material-icons book
-              .mdw-bottomnav__label Books
-            input(type="radio" name="shiftingbottomnav" value="newsstand" id='value4')
-            label.mdw-bottomnav__item(for='value4')
-              .mdw-bottomnav__icon.material-icons assignment
-              .mdw-bottomnav__label Newsstand
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png')
-
-    .comparison.clipped-300
-      .render.mdw-theme-bottomnav
-        .content.display-flex(mdw-theme-fill="background-50 light")
-          .flex-1
-          form.mdw-bottomnav(mdw-theme-fill="primary-700 dark" mdw-shifting)
-            label.mdw-bottomnav__item
-              input(type="radio" name="shiftingbottomnav" value="movies")
-              .mdw-bottomnav__icon.material-icons tv
-              .mdw-bottomnav__label Movies & TV
-            label.mdw-bottomnav__item
-              input(type="radio" name="shiftingbottomnav" value="music" checked)
-              .mdw-bottomnav__icon.material-icons music_note
-              .mdw-bottomnav__label Music
-            label.mdw-bottomnav__item
-              input(type="radio" name="shiftingbottomnav" value="books")
-              .mdw-bottomnav__icon.material-icons book
-              .mdw-bottomnav__label Books
-            label.mdw-bottomnav__item
-              input(type="radio" name="shiftingbottomnav" value="newsstand")
-              .mdw-bottomnav__icon.material-icons assignment
-              .mdw-bottomnav__label Newsstand
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png')
-
-    .comparison.clipped-300.js
-      .render.mdw-theme-bottomnav
-        .content.display-flex(mdw-theme-fill="background-50 light")
-          .flex-1
-            p Javascript version without radio buttons
-          .mdw-bottomnav(mdw-theme-color="primary")
-            .mdw-bottomnav__item
-              .mdw-bottomnav__icon.material-icons history
-              .mdw-bottomnav__label Recents
-            .mdw-bottomnav__item(selected)
-              .mdw-bottomnav__icon.material-icons favorite
-              .mdw-bottomnav__label Favorites
-            .mdw-bottomnav__item
-              .mdw-bottomnav__icon.material-icons near_me
-              .mdw-bottomnav__label Nearby
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png')
-  script(src='bottomnav.min.js')

package/docs/src/core/button.js

@@ -1,16 +0,0 @@
-import setupImageTargets from '../targetHandler';
-import { Button } from '../../../components/core/button/index';
-
-const componentMap = new WeakMap();
-
-/** @return {void} */
-function initializeMdwComponents() {
-  const components = document.querySelectorAll('.js .mdw-button');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new Button(components[i]));
-  }
-}
-
-initializeMdwComponents();
-setupImageTargets();
-

package/docs/src/core/button.pug

@@ -1,73 +0,0 @@
-include ../mixins.pug
-
-mixin button-test
-  div.display-flex.flex-wrap
-    .mdw-button Flat
-      .mdw-button__focus-ring
-    .mdw-button(mdw-raised) Raised
-      .mdw-button__focus-ring
-    .mdw-button(mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    .mdw-button(mdw-raised="always") +Raised
-      .mdw-button__focus-ring
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    .mdw-button(mdw-theme-color="primary") Flat
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-color="primary" mdw-raised) Raised
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-color="primary" mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-color="accent-A100") accent
-      .mdw-button__focus-ring
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    .mdw-button(mdw-theme-fill="primary dark") Flat
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-fill="primary dark" mdw-raised) Raised
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-fill="primary dark" mdw-raised disabled) Disabled
-      .mdw-button__focus-ring
-    .mdw-button(mdw-theme-fill="accent-A100 light" mdw-raised) accent
-      .mdw-button__focus-ring
-  div(style="height:24px")
-  div.display-flex.flex-wrap
-    .mdw-button(mdw-icon).material-icons favorite
-    .mdw-button(mdw-theme-color="warn dark" mdw-icon).material-icons favorite
-    .mdw-button(mdw-theme-fill="warn dark" mdw-icon).material-icons favorite
-    .mdw-button(mdw-theme-fill="warn dark" mdw-icon mdw-raised).material-icons favorite
-    .mdw-button(mdw-theme-fill="warn dark" mdw-icon mdw-raised disabled).material-icons favorite
-    .mdw-button(mdw-icon disabled).material-icons favorite
-
-+header()
-  +navdrawer("button")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison
-      .render
-        +androidstatusbar('background-400')
-        +toolbar('background-50', [], []) CSS Only
-        .content(mdw-theme-fill="background-50 light" style="padding: 16px 0")
-          div
-            +button-test
-          div(style="height:24px")
-          div(mdw-theme-fill="background-900 dark" style="padding-bottom: 8px")
-            +button-test
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsX0xZMnFkR1ZOVmc/components-buttons-main6.png')
-
-    .comparison
-      .render.js
-        +androidstatusbar('background-400 light')
-        +toolbar('background-50', [], []) Javascript Version
-        .content(mdw-theme-fill="background-50 light" style="padding: 16px 0")
-          div
-            +button-test
-          div(style="height:24px")
-          div(mdw-theme-fill="background-900 dark" style="padding-bottom: 8px")
-            +button-test
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsX0xZMnFkR1ZOVmc/components-buttons-main6.png',
-      'js')
-  script(src='button.min.js')

package/docs/src/core/list.js

@@ -1,21 +0,0 @@
-import setupImageTargets from '../targetHandler';
-import { List, ListItem } from '../../../components/core/list/index';
-
-const componentMap = new WeakMap();
-
-/** @return {void} */
-function initializeMdwComponents() {
-  let components;
-  components = document.querySelectorAll('.js .mdw-list');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new List(components[i]));
-  }
-
-  components = document.querySelectorAll('.js .mdw-list__item');
-  for (let i = 0; i < components.length; i += 1) {
-    componentMap.set(components[i], new ListItem(components[i]));
-  }
-}
-
-initializeMdwComponents();
-setupImageTargets();