<div class="modal-wrapper js-modal" id="country-selector">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--country-selector">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

      </button>
            <span class="modal__title">Choose Your Country</span>
            <div class="modal__content">
                <p class="modal__description">Please select your location to experience mauijim.com</p>
                <div class="country-selector js-country-selector">
                    <span class="modal__title modal__title--chosen-region js-country-selector-chosen-region">North America</span>
                    <div class="country-selector__map js-country-selector-map" style="background-image:url('/assets/images/world-map-north-america.png');"></div>
                    <ul class="country-selector__tabs">
                        <li class="country-selector__tab ">
                            <button class="country-selector__tab-button js-country-selector-tab-button js-country-selector-tab--default" data-tab="north-america" data-map="/assets/images/world-map-north-america.png" data-value="North America" tabindex="0">
                North America
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            <div class="country-selector__region js-country-selector-region js-country-selector-region--default" data-tab="north-america">
                                <button class="country-selector__region-back-button js-country-selector-region-back-button">
                  <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                  Back
                </button>
                                <ul class="country-selector__region-list country-selector__region-list--north-america">
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Canada</a>
                                    </li>
                                    <li class="country-selector__country  js-country-selector-last-country">
                                        <a class="country-selector__country-link" href="#" tabindex="0">United States</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="country-selector__tab country-selector__tab--two-col">
                            <button class="country-selector__tab-button js-country-selector-tab-button" data-tab="europe" data-map="/assets/images/world-map-europe.png" data-value="Europe" tabindex="0">
                Europe
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            <div class="country-selector__region js-country-selector-region" data-tab="europe">
                                <button class="country-selector__region-back-button js-country-selector-region-back-button">
                  <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                  Back
                </button>
                                <ul class="country-selector__region-list country-selector__region-list--europe">
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Austria</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Czech</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Republic</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Denmark</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Estonia</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Finland</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Germany</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Hungary</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Netherlands</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Poland</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Slovakia</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Slovenia</a>
                                    </li>
                                    <li class="country-selector__country ">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Sweden</a>
                                    </li>
                                    <li class="country-selector__country  js-country-selector-last-country">
                                        <a class="country-selector__country-link" href="#" tabindex="0">United Kingdom</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="country-selector__tab ">
                            <button class="country-selector__tab-button js-country-selector-tab-button" data-tab="asia-pacific" data-map="/assets/images/world-map-asia-pacific.png" data-value="Asia Pacific" tabindex="0">
                Asia Pacific
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            <div class="country-selector__region js-country-selector-region" data-tab="asia-pacific">
                                <button class="country-selector__region-back-button js-country-selector-region-back-button">
                  <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                  Back
                </button>
                                <ul class="country-selector__region-list country-selector__region-list--asia-pacific">
                                    <li class="country-selector__country  js-country-selector-last-country">
                                        <a class="country-selector__country-link" href="#" tabindex="0">Australia</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}}">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <span class="modal__title">{{title}}</span>
      {{/if}}
      <div class="modal__content">
        {{#if description}}
        <p class="modal__description">{{description}}</p>
        {{/if}}
        <div class="country-selector js-country-selector">
          {{#each regions}}
          {{#if default}}
          <span class="modal__title modal__title--chosen-region js-country-selector-chosen-region">{{label}}</span>
          <div class="country-selector__map js-country-selector-map" style="background-image:url('{{map}}');"></div>
          {{/if}}
          {{/each}}
          <ul class="country-selector__tabs">
            {{#each regions}}
            <li class="country-selector__tab {{#if tabModifiers}}country-selector__tab--{{tabModifiers}}{{/if}}">
              <button class="country-selector__tab-button js-country-selector-tab-button{{#if default}} js-country-selector-tab--default{{/if}}" data-tab="{{id}}" data-map="{{map}}" data-value="{{label}}" tabindex="0">
                {{label}}
                {{render '@icons--arrow-right'}}
              </button>
              <div class="country-selector__region js-country-selector-region{{#if default}} js-country-selector-region--default{{/if}}" data-tab="{{id}}">
                <button class="country-selector__region-back-button js-country-selector-region-back-button">
                  {{render '@icons--arrow-left'}}
                  Back
                </button>
                <ul class="country-selector__region-list country-selector__region-list--{{id}}">
                  {{#each countries}}
                  <li class="country-selector__country {{#if @last}} js-country-selector-last-country{{/if}}">
                    <a class="country-selector__country-link" href="#" tabindex="0">{{this}}</a>
                  </li>
                  {{/each}}
                </ul>
              </div>
            </li>
            {{/each}}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "country-selector",
  "title": "Choose Your Country",
  "description": "Please select your location to experience mauijim.com",
  "regions": [
    {
      "id": "north-america",
      "label": "North America",
      "map": "/assets/images/world-map-north-america.png",
      "default": true,
      "countries": [
        "Canada",
        "United States"
      ],
      "tabModifiers": null
    },
    {
      "id": "europe",
      "label": "Europe",
      "map": "/assets/images/world-map-europe.png",
      "tabModifiers": "two-col",
      "countries": [
        "Austria",
        "Czech",
        "Republic",
        "Denmark",
        "Estonia",
        "Finland",
        "Germany",
        "Hungary",
        "Netherlands",
        "Poland",
        "Slovakia",
        "Slovenia",
        "Sweden",
        "United Kingdom"
      ]
    },
    {
      "id": "asia-pacific",
      "label": "Asia Pacific",
      "map": "/assets/images/world-map-asia-pacific.png",
      "tabModifiers": null,
      "countries": [
        "Australia"
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const countrySelector = document.querySelector('.js-country-selector');
      const openTabClass = 'js-modal--open-tab';
      const activeTabClass = 'js-country-selector-tab--active';
      const activeTabButtonClass = 'js-country-selector-tab-button--active';
      const activeRegionClass = 'js-country-selector-region--active';
    
      function handleTab(e) {
        const tab = e.target;
        const tabs = countrySelector.querySelectorAll('.js-country-selector-tab-button');
        const regions = countrySelector.querySelectorAll('.js-country-selector-region');
        const chosenRegionTitle = countrySelector.querySelector('.js-country-selector-chosen-region');
        const map = countrySelector.querySelector('.js-country-selector-map');
    
        for (let i = 0; i < tabs.length; i++) {
          if (tabs[i] == tab) {
            tabs[i].classList.add(activeTabButtonClass);
            tabs[i].parentNode.classList.add(activeTabClass);
            countrySelector.closest('.js-modal').classList.add(openTabClass);
            chosenRegionTitle.innerHTML = tab.getAttribute('data-value');
          }
          else {
            tabs[i].parentNode.classList.remove(activeTabClass);
            tabs[i].classList.remove(activeTabButtonClass);
          }
        }
    
        for (let i = 0; i < regions.length; i++) {
          if (regions[i].getAttribute('data-tab') == tab.getAttribute('data-tab')) {
            regions[i].classList.add(activeRegionClass);
            regions[i].querySelector('.js-country-selector-region-back-button').addEventListener('click', handleBackButton);
          }
          else {
            regions[i].classList.remove(activeRegionClass);
            regions[i].querySelector('.js-country-selector-region-back-button').removeEventListener('click', handleBackButton);
          }
        }
    
        if (map) {
          map.style.backgroundImage = "url('" + tab.getAttribute('data-map') + "')";
        }
      }
    
      function handleBackButton(e) {
        const button = e.target;
        const region = button.parentNode;
        const tab = countrySelector.querySelector('.js-country-selector-tab-button[data-tab="' + region.getAttribute('data-tab') + '"]');
    
        if (tab) {
          tab.classList.remove(activeTabButtonClass);
        }
    
        countrySelector.closest('.js-modal').classList.remove(openTabClass);
        region.classList.remove(activeRegionClass);
      }
    
      if (countrySelector) {
        const tabs = countrySelector.querySelectorAll('.js-country-selector-tab-button');
    
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].addEventListener('click', handleTab);
        }
      }
    
    
    })(this);
    
  • URL: /components/raw/country-selector/country-selector.js
  • Filesystem Path: src/components/01-elements/modals/country-selector/country-selector.js
  • Size: 2.5 KB
  • Content:
    $column-width-narrow: 140px;
    $column-width-wide: 180px;
    
    .modal.modal--country-selector {
      .modal__title--chosen-region {
        display: none;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .js-modal--open-tab & {
          .modal__title {
            opacity: 0;
          }
    
          .modal__title--chosen-region {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            opacity: 1;
          }
        }
    
        .modal__description {
          letter-spacing: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .modal__inner {
          height: 665px;
          overflow: hidden;
        }
    
        .modal__content {
          padding: 10px 20px;
        }
    
        .modal__description {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .modal__title {
          line-height: 3.5rem;
        }
      }
    }
    
    .country-selector {
      color: $color-darkest;
    }
    
    .country-selector__map {
      display: block;
      max-width: 346px;
      height: 202px;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: contain;
    
      @include breakpoint($breakpoint-sm-only) {
        padding-top: 10px;
        // Overrides JS that changes the image per active/selected region.
        background-image: url('../images/world-map-empty.png') !important; // sass-lint:disable-line no-important
        background-position: 0 10px;
    
        .js-modal--open-tab & {
          display: none;
        }
      }
    }
    
    .country-selector__tabs {
      @include reset-list;
      width: 100%;
    
      @include breakpoint($breakpoint-md) {
        display: table;
        margin: 20px 0;
        table-layout: fixed;
      }
    
      @include breakpoint($page-width-max) {
        width: 90%;
        padding: 0 5%;
      }
    }
    
    .country-selector__tab {
      position: relative;
      margin: 20px 0;
      color: $color-darkest;
      font-size: 1.4rem;
      cursor: pointer;
    
      @include breakpoint($breakpoint-md) {
        display: table-cell;
        color: $color-darkest;
        letter-spacing: normal;
        line-height: 3.0rem;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
        // Fix bug w/IE11 on Windows 8.1. More info here:
        // https://stackoverflow.com/questions/20356311/internet-explorer-11-ignores-list-stylenone-on-the-first-load
        // Note: It may make sense to put this in the reset-list mixin. In the
        // interest of being conservative, we’re adding it here, but if the bug
        // affects other lists that should appear reset, this should be moved to
        // the mixin.
        list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    
        &:hover {
          color: $color-darkest;
        }
    
        .icon {
          display: none;
        }
      }
    
      .js-modal--open-tab & {
        @include breakpoint($breakpoint-sm-only) {
          &:not(.js-country-selector-tab--active) {
            display: none;
          }
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        letter-spacing: 1px;
      }
    
      &:last-of-type {
        &.country-selector__tab--two-col {
          .country-selector__region {
            float: right;
          }
        }
      }
    }
    
    .country-selector__tab-button {
      position: relative;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: $color-darkest;
      font-size: 1.4rem;
      cursor: pointer;
    
      .icon {
        position: absolute;
        top: 5px;
        right: 10px;
    
        @include breakpoint($breakpoint-sm-only) {
          width: 4px;
          height: 8px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        border-bottom: 1px solid $color-light;
        color: $color-darkest;
        letter-spacing: normal;
        line-height: if($brand == 'zeal', 2.9rem, 3rem);
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
    
        &:hover,
        &:focus {
          border-bottom: 1px solid $color-dark;
          color: $color-darkest;
        }
    
        .js-modal:not(.js-modal--open-tab) &.js-country-selector-tab--default,
        &.js-country-selector-tab-button--active {
          border-bottom: 1px solid $color-primary;
          color: $color-darkest;
          font-weight: $font-weight-bold;
        }
    
        .icon {
          display: none;
        }
      }
    
      .js-modal--open-tab & {
        @include breakpoint($breakpoint-sm-only) {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        letter-spacing: 1px;
      }
    }
    
    .country-selector__region {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        // Ensure multi-column containers have higher z-index than neighboring list
        // items. Without this, the next regions are rendered over the container.
        .country-selector__tab--two-col &,
        .country-selector__tab--three-col & {
          position: relative;
          z-index: 1;
        }
    
        // Calculate total width using the total number of columns and gutters.
        // This keeps the container wide enough to accommodate the columns, yet
        // tight enough to avoid extra space at either side.
        .country-selector__tab--two-col &  {
          width: ($column-width-narrow * 2) + $gutter-width;
        }
    
        .country-selector__tab--three-col &  {
          width: ($column-width-narrow * 3) + ($gutter-width * 2);
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        .country-selector__tab--two-col & {
          width: ($column-width-wide * 2) + $gutter-width;
        }
    
        .country-selector__tab--three-col & {
          width: ($column-width-wide * 3) + ($gutter-width * 2);
        }
      }
    
      &.js-country-selector-region--active {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        .js-modal:not(.js-modal--open-tab) &.js-country-selector-region--default {
          display: block;
        }
      }
    }
    
    .country-selector__region-list {
      @include reset-list;
      margin: 12px 0;
      font-size: 1.4rem;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
      }
    
      .country-selector__tab--two-col &,
      .country-selector__tab--three-col & {
        @include breakpoint($breakpoint-md) {
          display: inline-block;
          column-gap: $gutter-width;
          column-width: $column-width-narrow;
    
          .country-selector__country {
            break-inside: avoid-column;
          }
        }
    
        @include breakpoint($breakpoint-lg) {
          column-width: $column-width-wide;
        }
    
        @include breakpoint($breakpoint-xl) {
          column-rule: 1px solid $color-light;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .country-selector__tab--two-col & {
          column-count: 2;
        }
    
        .country-selector__tab--three-col & {
          column-count: 3;
        }
      }
    }
    
    .country-selector__region-back-button {
      @include reset-button;
      @include text-ui($color-dark);
      display: block;
      position: relative;
      left: -10px;
      padding: 8px 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
    
      .icon {
        position: relative;
        top: 1px;
        margin-right: 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .country-selector__country-link {
      display: block;
      padding: 5px 0;
      transition: $transition-standard;
      color: $color-darkest;
      text-align: left;
      text-decoration: none;
      text-transform: none;
    
      &:hover,
      &:focus {
        color: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        line-height: 2.0rem;
      }
    }
    
  • URL: /components/raw/country-selector/country-selector.scss
  • Filesystem Path: src/components/01-elements/modals/country-selector/country-selector.scss
  • Size: 7 KB

There are no notes for this item.