@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/datatable.eta

@@ -1,323 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'datatable'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
-      <div class="mdw-datatable mdw-theme" mdw-ink="primary" style="overflow-x:auto;">
-        <table>
-          <caption>Standard HTML Table (CSS Only)</caption>
-          <thead>
-            <tr>
-              <th>Dessert (100g serving)</th>
-              <th>Calories</th>
-              <th>Fat (g)</th>
-              <th>Carbs (g)</th>
-              <th>Protein (g)</th>
-              <th>Sodium (mg)</th>
-              <th>Calcium (%)</th>
-              <th>Iron (%)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Frozen Yogurt</td>
-              <td>159</td>
-              <td>6.0</td>
-              <td>24</td>
-              <td>4.0</td>
-              <td>87</td>
-              <td>14%</td>
-              <td>1%</td>
-            </tr>
-            <tr>
-              <td>Ice cream sandwich</td>
-              <td>237</td>
-              <td>9.0</td>
-              <td>37</td>
-              <td>4.3</td>
-              <td>129</td>
-              <td>8%</td>
-              <td>1%</td>
-            </tr>
-            <tr>
-              <td>Eclair</td>
-              <td>262</td>
-              <td>16.0</td>
-              <td>24</td>
-              <td>6.0</td>
-              <td>337</td>
-              <td>6%</td>
-              <td>7%</td>
-            </tr>
-            <tr>
-              <td>Cupcake</td>
-              <td>305</td>
-              <td>3.7</td>
-              <td>67</td>
-              <td>4.3</td>
-              <td>413</td>
-              <td>3%</td>
-              <td>8%</td>
-            </tr>
-            <tr>
-              <td>Gingerbread</td>
-              <td>356</td>
-              <td>16.0</td>
-              <td>49</td>
-              <td>3.9</td>
-              <td>327</td>
-              <td>7%</td>
-              <td>16%</td>
-            </tr>
-            <tr>
-              <td>Jelly bean</td>
-              <td>375</td>
-              <td>0.0</td>
-              <td>94</td>
-              <td>0.0</td>
-              <td>50</td>
-              <td>0%</td>
-              <td>0%</td>
-            </tr>
-            <tr>
-              <td>Lollipop</td>
-              <td>392</td>
-              <td>0.2</td>
-              <td>98</td>
-              <td>0</td>
-              <td>38</td>
-              <td>0%</td>
-              <td>2%</td>
-            </tr>
-            <tr>
-              <td>Honeycomb</td>
-              <td>408</td>
-              <td>3.2</td>
-              <td>87</td>
-              <td>6.5</td>
-              <td>562</td>
-              <td>0%</td>
-              <td>45%</td>
-            </tr>
-            <tr>
-              <td>Donut</td>
-              <td>452</td>
-              <td>25.0</td>
-              <td>51</td>
-              <td>4.9</td>
-              <td>326</td>
-              <td>2%</td>
-              <td>22%</td>
-            </tr>
-            <tr>
-              <td>Kitkat</td>
-              <td>518</td>
-              <td>26.0</td>
-              <td>65</td>
-              <td>7</td>
-              <td>54</td>
-              <td>12%</td>
-              <td>6%</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
-      <div class="mdw-datatable js mdw-theme" mdw-ink="primary" mdw-cell-focusable>
-        <div class="mdw-datatable__header">
-          <div class="mdw-datatable__header-text">Customized HTML Table</div>
-        </div>
-        <div class="mdw-datatable__scroller">
-          <table>
-            <thead>
-              <tr>
-                <th aria-sort="none" mdw-text mdw-primary-column><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Dessert (100g serving)</th>
-                <th aria-sort="ascending" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span><span class="mdw-tooltip__wrapper"><span class="mdw-tooltip__target">Calories</span><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>The total amount of food energy in the given serving size.</div></span></th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Fat (g)</th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Carbs (g)</th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Protein (g)</th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Sodium (mg)</th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Calcium (%)</th>
-                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Iron (%)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td mdw-text mdw-primary-column>Frozen Yogurt</td>
-                <td mdw-number>159</td>
-                <td mdw-number>6.0</td>
-                <td mdw-number>24</td>
-                <td mdw-number>4.0</td>
-                <td mdw-number>87</td>
-                <td mdw-number>14%</td>
-                <td mdw-number>1%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Ice cream sandwich</td>
-                <td mdw-number>237</td>
-                <td mdw-number>9.0</td>
-                <td mdw-number>37</td>
-                <td mdw-number>4.3</td>
-                <td mdw-number>129</td>
-                <td mdw-number>8%</td>
-                <td mdw-number>1%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Eclair</td>
-                <td mdw-number>262</td>
-                <td mdw-number>16.0</td>
-                <td mdw-number>24</td>
-                <td mdw-number>6.0</td>
-                <td mdw-number>337</td>
-                <td mdw-number>6%</td>
-                <td mdw-number>7%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Cupcake</td>
-                <td mdw-number>305</td>
-                <td mdw-number>3.7</td>
-                <td mdw-number>67</td>
-                <td mdw-number>4.3</td>
-                <td mdw-number>413</td>
-                <td mdw-number>3%</td>
-                <td mdw-number>8%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Gingerbread</td>
-                <td mdw-number>356</td>
-                <td mdw-number>16.0</td>
-                <td mdw-number>49</td>
-                <td mdw-number>3.9</td>
-                <td mdw-number>327</td>
-                <td mdw-number>7%</td>
-                <td mdw-number>16%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Jelly bean</td>
-                <td mdw-number>375</td>
-                <td mdw-number>0.0</td>
-                <td mdw-number>94</td>
-                <td mdw-number>0.0</td>
-                <td mdw-number>50</td>
-                <td mdw-number>0%</td>
-                <td mdw-number>0%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Lollipop</td>
-                <td mdw-number>392</td>
-                <td mdw-number>0.2</td>
-                <td mdw-number>98</td>
-                <td mdw-number>0</td>
-                <td mdw-number>38</td>
-                <td mdw-number>0%</td>
-                <td mdw-number>2%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Honeycomb</td>
-                <td mdw-number>408</td>
-                <td mdw-number>3.2</td>
-                <td mdw-number>87</td>
-                <td mdw-number>6.5</td>
-                <td mdw-number>562</td>
-                <td mdw-number>0%</td>
-                <td mdw-number>45%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Donut</td>
-                <td mdw-number>452</td>
-                <td mdw-number>25.0</td>
-                <td mdw-number>51</td>
-                <td mdw-number>4.9</td>
-                <td mdw-number>326</td>
-                <td mdw-number>2%</td>
-                <td mdw-number>22%</td>
-              </tr>
-              <tr>
-                <td mdw-text mdw-primary-column>Kitkat</td>
-                <td mdw-number>518</td>
-                <td mdw-number>26.0</td>
-                <td mdw-number>65</td>
-                <td mdw-number>7</td>
-                <td mdw-number>54</td>
-                <td mdw-number>12%</td>
-                <td mdw-number>6%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="mdw-datatable__footer">
-          <div class="mdw-datatable__footer-options">
-            <div>Rows per page</div>
-            <label class="mdw-textfield" mdw-solo>
-              <select class="mdw-textfield__input">
-                <option class="mdw-theme" mdw-surface="card" value="10">10</option>
-                <option class="mdw-theme" mdw-surface="card" value="25">25</option>
-                <option class="mdw-theme" mdw-surface="card" value="50">50</option>
-                <option class="mdw-theme" mdw-surface="card" value="100">100</option>
-              </select>
-              <div class="mdw-textfield__icon" mdw-dropdown></div>
-            </label>
-          </div>
-          <div class="mdw-datatable__footer-details">1-10 of 10</div>
-          <div class="mdw-datatable__footer-controls">
-            <%~ includeFile(T, { button: {  icon:true, disabled:true , class:'material-icons', text:'chevron_left' }}) %>
-            <%~ includeFile(T, { button: {  icon: true, disabled:true , class:'material-icons', text:'chevron_right' }}) %>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
-      <div class="mdw-datatable js mdw-theme" id="dynamic-table" mdw-ink="primary" mdw-row-focusable style="max-height:80vh;">
-        <div class="mdw-datatable__header">
-          <div class="mdw-datatable__header-text">Data Table Adapter</div>
-          <div class="mdw-datatable__header-controls">
-            <div class="mdw-menu__wrapper">
-              <%~ includeFile(T, { button: {  icon:true, ink:'primary' , class:'material-icons', attributes: {'mdw-overlay-default':"medium", 'aria-pressed':"false"}, text:'filter_list' }}) %>
-              <div class="mdw-menu" mdw-position="end">
-                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
-                  <div class="mdw-menu__item" aria-checked="true" data-filter="none">
-                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">No filter</div>
-                  </div>
-                  <div class="mdw-menu__item" data-filter="md">
-                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">Contains 'md'</div>
-                  </div>
-                  <div class="mdw-menu__item" data-filter="div9">
-                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">Random divisible by 9</div>
-                  </div>
-                  <div class="mdw-menu__item" data-filter="bool">
-                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">bool is checked</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="mdw-menu__wrapper">
-              <%~ includeFile(T, { button: {  icon:true, ink:'medium' , class:'material-icons', text:'more_vert' }}) %>
-              <div class="mdw-menu" mdw-position="end">
-                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
-                  <div class="mdw-menu__item" aria-checked="true" data-option="throttle">
-                    <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">Throttle</div>
-                  </div>
-                  <div class="mdw-menu__item" aria-checked="true" data-option="paginate">
-                    <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
-                    <div class="mdw-menu__text">Paginate</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script src="datatable.min.js"></script>

