PDJ Brandbox

comparison 

<section class="comparison">
    <div class="comparison__inner">
        <div class="section--6">
            <div class="comparison__in">
                <div class="comparison__table">
                    <header class="comparison__header comparison__col">
                        <div class="comparison__head comparison__cell"></div>

                        <div class="comparison__content">
                            <div class="comparison__cell">
                                Woofer
                            </div>

                            <div class="comparison__cell">
                                Width
                            </div>

                            <div class="comparison__cell">
                                Height
                            </div>

                            <div class="comparison__cell">
                                Depth
                            </div>

                            <div class="comparison__cell">
                                Weight
                            </div>

                            <div class="comparison__cell">
                                Frequency Range
                            </div>

                            <div class="comparison__cell">
                                Maximum Sound Pressure
                            </div>

                            <div class="comparison__cell">
                                Amplifier Output
                            </div>
                        </div>
                    </header>

                    <div class="comparison__col">
                        <div class="comparison__head comparison__cell">
                            <picture class="comparison__visual">
                                <img class="comparison__image" src="https://via.placeholder.com/160x190">
                            </picture>

                            <div class="comparison__label">
                                <a href="" class="link link--underlined">
                                    <span class="link__label">VM-50</span>
                                </a>&nbsp;/&nbsp;<a href="" class="link link--underlined">
                                    <span class="link__label">VM-50-W</span>
                                </a>
                            </div>
                        </div>

                        <div class="comparison__content">
                            <div class="comparison__cell">
                                5.25" (133 mm) ARAMID CONE
                            </div>

                            <div class="comparison__cell">
                                198 mm
                            </div>

                            <div class="comparison__cell">
                                300 mm
                            </div>

                            <div class="comparison__cell">
                                256 mm
                            </div>

                            <div class="comparison__cell">
                                5.5 kg
                            </div>

                            <div class="comparison__cell">
                                40 Hz - 36 kHz
                            </div>

                            <div class="comparison__cell">
                                107 dB
                            </div>

                            <div class="comparison__cell">
                                Class D with 96kHz DSP<br>
                                LF: 30 W / 4 Ω<br>
                                HF: 30 W / 4 Ω
                            </div>
                        </div>
                    </div>

                    <div class="comparison__col">
                        <div class="comparison__head comparison__cell">
                            <picture class="comparison__visual">
                                <img class="comparison__image" src="https://via.placeholder.com/160x190">
                            </picture>

                            <div class="comparison__label">
                                <a href="" class="link link--underlined">
                                    <span class="link__label">VM-70</span>
                                </a>
                            </div>
                        </div>

                        <div class="comparison__content">
                            <div class="comparison__cell">
                                6.5" (165 mm) ARAMID CONE
                            </div>

                            <div class="comparison__cell">
                                229 mm
                            </div>

                            <div class="comparison__cell">
                                341 mm
                            </div>

                            <div class="comparison__cell">
                                312 mm
                            </div>

                            <div class="comparison__cell">
                                7.7 kg
                            </div>

                            <div class="comparison__cell">
                                37 Hz - 36 kHz
                            </div>

                            <div class="comparison__cell">
                                112 dB
                            </div>

                            <div class="comparison__cell">
                                Class D with 96kHz DSP<br>
                                LF: 70 W / 4 Ω<br>
                                HF: 30 W / 4 Ω
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="comparison__actions">
        <div class="section--6">
            <div class="actions actions--force actions--end">
                <div class="actions__item">

                    <a href="#" target="_blank" class="action action--normal action--on-light">
                        <span class="action__label">Full VM-50 specs</span>
                        <span class="action__bg"></span>
                    </a>

                </div>
            </div>
        </div>
    </div>

    <div class="comparison__loader"></div>
</section>
 
