kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/card/_cards.scss

@@ -0,0 +1,229 @@
+@use '../../sass/variables' as *;
+@use '../../sass/mixins.module.scss' as *;
+
+.card-panel {
+  transition: box-shadow .25s;
+  padding: 24px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border-radius: 12px;
+  @extend .z-depth-1;
+  background-color: var(--md-sys-color-surface);
+}
+
+.card {
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
+  position: relative;
+  //margin: $element-top-margin 0 $element-bottom-margin 0;
+  background-color: var(--background-color);
+  transition: box-shadow .25s;
+  border-radius: 12px;
+  @extend .z-depth-1;
+
+  .card-title {
+    font-size: 24px;
+    font-weight: 300;
+  }
+
+  // Card Sizes
+  &.small, &.medium, &.large {
+    position: relative;
+
+    .card-image {
+      max-height: 60%;
+      overflow: hidden;
+    }
+
+    .card-image + .card-content {
+      max-height: 40%;
+    }
+
+    .card-content {
+      max-height: 100%;
+      overflow: hidden;
+    }
+
+    .card-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  &.small {
+    height: 300px;
+  }
+
+  &.medium {
+    height: 400px;
+  }
+
+  &.large {
+    height: 500px;
+  }
+
+  // Horizontal Cards
+  &.horizontal {
+    display: flex;
+
+    &.small, &.medium, &.large {
+      .card-image {
+        height: 100%;
+        max-height: none;
+        overflow: visible;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+
+    .card-image {
+      max-width: 50%;
+
+      img {
+        border-radius: 2px 0 0 2px;
+        max-width: 100%;
+        width: auto;
+      }
+    }
+
+    .card-stacked {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      position: relative;
+
+      .card-content {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Sticky Action Section
+  &.sticky-action {
+    .card-action {
+      z-index: 2;
+    }
+
+    .card-reveal {
+      z-index: 1;
+      padding-bottom: 64px;
+    }
+  }
+
+  .card-image {
+    position: relative;
+
+    // Image background for content
+    img {
+      display: block;
+      border-radius: 2px 2px 0 0;
+      position: relative;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
+    .card-title {
+      color: var(--md-sys-color-surface);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      max-width: 100%;
+      padding: 24px;
+    }
+
+    .activator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top:0;
+      bottom: 0;
+      cursor: pointer;
+    }
+
+    img.activator {
+      position: relative;
+    }
+  }
+
+  .card-content {
+    padding: 24px;
+    border-radius: 0 0 2px 2px;
+
+    p {
+      margin: 0;
+    }
+
+    .card-title {
+      display: block;
+      line-height: 32px;
+      margin-bottom: 8px;
+
+      i {
+        line-height: 32px;
+      }
+
+      &.activator {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .card-action {
+    padding: 0 1.6rem;
+
+    &:last-child {
+      border-radius: 0 0 2px 2px;
+    }
+    // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
+    a {
+      @include btn(
+        var(--btn-height),
+        var(--btn-border-radius),
+        var(--btn-padding),
+        var(--btn-padding),
+        var(--btn-font-size)
+      );
+
+      &:first-child {
+        margin-left: -1.6rem;
+      }
+
+      &:last-child {
+        margin-right: -1.6rem;
+      }
+    }
+
+    .btn {
+      &.filled,
+      &.tonal,
+      &.elevated,
+      &.outlined {
+        margin: 0 .26rem 1.6rem 0;
+      }
+    }
+  }
+
+  .card-reveal {
+    padding: 24px;
+    position: absolute;
+    background-color: var(--md-sys-color-surface);
+    width: 100%;
+    overflow-y: auto;
+    left: 0;
+    top: 100%;
+    height: 100%;
+    z-index: 3;
+    display: none;
+
+    .card-title {
+      cursor: pointer;
+      display: block;
+    }
+  }
+}

package/components/card/card.mjs

@@ -0,0 +1,10 @@
+import { Component } from '../atomic/component.mjs';
+
+class Card extends Component {
+  constructor(options) {
+    super(options);
+    this.addClassname('card');
+  }
+}
+
+export { Card };

package/components/card/cards.ts

@@ -0,0 +1,185 @@
+import { Utils } from '../../src/utils';
+import { Component, BaseOptions, InitElements, MElement, Openable } from '../../src/component';
+
+interface CardsOptions extends BaseOptions {
+  onOpen: (el: Element) => void;
+  onClose: (el: Element) => void;
+  inDuration: number;
+  outDuration: number;
+}
+
+const _defaults: CardsOptions = {
+  onOpen: null,
+  onClose: null,
+  inDuration: 225,
+  outDuration: 300
+};
+
+class Cards extends Component<CardsOptions> implements Openable {
+  readonly #cardReveal: HTMLElement | null;
+  readonly #initialOverflow: string;
+  #activators: HTMLElement[] | null;
+  #cardRevealClose: HTMLElement | null;
+  isOpen: boolean = false;
+
+  constructor(el: HTMLElement, options: Partial<CardsOptions>) {
+    super(el, options, Cards);
+    this.el['M_Cards'] = this;
+    this.options = {
+      ...Cards.defaults,
+      ...options
+    };
+    this.#activators = [];
+    this.#cardReveal = this.el.querySelector('.card-reveal');
+    if (this.#cardReveal) {
+      this.#initialOverflow = getComputedStyle(this.el).overflow;
+      this.#activators = Array.from(this.el.querySelectorAll('.activator'));
+      this.#activators.forEach((el: HTMLElement) => {
+        if (el) el.tabIndex = 0;
+      });
+      this.#cardRevealClose = this.#cardReveal?.querySelector('.card-title');
+      if (this.#cardRevealClose) this.#cardRevealClose.tabIndex = -1;
+      this.#cardReveal.ariaExpanded = 'false';
+      this.#setupEventHandlers();
+    }
+  }
+
+  static get defaults(): CardsOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Cards.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<CardsOptions>): Cards;
+  /**
+   * Initializes instances of Cards.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<CardsOptions>): Cards[];
+  /**
+   * Initializes instances of Cards.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options?: Partial<CardsOptions>
+  ): Cards | Cards[] {
+    return super.init(els, options, Cards);
+  }
+
+  static getInstance(el: HTMLElement): Cards {
+    return el['M_Cards'];
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  destroy() {
+    this.#removeEventHandlers();
+    this.#activators = [];
+  }
+
+  #setupEventHandlers = () => {
+    this.#activators.forEach((el: HTMLElement) => {
+      el.addEventListener('click', this.#handleClickInteraction);
+      el.addEventListener('keypress', this.#handleKeypressEvent);
+    });
+  };
+
+  #removeEventHandlers = () => {
+    this.#activators.forEach((el: HTMLElement) => {
+      el.removeEventListener('click', this.#handleClickInteraction);
+      el.removeEventListener('keypress', this.#handleKeypressEvent);
+    });
+  };
+
+  #handleClickInteraction = () => {
+    this.#handleRevealEvent();
+  };
+
+  #handleKeypressEvent: (e: KeyboardEvent) => void = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this.#handleRevealEvent();
+    }
+  };
+
+  #handleRevealEvent = () => {
+    this.#activators.forEach((el: HTMLElement) => (el.tabIndex = -1)); // Reveal Card
+    this.open();
+  };
+
+  #setupRevealCloseEventHandlers = () => {
+    this.#cardRevealClose.addEventListener('click', this.close);
+    this.#cardRevealClose.addEventListener('keypress', this.#handleKeypressCloseEvent);
+  };
+
+  #removeRevealCloseEventHandlers = () => {
+    this.#cardRevealClose.addEventListener('click', this.close);
+    this.#cardRevealClose.addEventListener('keypress', this.#handleKeypressCloseEvent);
+  };
+
+  #handleKeypressCloseEvent: (e: KeyboardEvent) => void = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this.close();
+    }
+  };
+
+  /**
+   * Show card reveal.
+   */
+  open: () => void = () => {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.el.style.overflow = 'hidden';
+    this.#cardReveal.style.display = 'block';
+    this.#cardReveal.ariaExpanded = 'true';
+    this.#cardRevealClose.tabIndex = 0;
+    setTimeout(() => {
+      this.#cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+      this.#cardReveal.style.transform = 'translateY(-100%)';
+    }, 1);
+    if (typeof this.options.onOpen === 'function') {
+      this.options.onOpen.call(this);
+    }
+    this.#setupRevealCloseEventHandlers();
+  };
+
+  /**
+   * Hide card reveal.
+   */
+  close: () => void = () => {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.#cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+    this.#cardReveal.style.transform = 'translateY(0)';
+    setTimeout(() => {
+      this.#cardReveal.style.display = 'none';
+      this.#cardReveal.ariaExpanded = 'false';
+      this.#activators.forEach((el: HTMLElement) => (el.tabIndex = 0));
+      this.#cardRevealClose.tabIndex = -1;
+      this.el.style.overflow = this.#initialOverflow;
+    }, this.options.inDuration);
+    if (typeof this.options.onClose === 'function') {
+      this.options.onClose.call(this);
+    }
+    this.#removeRevealCloseEventHandlers();
+  };
+
+  static Init() {
+    if (typeof document !== 'undefined')
+      // Handle initialization of static cards.
+      document.addEventListener('DOMContentLoaded', () => {
+        const cards = document.querySelectorAll('.card');
+        cards.forEach((el) => {
+          if (el && el['M_Card'] == undefined) this.init(el as HTMLElement);
+        });
+      });
+  }
+}
+
+export { Cards, CardsOptions };

package/components/card/cardsSpec.js

@@ -0,0 +1,269 @@
+describe('Cards', () => {
+  const fixture = `
+    <div class="row">
+      <div class="col s12 m6">
+        <div class="card reveal">
+          <div class="card-image waves-effect waves-block waves-light">
+            <img
+              class="activator"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
+            >
+          </div>
+          <div class="card-content">
+            <span class="card-title activator grey-text text-darken-4">
+              Card Title
+              <i class="material-icons right">more_vert</i>
+            </span>
+            <p><a href="#">This is a link</a></p>
+          </div>
+          <div class="card-reveal">
+            <span class="card-title grey-text text-darken-4">
+              Card Title
+              <i class="material-icons right">close</i>
+            </span>
+            <p>
+              Here is some more information about this product that is only revealed once clicked on.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="col s12 m6">
+        <div class="card image">
+          <div class="card-image">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
+            >
+            <span class="card-title">Card Title</span>
+          </div>
+          <div class="card-content">
+            <p>
+              I am a very simple card. I am good at containing small bits of information.
+              I am convenient because I require little markup to use effectively.
+            </p>
+          </div>
+          <div class="card-action">
+            <a href="#">This is a link</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col s4">
+        <div class="card small">
+          <div class="card-image">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
+            >
+            <span class="card-title">Card Title</span>
+          </div>
+          <div class="card-content">
+            <p>
+              I am a very simple card. I am good at containing small bits of information.
+              I am convenient because I require little markup to use effectively.
+            </p>
+          </div>
+          <div class="card-action">
+            <a href="#">This is a link</a>
+            <a href="#">This is a link</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="col s4">
+        <div class="card medium">
+          <div class="card-image">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
+            >
+            <span class="card-title">Card Title</span>
+          </div>
+          <div class="card-content">
+            <p>
+              I am a very simple card. I am good at containing small bits of information.
+              I am convenient because I require little markup to use effectively.
+            </p>
+          </div>
+          <div class="card-action">
+            <a href="#">This is a link</a>
+            <a href="#">This is a link</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="col s4">
+        <div class="card large">
+          <div class="card-image">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
+            >
+            <span class="card-title">Card Title</span>
+          </div>
+          <div class="card-content">
+            <p>
+              I am a very simple card. I am good at containing small bits of information.
+              I am convenient because I require little markup to use effectively.
+            </p>
+          </div>
+          <div class="card-action">
+            <a href="#">This is a link</a>
+            <a href="#">This is a link</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const roundedRect = (el) => {
+    const rect = el.getBoundingClientRect();
+    return {
+      top: Math.round(rect.top),
+      left: Math.round(rect.left),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      right: Math.round(rect.right),
+      bottom: Math.round(rect.bottom)
+    };
+  };
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    M.Cards.init(document.querySelectorAll('.card'));
+  });
+
+  afterEach(() => {
+    XunloadFixtures();
+  });
+
+  describe('reveal cards', () => {
+    let revealCard;
+    let revealDiv;
+
+    beforeEach(() => {
+      revealCard = document.querySelector('.card.reveal');
+      revealDiv = revealCard.querySelector('.card-reveal');
+    });
+
+    it('should have a hidden card-reveal initially', () => {
+      expect(revealDiv).toBeHidden('reveal div should be hidden initially');
+    });
+
+    it('should show card-reveal after clicking an activator', (done) => {
+      const activator = revealCard.querySelector('.activator');
+
+      click(activator);
+
+      setTimeout(() => {
+        expect(revealDiv).toBeVisible('reveal did not appear after activator was clicked.');
+        done();
+      }, 500);
+    });
+
+    it('should size and position card-reveal to cover the card when opened', (done) => {
+      const activator = revealCard.querySelector('.activator');
+
+      click(activator);
+
+      setTimeout(() => {
+        const revealRect = roundedRect(revealDiv);
+        const cardRect = roundedRect(revealCard);
+
+        expect(revealDiv).toBeVisible('reveal did not appear after activator was clicked.');
+        expect(revealRect.width).toEqual(cardRect.width, 'reveal width should match card width');
+        expect(revealRect.height).toEqual(
+          cardRect.height,
+          'reveal height should match card height'
+        );
+        expect(revealRect.top).toEqual(cardRect.top, 'reveal top should align with card top');
+        expect(revealRect.left).toEqual(cardRect.left, 'reveal left should align with card left');
+
+        done();
+      }, 500);
+    });
+  });
+
+  describe('image cards', () => {
+    let imageCard;
+    let image;
+
+    beforeEach(() => {
+      imageCard = document.querySelector('.card.image');
+      image = imageCard.querySelector('.card-image > img');
+    });
+
+    it('should have an image that fills the full width of the card', () => {
+      const imageRect = roundedRect(image);
+      const cardRect = roundedRect(imageCard);
+
+      expect(imageRect.width).toEqual(cardRect.width, 'image does not fill width of card');
+      expect(imageRect.top).toEqual(cardRect.top, 'image top should align with card top');
+    });
+  });
+
+  describe('sized cards', () => {
+    const expectSizedCardLayout = ({
+      card,
+      expectedHeight,
+      maxImageHeight,
+      maxContentHeight,
+      sizeName
+    }) => {
+      const cardImage = card.querySelector('.card-image');
+      const cardContent = card.querySelector('.card-content');
+      const cardAction = card.querySelector('.card-action');
+
+      const cardRect = roundedRect(card);
+      const imageRect = roundedRect(cardImage);
+      const contentRect = roundedRect(cardContent);
+      const actionRect = roundedRect(cardAction);
+
+      expect(cardRect.height).toEqual(
+        expectedHeight,
+        `${sizeName} card should be ${expectedHeight}px high`
+      );
+      expect(imageRect.height).toBeLessThan(
+        maxImageHeight + 1,
+        `${sizeName} image should be <= ${maxImageHeight}px high`
+      );
+      expect(contentRect.height).toBeLessThan(
+        maxContentHeight + 1,
+        `${sizeName} content should be <= ${maxContentHeight}px high`
+      );
+      expect(actionRect.bottom).toEqual(
+        cardRect.bottom,
+        `${sizeName} action should be at bottom of card`
+      );
+    };
+
+    it('should have small card dimensions', () => {
+      expectSizedCardLayout({
+        card: document.querySelector('.card.small'),
+        expectedHeight: 300,
+        maxImageHeight: 180,
+        maxContentHeight: 120,
+        sizeName: 'small'
+      });
+    });
+
+    it('should have medium card dimensions', () => {
+      expectSizedCardLayout({
+        card: document.querySelector('.card.medium'),
+        expectedHeight: 400,
+        maxImageHeight: 240,
+        maxContentHeight: 160,
+        sizeName: 'medium'
+      });
+    });
+
+    it('should have large card dimensions', () => {
+      expectSizedCardLayout({
+        card: document.querySelector('.card.large'),
+        expectedHeight: 500,
+        maxImageHeight: 300,
+        maxContentHeight: 200,
+        sizeName: 'large'
+      });
+    });
+  });
+});