@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/pages/dom.js

@@ -1,140 +0,0 @@
-import DomAdapter from '../../adapters/dom/index.js';
-import * as ListContent from '../../components/list/content.js';
-import * as ListItem from '../../components/list/item.js';
-
-class CustomDataSourceItem {
-  /** @param {number} i */
-  constructor(i) {
-    this.itemnumber = i;
-    this.clickCount = 0;
-    this.expanded = false;
-  }
-}
-
-/** @type {CustomDataSourceItem[]} */
-const datasource = [];
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @type {DomAdapter<CustomDataSourceItem, HTMLLIElement>} */
-let domAdapter;
-
-/** @return {void} */
-function resetDatasource() {
-  datasource.splice(0, datasource.length);
-  for (let i = 0; i < 500; i += 1) {
-    datasource.push(new CustomDataSourceItem(i));
-  }
-}
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, checked } = /** @type {HTMLInputElement} */ (event.target);
-  // @ts-ignore: Optimization
-  domAdapter.recycle[name] = checked;
-  domAdapter.refresh();
-}
-/** @return {void} */
-function setupComponentOptions() {
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-  sampleComponent = document.querySelector('.component-sample .mdw-list');
-  resetDatasource();
-  domAdapter = new DomAdapter({
-    element: sampleComponent,
-    datasource,
-    recycle: {
-      scroller: sampleComponent.parentElement,
-      fastMeasure: true,
-      block: true,
-      deferRender: true,
-      equalSize: false,
-    },
-    render(child, data, index) {
-      const textLines = child.getElementsByClassName('mdw-list__text-line');
-      textLines[0].textContent = `Item ${data.itemnumber}`;
-      textLines[1].textContent = `Click count: #${data.clickCount}`;
-      if (data.expanded) {
-        child.style.setProperty('height', '128px');
-        child.style.setProperty('background-color', 'red');
-      } else {
-        child.style.setProperty('height', '64px');
-        child.style.removeProperty('background-color');
-      }
-      child.firstElementChild.setAttribute('aria-posinset', index.toString(10));
-    },
-    create(data) {
-      // Create placeholder UI
-      const listItem = document.createElement('li');
-      if (!domAdapter.recycle.block) {
-        listItem.style.setProperty('display', 'inline-flex');
-        listItem.style.setProperty('width', '33.333%');
-      }
-      if (domAdapter.recycle.deferRender) {
-        listItem.style.setProperty('min-height', '64px');
-        if (data.expanded) {
-          listItem.style.setProperty('height', '128px');
-        }
-      }
-      listItem.className = 'mdw-list__item';
-      listItem.innerHTML = `
-        <a class="mdw-list__content">
-          <div class="mdw-list__text">
-            <div class="mdw-list__text-line">Item ${data.itemnumber}</div>
-            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Waiting for idle...</div>
-          </div>
-        </a>
-      `;
-      ListItem.attach(listItem);
-      return listItem;
-    },
-  });
-  domAdapter.refresh();
-  const buttons = document.querySelectorAll('.mdw-layout__content-page .mdw-button');
-  buttons[0].addEventListener('click', () => {
-    buttons[1].removeAttribute('aria-disabled');
-    resetDatasource();
-    domAdapter.refresh();
-  });
-  buttons[1].addEventListener('click', () => {
-    if (buttons[1].getAttribute('aria-disabled') === 'true') {
-      return;
-    }
-    const item = datasource[10];
-    domAdapter.removeItem(item);
-    datasource.splice(10, 1);
-
-    // Alternatively, we can remove from datasource first and call invalidateAll()
-
-    domAdapter.drawViewport();
-    buttons[1].setAttribute('aria-disabled', 'true');
-  });
-  buttons[2].addEventListener('click', () => {
-    const item = datasource.find((d) => d.itemnumber === 50);
-    item.clickCount += 1;
-    // Element will not change size, therefore avoid possible invalidation
-    // (When element is refreshed and not in DOM, adapter may assume sized change)
-    domAdapter.refreshItem(item, { invalidate: false });
-    domAdapter.drawViewport();
-  });
-  buttons[3].addEventListener('click', () => {
-    const item = datasource.find((d) => d.itemnumber === 80);
-    item.expanded = !item.expanded;
-    // Force invalidation from height change
-    domAdapter.refreshItem(item, { invalidate: true });
-    domAdapter.drawViewport();
-  });
-  sampleComponent.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-    const listContent = /** @type {HTMLElement} */ (event.target);
-    const listItem = /** @type {HTMLLIElement} */ (listContent.parentElement);
-    const dataItem = domAdapter.elementDataMap.get(listItem);
-    dataItem.clickCount += 1;
-    domAdapter.refreshItem(dataItem);
-  });
-}
-
-setupComponentOptions();

package/docs/pages/elevation.eta

@@ -1,35 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'elevation'}) %>
-<div class="docs-grid mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" mdw-margin-4col="40" mdw-gutter-4col="40">
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="1">1dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="2">2dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="3">3dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="4">4dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="6">6dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="8">8dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="9">9dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="12">12dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="16">16dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="24">24dp</div>
-  </div>
-</div>
-<script src="elevation.min.js"></script>

