<div class="lens-colors js-lens-colors">
    <h3 class="technology__title">The Colors</h3>
    <h4 class="technology__subtitle">A Color for Every Condition</h4>
    <ul class="lens-colors__colors js-lens-colors-carousel">
        <li class="lens-colors__color js-lens-colors-color js-lens-colors-color--active">
            <div class="lens-colors__color-info js-lens-colors-color-toggle">
                <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-neutralgrey-medium.png" alt="Neutral Grey">
                <h6 class="lens-colors__color-title">Neutral Grey</h6>
                <p class="lens-colors__color-description">Offers the highest available light reduction for the richest colors and sharpest contrast.</p>
                <p class="lens-colors__color-use">Best in Bright, Direct Sunlight</p>
            </div>
            <div class="lens-colors__comparison">
                <figure class="image-comparison js-image-comparison">
                    <img class="image-comparison__image" src="/assets/images/lens-detail-neutralgrey.jpg" alt="With">
                    <div class="image-comparison__resize js-image-comparison-resize">
                        <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                    </div>
                    <span class="image-comparison__handle js-image-comparison-handle"></span>
                    <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                </figure>

            </div>
        </li>
        <li class="lens-colors__color js-lens-colors-color">
            <div class="lens-colors__color-info js-lens-colors-color-toggle">
                <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-hclbronze-medium.png" alt="HCL® Bronze">
                <h6 class="lens-colors__color-title">HCL® Bronze</h6>
                <p class="lens-colors__color-description">This &quot;High Contrast Lens&quot; provides a beautiful warm tint, excellent for varied, everyday conditions.</p>
                <p class="lens-colors__color-use">Best for Everyday Use</p>
            </div>
            <div class="lens-colors__comparison">
                <figure class="image-comparison js-image-comparison">
                    <img class="image-comparison__image" src="/assets/images/lens-detail-hclbronze.jpg" alt="With">
                    <div class="image-comparison__resize js-image-comparison-resize">
                        <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                    </div>
                    <span class="image-comparison__handle js-image-comparison-handle"></span>
                    <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                </figure>

            </div>
        </li>
        <li class="lens-colors__color js-lens-colors-color">
            <div class="lens-colors__color-info js-lens-colors-color-toggle">
                <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-mauirose-medium.png" alt="Maui Rose®">
                <h6 class="lens-colors__color-title">Maui Rose®</h6>
                <p class="lens-colors__color-description">Provides a subtle rose tint with the highest available contrast that’s perfect for fast moving sports.</p>
                <p class="lens-colors__color-use">Best for fast Action Activities</p>
            </div>
            <div class="lens-colors__comparison">
                <figure class="image-comparison js-image-comparison">
                    <img class="image-comparison__image" src="/assets/images/lens-detail-mauirose.jpg" alt="With">
                    <div class="image-comparison__resize js-image-comparison-resize">
                        <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                    </div>
                    <span class="image-comparison__handle js-image-comparison-handle"></span>
                    <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                </figure>

            </div>
        </li>
        <li class="lens-colors__color js-lens-colors-color">
            <div class="lens-colors__color-info js-lens-colors-color-toggle">
                <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-mauiht-medium.png" alt="Maui HT™">
                <h6 class="lens-colors__color-title">Maui HT™</h6>
                <p class="lens-colors__color-description">When most lenses would be too dark, this &quot;High Transmission&quot; lens offers extra contrast and color.</p>
                <p class="lens-colors__color-use">Best for Low Light &amp; Golf</p>
            </div>
            <div class="lens-colors__comparison">
                <figure class="image-comparison js-image-comparison">
                    <img class="image-comparison__image" src="/assets/images/lens-detail-mauiht.jpg" alt="With">
                    <div class="image-comparison__resize js-image-comparison-resize">
                        <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                    </div>
                    <span class="image-comparison__handle js-image-comparison-handle"></span>
                    <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                </figure>

            </div>
        </li>
    </ul>
    <div class="lens-colors__color-controls js-lens-colors-controls">
        <button class="lens-colors__color-control lens-colors__color-control--prev">
      <span class="u-visually-hidden">Previous</span>
      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

    </button>
        <button class="lens-colors__color-control lens-colors__color-control--next">
      <span class="u-visually-hidden">Next</span>
      <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

    </button>
    </div>