<section class="comparison">
  <div class="comparison__inner">
    <div class="section--6">
      <div class="comparison__in">
        <div class="comparison__table">
          <header class="comparison__header comparison__col">
            <div class="comparison__head comparison__cell"></div>

            <div class="comparison__content">
              <div class="comparison__cell">
                Woofer
              </div>

              <div class="comparison__cell">
                Width
              </div>

              <div class="comparison__cell">
                Height
              </div>

              <div class="comparison__cell">
                Depth
              </div>

              <div class="comparison__cell">
                Weight
              </div>

              <div class="comparison__cell">
                Frequency Range
              </div>

              <div class="comparison__cell">
                Maximum Sound Pressure
              </div>

              <div class="comparison__cell">
                Amplifier Output
              </div>
            </div>
          </header>

          <div class="comparison__col">
            <div class="comparison__head comparison__cell">
              <picture class="comparison__visual">
                <img class="comparison__image" src="https://via.placeholder.com/160x190">
              </picture>

              <div class="comparison__label">
                <a href="" class="link link--underlined">
                  <span class="link__label">VM-50</span>
                </a>&nbsp;/&nbsp;<a href="" class="link link--underlined">
                  <span class="link__label">VM-50-W</span>
                </a>
              </div>
            </div>

            <div class="comparison__content">
              <div class="comparison__cell">
                5.25" (133 mm) ARAMID CONE
              </div>

              <div class="comparison__cell">
                198 mm
              </div>

              <div class="comparison__cell">
                300 mm
              </div>

              <div class="comparison__cell">
                256 mm
              </div>

              <div class="comparison__cell">
                5.5 kg
              </div>

              <div class="comparison__cell">
                40 Hz - 36 kHz
              </div>

              <div class="comparison__cell">
                107 dB
              </div>

              <div class="comparison__cell">
                Class D with 96kHz DSP<br>
                LF: 30 W / 4 Ω<br>
                HF: 30 W / 4 Ω
              </div>
            </div>
          </div>

          <div class="comparison__col">
            <div class="comparison__head comparison__cell">
              <picture class="comparison__visual">
                <img class="comparison__image" src="https://via.placeholder.com/160x190">
              </picture>

              <div class="comparison__label">
                <a href="" class="link link--underlined">
                  <span class="link__label">VM-70</span>
                </a>
              </div>
            </div>

            <div class="comparison__content">
              <div class="comparison__cell">
                6.5" (165 mm) ARAMID CONE
              </div>

              <div class="comparison__cell">
                229 mm
              </div>

              <div class="comparison__cell">
                341 mm
              </div>

              <div class="comparison__cell">
                312 mm
              </div>

              <div class="comparison__cell">
                7.7 kg
              </div>

              <div class="comparison__cell">
                37 Hz - 36 kHz
              </div>

              <div class="comparison__cell">
                112 dB
              </div>

              <div class="comparison__cell">
                Class D with 96kHz DSP<br>
                LF: 70 W / 4 Ω<br>
                HF: 30 W / 4 Ω
              </div>
            </div>
          </div>

          {{!-- <div class="comparison__col">
            <div class="comparison__head comparison__cell">
              <picture class="comparison__visual">
                <img class="comparison__image" src="https://via.placeholder.com/160x190">
              </picture>

              <div class="comparison__label">
                <a href="" class="link link--underlined">
                  <span class="link__label">VM-80</span>
                </a>
              </div>
            </div>

            <div class="comparison__content">
              <div class="comparison__cell">
                8" (203 mm) ARAMID CONE
              </div>

              <div class="comparison__cell">
                267 mm
              </div>

              <div class="comparison__cell">
                400 mm
              </div>

              <div class="comparison__cell">
                325 mm
              </div>

              <div class="comparison__cell">
                9.7 kg
              </div>

              <div class="comparison__cell">
                34 Hz - 36 kHz
              </div>

              <div class="comparison__cell">
                115 dB
              </div>

              <div class="comparison__cell">
                Class D with 96kHz DSP<br>
                LF: 90 W / 4 Ω<br>
                HF: 30 W / 4 Ω
              </div>
            </div>
          </div> --}}
        </div>
      </div>
    </div>
  </div>

  <div class="comparison__actions">
    <div class="section--6">
      <div class="actions actions--force actions--end">
        <div class="actions__item">
          {{render '@action' action merge=true}}
        </div>
      </div>
    </div>
  </div>

  <div class="comparison__loader"></div>
