@shortfuse/materialdesignweb 0.0.9 → 0.4.0

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 { iterateArrayLike, 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() {
+  iterateArrayLike(sampleComponent.getElementsByClassName('mdw-grid__item'), (item) => {
+    item.addEventListener('click', () => {
+      onGridItemClick(item);
+    });
+  });
+  iterateArrayLike(document.querySelectorAll('[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+setupInteractions();

package/docs/pages/grid.pug

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

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>

package/docs/pages/layout.pug

@@ -0,0 +1,7 @@
+include ../_mixins.pug
+
++header("layout")
+  div(style="margin:16px")
+    +mdwButton()(href="pwa.html" target="_blank") Open in new window
+  div(style="margin:16px")
+    iframe(width=1440 height=300 src="pwa.html" style="width:100%;height:80vh")