@shortfuse/materialdesignweb 0.2.0 → 0.5.0

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

@@ -1,13 +1,9 @@
-import { TextField } from '../../../components/textfield/index';
-import { convertElementToCode, attachEventListener } from '../sample-utils';
-import { setupMenuOptions } from '../menuoptions';
+import * as TextField from '../../components/textfield/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @return {void} */
 function initializeSampleComponents() {
-  const textfields = document.querySelectorAll('.js .mdw-textfield');
-  for (let i = 0; i < textfields.length; i += 1) {
-    TextField.attach(textfields.item(i));
-  }
+  for (const el of document.querySelectorAll('.js .mdw-textfield')) TextField.attach(el);
 }
 
 /** @type {HTMLElement} */
@@ -25,6 +21,8 @@ function updateSampleCode() {
   } else {
     sampleComponent.removeAttribute('mdw-autosize');
   }
+  // Remove resize values
+  sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('style');
 
   // Strip JS related elements and attributes
   TextField.detach(sampleComponent);
@@ -102,6 +100,13 @@ function onOptionChange(event) {
         sampleComponent.removeAttribute('mdw-outlined');
       }
       break;
+    case 'dense':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-dense', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-dense');
+      }
+      break;
     case 'disabled':
       if (checked) {
         sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('disabled', '');
@@ -109,6 +114,13 @@ function onOptionChange(event) {
         sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('disabled');
       }
       break;
+    case '4minlength':
+      if (checked) {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('minlength', '4');
+      } else {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('minlength');
+      }
+      break;
     case 'required':
       if (checked) {
         sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('required', '');
@@ -126,7 +138,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(prefixText);
         }
       } else if (prefixText) {
-        prefixText.parentElement.removeChild(prefixText);
+        prefixText.remove();
       }
       break;
     case 'suffix':
@@ -139,7 +151,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(suffixText);
         }
       } else if (suffixText) {
-        suffixText.parentElement.removeChild(suffixText);
+        suffixText.remove();
       }
       break;
     case 'signifier':
@@ -157,7 +169,7 @@ function onOptionChange(event) {
           }
         }
       } else if (signifierElement) {
-        signifierElement.parentElement.removeChild(signifierElement);
+        signifierElement.remove();
       }
       break;
     case 'helper-text':
@@ -170,7 +182,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(helperText);
         }
       } else if (helperText) {
-        helperText.parentElement.removeChild(helperText);
+        helperText.remove();
       }
       break;
     case 'error-text':
@@ -183,26 +195,16 @@ function onOptionChange(event) {
           sampleComponent.appendChild(errorText);
         }
       } else if (errorText) {
-        errorText.parentElement.removeChild(errorText);
+        errorText.remove();
       }
       break;
-    case 'color':
+    case 'ink':
       switch (value) {
         case 'none':
-          sampleComponent.removeAttribute('mdw-theme-color');
+          sampleComponent.removeAttribute('mdw-ink');
           break;
         default:
-          sampleComponent.setAttribute('mdw-theme-color', value);
-          break;
-      }
-      break;
-    case 'fill':
-      switch (value) {
-        case 'none':
-          sampleComponent.removeAttribute('mdw-theme-fill');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-theme-fill', value);
+          sampleComponent.setAttribute('mdw-ink', value);
           break;
       }
       break;
