@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/{src/components → pages}/fab.js

@@ -1,18 +1,12 @@
-import { setupMenuOptions } from '../menuoptions';
-import { Button } from '../../../components/button/index';
-import { Fab } from '../../../components/fab/index';
+import * as Button from '../../components/button/index.js';
+import * as Fab from '../../components/fab/index.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
-  let components;
-  components = document.querySelectorAll('.js .mdw-fab');
-  for (let i = 0; i < components.length; i += 1) {
-    Fab.attach(components.item(i));
-  }
-  components = document.querySelectorAll('.js .mdw-button');
-  for (let i = 0; i < components.length; i += 1) {
-    Button.attach(components.item(i));
-  }
+  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', '');
@@ -47,4 +41,3 @@ function initializeMdwComponents() {
 }
 
 initializeMdwComponents();
-setupMenuOptions();

package/docs/pages/grid.eta

@@ -0,0 +1,135 @@
+<% 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

@@ -0,0 +1,128 @@
+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

@@ -0,0 +1,8 @@
+<% 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>