<div class="lens-collections js-lens-collections js-accordion-tabs">
    <ul class="lens-collections__tabs">
        <li class="lens-collections__tab js-accordion-tabs-tab js-accordion-tabs-tab--active" data-tab="optimum">
            <div class="lens-collections__tab-inner">
                <div class="lens-collections__tab-image-wrapper" style="background-color: #E91D2B">
                    <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-optimum.png" alt="Optimum">
                </div>
                <h3 class="lens-collections__tab-title">Optimum</h3>
                <h4 class="lens-collections__tab-subtitle">Clearly Superior</h4>
            </div>
        </li>
        <li class="lens-collections__tab js-accordion-tabs-tab" data-tab="polarized">
            <div class="lens-collections__tab-inner">
                <div class="lens-collections__tab-image-wrapper" style="background-color: #1E5732">
                    <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-polarized.png" alt="Polarized">
                </div>
                <h3 class="lens-collections__tab-title">Polarized</h3>
                <h4 class="lens-collections__tab-subtitle">Clarity &amp; Protection</h4>
            </div>
        </li>
        <li class="lens-collections__tab js-accordion-tabs-tab" data-tab="auto">
            <div class="lens-collections__tab-inner">
                <div class="lens-collections__tab-image-wrapper" style="background-color: #1C3C6C">
                    <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-auto.png" alt="Auto+">
                </div>
                <h3 class="lens-collections__tab-title">Auto+</h3>
                <h4 class="lens-collections__tab-subtitle">One lens. Every condition.</h4>
            </div>
        </li>
    </ul>
    <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper js-accordion-tabs-content-wrapper--active" data-tab="optimum">
        <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Optimum
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="lens-collections__content">
            <h5 class="lens-collections__headline">Lenses for all conditions</h5>
            <p class="lens-collections__description">Our Optimum Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Optimum blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield
                Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
            <h6 class="lens-collections__features-title">Tech Features</h6>
            <ul class="lens-collections__features">
                <li class="lens-collections__feature">Blue light filters to enhance color</li>
                <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                <li class="lens-collections__feature">Permashield Hardcoat</li>
                <li class="lens-collections__feature">Everclear Anti-Fog</li>
                <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
            </ul>
        </div>
    </div>
    <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper" data-tab="polarized">
        <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Polarized
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="lens-collections__content">
            <h5 class="lens-collections__headline">Lorem for all conditions</h5>
            <p class="lens-collections__description">Our Polarized Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Polarized blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield
                Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
            <h6 class="lens-collections__features-title">Tech Features</h6>
            <ul class="lens-collections__features">
                <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
                <li class="lens-collections__feature">Blue light filters to enhance color</li>
                <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                <li class="lens-collections__feature">Permashield Hardcoat</li>
                <li class="lens-collections__feature">Everclear Anti-Fog</li>
            </ul>
        </div>
    </div>
    <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper" data-tab="auto">
        <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Auto+
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="lens-collections__content">
            <h5 class="lens-collections__headline">Lenses for all ipsum</h5>
            <p class="lens-collections__description">Our Auto+ Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Auto+ blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield
                Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
            <h6 class="lens-collections__features-title">Tech Features</h6>
            <ul class="lens-collections__features">
                <li class="lens-collections__feature">Everclear Anti-Fog</li>
                <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
                <li class="lens-collections__feature">Blue light filters to enhance color</li>
                <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                <li class="lens-collections__feature">Permashield Hardcoat</li>
            </ul>
        </div>
    </div>