</section>
 
action:
  label: Full VM-50 specs
  url: '#'
  • Content: 
    const COMPARISON = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.comparison',
    theTable: '.comparison__table',
    theCol: '.comparison__col',
    theCell: '.comparison__cell',
  };

  const classes = {
    theTable: 'comparison__table',
    isLoaded: 'is-loaded',
    isGrabbed: 'is-grabbing',
    hasScrollbar: 'has-scrollbar',
  };

  const els = {};

  const theHeights = [];

  let scrollable = false;
  let timer = null;
  let isDown = null;
  let startX = null;
  let scrollLeft = null;

  const init = () => {
    els.theWrap = d.querySelector(selectors.theWrap);
    els.theTable = d.querySelector(selectors.theTable);
    els.theCols = d.querySelectorAll(selectors.theCol) || [];

    els.theCols.length > 0 && els.theTable.classList.add(classes.theTable + '--' + (els.theCols.length - 1));

    bindIt();
    resize();
  };

  const bindIt = () => {
    els.theTable && els.theTable.addEventListener('mousedown', (e) => {
      if (!scrollable) { return; }

      isDown = true;
      els.theTable.classList.add(classes.isGrabbed);
      startX = e.pageX - els.theTable.offsetLeft;
      scrollLeft = els.theTable.scrollLeft;
    });

    els.theTable && els.theTable.addEventListener('mouseleave', () => {
      if (!scrollable) { return; }

      isDown = false;
      els.theTable.classList.remove(classes.isGrabbed);
    });

    els.theTable && els.theTable.addEventListener('mouseup', () => {
      if (!scrollable) { return; }

      isDown = false;
      els.theTable.classList.remove(classes.isGrabbed);
    });

    els.theTable && els.theTable.addEventListener('mousemove', (e) => {
      if(!scrollable || !isDown) { return; }

      e.preventDefault();

      const x = e.pageX - els.theTable.offsetLeft;
      const walk = (x - startX) * 1;

      els.theTable.scrollLeft = scrollLeft - walk;
    });
  };

  const resize = () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      hasScrollbar();
      heights.reset();
      heights.get();
      heights.set();
    }, 200);
  };

  const heights = {
    get: () => {
      if (!els.theCols) { return; }

      [...els.theCols].forEach((theCol) => {
        els.theCells = theCol.querySelectorAll(selectors.theCell);

        [...els.theCells].forEach((theCell, index) => {
          theHeights[index] = theHeights[index] < theCell.offsetHeight ? theCell.offsetHeight : theHeights[index];
        });
      });
    },
    set: () => {
      if (!els.theCols) { return; }

      [...els.theCols].forEach((theCol) => {
        els.theCells = theCol.querySelectorAll(selectors.theCell);

        [...els.theCells].forEach((theCell, index) => {
          theCell.style.minHeight = theHeights[index] + 'px';
        });
      });

      els.theWrap && els.theWrap.classList.add(classes.isLoaded);
    },
    reset: () => {
      els.theWrap && els.theWrap.classList.remove(classes.isLoaded);

      if (!els.theCols) { return; }

      [...els.theCols].forEach((theCol) => {
        els.theCells = theCol.querySelectorAll(selectors.theCell);

        [...els.theCells].forEach((theCell, index) => {
          theCell.style.minHeight = 0;
          theHeights[index] = null;
        });
      });
    },
  };

  const hasScrollbar = () => {
    if (!els.theTable) { return; }

    if (els.theTable.scrollWidth > els.theTable.clientWidth) {
      els.theTable.classList.add(classes.hasScrollbar);
      scrollable = true;
    } else {
      els.theTable.classList.remove(classes.hasScrollbar);
      scrollable = false;
    }
  };

  w.addEventListener('load', init);
  w.addEventListener('resize', resize);

})(window, window.document);
  • URL: /components/raw/comparison/comparison.js
  • Filesystem Path: ../src/04_organisms/comparison/comparison.js
  • Size: 3.7 KB
  • Content: 
    .comparison {
  position: relative;
  padding: 0 var(--gutter--bucket);
}