</div>
<div class="lens-colors js-lens-colors">
  {{#if title}}
  <h3 class="technology__title">{{title}}</h3>
  {{/if}}
  {{#if subtitle}}
  <h4 class="technology__subtitle">{{subtitle}}</h4>
  {{/if}}
  <ul class="lens-colors__colors js-lens-colors-carousel">
    {{#each colors}}
    <li class="lens-colors__color js-lens-colors-color{{#if active}} js-lens-colors-color--active{{/if}}">
      <div class="lens-colors__color-info js-lens-colors-color-toggle">
        <img class="lens-colors__color-image" src="{{image}}" alt="{{title}}">
        <h6 class="lens-colors__color-title">{{title}}</h6>
        <p class="lens-colors__color-description">{{description}}</p>
        <p class="lens-colors__color-use">{{use}}</p>
      </div>
      <div class="lens-colors__comparison">
        {{render '@image-comparison' imageComparison merge=true}}
      </div>
    </li>
    {{/each}}
  </ul>
  <div class="lens-colors__color-controls js-lens-colors-controls">
    <button class="lens-colors__color-control lens-colors__color-control--prev">
      <span class="u-visually-hidden">Previous</span>
      {{render '@icons--arrow-left'}}
    </button>
    <button class="lens-colors__color-control lens-colors__color-control--next">
      <span class="u-visually-hidden">Next</span>
      {{render '@icons--arrow-right'}}
    </button>
  </div>
</div>
{
  "title": "The Colors",
  "subtitle": "A Color for Every Condition",
  "colors": [
    {
      "active": true,
      "image": "/assets/images/lens-detail-lens-neutralgrey-medium.png",
      "title": "Neutral Grey",
      "description": "Offers the highest available light reduction for the richest colors and sharpest contrast.",
      "use": "Best in Bright, Direct Sunlight",
      "imageComparison": {
        "imageRight": {
          "src": "/assets/images/lens-detail-neutralgrey.jpg"
        }
      }
    },
    {
      "image": "/assets/images/lens-detail-lens-hclbronze-medium.png",
      "title": "HCL® Bronze",
      "description": "This \"High Contrast Lens\" provides a beautiful warm tint, excellent for varied, everyday conditions.",
      "use": "Best for Everyday Use",
      "imageComparison": {
        "imageRight": {
          "src": "/assets/images/lens-detail-hclbronze.jpg"
        }
      }
    },
    {
      "image": "/assets/images/lens-detail-lens-mauirose-medium.png",
      "title": "Maui Rose®",
      "description": "Provides a subtle rose tint with the highest available contrast that’s perfect for fast moving sports.",
      "use": "Best for fast Action Activities",
      "imageComparison": {
        "imageRight": {
          "src": "/assets/images/lens-detail-mauirose.jpg"
        }
      }
    },
    {
      "image": "/assets/images/lens-detail-lens-mauiht-medium.png",
      "title": "Maui HT™",
      "description": "When most lenses would be too dark, this \"High Transmission\" lens offers extra contrast and color.",
      "use": "Best for Low Light & Golf",
      "imageComparison": {
        "imageRight": {
          "src": "/assets/images/lens-detail-mauiht.jpg"
        }
      }
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeColorClass = 'js-lens-colors-color--active';
    
      function handleColorSwitch(e) {
        const color = e.target.closest('.js-lens-colors-color');
        const instance = color.closest('.js-lens-colors');
    
        if (!color.classList.contains(activeColorClass)) {
          const colors = instance.querySelectorAll('.js-lens-colors-color');
    
          for (let i = 0; i < colors.length; i++) {
            if (colors[i] != color) {
              colors[i].classList.remove(activeColorClass);
            }
            else {
              colors[i].classList.add(activeColorClass);
            }
          }
        }
      }
    
      function handleCarouselTransition(info) {
        const colors = info.container.querySelectorAll('.js-lens-colors-color');
    
        // Ensures the page being switched to has the active color.
        if (colors.length > info.index) {
          const toggle = colors[info.index].querySelector('.js-lens-colors-color-toggle');
    
          toggle.click();
        }
      }
    
      function initCarousel(instance) {
        const carousel = instance.querySelector('.js-lens-colors-carousel');
    
        return imagesLoaded(carousel, function () {
          tns({
            container: carousel,
            controlsContainer: carousel.parentNode.querySelector('.js-lens-colors-controls'),
            items: 1,
            responsive: {
              681: 2,
              1025: 4
            },
            slideBy: 'page',
            nav: false,
            loop: false,
            touch: false
          }).events.on('transitionStart', handleCarouselTransition);
        });
      }
    
      function initColorSwitch(instance) {
        const colorToggles = instance.querySelectorAll('.js-lens-colors-color-toggle');
    
        for (let i = 0; i < colorToggles.length; i++) {
          colorToggles[i].addEventListener('click', handleColorSwitch);
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-lens-colors');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            initCarousel(instances[i]);
            initColorSwitch(instances[i]);
    
            instances[i].classList.add('js-component-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-colors/lens-colors.js
  • Filesystem Path: src/components/02-components/technology/lens-colors/lens-colors.js
  • Size: 2.3 KB
  • Content:
    .lens-colors {
      position: relative;
    
      [data-tns-role='wrapper'] {
        overflow: visible !important;
      }
    }
    
    .lens-colors__colors {
      @include reset-list;
      display: flex;
      // Makes up for the comparisons being absolutely positioned. These values will
      // need to change if the height of the images do.
      padding-bottom: 60vw;
      z-index: 1;
    
      @include breakpoint($page-width-max) {
        padding-bottom: 850px;
      }
    }
    
    .lens-colors__color {
      padding: 0 $gutter-width-half;
      // Overrides carousel styles to show the active arrow.
      cursor: pointer;
      overflow: visible !important;
    
      &:active {
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 50%;
        padding: 0 40px;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 25%;
        padding: 0 30px;
      }
    }
    
    .lens-colors__color-info {
      position: relative;
      height: 100%;
      cursor: pointer;
      z-index: 1;
    
      & > * {
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-md) {
        .js-lens-colors-color--active & {
          &:before {
            position: absolute;
            bottom: -20px;
            left: 50%;
            width: 0;
            height: 0;
            transform: translateX(-50%);
            border-top: 20px solid $color-white;
            border-right: 30px solid transparent;
            border-left: 30px solid transparent;
            content: '';
          }
        }
      }
    }
    
    .lens-colors__color-image {
      margin: 0 auto;
      user-select: none;
    }
    
    .lens-colors__color-title {
      margin: 15px 0;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: normal;
      line-height: 1.7rem;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        margin: 30px 0;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .lens-colors__color-description,
    .lens-colors__color-use {
      margin: 10px 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .lens-colors__color-use {
      color: $color-medium-dark;
    }
    
    .lens-colors__color-control {
      @include reset-button;
      position: absolute;
      top: 20%;
      width: 34px;
      height: 40px;
      margin-top: -20px;
      background-color: $color-white;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
      z-index: 2;
    
      .icon {
        position: relative;
        top: 1px;
        width: 9px;
        height: 15px;
      }
    
      &[disabled],
      &:not([data-controls]) {
        display: none;
      }
    }
    
    .lens-colors__color-control--prev {
      left: 0;
      border-radius: 0 10px 10px 0;
    
      .icon {
        right: 1px;
      }
    }
    
    .lens-colors__color-control--next {
      right: 0;
      border-radius: 10px 0 0 10px;
    
      .icon {
        left: 1px;
      }
    }
    
    .lens-colors__comparison {
      position: absolute;
      bottom: 0;
      width: calc(25% - 20px);
      clear: both;
    
      @include breakpoint($breakpoint-md) {
        display: none;
        left: $gutter-width-half;
        width: calc(50% - 20px);
    
        .lens-colors__color:nth-child(n+3) & {
          left: calc(50% + 10px);
        }
    
        .js-lens-colors-color--active & {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(100% - 20px);
    
        .lens-colors__color:nth-child(n) & {
          left: $gutter-width-half;
        }
      }
    }
    
  • URL: /components/raw/lens-colors/lens-colors.scss
  • Filesystem Path: src/components/02-components/technology/lens-colors/lens-colors.scss
  • Size: 3.1 KB

There are no notes for this item.