<div class="lens-features js-lens-features">
    <h2 class="lens-features__title">Our Features</h2>
    <div class="lens-features__image-wrapper">
        <img class="lens-features__image" src="/assets/images/zeal-tech-lens-features.jpg" alt="Our Features illustration">
        <ul class="lens-features__numbers">
            <li class="lens-features__number lens-features__number--1 js-lens-features-number--active js-lens-features-number" data-feature="1">
                <span class="lens-features__number-label">1</span>
            </li>
            <li class="lens-features__number lens-features__number--2 js-lens-features-number" data-feature="2">
                <span class="lens-features__number-label">2</span>
            </li>
            <li class="lens-features__number lens-features__number--3 js-lens-features-number" data-feature="3">
                <span class="lens-features__number-label">3</span>
            </li>
            <li class="lens-features__number lens-features__number--4 js-lens-features-number" data-feature="4">
                <span class="lens-features__number-label">4</span>
            </li>
            <li class="lens-features__number lens-features__number--5 js-lens-features-number" data-feature="5">
                <span class="lens-features__number-label">5</span>
            </li>
        </ul>
    </div>
    <ul class="lens-features__features">
        <li class="lens-features__feature js-lens-features-feature--active js-lens-features-feature" data-feature="1">
            <p class="lens-features__feature-title">Guiding Rails</p>
            <p class="lens-features__feature-description">Our patent-pending rail system allows the lens to seamlessly slide into the channel for a simple and secure lens swap.</p>
        </li>
        <li class="lens-features__feature js-lens-features-feature" data-feature="2">
            <p class="lens-features__feature-title">Lorem Ipsum Dolor</p>
            <p class="lens-features__feature-description">Vestibulum sit amet metus metus. Quisque condimentum aliquet massa, eget suscipit libero scelerisque vitae.</p>
        </li>
        <li class="lens-features__feature js-lens-features-feature" data-feature="3">
            <p class="lens-features__feature-title">Sit Amet Consectetur</p>
            <p class="lens-features__feature-description">Quisque commodo purus in felis commodo, et tincidunt sapien imperdiet. Praesent convallis porttitor dolor sed vulputate.</p>
        </li>
        <li class="lens-features__feature js-lens-features-feature" data-feature="4">
            <p class="lens-features__feature-title">Adipiscing Elit</p>
            <p class="lens-features__feature-description">Vestibulum sed sem augue. Quisque volutpat justo sed massa volutpat, quis consectetur odio molestie.</p>
        </li>
        <li class="lens-features__feature js-lens-features-feature" data-feature="5">
            <p class="lens-features__feature-title">Vestibulum Non Neque</p>
            <p class="lens-features__feature-description">Aenean tincidunt sem non nisi ullamcorper, a dignissim diam rhoncus. Phasellus sollicitudin mauris ut neque consectetur blandit.</p>
        </li>
    </ul>