.comparison__inner {
  margin-right: calc(var(--gutter--bucket) * -1);
  overflow: hidden;

  @media (min-width: 1024px) {
    margin-right: 0;
  }
}

.comparison__in {
  margin-bottom: -20px;
}

.comparison__table {
  display: flex;
  padding-bottom: 20px;
  overflow: auto;
  font-size: var(--p--2);

  @media (hover:hover) {
    &.has-scrollbar {
      cursor: grab;
    }
  }

  &.has-scrollbar.is-grabbing {
    @media (hover:hover) {
      cursor: grabbing;
    }
  }
}

.comparison__table:after {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--gutter--bucket);
  margin-left: auto;
  background-color: var(--color--neutrals-0);
  content: '';

  @media (min-width: 940px) {
    display: none;
  }
}

.comparison__col {
  display: block !important;
}

.comparison__col:not(.comparison__header) {
  .comparison__table--2 & {
    flex: 1;
    min-width: 130px;
  }

  .comparison__table--3 & {
    flex: 0 0 calc((96vw - 80px - var(--gutter--bucket)) / 2);

    @media (min-width: 750px) {
      flex: 0 0 calc((100% - 180px - var(--gutter--bucket)) / 3);
    }

    @media (min-width: 940px) {
      flex: 0 0 calc((100% - 180px) / 3);
    }
  }

  .comparison__table--4 & {
    flex: 0 0 calc((96vw - 80px - var(--gutter--bucket)) / 2);

    @media (min-width: 750px) {
      flex: 0 0 calc((96% - 180px - var(--gutter--bucket)) / 3);
    }

    @media (min-width: 940px) {
      flex: 0 0 calc((100% - 180px) / 4);
    }
  }

  .comparison__table--5 & {
    flex: 0 0 calc((96vw - 80px - var(--gutter--bucket)) / 2);

    @media (min-width: 750px) {
      flex: 0 0 calc((96% - 180px - var(--gutter--bucket)) / 3);
    }
  }
}

.comparison__header {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 80px;
  min-width: 0;
  font-weight: 700;
  background-color: var(--color--neutrals-0);

  @media (min-width: 750px) {
    flex: 0 0 180px;
  }
}

.comparison__head {
  padding-top: 0 !important;

  .comparison__col:first-child &:after {
    display: none !important;
  }
}

.comparison__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--gap--2);
  background-color: var(--color--neutrals-1);
}

.comparison__image {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: auto;
}

.comparison__label {
  display: block;
  padding-top: var(--gap--4);
  padding-right: var(--gap--2);
  font-size: var(--h--5);
  font-weight: 500;
}

.comparison__cell {
  position: relative;
  padding: var(--gap--4) 0 var(--gap--4) var(--gap--2);

  @media (min-width: 750px) {
    padding-left: var(--gap--4);
  }

  @media (min-width: 900px) {
    padding-left: var(--gap--6);
  }

  .comparison__col:first-child & {
    padding-right: var(--gap--4);
    padding-left: 0;
    word-break: break-word;
  }

  .comparison__col:first-child &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: calc(100vw - var(--gutter--bucket));
    max-width: var(--section--6);
    height: 1px;
    background-color: var(--color--border);
    content: '';
  }
}

.comparison__actions {
  margin-top: var(--gap--4);
}

.comparison__loader {
  transition: opacity 300ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color--neutrals-0);

  .is-loaded & {
    opacity: 0;
    pointer-events: none;
  }
}
  • URL: /components/raw/comparison/comparison.scss
  • Filesystem Path: ../src/04_organisms/comparison/comparison.scss
  • Size: 3.5 KB

No notes defined.