kmaterialize 2.0.0 → 2.3.3-1.0.1

package/components/button/buttons.stories.ts

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+
+export default {
+  title: 'Components/Buttons'
+} satisfies Meta;
+
+const BTN_SIZES = {
+  Small: ['btn-small'],
+  'Small disabled': ['btn-small', 'disabled'],
+  Normal: [],
+  'Normal disabled': ['disabled'],
+  Large: ['btn-large'],
+  'Large disabled': ['btn-large', 'disabled']
+};
+
+const BTN_STYLES = {
+  Default: [], // uncomment this to see the default button when no filled/tonal/outlined/text is set
+  Filled: ['filled'],
+  Tonal: ['tonal'],
+  Outlined: ['outlined'],
+  Text: ['text']
+};
+
+export const Basic: StoryObj = {
+  render(args) {
+    const table = document.createElement('table');
+    const headerRow = table.insertRow();
+    headerRow.insertCell();
+    for (const size in BTN_SIZES) {
+      const cell = headerRow.insertCell();
+      cell.innerText = size;
+    }
+    for (const btnStype in BTN_STYLES) {
+      const row = table.insertRow();
+      const cell = row.insertCell();
+      cell.innerText = btnStype;
+      for (const size in BTN_SIZES) {
+        const cell = row.insertCell();
+        const classes = [...BTN_STYLES[btnStype], ...BTN_SIZES[size], ...(args.classes ?? [])];
+        const disabled = classes.includes('disabled') ? 'disabled="disabled"' : '';
+        let iconHtml = '';
+        if (args.icon) {
+          iconHtml = `<i class="material-icons">${args.icon}</i>`;
+        } else if (args.iconLeft) {
+          classes.push('icon-left');
+          iconHtml = `<i class="material-icons">${args.iconLeft}</i>`;
+        } else if (args.iconRight) {
+          classes.push('icon-right');
+          iconHtml = `<i class="material-icons">${args.iconRight}</i>`;
+        }
+        // TODO - why is anchor tag used in docs rather than button tag?
+        cell.innerHTML = `
+          <button ${disabled} class="${classes.join(' ')}">
+            ${args.label}${iconHtml}
+          </button>
+        `;
+      }
+    }
+    return table;
+  },
+  args: {
+    label: 'Button',
+    classes: ['btn']
+  }
+};
+
+export const Elevated: StoryObj = {
+  ...Basic,
+  args: {
+    label: 'Button',
+    classes: ['btn', 'elevated']
+  }
+};
+
+export const FloatingWithText: StoryObj = {
+  ...Basic,
+  args: {
+    label: 'B',
+    classes: ['btn-floating']
+  }
+};
+
+export const FloatingWithIcon: StoryObj = {
+  ...Basic,
+  args: {
+    label: '',
+    icon: 'edit',
+    classes: ['btn-floating']
+  }
+};
+
+export const IconLeft: StoryObj = {
+  ...Basic,
+  args: {
+    label: 'Button',
+    iconLeft: 'cloud',
+    classes: ['btn']
+  }
+};
+
+export const IconRight: StoryObj = {
+  ...Basic,
+  args: {
+    label: 'Submit',
+    iconRight: 'send',
+    classes: ['btn']
+  }
+};
+
+export const FloatingActionButton: StoryObj = {
+  render() {
+    return `
+<div class="fixed-action-btn">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+
+<div class="fixed-action-btn horizontal">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+
+<div class="fixed-action-btn click-to-toggle">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+    `;
+  }
+};

package/components/button/buttons.ts

