<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 js-country-selector-tab js-country-selector-tab--default" data-tab="north-america" data-map="/assets/images/world-map-north-america.png" data-value="North America">
                            North America
                            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                        </li>
                        <li class="country-selector__tab js-country-selector-tab" data-tab="europe" data-map="/assets/images/world-map-europe.png" data-value="Europe">
                            Europe
                            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                        </li>
                        <li class="country-selector__tab js-country-selector-tab" data-tab="asia-pacific" data-map="/assets/images/world-map-asia-pacific.png" data-value="Asia Pacific">
                            Asia Pacific
                            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                        </li>
                        <li class="country-selector__tab js-country-selector-tab" data-tab="middle-east" data-map="/assets/images/world-map-middle-east.png" data-value="Middle East">
                            Middle East
                            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                        </li>
                        <li class="country-selector__tab js-country-selector-tab" data-tab="africa" data-map="/assets/images/world-map-africa.png" data-value="Africa">
                            Africa
                            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                        </li>
                    </ul>
                    <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="#">American Samoa</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Canada</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Guam</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Mexico</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Puerto Rico</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">United States</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Virgin Islands US</a>
                            </li>
                        </ul>
                    </div>
                    <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="#">Austria</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Belgium</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Croatia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Cyprus</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Czech Republic</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Denmark</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Estonia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Finland</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">France</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Germany</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Greece</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Hungary</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Ireland</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Italy</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Luxembourg</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Malta</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Netherlands</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Norway</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Poland</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Portugal</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Romania</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Slovakia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Slovenia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Spain</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Sweden</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">United Kingdom</a>
                            </li>
                        </ul>
                    </div>
                    <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">
                                <a class="country-selector__country-link" href="#">Australia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Hong Kong</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">India</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">New Zealand</a>
                            </li>
                        </ul>
                    </div>
                    <div class="country-selector__region js-country-selector-region" data-tab="middle-east">
                        <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--middle-east">
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">Saudi Arabia</a>
                            </li>
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">United Arab Emirates</a>
                            </li>
                        </ul>
                    </div>
                    <div class="country-selector__region js-country-selector-region" data-tab="africa">
                        <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--africa">
                            <li class="country-selector__country">
                                <a class="country-selector__country-link" href="#">South Africa</a>
                            </li>
                        </ul>
                    </div>
                </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 js-country-selector-tab{{#if default}} js-country-selector-tab--default{{/if}}" data-tab="{{id}}" data-map="{{map}}" data-value="{{label}}">
              {{label}}
              {{render '@icons--arrow-right'}}
            </li>
            {{/each}}
          </ul>
          {{#each regions}}
          <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">
                <a class="country-selector__country-link" href="#">{{this}}</a>
              </li>
              {{/each}}
            </ul>
          </div>
          {{/each}}
        </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": [
        "American Samoa",
        "Canada",
        "Guam",
        "Mexico",
        "Puerto Rico",
        "United States",
        "Virgin Islands US"
      ]
    },
    {
      "id": "europe",
      "label": "Europe",
      "map": "/assets/images/world-map-europe.png",
      "countries": [
        "Austria",
        "Belgium",
        "Croatia",
        "Cyprus",
        "Czech Republic",
        "Denmark",
        "Estonia",
        "Finland",
        "France",
        "Germany",
        "Greece",
        "Hungary",
        "Ireland",
        "Italy",
        "Luxembourg",
        "Malta",
        "Netherlands",
        "Norway",
        "Poland",
        "Portugal",
        "Romania",
        "Slovakia",
        "Slovenia",
        "Spain",
        "Sweden",
        "United Kingdom"
      ]
    },
    {
      "id": "asia-pacific",
      "label": "Asia Pacific",
      "map": "/assets/images/world-map-asia-pacific.png",
      "countries": [
        "Australia",
        "Hong Kong",
        "India",
        "New Zealand"
      ]
    },
    {
      "id": "middle-east",
      "label": "Middle East",
      "map": "/assets/images/world-map-middle-east.png",
      "countries": [
        "Saudi Arabia",
        "United Arab Emirates"
      ]
    },
    {
      "id": "africa",
      "label": "Africa",
      "map": "/assets/images/world-map-africa.png",
      "countries": [
        "South Africa"
      ]
    }
  ]
}
  • 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 activeRegionClass = 'js-country-selector-region--active';
    
      function handleTab(e) {
        const tab = e.target;
        const tabs = countrySelector.querySelectorAll('.js-country-selector-tab');
        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(activeTabClass);
            countrySelector.closest('.js-modal').classList.add(openTabClass);
            chosenRegionTitle.innerHTML = tab.getAttribute('data-value');
          }
          else {
            tabs[i].classList.remove(activeTabClass);
          }
        }
    
        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[data-tab="' + region.getAttribute('data-tab') + '"]');
    
        if (tab) {
          tab.classList.remove(activeTabClass);
        }
    
        countrySelector.closest('.js-modal').classList.remove(openTabClass);
        region.classList.remove(activeRegionClass);
      }
    
      if (countrySelector) {
        const tabs = countrySelector.querySelectorAll('.js-country-selector-tab');
    
        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.3 KB
  • Content:
    .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;
        background-position: 0 10px;
    
        .js-modal--open-tab & {
          display: none;
        }
      }
    }
    
    .country-selector__tabs {
      @include reset-list;
      width: 100%;
    
      @include breakpoint($breakpoint-sm-only) {
        .js-modal--open-tab & {
          display: none;
        }
      }
    
      @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;
    
      .icon {
        position: absolute;
        top: 5px;
        right: 10px;
    
        @include breakpoint($breakpoint-sm-only) {
          width: 4px;
          height: 8px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: table-cell;
        border-bottom: 1px solid $color-light;
        color: $color-darkest;
        letter-spacing: normal;
        line-height: 3.0rem;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
    
        &:hover {
          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--active {
          border-bottom: 1px solid $color-primary;
          color: $color-darkest;
          font-weight: $font-weight-bold;
        }
    
        .icon {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        letter-spacing: 1px;
      }
    }
    
    .country-selector__region {
      display: none;
    
      &.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;
    }
    
    .country-selector__region-list--europe {
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        columns: 180px 3;
        column-gap: $gutter-width;
      }
    
      @include breakpoint($breakpoint-xl) {
        column-rule: 1px solid $color-light;
      }
    }
    
    .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-decoration: none;
    
      &:hover {
        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: 3.9 KB

There are no notes for this item.