</div>
<div class="lens-features js-lens-features">
  {{#if title}}
  <h2 class="lens-features__title">{{title}}</h2>
  {{/if}}
  <div class="lens-features__image-wrapper">
    {{#if image}}
    <img class="lens-features__image" src="{{image}}" alt="{{title}} illustration">
    {{/if}}
    {{#if features}}
    <ul class="lens-features__numbers">
      {{#each features}}
      <li class="lens-features__number lens-features__number--{{id}}{{#if active}} js-lens-features-number--active{{/if}} js-lens-features-number" data-feature="{{id}}">
        <span class="lens-features__number-label">{{id}}</span>
      </li>
      {{/each}}
    </ul>
    {{/if}}
  </div>
  {{#if features}}
  <ul class="lens-features__features">
    {{#each features}}
    <li class="lens-features__feature{{#if active}} js-lens-features-feature--active{{/if}} js-lens-features-feature" data-feature="{{id}}">
      <p class="lens-features__feature-title">{{title}}</p>
      <p class="lens-features__feature-description">{{description}}</p>
    </li>
    {{/each}}
  </ul>
  {{/if}}
</div>
{
  "title": "Our Features",
  "image": "/assets/images/zeal-tech-lens-features.jpg",
  "features": [
    {
      "active": true,
      "id": "1",
      "title": "Guiding Rails",
      "description": "Our patent-pending rail system allows the lens to seamlessly slide into the channel for a simple and secure lens swap."
    },
    {
      "id": "2",
      "title": "Lorem Ipsum Dolor",
      "description": "Vestibulum sit amet metus metus. Quisque condimentum aliquet massa, eget suscipit libero scelerisque vitae."
    },
    {
      "id": "3",
      "title": "Sit Amet Consectetur",
      "description": "Quisque commodo purus in felis commodo, et tincidunt sapien imperdiet. Praesent convallis porttitor dolor sed vulputate."
    },
    {
      "id": "4",
      "title": "Adipiscing Elit",
      "description": "Vestibulum sed sem augue. Quisque volutpat justo sed massa volutpat, quis consectetur odio molestie."
    },
    {
      "id": "5",
      "title": "Vestibulum Non Neque",
      "description": "Aenean tincidunt sem non nisi ullamcorper, a dignissim diam rhoncus. Phasellus sollicitudin mauris ut neque consectetur blandit."
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeNumberClass = 'js-lens-features-number--active';
      const activeFeatureClass = 'js-lens-features-feature--active';
    
      function handleFeatureChange(e) {
        const number = e.target.closest('.js-lens-features-number');
        const featureId = number.getAttribute('data-feature');
        const instance = number.closest('.js-lens-features');
        const numbers = instance.querySelectorAll('.js-lens-features-number');
        const features = instance.querySelectorAll('.js-lens-features-feature');
    
        for (let i = 0; i < numbers.length; i++) {
          numbers[i].classList.remove(activeNumberClass);
        }
        number.classList.add(activeNumberClass);
    
        for (let i = 0; i < features.length; i++) {
          const id = features[i].getAttribute('data-feature');
    
          if (id == featureId) {
            features[i].classList.add(activeFeatureClass);
          }
          else {
            features[i].classList.remove(activeFeatureClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-lens-features');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const numbers = instances[i].querySelectorAll('.js-lens-features-number');
    
            for (let i = 0; i < numbers.length; i++) {
              numbers[i].addEventListener('click', handleFeatureChange);
            }
    
            // Prevent an instance from being initialized more than once.
            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-features/lens-features.js
  • Filesystem Path: src/components/02-components/technology/lens-features/lens-features.js
  • Size: 1.7 KB
  • Content:
    .lens-features {
      position: relative;
      padding: 30px $gutter-width-half 10px;
      background-color: $color-black;
      color: $color-white;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        padding-top: 60px;
        padding-bottom: 30px;
      }
    
      @include breakpoint($page-width-lens-features-max) {
        padding-bottom: 100px;
      }
    }
    
    .lens-features__title {
      margin-top: 0;
      color: $color-white;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 3px;
      line-height: 2.8rem;
      text-align: center;
      text-transform: uppercase;
    }
    
    .lens-features__image-wrapper {
      display: inline-block;
      position: relative;
    }
    
    .lens-features__image {
      width: 160px;
      height: auto;
    
      @include breakpoint($breakpoint-md) {
        width: auto;
      }
    }
    
    .lens-features__numbers {
      @include reset-list;
    }
    
    .lens-features__number {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 28px;
      height: 28px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: $color-white;
      color: $color-black;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      line-height: 2.8rem;
      text-align: center;
      cursor: pointer;
    
      &:after {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 24px;
        height: 24px;
        border: 1px solid $color-black;
        border-radius: 50%;
        content: '';
        pointer-events: none;
      }
    }
    
    .lens-features__number--1 {
      top: calc(50% - 20px);
      left: calc(50% + 80px);
    
      @include breakpoint($breakpoint-md) {
        top: calc(50% - 55px);
        left: calc(50% + 190px);
      }
    }
    
    .lens-features__number--2 {
      top: calc(50% + 45px);
      left: calc(50% + 40px);
    
      @include breakpoint($breakpoint-md) {
        top: calc(50% + 130px);
        left: calc(50% + 110px);
      }
    }
    
    .lens-features__number--3 {
      top: calc(50% + 40px);
      left: calc(50% - 20px);
    
      @include breakpoint($breakpoint-md) {
        top: calc(50% + 135px);
        left: calc(50% - 90px);
      }
    }
    
    .lens-features__number--4 {
      top: calc(50% + 10px);
      left: calc(50% - 80px);
    
      @include breakpoint($breakpoint-md) {
        top: calc(50% - 15px);
        left: calc(50% - 200px);
      }
    }
    
    .lens-features__number--5 {
      top: calc(50% - 50px);
      left: calc(50% - 20px);
    
      @include breakpoint($breakpoint-md) {
        top: calc(50% - 160px);
        left: calc(50% - 60px);
      }
    }
    
    .js-lens-features-number--active {
      background-color: $color-primary;
      color: $color-white;
    }
    
    .lens-features__number-label {
      position: relative;
      top: 2px;
      left: 1px;
    }
    
    .lens-features__features {
      @include reset-list;
    
      @include breakpoint($page-width-lens-features-max) {
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% + 390px);
        transform: translate(-50%, -50%);
      }
    }
    
    .lens-features__feature {
      display: none;
      text-align: left;
    
      @include breakpoint($breakpoint-md) {
        width: 320px;
        margin-left: 20px;
      }
    
      @include breakpoint($page-width-lens-features-max) {
        margin-left: 0;
      }
    }
    
    .js-lens-features-feature--active {
      display: block;
    }
    
    .lens-features__feature-title {
      margin-bottom: 0;
      font-size: 1.9rem;
      font-weight: $font-weight-bold;
      line-height: 2.3rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 65px;
      }
    
      @include breakpoint($page-width-lens-features-max) {
        margin-top: 0;
      }
    }
    
    .lens-features__feature-description {
      margin-top: 5px;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/lens-features/lens-features.scss
  • Filesystem Path: src/components/02-components/technology/lens-features/lens-features.scss
  • Size: 3.4 KB
  • Handle: @lens-features
  • Preview:
  • Filesystem Path: src/components/02-components/technology/lens-features/lens-features.html

There are no notes for this item.