@@ -0,0 +1,282 @@
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../../src/component';
+import { Utils } from '../../src/utils';
+
+interface FloatingActionButtonOptions extends BaseOptions {
+  /**
+   * Direction FAB menu opens.
+   * @default "top"
+   */
+  direction: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * true: FAB menu appears on hover, false: FAB menu appears on click.
+   * @default true
+   */
+  hoverEnabled: boolean;
+  /**
+   * Enable transit the FAB into a toolbar on click.
+   * @default false
+   */
+  toolbarEnabled: boolean;
+}
+
+const _defaults: FloatingActionButtonOptions = {
+  direction: 'top',
+  hoverEnabled: true,
+  toolbarEnabled: false
+};
+
+class FloatingActionButton extends Component<FloatingActionButtonOptions> implements Openable {
+  #anchor: HTMLAnchorElement;
+  #menu: HTMLElement | null;
+  #floatingBtns: HTMLElement[];
+  #floatingBtnsReverse: HTMLElement[];
+
+  /**
+   * Describes open/close state of FAB.
+   */
+  isOpen: boolean;
+  offsetY: number;
+  offsetX: number;
+  btnBottom: number;
+  btnLeft: number;
+  btnWidth: number;
+
+  constructor(el: HTMLElement, options: Partial<FloatingActionButtonOptions>) {
+    super(el, options, FloatingActionButton);
+    this.el['M_FloatingActionButton'] = this;
+
+    this.options = {
+      ...FloatingActionButton.defaults,
+      ...options
+    };
+
+    this.isOpen = false;
+    this.#anchor = this.el.querySelector('a');
+    this.#menu = this.el.querySelector('ul');
+    this.#floatingBtns = Array.from(this.el.querySelectorAll('ul .btn-floating'));
+    this.#floatingBtnsReverse = this.#floatingBtns.reverse();
+    this.offsetY = 0;
+    this.offsetX = 0;
+
+    this.el.classList.add(`direction-${this.options.direction}`);
+    this.#anchor.tabIndex = 0;
+    this.#menu.ariaExpanded = 'false';
+    if (this.options.direction === 'top') this.offsetY = 40;
+    else if (this.options.direction === 'right') this.offsetX = -40;
+    else if (this.options.direction === 'bottom') this.offsetY = -40;
+    else this.offsetX = 40;
+    this.#setupEventHandlers();
+  }
+
+  static get defaults() {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of FloatingActionButton.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(
+    el: HTMLElement,
+    options?: Partial<FloatingActionButtonOptions>
+  ): FloatingActionButton;
+  /**
+   * Initializes instances of FloatingActionButton.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: InitElements<MElement>,
+    options?: Partial<FloatingActionButtonOptions>
+  ): FloatingActionButton[];
+  /**
+   * Initializes instances of FloatingActionButton.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<FloatingActionButtonOptions> = {}
+  ): FloatingActionButton | FloatingActionButton[] {
+    return super.init(els, options, FloatingActionButton);
+  }
+
+  static getInstance(el: HTMLElement): FloatingActionButton {
+    return el['M_FloatingActionButton'];
+  }
+
+  destroy() {
+    this.#removeEventHandlers();
+    this.el['M_FloatingActionButton'] = undefined;
+  }
+
+  #setupEventHandlers() {
+    if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+      this.el.addEventListener('mouseenter', this.open);
+      this.el.addEventListener('mouseleave', this.close);
+    } else {
+      this.el.addEventListener('click', this.#handleFABClick);
+    }
+    this.el.addEventListener('keypress', this.#handleFABKeyPress);
+  }
+
+  #removeEventHandlers() {
+    if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+      this.el.removeEventListener('mouseenter', this.open);
+      this.el.removeEventListener('mouseleave', this.close);
+    } else {
+      this.el.removeEventListener('click', this.#handleFABClick);
+    }
+    this.el.removeEventListener('keypress', this.#handleFABKeyPress);
+  }
+
+  #handleFABClick = () => {
+    this.#handleFABToggle();
+  };
+
+  #handleFABKeyPress = (e) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this.#handleFABToggle();
+    }
+  };
+
+  #handleFABToggle = () => {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  #handleDocumentClick = (e: MouseEvent) => {
+    const elem = e.target;
+    if (elem !== this.#menu) this.close();
+  };
+
+  /**
+   * Open FAB.
+   */
+  open = (): void => {
+    if (this.isOpen) return;
+    if (this.options.toolbarEnabled) this.#animateInToolbar();
+    else this.#animateInFAB();
+    this.isOpen = true;
+  };
+
+  /**
+   * Close FAB.
+   */
+  close = (): void => {
+    if (!this.isOpen) return;
+    if (this.options.toolbarEnabled) {
+      window.removeEventListener('scroll', this.close, true);
+      document.body.removeEventListener('click', this.#handleDocumentClick, true);
+    } else {
+      this.#animateOutFAB();
+    }
+    this.isOpen = false;
+  };
+
+  #animateInFAB() {
+    this.el.classList.add('active');
+    this.#menu.ariaExpanded = 'true';
+    const delayIncrement = 40;
+    const duration = 275;
+
+    this.#floatingBtnsReverse.forEach((el, index) => {
+      const delay = delayIncrement * index;
+      el.style.transition = 'none';
+      el.style.opacity = '0';
+      el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+      setTimeout(() => {
+        // from:
+        el.style.opacity = '0.4';
+        // easeInOutQuad
+        setTimeout(() => {
+          // to:
+          el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+          el.style.opacity = '1';
+          el.style.transform = 'translate(0, 0) scale(1)';
+          el.tabIndex = 0;
+        }, 1);
+      }, delay);
+    });
+  }
+
+  #animateOutFAB() {
+    const duration = 175;
+    setTimeout(() => {
+      this.el.classList.remove('active');
+      this.#menu.ariaExpanded = 'false';
+    }, duration);
+    this.#floatingBtnsReverse.forEach((el) => {
+      el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+      // to
+      el.style.opacity = '0';
+      el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+      el.tabIndex = -1;
+    });
+  }
+
+  #animateInToolbar() {
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const btnRect = this.el.getBoundingClientRect();
+
+    const backdrop = document.createElement('div'),
+      scaleFactor = windowWidth / backdrop[0].clientWidth,
+      fabColor = getComputedStyle(this.#anchor).backgroundColor; // css('background-color');
+    backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
+    backdrop.style.backgroundColor = fabColor;
+    this.#anchor.append(backdrop);
+
+    this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+    this.offsetY = windowHeight - btnRect.bottom;
+    this.btnBottom = btnRect.bottom;
+    this.btnLeft = btnRect.left;
+    this.btnWidth = btnRect.width;
+
+    // Set initial state
+    this.el.classList.add('active');
+    this.el.style.textAlign = 'center';
+    this.el.style.width = '100%';
+    this.el.style.bottom = '0';
+    this.el.style.left = '0';
+    this.el.style.transform = 'translateX(' + this.offsetX + 'px)';
+    this.el.style.transition = 'none';
+    this.#menu.ariaExpanded = 'true';
+
+    this.#anchor.style.transform = `translateY(${this.offsetY}px`;
+    this.#anchor.style.transition = 'none';
+
+    setTimeout(() => {
+      this.el.style.transform = '';
+      this.el.style.transition =
+        'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+
+      this.#anchor.style.overflow = 'visible';
+      this.#anchor.style.transform = '';
+      this.#anchor.style.transition = 'transform .2s';
+
+      setTimeout(() => {
+        this.el.style.overflow = 'hidden';
+        this.el.style.backgroundColor = fabColor;
+
+        backdrop.style.transform = 'scale(' + scaleFactor + ')';
+        backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
+
+        this.#menu.querySelectorAll('li > a').forEach((a: HTMLAnchorElement) => {
+          a.style.opacity = '1';
+          a.tabIndex = 0;
+        });
+
+        // Scroll to close.
+        window.addEventListener('scroll', this.close, true);
+        document.body.addEventListener('click', this.#handleDocumentClick, true);
+      }, 100);
+    }, 0);
+  }
+}
+
+export { FloatingActionButton, FloatingActionButtonOptions };