</div>
<div class="lens-collections js-lens-collections js-accordion-tabs">
  <ul class="lens-collections__tabs">
    {{#each collections}}
    <li class="lens-collections__tab js-accordion-tabs-tab{{#if active}} js-accordion-tabs-tab--active{{/if}}" data-tab="{{id}}">
      <div class="lens-collections__tab-inner">
        <div class="lens-collections__tab-image-wrapper" style="background-color: {{color}}">
          <img class="lens-collections__tab-image" src="{{image}}" alt="{{title}}">
        </div>
        <h3 class="lens-collections__tab-title">{{title}}</h3>
        <h4 class="lens-collections__tab-subtitle">{{subtitle}}</h4>
      </div>
    </li>
    {{/each}}
  </ul>
  {{#each collections}}
  <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper{{#if active}} js-accordion-tabs-content-wrapper--active{{/if}}" data-tab="{{id}}">
    <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      {{title}}
      {{render '@icons--arrow-down'}}
      {{render '@icons--arrow-up'}}
    </button>
    <div class="lens-collections__content">
      {{#if headline}}
      <h5 class="lens-collections__headline">{{headline}}</h5>
      {{/if}}
      {{#if description}}
      <p class="lens-collections__description">{{description}}</p>
      {{/if}}
      {{#if features}}
      <h6 class="lens-collections__features-title">Tech Features</h6>
      <ul class="lens-collections__features">
        {{#each features}}
        <li class="lens-collections__feature">{{this}}</li>
        {{/each}}
      </ul>
      {{/if}}
    </div>
  </div>
  {{/each}}
</div>
{
  "collections": [
    {
      "id": "optimum",
      "image": "/assets/images/zeal-tech-collection-optimum.png",
      "color": "#E91D2B",
      "title": "Optimum",
      "subtitle": "Clearly Superior",
      "headline": "Lenses for all conditions",
      "description": "Our Optimum Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Optimum blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.",
      "features": [
        "Blue light filters to enhance color",
        "Blocks 100% UVA/B/C light",
        "Permashield Hardcoat",
        "Everclear Anti-Fog",
        "Hydro/Oleo on mirrored lenses"
      ],
      "active": true
    },
    {
      "id": "polarized",
      "image": "/assets/images/zeal-tech-collection-polarized.png",
      "color": "#1E5732",
      "title": "Polarized",
      "subtitle": "Clarity & Protection",
      "headline": "Lorem for all conditions",
      "description": "Our Polarized Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Polarized blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.",
      "features": [
        "Hydro/Oleo on mirrored lenses",
        "Blue light filters to enhance color",
        "Blocks 100% UVA/B/C light",
        "Permashield Hardcoat",
        "Everclear Anti-Fog"
      ]
    },
    {
      "id": "auto",
      "image": "/assets/images/zeal-tech-collection-auto.png",
      "color": "#1C3C6C",
      "title": "Auto+",
      "subtitle": "One lens. Every condition.",
      "headline": "Lenses for all ipsum",
      "description": "Our Auto+ Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Auto+ blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.",
      "features": [
        "Everclear Anti-Fog",
        "Hydro/Oleo on mirrored lenses",
        "Blue light filters to enhance color",
        "Blocks 100% UVA/B/C light",
        "Permashield Hardcoat"
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      // Contains functionality for hiding/showing other elements on the page as
      // the collections are switched. accordion-tabs.js handles the basic
      // accordion/tab behavior.
    
      const activeTabClass = 'js-accordion-tabs-tab--active';
      const activeWrapperClass = 'js-accordion-tabs-content-wrapper--active';
    
      function initInstance(instance) {
        const tabs = instance.querySelectorAll('.js-accordion-tabs-tab');
        const accordionControls = instance.querySelectorAll('.js-accordion-tabs-accordion-control');
        let activeCollection;
    
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].addEventListener('click', handleTab);
    
          if (tabs[i].classList.contains(activeTabClass)) {
            activeCollection = tabs[i].getAttribute('data-tab');
          }
        }
    
        for (let i = 0; i < accordionControls.length; i++) {
          accordionControls[i].addEventListener('click', handleAccordionControl);
        }
    
        toggleCollectionItemVisibility(activeCollection);
      }
    
      function toggleCollectionItemVisibility(activeCollection) {
        const collectionItems = document.querySelectorAll('[data-lens-collection]');
    
        for (let i = 0; i < collectionItems.length; i++) {
          if (collectionItems[i].getAttribute('data-lens-collection') == activeCollection) {
            collectionItems[i].classList.remove('js-hidden');
            triggerNativeEvent(window, 'resize');
          }
          else {
            collectionItems[i].classList.add('js-hidden');
          }
        }
      }
    
      function handleTab(e) {
        const tab = e.target.closest('.js-accordion-tabs-tab');
        const collectionId = tab.getAttribute('data-tab');
    
        toggleCollectionItemVisibility(collectionId);
      }
    
      function handleAccordionControl(e) {
        const contentWrapper = e.target.closest('.js-accordion-tabs-content-wrapper');
        const collectionId = contentWrapper.getAttribute('data-tab');
    
        toggleCollectionItemVisibility(collectionId);
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-lens-collections');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-lens-collections-init')) {
            initInstance(instances[i]);
    
            instances[i].classList.add('js-lens-collections-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/lens-collections/lens-collections.js
  • Filesystem Path: src/components/02-components/technology/lens-collections/lens-collections.js
  • Size: 2.5 KB
  • Content:
    .lens-collections__tabs {
      @include reset-list;
      display: table;
      width: 100%;
      table-layout: fixed;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .lens-collections__tab {
      display: table-cell;
      padding: 0 $gutter-width-half;
    }
    
    .lens-collections__tab-inner {
      height: 100%;
      padding-bottom: 2px;
      text-align: center;
      cursor: pointer;
    
      @include breakpoint($breakpoint-md) {
        transition: box-shadow $transition-standard;
    
        &:hover,
        .js-accordion-tabs-tab--active & {
          position: relative;
          box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1);
        }
      }
    }
    
    .lens-collections__tab-image-wrapper {
      position: relative;
      height: 170px;
    
      @include breakpoint($breakpoint-xl) {
        height: 230px;
      }
    }
    
    .lens-collections__tab-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .lens-collections__tab-title {
      margin: 25px 0 10px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.7rem;
      }
    }
    
    .lens-collections__tab-subtitle {
      margin: 10px 0 20px;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
    }
    
    .lens-collections__accordion-control {
      @include reset-button;
      display: block;
      position: relative;
      width: 100%;
      padding-left: 20px;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.9rem;
      letter-spacing: 2px;
      line-height: 5.0rem;
      text-align: left;
      box-sizing: border-box;
    
      &:after {
        position: absolute;
        right: 20px;
        bottom: 0;
        left: 20px;
        border-bottom: 1px solid $color-light;
        content: '';
      }
    
      .icon {
        position: absolute;
        right: 20px;
        fill: $color-dark;
        pointer-events: none;
      }
    
      .icon--arrow-down {
        top: 22px;
      }
    
      .icon--arrow-up {
        display: none;
        top: 20px;
        width: 10px;
        height: 10px;
      }
    
      .js-accordion-tabs-content-wrapper--active & {
        .icon--arrow-down {
          display: none;
        }
    
        .icon--arrow-up {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .lens-collections__content {
      display: none;
      margin: 0;
      padding: 5px $gutter-width-half;
      box-sizing: border-box;
    
      .js-accordion-tabs-content-wrapper--active & {
        display: block;
      }
    }
    
    .lens-collections__headline {
      margin: 15px 0 10px;
      color: $color-darkest;
      font-size: 2.0rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.4rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 40px;
        font-size: 2.7rem;
        letter-spacing: 2px;
        line-height: 3.2rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 80px;
      }
    }
    
    .lens-collections__description,
    .lens-collections__features-title,
    .lens-collections__features {
      color: $color-dark;
      font-size: 1.4rem;
      letter-spacing: 0;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 3.0rem;
      }
    }
    
    .lens-collections__features-title {
      margin: 10px 0;
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 20px;
      }
    }
    
  • URL: /components/raw/lens-collections/lens-collections.scss
  • Filesystem Path: src/components/02-components/technology/lens-collections/lens-collections.scss
  • Size: 3.2 KB

There are no notes for this item.