<div class="form-item form-item--zip-geolocate zip-geolocate js-zip-geolocate">

    <input value="" class="input zip-geolocate__input js-input-zip-geolocate" type="text" placeholder="Enter zip code" id="form-example-zip-geolocate" />
    <button class="button button--primary zip-geolocate--zip zip-geolocate__button">
    <span class="zip-geolocate__submit-label zip-geolocate__submit-label--large">Find Stores</span>
  </button>
    <button class="button button--plain-text zip-geolocate--reset zip-geolocate__button" type="reset">
    <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    <span class="zip-geolocate__submit-label zip-geolocate__submit-label--large u-visually-hidden">Clear</span>
  </button>
</div>
<div class="form-item form-item--zip-geolocate zip-geolocate js-zip-geolocate{{#if modifier}} zip-geolocate--{{modifier}}{{/if}}{{#if required}} form-item--required{{/if}}{{#if error}} form-item--error{{/if}}">
  {{#if label}}{{> @label value=label id=id}}{{/if}}
  <input value="{{value}}" class="input zip-geolocate__input js-input-zip-geolocate" type="text" placeholder="{{placeholder}}"{{#if id}} id="{{id}}"{{/if}} />
  {{#each actions}}
  <button class="button button--{{modifier}} zip-geolocate--{{name}} zip-geolocate__button"{{#if type}} type="{{type}}"{{/if}}>
    {{#each buttonLabels}}
    {{#if icon}}
    {{render (dynamicVariant 'icons' icon)}}
    {{/if}}
    <span class="zip-geolocate__submit-label zip-geolocate__submit-label--{{size}}{{#each classes}} {{this}}{{/each}}">{{text}}</span>
    {{/each}}
  </button>
  {{/each}}
</div>
{{#if error}}
<span class="input-error zip-geolocate--input-error">{{error}}</span>
{{/if}}
{
  "id": "form-example-zip-geolocate",
  "name": "zip-geolocate",
  "submit": "Find stores",
  "placeholder": "Enter zip code",
  "value": null,
  "actions": [
    {
      "modifier": "primary",
      "name": "zip",
      "buttonLabels": [
        {
          "size": "large",
          "text": "Find Stores"
        }
      ]
    },
    {
      "modifier": "plain-text",
      "name": "reset",
      "type": "reset",
      "classes": [
        "js-zip-geolocate"
      ],
      "buttonLabels": [
        {
          "icon": "close-large",
          "size": "large",
          "text": "Clear",
          "classes": [
            "u-visually-hidden"
          ]
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const zipGeolocate = document.querySelector('.js-zip-geolocate');
      const inputZipGeolocate = document.querySelector('.js-input-zip-geolocate');
      const resetZipGeolocate = document.querySelector('.zip-geolocate--reset');
      const buttonZipGeolocate = document.querySelector('.zip-geolocate--zip');
    
      const activeZipGeolocateClass = 'js-zip-geolocate--active';
      const errorZipGeolocateClass = 'form-item--error';
      const errorInputClass = 'input-error';
      const errorInputZipGeolocateClass = 'zip-geolocate--input-error';
      const jsHiddenClass = 'js-hidden';
    
      function handlePageLoad(e) {
        if (inputZipGeolocate.value.trim()) {
          zipGeolocate.classList.add(activeZipGeolocateClass);
        }
      }
    
      function handleZipGeolocateInputChange(e) {
        if (e.target.value.trim()) {
          zipGeolocate.classList.add(activeZipGeolocateClass);
        }
        else {
          zipGeolocate.classList.remove(activeZipGeolocateClass);
        }
      }
    
      function setZipGeolocateError(message) {
        let errorZipGeolocate = document.querySelector('.zip-geolocate--input-error');
    
        if(!errorZipGeolocate) {
          errorZipGeolocate = document.createElement(`span`);
          errorZipGeolocate.classList.add(errorInputClass);
          errorZipGeolocate.classList.add(errorInputZipGeolocateClass);
          errorZipGeolocate.classList.add(jsHiddenClass);
          zipGeolocate.insertAdjacentElement('afterend', errorZipGeolocate);
        }
    
        errorZipGeolocate.textContent = message;
        errorZipGeolocate.classList.remove(jsHiddenClass);
    
        zipGeolocate.classList.add(errorZipGeolocateClass);
      }
    
      function unsetZipGeolocateError(e) {
        const errorZipGeolocate = document.querySelector('.zip-geolocate--input-error');
    
        if (errorZipGeolocate) {
          errorZipGeolocate.classList.add(jsHiddenClass);
          errorZipGeolocate.textContent = null;
        }
    
        zipGeolocate.classList.remove(errorZipGeolocateClass);
      }
    
      function handleZipGeolocateZipSubmit(e) {
        if (inputZipGeolocate.value.trim() === "" || inputZipGeolocate.value === null) {
          setZipGeolocateError(window.ris_i18n.empty_zip_code);
          inputZipGeolocate.addEventListener('input', unsetZipGeolocateError, {once: true});
          buttonZipGeolocate.dispatchEvent(new CustomEvent('zip-error'));
        } else {
          const errorZipGeolocate = zipGeolocate.querySelector('span.input-error');
          if((!errorZipGeolocate || errorZipGeolocate.classList.contains(jsHiddenClass)) && !zipGeolocate.classList.contains(errorZipGeolocateClass)) {
            buttonZipGeolocate.dispatchEvent(new CustomEvent('zip', {detail: {zip: inputZipGeolocate.value.trim()}}));
          } else {
            buttonZipGeolocate.dispatchEvent(new CustomEvent('zip-error'));
          }
        }
        e.preventDefault();
      }
    
      function handleZipGeolocateInputSubmit(e) {
        if(e.keyCode === 13) {
          e.target.removeEventListener(e.type, handleZipGeolocateInputSubmit);
          e.target.blur();
          handleZipGeolocateZipSubmit(e);
        }
      }
    
      function handleZipGeolocateInputFocusBlur(e) {
        const target = e.target;
        const value = target.value.trim();
    
        if(e.type === 'focus') {
          target.addEventListener('keyup', handleZipGeolocateInputSubmit);
          target.addEventListener('blur', handleZipGeolocateInputFocusBlur, {once: true});
        } else if(e.type === 'blur') {
          if(value !== "" && value !== null) {
            if(window.ris_i18n.zip_code_regex.test(value) === false) {
              setZipGeolocateError(window.ris_i18n.invalid_zip_code);
              e.preventDefault();
            } else {
              unsetZipGeolocateError(e);
            }
          }
    
          target.removeEventListener('keyup', handleZipGeolocateInputSubmit);
          target.addEventListener('focus', handleZipGeolocateInputFocusBlur, {once: true});
        }
      }
    
      function handleZipGeolocateReset(e) {
        zipGeolocate.classList.remove(activeZipGeolocateClass);
        inputZipGeolocate.value = '';
        inputZipGeolocate.focus();
      }
    
      function init() {
        if (zipGeolocate) {
          window.addEventListener('load', handlePageLoad);
          inputZipGeolocate.addEventListener('input', handleZipGeolocateInputChange);
          inputZipGeolocate.addEventListener('focus', handleZipGeolocateInputFocusBlur, {once: true});
          buttonZipGeolocate.addEventListener('click', handleZipGeolocateZipSubmit);
          resetZipGeolocate.addEventListener('click', handleZipGeolocateReset);
        }
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/input/input--zip-geolocate.js
  • Filesystem Path: src/components/01-elements/form-items/input/input--zip-geolocate.js
  • Size: 4.4 KB
  • Content:
    .form-item {
      position: relative;
      margin: 10px 0 15px;
    }
    
    .form-item__help-anchor {
      position: absolute;
      top: 0;
      right: 0;
      color: $color-primary;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-decoration: none;
    }
    
    .form-item__tooltip {
      @include reset-button;
      position: absolute;
      top: 3px;
      right: 0;
      fill: $color-medium-dark;
    
      .icon {
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-md) {
        right: $gutter-width-half;
      }
    }
    
    .form-item--disabled {
      opacity: .3;
    }
    
    .input,
    .textarea {
      display: block;
      width: 100%;
      min-height: 50px;
      padding: 10px 20px;
      border: 1px solid $color-medium-dark;
      border-radius: 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.8rem;
      box-sizing: border-box;
      -webkit-appearance: none;
    
      &:active,
      &:focus {
        border-color: $color-primary;
        outline: none;
      }
    
      .form-item--error & {
        margin-bottom: $gutter-width / 2;
        border-color: $color-error;
      }
    }
    
    .input-error {
      display: block;
      margin-top: 14px;
      clear: both;
      color: $color-error;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
    }
    
    .form-item--text-tooltip {
      position: relative;
    
      .tooltip {
        display: none;
        position: absolute;
        top: -6px;
        right: 25px;
        margin-left: 15px;
    
        &:before {
          top: 5px;
          right: -5px;
          left: auto;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 5px solid $color-primary;
          border-right-style: none;
        }
      }
    
      .js-tooltip--open {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        .js-tooltip--open {
          right: 35px;
        }
      }
    }
    
    .form-item--button-input {
      @include clearfix;
      margin: 0;
    }
    
    .subscribe-form__input,
    .button-input__input {
      @include text-label($color-darkest);
      display: block;
      width: calc(100% - 40px);
      height: 40px;
      padding-left: 10px;
      float: left;
      border: 1px solid $color-medium-dark;
      letter-spacing: 1px;
      box-sizing: border-box;
    
      &:focus {
        border-color: $color-primary;
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        flex: 1 0 8em;
        height: 50px;
      }
    }
    
    .subscribe-form__submit,
    .button-input__submit {
      width: 40px;
      height: 40px;
      padding: 2px 0;
      float: right;
      line-height: normal;
    
      .icon {
        fill: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        flex: 0 0 auto;
        width: auto;
        height: 50px;
        padding: 2px 10px 0;
    
        .icon {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 0 20px;
      }
    }
    
    .subscribe-form__submit-label,
    .button-input__submit-label {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        .button-input:not(.button-input--mini) & {
          display: inline;
        }
      }
    }
    
    .subscribe-form__small-submit-label,
    .button-input__small-submit-label {
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .form-item--zip-geolocate {
      @include clearfix;
      display: flex;
      height: auto;
    
      .icon--search {
        width: 20px;
        height: 20px;
        margin: 15px;
        padding: 0;
        fill: $color-white;
    
        @include breakpoint($breakpoint-xl) {
          display: none;
        }
      }
    }
    
    .zip-geolocate__input {
      display: block;
      flex: 1 0 auto;
      width: auto;
      margin: 0;
      float: left;
    }
    
    .zip-geolocate__submit-label {
      display: none;
      line-height: 50px;
    
      @include breakpoint($breakpoint-xl) {
        display: inline;
      }
    }
    
    .zip-geolocate__button {
      display: block;
      position: relative;
      float: left;
    }
    
    .zip-geolocate--zip {
      flex: 0 0 auto;
      width: 50px;
      height: 50px;
      margin-left: 0;
      padding: 0;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        margin-left: 20px;
        padding: 0 20px;
      }
    
      &:before {
        position: absolute;
        top: 10px;
        left: -16px;
        width: 0;
        height: 30px;
        border-right: 1px solid $color-light;
        content: ' ';
      }
    }
    
    .zip-geolocate--reset {
      display: none;
    
      .js-zip-geolocate--active & {
        display: block;
        position: absolute;
        top: 0;
        left: calc(100% - 100px);
        width: 50px;
        height: 50px;
        padding: 0;
    
        .icon {
          width: 14px;
          height: 14px;
          margin: 18px;
          fill: $color-medium-dark;
        }
    
        @include breakpoint($breakpoint-xl) {
          display: none;
        }
      }
    }
    
    .zip-geolocate--input-error {
      margin: 0 10px;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 11px;
      }
    }
    
  • URL: /components/raw/input/input.scss
  • Filesystem Path: src/components/01-elements/form-items/input/input.scss
  • Size: 4.4 KB

There are no notes for this item.