package/components/button/examples.iso.js

@@ -0,0 +1,18 @@
+import { Number, Text } from '../atomic/atomic.mjs';
+import { Card } from '../card/card.mjs';
+import { Button } from './button.mjs';
+
+// Example App (isomorphic javascript)
+
+function createCounterApp() {
+  return new Card({
+    children: [
+      new Text('Counter Example').setTagName('div'),
+      new Number(9),
+      new Button('➕'),
+      new Button('➖')
+    ]
+  }).addClassname('p-3');
+}
+
+export { createCounterApp };

package/components/button/fabSpec.js

@@ -0,0 +1,65 @@
+describe('Fab Plugin:', () => {
+  const fixture = `<div class="fixed-action-btn">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+
+<div class="fixed-action-btn horizontal">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+
+<div class="fixed-action-btn click-to-toggle">
+  <a class="btn-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+`;
+
+  beforeEach(() => XloadHtml(fixture));
+  afterEach(() => XunloadFixtures());
+
+  describe('Floating Action Button', () => {
+    it('should open correctly', (done) => {
+      const normalFAB = document.querySelector('.fixed-action-btn');
+      M.FloatingActionButton.init(normalFAB);
+      const ul = normalFAB.querySelector('ul');
+      const ulStyle = getComputedStyle(ul);
+      expect(ulStyle.getPropertyValue('visibility')).toEqual(
+        'hidden',
+        'FAB menu div should be hidden initially'
+      );
+      setTimeout(() => {
+        mouseenter(normalFAB);
+        setTimeout(() => {
+          const ulStyle = getComputedStyle(ul);
+          expect(ulStyle.getPropertyValue('visibility')).toEqual(
+            'visible',
+            'FAB menu did not appear after mouseenter.'
+          );
+          done();
+        }, 400);
+      }, 100);
+    });
+  });
+});

package/components/button/test-button.mjs

@@ -0,0 +1,16 @@
+import { Number, Text } from '../atomic/atomic.mjs';
+import { Button, Card } from './button.mjs';
+
+// Example App (isomorphic javascript)
+const app = new Card({
+  children: [
+    new Text('Example App').setTagName('div'), //
+    new Number(9),
+    new Button('➕'),
+    new Button('➖')
+  ]
+}).addClassname('p-3');
+
+// Html
+const html = app.toHTML();
+console.log(html);