package/docs/pages/datatable.js

@@ -1,164 +0,0 @@
-import DataTableAdapter from '../../adapters/datatable/index.js';
-import * as Button from '../../components/button/index.js';
-import * as DataTable from '../../components/datatable/index.js';
-import * as Menu from '../../components/menu/index.js';
-import * as MenuItem from '../../components/menu/item.js';
-import * as Selection from '../../components/selection/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
-
-/** @return {void} */
-function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.mdw-datatable.js'), DataTable.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-button'), Button.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-menu'), Menu.attach);
-}
-
-/**
- * @typedef {Object} CustomData
- * @prop {boolean} selected
- * @prop {string} text
- * @prop {string} text2
- * @prop {boolean} check1
- * @prop {number} increment
- * @prop {number} random
- */
-
-/** @type {DataTableAdapter<CustomData>} */
-let dynamicTableAdapter = null;
-/** @return {void} */
-function buildDynamicTable() {
-  /** @type {CustomData[]} */
-  const datasource = [];
-  let count = 1;
-  const addDatasourceObject = () => {
-    datasource.push({
-      selected: false,
-      text: Math.random().toString(36).substring(2),
-      text2: Math.random().toString(36).substring(2),
-      check1: Math.random() > 0.5,
-      increment: count,
-      random: Math.floor(Math.random() * 99999),
-    });
-    count += 1;
-  };
-  for (let i = 0; i < 256; i += 1) {
-    addDatasourceObject();
-  }
-
-  const datatable = document.getElementById('dynamic-table');
-  dynamicTableAdapter = new DataTableAdapter({ datatable, datasource });
-  dynamicTableAdapter.addColumn({
-    key: 'selected',
-    type: 'checkbox',
-    rowSelector: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'text',
-    name: 'Primary Column (full-width)',
-    primaryColumn: true,
-    sortable: true,
-    type: 'text',
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'text2',
-    name: 'Text field',
-    sortable: true,
-    type: 'text',
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'check1',
-    name: 'bool',
-    type: 'checkbox',
-    tooltip: 'Non-selection boolean value',
-    sortable: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'increment',
-    name: 'Increment',
-    type: 'number',
-    sortable: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'random',
-    name: 'Random',
-    sortable: true,
-    type: 'number',
-  });
-  dynamicTableAdapter.setUseLazyRendering(true);
-  dynamicTableAdapter.setPagination();
-  dynamicTableAdapter.refresh();
-  const buttons = dynamicTableAdapter.element.querySelectorAll('.mdw-datatable__header-controls .mdw-button');
-  const filterButton = buttons[0];
-  const optionsButton = buttons[1];
-  const menus = dynamicTableAdapter.element.querySelectorAll('.mdw-datatable__header-controls .mdw-menu');
-  const filterMenu = menus[0];
-  const optionsMenu = menus[1];
-  Menu.attach(filterMenu);
-  Menu.attach(optionsMenu);
-
-  filterButton.addEventListener('click', (/** @type {MouseEvent} */ event) => Menu.show(filterMenu, event));
-  optionsButton.addEventListener('click', (/** @type {MouseEvent} */ event) => Menu.show(optionsMenu, event));
-
-  filterMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
-    switch (menuItem.dataset.filter) {
-      default:
-      case 'none':
-        dynamicTableAdapter.setFilter(null);
-        break;
-      case 'md':
-        dynamicTableAdapter.setFilter((data) => data.text.indexOf('md') !== -1 || data.text2.indexOf('md') !== -1);
-        break;
-      case 'div9':
-        dynamicTableAdapter.setFilter((data) => data.random % 9 === 0);
-        break;
-      case 'bool':
-        dynamicTableAdapter.setFilter((data) => data.check1);
-        break;
-    }
-    dynamicTableAdapter.refresh();
-    if (dynamicTableAdapter.filter) {
-      filterButton.setAttribute('aria-pressed', 'true');
-    } else {
-      filterButton.setAttribute('aria-pressed', 'false');
-    }
-  });
-  filterMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(filterMenu));
-
-  optionsMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
-    switch (menuItem.dataset.option) {
-      default:
-        break;
-      case 'throttle':
-        dynamicTableAdapter.setUseLazyRendering(true);
-        break;
-      case 'paginate':
-        dynamicTableAdapter.setPagination();
-        break;
-    }
-    dynamicTableAdapter.refresh();
-  });
-  optionsMenu.addEventListener(MenuItem.UNCHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
-    switch (menuItem.dataset.option) {
-      default:
-        break;
-      case 'throttle':
-        dynamicTableAdapter.setUseLazyRendering(false);
-        break;
-      case 'paginate':
-        dynamicTableAdapter.setPagination({ disabled: true });
-        break;
-    }
-    dynamicTableAdapter.refresh();
-  });
-  optionsMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(optionsMenu));
-}
-
-initializeMdwComponents();
-buildDynamicTable();