package/docs/pages/fab.eta

@@ -1,99 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'fab'}) %>
-<div class="comparison js">
-  <div class="render">
-    <div class="display-flex flex-1" flex-column style="position:relative;">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['menu'], end: ['search'], body: 'JS' }) %>
-      <div class="content" style="padding:16px 8px;">
-        <div class="mdw-type" mdw-style="subtitle">Hover</div>
-        <div class="docs-option-list">
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'hover', text:'Open on Hover' }}) %>
-        </div>
-        <div class="mdw-type" mdw-style="subtitle">Type</div>
-        <div class="docs-option-list">
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'regular', text:'Regular (Default)', checked:true }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'mini', text:'Mini' }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended', text:'Extended' }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended-hover', text:'Extended on Hover' }}) %>
-        </div>
-        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom mdw-columns="4">
-          <div class="mdw-grid__item">
-            <div class="mdw-grid__content">
-              <div class="mdw-fab">
-                <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, class:"mdw-fab__button", body: /* html */ `
-                  <div class="mdw-fab__icon">
-                    <div class="mdw-fab__hidden-icon material-icons">add</div>
-                    <div class="mdw-fab__shown-icon material-icons">clear</div>
-                  </div>
-                  <div class="mdw-fab__text">Add</div>
-                `}}) %>
-                <div class="mdw-fab__speed-dial">
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_1</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_2</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_3</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_4</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_5</div>
-                  `}}) %>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%~ includeFile('../_partials/_androidnavbar.eta') %>
-  </div>
-</div>
-<div class="comparison">
-  <div class="render">
-    <div class="display-flex flex-1" flex-column style="position:relative;">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface:'primary 500', dark:true, start: ['menu'], end: ['search'], body:'CSS Only' }) %>
-      <div class="content" style="padding:16px 8px;">
-        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom>
-          <div class="mdw-grid__item">
-            <div class="mdw-fab" id="my-fab">
-              <a class="mdw-fab__close" href="#my-fab-button"></a>
-              <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, id:'my-fab-button', href:'#my-fab', class:"mdw-fab__button", body: /* html */ `
-                <div class="mdw-fab__icon">
-                  <div class="mdw-fab__hidden-icon material-icons">add</div>
-                  <div class="mdw-fab__shown-icon material-icons">clear</div>
-                </div>
-                <div class="mdw-fab__text">Add</div>
-              `}}) %>
-              <div class="mdw-fab__speed-dial">
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_1</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_2</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_3</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_4</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_5</div>
-                `}}) %>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%~ includeFile('../_partials/_androidnavbar.eta') %>
-  </div>
-</div>
-<script src="fab.min.js"></script>

package/docs/pages/fab.js

@@ -1,43 +0,0 @@
-import * as Button from '../../components/button/index.js';
-import * as Fab from '../../components/fab/index.js';
-
-/** @return {void} */
-function initializeMdwComponents() {
-  for (const element of document.querySelectorAll('.js .mdw-fab')) { Fab.attach(element); }
-
-  for (const element of document.querySelectorAll('.js .mdw-button')) { Button.attach(element); }
-
-  document.querySelector('input[name="hover"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__speed-dial').setAttribute('mdw-hover', '');
-    } else {
-      document.querySelector('.js .mdw-fab__speed-dial').removeAttribute('mdw-hover');
-    }
-  });
-  document.querySelector('input[name="type"][value="regular"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-extended');
-    }
-  });
-  document.querySelector('input[name="type"][value="mini"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-mini', '');
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-extended');
-    }
-  });
-  document.querySelector('input[name="type"][value="extended"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-extended', '');
-    }
-  });
-  document.querySelector('input[name="type"][value="extended-hover"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-extended', 'hover');
-    }
-  });
-}
-
-initializeMdwComponents();

package/docs/pages/grid.eta

@@ -1,135 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'grid'}) %>
-<div class="mdw-grid" mdw-margin-top>
-  <div class="mdw-grid__item" mdw-colspan="8">
-    <h5 class="mdw-type" mdw-baseline-next="36">The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</h5>
-    <p class="mdw-type">The Material Design layout grid is made up of three elements: columns, gutters, and margins.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="8">
-    <div class="mdw-type" mdw-style="subtitle">Margins and Gutters</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'default-margins', checked:true, text:'Default Margins and Gutters' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'top-margin', checked:true, text:'Top Margin' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'bottom-margin', checked:true, text:'Bottom Margin' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Maximum Columns</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'12', checked:true, text:'12' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'8', text:'8' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'4', text:'4' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'1', text:'1' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Display Model</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'flex', checked:true, text:'Flexbox' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'grid', text:'Grid' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Options</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'stretch', text:'Stretch' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'center', text:'Center' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'dense', text:'Dense' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <p class="mdw-type" style="text-align:center;" mdw-texttop-top="16dp" mdw-baseline-bottom="16dp">Click on an element to change colspan</p>
-  </div>
-</div>
-<div class="docs-grid" id="sample-component">
-  <div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
-    <div class="mdw-grid__item" mdw-rowspan="2">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 100" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 200" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 400" mdw-dark mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 700" mdw-dark mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-rowspan="3">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 100" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 200" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-colspan="2">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 400" mdw-dark mdw-border-ink>2</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-rowspan="5" mdw-colspan="25%">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 700" mdw-dark mdw-border-ink>25%</div>
-    </div>
-    <div class="mdw-grid__item" mdw-colspan="3">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>3</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 100" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 200" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-colspan="75%">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>75%</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 400" mdw-dark mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 700" mdw-dark mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 100" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-colspan="8">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>8</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 200" mdw-light mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 400" mdw-dark mdw-border-ink>1</div>
-    </div>
-    <div class="mdw-grid__item" mdw-colspan="2">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>2</div>
-    </div>
-    <div class="mdw-grid__item">
-      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 700" mdw-dark mdw-border-ink>1</div>
-    </div>
-  </div>
-</div>
-<script src="grid.min.js"></script>

