@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/src/components/tab.js

@@ -1,137 +0,0 @@
-import { Tab } from '../../../components/tab/index';
-import { setupMenuOptions } from '../menuoptions';
-import { convertElementToCode, attachEventListener, changeElementTagName } from '../sample-utils';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @return {void} */
-function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
-  const useJS = jsRequired || jsOptional;
-
-  // Strip JS related elements and attributes
-  Tab.detach(sampleComponent);
-
-  if (jsRequired && sampleComponent instanceof HTMLDivElement === false) {
-    sampleComponent = changeElementTagName(sampleComponent, 'div');
-  } else if (!jsRequired && sampleComponent instanceof HTMLFormElement === false) {
-    sampleComponent = changeElementTagName(sampleComponent, 'form');
-  }
-
-  const inputs = sampleComponent.getElementsByTagName('input');
-  const tabItems = sampleComponent.getElementsByClassName('mdw-tab__item');
-
-  if (jsRequired) {
-    for (let i = inputs.length - 1; i >= 0; i -= 1) {
-      const input = inputs.item(i);
-      input.parentElement.removeChild(input);
-    }
-    for (let i = 0; i < tabItems.length; i += 1) {
-      let item = tabItems.item(i);
-      if (item instanceof HTMLDivElement === false) {
-        item = changeElementTagName(item, 'div');
-      }
-      item.removeAttribute('for');
-    }
-  } else {
-    const tabItemsElement = sampleComponent.getElementsByClassName('mdw-tab__items')[0];
-    for (let i = 0; i < 3; i += 1) {
-      let input = inputs.item(i);
-      let tabItem = tabItems.item(i);
-      if (!input) {
-        input = document.createElement('input');
-        input.checked = (i === 0);
-        input.classList.add('mdw-tab__input');
-        input.setAttribute('id', `tab${i + 1}`);
-        input.setAttribute('name', 'tab');
-        input.setAttribute('type', 'radio');
-        sampleComponent.insertBefore(input, tabItemsElement);
-      }
-      if (tabItem instanceof HTMLLabelElement === false) {
-        tabItem = changeElementTagName(tabItem, 'label');
-      }
-      tabItem.setAttribute('for', `tab${i + 1}`);
-    }
-  }
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  const sampleContainer = document.querySelector('.component-sample__container').firstElementChild;
-  htmlCodeElement.textContent = convertElementToCode(sampleContainer);
-
-  // Reattach JS if requested
-  if (useJS) {
-    Tab.attach(sampleComponent);
-  }
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = 'mdw.Tab.attach(tabElement);';
-}
-
-/** @return {void} */
-function initializeSampleComponents() {
-  const tabs = document.querySelectorAll('.js .mdw-tab');
-  for (let i = 0; i < tabs.length; i += 1) {
-    Tab.attach(tabs.item(i));
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  const tabItemsElement = sampleComponent.querySelector('.mdw-tab__items');
-
-  switch (name) {
-    case 'framework':
-      switch (value) {
-        case 'javascript':
-          break;
-        case 'css':
-          break;
-        default:
-      }
-      break;
-    case 'color':
-      switch (value) {
-        case 'default':
-          tabItemsElement.removeAttribute('mdw-theme-color');
-          break;
-        default:
-          tabItemsElement.setAttribute('mdw-theme-color', value);
-          break;
-      }
-      break;
-    case 'fill':
-      switch (value) {
-        case 'none':
-          tabItemsElement.removeAttribute('mdw-theme-fill');
-          break;
-        default:
-          tabItemsElement.setAttribute('mdw-theme-fill', value);
-          break;
-      }
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-tab');
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-updateSampleCode();
-
-setupMenuOptions();

package/docs/src/components/tab.pug

@@ -1,329 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("tab")
-    .mdw-layout(mdw-margin-top mdw-margin-bottom).docs-tab
-      .mdw-layout__item(mdw-colspan="100%")
-        div
-          h5.mdw-type(mdw-baseline-next="36") Tabs make it easy to explore and switch between different views.
-          p.mdw-type Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
-      .mdw-layout__item(mdw-colspan="4")
-        .component-sample
-          .component-sample__container
-            form.mdw-tab
-              input.mdw-tab__input#tab1(type="radio" name="tab" checked)
-              input.mdw-tab__input#tab2(type="radio" name="tab")
-              input.mdw-tab__input#tab3(type="radio" name="tab")
-              .mdw-tab__items(mdw-theme-color="accent-A200")
-                label.mdw-tab__item(for='tab1')
-                  .mdw-tab__label Item One
-                label.mdw-tab__item(for='tab2')
-                  .mdw-tab__label Item Two
-                label.mdw-tab__item(for='tab3')
-                  .mdw-tab__label Item Three
-                .mdw-tab__indicator
-              .mdw-tab__content
-                .mdw-tab__content-item Sample Content One
-                .mdw-tab__content-item Sample Content Two
-                .mdw-tab__content-item Sample Content Three
-      .mdw-layout__item(mdw-colspan="8")
-        div
-          .mdw-type(mdw-style="subtitle") Javascript
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="required")
-              .mdw-selection__icon
-              .mdw-selection__label Required
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="optional" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Optional
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="none")
-              .mdw-selection__icon
-              .mdw-selection__label None
-          .mdw-type(mdw-style="subtitle") Color
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="default")
-              .mdw-selection__icon
-              .mdw-selection__label Default
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="primary-400")
-              .mdw-selection__icon
-              .mdw-selection__label Primary 400
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="accent-A200" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Accent A200
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="warn")
-              .mdw-selection__icon
-              .mdw-selection__label Warn
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="color" value="purple-A400")
-              .mdw-selection__icon
-              .mdw-selection__label Purple-A400
-          .mdw-type(mdw-style="subtitle") Fill
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="primary dark")
-              .mdw-selection__icon
-              .mdw-selection__label Primary
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="accent-A100 light")
-              .mdw-selection__icon
-              .mdw-selection__label Accent A100
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="warn-200 light")
-              .mdw-selection__icon
-              .mdw-selection__label Warn 200
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="fill" value="green-700 dark")
-              .mdw-selection__icon
-              .mdw-selection__label Green 700
-      .mdw-layout__item(mdw-colspan="100%" style="max-height:0")
-      .mdw-layout__item(mdw-colspan="6")
-        .display-flex(flex-column)
-          h6.mdw-type HTML Code
-          .mdw-card.component-code.component-html
-      .mdw-layout__item(mdw-colspan="2")
-        .display-flex(flex-column)
-          h6.mdw-type Javascript Code
-          .mdw-card.component-code.component-js
-      .mdw-layout__item(mdw-colspan="100%")
-        h6.mdw-type Samples
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          form.mdw-tab
-            input.mdw-tab__input#no-toolbar-tab1(type="radio" name="tab" value="one" checked)
-            input.mdw-tab__input#no-toolbar-tab2(type="radio" name="tab" value="two")
-            input.mdw-tab__input#no-toolbar-tab3(type="radio" name="tab" value="three")
-            .mdw-tab__items(mdw-theme-fill="primary-500 dark" mdw-theme-color="accent")
-              label.mdw-tab__item(for='no-toolbar-tab1')
-                .mdw-tab__label Item One
-              label.mdw-tab__item(for='no-toolbar-tab2')
-                .mdw-tab__label Item Two
-              label.mdw-tab__item(for='no-toolbar-tab3')
-                .mdw-tab__label Item Three
-              .mdw-tab__indicator
-            .mdw-tab__content
-              .mdw-tab__content-item Item One
-              .mdw-tab__content-item Item Two
-              .mdw-tab__content-item Item Three
-
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          +androidstatusbar('primary-700')
-          .mdw-toolbar(mdw-theme-fill="primary-500 dark" mdw-prominent)
-            .mdw-toolbar__action
-              .mdw-toolbar__start
-                .mdw-button(mdw-icon).material-icons menu
-              .mdw-toolbar__title Page title
-              .mdw-toolbar__end
-                .mdw-button(mdw-icon).material-icons search
-                .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-            form.mdw-tab
-              input.mdw-tab__input#large-text-tab1(type="radio" name="tab" value="one" checked)
-              input.mdw-tab__input#large-text-tab2(type="radio" name="tab" value="two")
-              input.mdw-tab__input#large-text-tab3(type="radio" name="tab" value="three")
-              .mdw-tab__items(mdw-theme-color="accent")
-                label.mdw-tab__item(for='large-text-tab1')
-                  .mdw-tab__label Item One
-                label.mdw-tab__item(for='large-text-tab2')
-                  .mdw-tab__label Item Two
-                label.mdw-tab__item(for='large-text-tab3')
-                  .mdw-tab__label Item Three
-                .mdw-tab__indicator
-          .content
-
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          +androidstatusbar('primary-700')
-          form.mdw-tab
-            input.mdw-tab__input(type="radio" name="tab" value="one" id='text-tab1' checked)
-            input.mdw-tab__input(type="radio" name="tab" value="two" id='text-tab2')
-            input.mdw-tab__input(type="radio" name="tab" value="three" id='text-tab3')
-            .mdw-tab__items-wrapper.mdw-toolbar(mdw-theme-fill="primary-500 dark")
-              .mdw-toolbar__action
-                .mdw-toolbar__start
-                  .mdw-button(mdw-icon).material-icons menu
-                .mdw-toolbar__title Page title
-                .mdw-toolbar__end
-                  .mdw-button(mdw-icon).material-icons search
-                  .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-              .mdw-tab__items(mdw-theme-color="accent")
-                label.mdw-tab__item(for='text-tab1')
-                  .mdw-tab__label Item One
-                label.mdw-tab__item(for='text-tab2')
-                  .mdw-tab__label Item Two
-                label.mdw-tab__item(for='text-tab3')
-                  .mdw-tab__label Item Three
-                .mdw-tab__indicator
-            .mdw-tab__content
-              .mdw-tab__content-item Item One
-              .mdw-tab__content-item Item Two
-              .mdw-tab__content-item Item Three
-
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          +androidstatusbar('background-600 dark')
-          form.mdw-tab
-            input.mdw-tab__input#clear-toolbar-tab1(type="radio" name="tab" value="one" checked)
-            input.mdw-tab__input#clear-toolbar-tab2(type="radio" name="tab" value="two")
-            input.mdw-tab__input#clear-toolbar-tab3(type="radio" name="tab" value="three")
-            .mdw-tab__items-wrapper.mdw-toolbar
-              .mdw-toolbar__action
-                .mdw-toolbar__start
-                  .mdw-button(mdw-icon).material-icons menu
-                .mdw-toolbar__title Page title
-                .mdw-toolbar__end
-                  .mdw-button(mdw-icon).material-icons search
-                  .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-              .mdw-tab__items(mdw-theme-color="primary")
-                label.mdw-tab__item(for='clear-toolbar-tab1')
-                  .mdw-tab__label Item One
-                label.mdw-tab__item(for='clear-toolbar-tab2')
-                  .mdw-tab__label Item Two
-                label.mdw-tab__item(for='clear-toolbar-tab3')
-                  .mdw-tab__label Item Three
-                .mdw-tab__indicator
-            .mdw-tab__content
-              .mdw-tab__content-item Item One
-              .mdw-tab__content-item Item Two
-              .mdw-tab__content-item Item Three
-
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          +androidstatusbar('primary-700 dark')
-          .mdw-toolbar(mdw-theme-fill="primary-500 dark" mdw-theme-color="accent")
-            .mdw-toolbar__action
-              .mdw-toolbar__start
-                .mdw-button(mdw-icon).material-icons menu
-              .mdw-toolbar__title Page title
-              .mdw-toolbar__end
-                .mdw-button(mdw-icon).material-icons search
-                .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-            form.mdw-tab
-              input.mdw-tab__input(type="radio" name="tab" value="recents" id='tab-text-icon1' checked)
-              input.mdw-tab__input(type="radio" name="tab" value="favorites" id='tab-text-icon2')
-              input.mdw-tab__input(type="radio" name="tab" value="nearby" id='tab-text-icon3')
-              .mdw-tab__items(mdw-theme-color="accent")
-                label.mdw-tab__item(for='tab-text-icon1')
-                  .mdw-tab__icon.material-icons phone
-                  .mdw-tab__label Recents
-                label.mdw-tab__item(for='tab-text-icon2')
-                  .mdw-tab__icon.material-icons favorite
-                  .mdw-tab__label Favorites
-                label.mdw-tab__item(for='tab-text-icon3')
-                  .mdw-tab__icon.material-icons person_pin
-                  .mdw-tab__label Nearby
-                .mdw-tab__indicator
-          .content
-
-      .mdw-layout__item.display-flex(mdw-colspan="4" flex-justify-content="center").clipped
-        .render.mdw-theme-tab
-          +androidstatusbar('background-600 dark')
-          .mdw-toolbar
-            .mdw-toolbar__action
-              .mdw-toolbar__start
-                .mdw-button(mdw-icon).material-icons menu
-              .mdw-toolbar__title Page title
-              .mdw-toolbar__end
-                .mdw-button(mdw-icon).material-icons search
-                .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-            form.mdw-tab
-              input.mdw-tab__input(type="radio" name="tab" value="recents" id='tabs-icon1' checked)
-              input.mdw-tab__input(type="radio" name="tab" value="favorites" id='tabs-icon2')
-              input.mdw-tab__input(type="radio" name="tab" value="nearby" id='tabs-icon3')
-              .mdw-tab__items(mdw-theme-color="primary")
-                label.mdw-tab__item(for='tabs-icon1')
-                  .mdw-tab__icon.material-icons phone
-                label.mdw-tab__item(for='tabs-icon2')
-                  .mdw-tab__icon.material-icons favorite
-                label.mdw-tab__item(for='tabs-icon3')
-                  .mdw-tab__icon.material-icons person_pin
-                .mdw-tab__indicator
-          .content
-      .mdw-layout__item.display-flex(mdw-colspan="100%" flex-justify-content="center")
-        .display-flex(flex-column style="width:100%;padding:24px;box-sizing:border-box").mdw-theme-tab
-          +androidstatusbar('primary-700 dark')
-          .mdw-tab
-            input.mdw-tab__input(type="radio" name="tab" value="recents" id='dynamic-1' checked)
-            input.mdw-tab__input(type="radio" name="tab" value="favorites" id='dynamic-2')
-            input.mdw-tab__input(type="radio" name="tab" value="nearby" id='dynamic-3')
-            .mdw-tab__items-wrapper.mdw-toolbar(mdw-theme-fill="primary-500 dark")
-              .mdw-toolbar__action
-                .mdw-toolbar__start
-                  .mdw-button(mdw-icon).material-icons menu
-                .mdw-toolbar__title Clustered
-                .mdw-toolbar__end
-                  .mdw-button(mdw-icon).material-icons search
-                  .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-              .mdw-tab__items(mdw-theme-color="accent" style="align-self:center")
-                label.mdw-tab__item(for='dynamic-1')
-                  .mdw-tab__icon.material-icons phone
-                  .mdw-tab__label Recents
-                label.mdw-tab__item(for='dynamic-2')
-                  .mdw-tab__icon.material-icons favorite
-                  .mdw-tab__label Favorites
-                label.mdw-tab__item(for='dynamic-3')
-                  .mdw-tab__icon.material-icons person_pin
-                  .mdw-tab__label Nearby
-                .mdw-tab__indicator
-            .mdw-tab__content
-              .mdw-tab__content-item Recents
-              .mdw-tab__content-item Favorites
-              .mdw-tab__content-item Nearby
-
-      .mdw-layout__item.display-flex(mdw-colspan="100%" flex-justify-content="center")
-        .display-flex(flex-column style="width:0;padding:24px;box-sizing:border-box").mdw-theme-tab.js
-          +androidstatusbar('primary-700 dark')
-          .mdw-tab
-            .mdw-toolbar(mdw-theme-fill="primary-500 dark")
-              .mdw-toolbar__action
-                .mdw-toolbar__start
-                  .mdw-button(mdw-icon).material-icons menu
-                .mdw-toolbar__title Scrollable (JS)
-                .mdw-toolbar__end
-                  .mdw-button(mdw-icon).material-icons search
-                  .mdw-button(mdw-icon mdw-more-button).material-icons more_vert
-              .mdw-tab__items(mdw-theme-color="accent" mdw-scrollable)
-                .mdw-tab__item(mdw-selected)
-                  .mdw-tab__icon.material-icons phone
-                  .mdw-tab__label Recents
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons favorite
-                  .mdw-tab__label My Oversized Favorites Tab
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons person_pin
-                  .mdw-tab__label Nearby
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons edit
-                  .mdw-tab__label Edit
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons clear
-                  .mdw-tab__label Clear
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons search
-                  .mdw-tab__label Search
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons restore
-                  .mdw-tab__label Restore
-                .mdw-tab__item
-                  .mdw-tab__icon.material-icons stars
-                  .mdw-tab__label Stars
-            .mdw-tab__content
-              .mdw-tab__content-item 1
-              .mdw-tab__content-item 2
-              .mdw-tab__content-item 3
-              .mdw-tab__content-item 4
-              .mdw-tab__content-item 5
-              .mdw-tab__content-item 6
-              .mdw-tab__content-item 7
-              .mdw-tab__content-item 8
-  script(src='tab.min.js')