@@ -211,7 +213,8 @@ function onOptionChange(event) {
 
   if (inputElement.tagName.toLowerCase() !== desiredTagName) {
     const newElement = document.createElement(desiredTagName);
-    for (let i = inputElement.attributes.length - 1; i >= 0; i -= 1) {
+    let i = inputElement.attributes.length;
+    while (i--) {
       const attr = inputElement.attributes.item(i);
       newElement.attributes.setNamedItem(attr.cloneNode());
     }
@@ -219,18 +222,14 @@ function onOptionChange(event) {
     inputElement = newElement;
     let dropdown = sampleComponent.getElementsByClassName('mdw-textfield__icon')[0];
     if (desiredTagName === 'select') {
-      const option1 = document.createElement('option');
-      option1.setAttribute('value', '');
-      option1.textContent = 'Empty';
-      const option2 = document.createElement('option');
-      option2.setAttribute('value', 'option1');
-      option2.textContent = 'Option 1';
-      const option3 = document.createElement('option');
-      option3.setAttribute('value', 'option2');
-      option3.textContent = 'Option 2';
-      inputElement.appendChild(option1);
-      inputElement.appendChild(option2);
-      inputElement.appendChild(option3);
+      for (const [valueAttr, textContent] of [['', 'Empty'], ['option1', 'Option 1'], ['option2', 'Option 2']]) {
+        const option = document.createElement('option');
+        option.className = 'mdw-theme';
+        option.setAttribute('mdw-surface', 'card');
+        option.setAttribute('value', valueAttr);
+        option.textContent = textContent;
+        inputElement.appendChild(option);
+      }
       if (!dropdown) {
         dropdown = document.createElement('div');
         dropdown.classList.add('mdw-textfield__icon');
@@ -238,7 +237,7 @@ function onOptionChange(event) {
         sampleComponent.appendChild(dropdown);
       }
     } else if (dropdown) {
-      dropdown.parentElement.removeChild(dropdown);
+      dropdown.remove();
     }
   }
   inputElement.removeAttribute('rows');
@@ -248,14 +247,11 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-textfield');
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
 }
 
 initializeSampleComponents();
-setupMenuOptions();
 setupComponentOptions();
 updateSampleCode();

package/docs/pages/tooltip.eta

@@ -0,0 +1,92 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'tooltip'}) %>
+<div class="comparison">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+    <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
+      <div class="mdw-appbar__start">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: { icon:true , class:'material-icons mdw-tooltip__target', text:'menu' }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
+        </div>
+      </div>
+      <div class="mdw-appbar__title" style="color:white;">Inbox</div>
+      <div class="mdw-appbar__end">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons mdw-tooltip__target', text:'search' }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Search</div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" mdw-divider>
+        <li class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Brunch this weekend?</div>
+              <div class="mdw-list__text-line">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
+              <div class="mdw-list__text-line">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Oui oui</div>
+              <div class="mdw-list__text-line">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Birthday gift</div>
+              <div class="mdw-list__text-line">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Recipe to try</div>
+              <div class="mdw-list__text-line">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Giants game</div>
+              <div class="mdw-list__text-line">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Montauk weekend</div>
+              <div class="mdw-list__text-line">-----</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <%~ includeFile('../_partials/_androidnavbar.eta') %>
+  </div>
+</div>
+<script src="tooltip.min.js"></script>

package/docs/pages/transition.eta

@@ -0,0 +1,117 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'transition'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content">
+      <div class="display-flex" flex-align-items="center">
+        <h5 class="mdw-type">Select two items.</h5>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="50%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column" flex-align-items="center">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column" flex-align-items="center">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="75%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="transition.min.js"></script>

package/docs/pages/transition.js

@@ -0,0 +1,52 @@
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+import * as Transition from '../../core/transition/index.js';
+
+for (const element of document.getElementsByClassName('mdw-overlay')) { Overlay.attach(element); }
+for (const element of document.getElementsByClassName('mdw-ripple')) { Ripple.attach(element); }
+
+/** @type {HTMLElement} */
+let target1;
+/** @type {HTMLElement} */
+let target2;
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onItemClick(event) {
+  /** @type {HTMLElement} */
+  const target = (event.currentTarget);
+  if (target.hasAttribute('mdw-transition-busy')) {
+    return;
+  }
+  if (!target1) {
+    target1 = target;
+    target1.setAttribute('aria-pressed', 'true');
+    return;
+  }
+  if (target1 === (event.currentTarget)) {
+    target1.setAttribute('aria-pressed', 'false');
+    target1 = null;
+    return;
+  }
+  if (!target2) {
+    target2 = target;
+  }
+  target2.blur();
+  target1.setAttribute('aria-pressed', 'false');
+  Transition.transitionElement({
+    fromShapeElement: target1,
+    toShapeElement: target2,
+    fromContentElement: target1.getElementsByClassName('demo-core-content')[0],
+    toContentElement: target2.getElementsByClassName('demo-core-content')[0],
+    duration: 3000,
+    revertFrom: true,
+  });
+  target1 = null;
+  target2 = null;
+}
+
+for (const item of document.getElementsByClassName('demo-core-item')) {
+  item.addEventListener('click', onItemClick);
+}

package/docs/pages/type.eta

@@ -0,0 +1,31 @@
+<% layout('../_partials/_header.eta', {page: 'type'}) %>
+<div>
+  <div class="content">
+    <h1 class="mdw-type">H1 Headline</h1>
+    <h2 class="mdw-type">H2 Headline</h2>
+    <h3 class="mdw-type">H3 Headline</h3>
+    <h4 class="mdw-type">H4 Headline</h4>
+    <h5 class="mdw-type">H5 Headline</h5>
+    <h6 class="mdw-type">H6 Headline</h6>
+    <div class="mdw-type" mdw-style="subtitle">Subtitle 1</div>
+    <div class="mdw-type" mdw-style="subtitle-2">Subtitle 2</div>
+    <p class="mdw-type">Body 1</p>
+    <p class="mdw-type" mdw-style="body-2">Body 2</p>
+    <div class="mdw-type" mdw-style="button">Button</div>
+    <div class="mdw-type" mdw-style="caption">Caption</div>
+    <div class="mdw-type" mdw-style="overline">Overline</div>
+  </div>
+</div>
+<div class="comparison type-comparison-3">
+  <div class="render">
+    <h5 class="mdw-type" mdw-baseline-top="64" mdw-baseline-next="20">Johannes Guttenberg</h5>
+    <div class="mdw-type" mdw-style="caption" mdw-baseline-next="36">German Printer</div>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-next="32">Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe with the printing press.</p>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-next="20">Born</p>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-bottom="68">c. 1400, Mainz Germany</p>
+  </div>
+  <div>
+    <div style="margin-top:10px;"></div>
+  </div>
+</div>
+<script src="type.min.js"></script>

package/docs/postrender.js

@@ -0,0 +1,41 @@
+import * as Button from '../components/button/index.js';
+import * as Layout from '../components/layout/index.js';
+import * as ListContent from '../components/list/content.js';
+import * as List from '../components/list/index.js';
+
+const navDrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
+List.attachAll(navDrawer);
+Layout.attach();
+for (const element of document.querySelectorAll('.mdw-layout__appbar .mdw-button')) {
+  Button.attach(element);
+}
+
+navDrawer.querySelector('[aria-current]').scrollIntoView({
+  behavior: 'auto',
+  block: 'center',
+  inline: 'start',
+});
+
+/** @return {void} */
+function clearCurrentPage() {
+  for (const item of navDrawer.querySelectorAll('[aria-current]')) {
+    item.removeAttribute('aria-current');
+  }
+}
+
+navDrawer.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+  const item = /** @type {HTMLElement} */ (event.target);
+  ListContent.setSelected(item, true);
+  if (item instanceof HTMLAnchorElement) {
+    if (item.hasAttribute('aria-current')) {
+      return;
+    }
+    clearCurrentPage();
+    item.setAttribute('aria-current', 'page');
+    // Auto close if modal
+    if (Layout.isNavDrawerModalShowing()) {
+      Layout.hideNavDrawer();
+    }
+    window.location.href = item.href;
+  }
+});

package/docs/prerender.js

@@ -0,0 +1,16 @@
+import * as Document from '../core/document/index.js';
+
+import { setupMenuOptions } from './_menuoptions.js';
+
+/** @return {void} */
+function onDOMContentLoaded() {
+  document.removeEventListener('DOMContentLoaded', onDOMContentLoaded);
+  // Apply button states
+  setupMenuOptions();
+}
+
+// Apply context first
+setupMenuOptions();
+Document.onPrerender();
+
+document.addEventListener('DOMContentLoaded', onDOMContentLoaded);