package/docs/pages/grid.js

@@ -1,128 +0,0 @@
-import { setTextNode } from '../../core/dom.js';
-
-const sampleComponent = document.getElementById('sample-component');
-
-const colspans = [
-  '1',
-  '25%', '50%', '75%', '100%',
-  '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
-];
-
-/**
- * @param {Element} target
- * @return {void}
- */
-function onGridItemClick(target) {
-  let colspan = target.getAttribute('mdw-colspan') || '1';
-  const index = colspans.indexOf(colspan);
-  colspan = colspans[index + 1] || '1';
-  target.setAttribute('mdw-colspan', colspan.toString());
-  setTextNode(target.firstElementChild, colspan.toString());
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  const grid = sampleComponent.getElementsByClassName('mdw-grid')[0];
-
-  switch (name) {
-    case 'default-margins':
-      if (checked) {
-        grid.removeAttribute('mdw-margin');
-        grid.removeAttribute('mdw-gutter');
-        grid.removeAttribute('mdw-margin-8col');
-        grid.removeAttribute('mdw-gutter-8col');
-        grid.removeAttribute('mdw-margin-4col');
-        grid.removeAttribute('mdw-gutter-4col');
-      } else {
-        grid.setAttribute('mdw-margin', '40');
-        grid.setAttribute('mdw-gutter', '40');
-        grid.setAttribute('mdw-margin-8col', '8');
-        grid.setAttribute('mdw-gutter-8col', '8');
-        grid.setAttribute('mdw-margin-4col', '0');
-        grid.setAttribute('mdw-gutter-4col', '0');
-      }
-      break;
-    case 'top-margin':
-      if (checked) {
-        grid.setAttribute('mdw-margin-top', '');
-      } else {
-        grid.removeAttribute('mdw-margin-top');
-      }
-      break;
-    case 'bottom-margin':
-      if (checked) {
-        grid.setAttribute('mdw-margin-bottom', '');
-      } else {
-        grid.removeAttribute('mdw-margin-bottom');
-      }
-      break;
-    case 'stretch':
-      if (checked) {
-        grid.setAttribute('mdw-stretch', '');
-      } else {
-        grid.removeAttribute('mdw-stretch');
-      }
-      break;
-    case 'center':
-      if (checked) {
-        grid.setAttribute('mdw-center', '');
-      } else {
-        grid.removeAttribute('mdw-center');
-      }
-      break;
-    case 'style':
-      switch (value) {
-        case 'grid':
-          grid.setAttribute('mdw-grid', '');
-          break;
-        case 'flex':
-          grid.removeAttribute('mdw-grid');
-          break;
-        default:
-      }
-      break;
-    case 'dense':
-      if (checked) {
-        grid.setAttribute('mdw-dense', '');
-      } else {
-        grid.removeAttribute('mdw-dense');
-      }
-      break;
-    case 'columns':
-      switch (value) {
-        default:
-        case '12':
-          grid.removeAttribute('mdw-columns');
-          break;
-        case '8':
-          grid.setAttribute('mdw-columns', '8');
-          break;
-        case '4':
-          grid.setAttribute('mdw-columns', '4');
-          break;
-        case '1':
-          grid.setAttribute('mdw-columns', '1');
-          break;
-      }
-      break;
-    default:
-  }
-}
-
-/** @return {void} */
-function setupInteractions() {
-  for (const item of sampleComponent.getElementsByClassName('mdw-grid__item')) {
-    item.addEventListener('click', () => {
-      onGridItemClick(item);
-    });
-  }
-  for (const el of document.querySelectorAll('[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-setupInteractions();

package/docs/pages/layout.eta

@@ -1,8 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'layout'}) %>
-<div style="margin:16px;">
-  <%~ includeFile(T, {button: { attributes: {href:"pwa.html", target:"_blank"}, text: 'Open in new window'}}) %>
-</div>
-<div style="margin:16px;">
-  <iframe width="1440" height="300" src="pwa.html" style="width:100%;height:80vh;"></iframe>
-</div>