TheaterMania Component Library

Show Filter 

<div class="show-filter-btn js-show-filter-btn">
    <button class="btn btn--base btn--plain filter-btn js-filter-btn">
    <svg class="icon icon--sort">
  <use xlink:href="/assets/icons/sprite-sheet.svg#sort"></use>
</svg>
    <span class="title-highlight">Show Type</span>
      <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
  </button>
    <div class="show-filter__filters js-filter js-tabIndex" aria-hidden="true" tabindex="-1">

        <button class="btn btn--close js-btn-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Filter</span>
  </button>

        <div class="section-title">
            <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
            <h2 id="area" class="title-highlight">Area</h2>
        </div>
        <ul class="show-filter__list js-tabIndex" aria-labelledby="area" tabindex="-1">
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="all-nyc" name="location" class="radio validation" checked>
                        <div class="radio-label-container">
                            <label for="all-nyc" class="label label--radio">All NYC Shows (157)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="broadway" name="location" class="radio validation">
                        <div class="radio-label-container">
                            <label for="broadway" class="label label--radio">Broadway (112)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="off-broadway" name="location" class="radio validation">
                        <div class="radio-label-container">
                            <label for="off-broadway" class="label label--radio">Off-Broadway (32)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="off-off-broadway" name="location" class="radio validation">
                        <div class="radio-label-container">
                            <label for="off-off-broadway" class="label label--radio">Off-Off-Broadway (13)</label>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
        <div class="section-title">
            <svg class="icon icon--sort">
  <use xlink:href="/assets/icons/sprite-sheet.svg#sort"></use>
</svg>
            <h2 id="genre" class="title-highlight">Genre</h2>
        </div>
        <ul class="show-filter__list js-tabIndex" aria-labelledby="genre" tabindex="-1">
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="all-genres" name="genre" class="radio validation" checked>
                        <div class="radio-label-container">
                            <label for="all-genres" class="label label--radio">All Genres</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="benefit" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="benefit" class="label label--radio">Benefit (1)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="cabaret" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="cabaret" class="label label--radio">Cabaret (2)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="comedy" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="comedy" class="label label--radio">Comedy (5)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="drama" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="drama" class="label label--radio">Drama (20)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="family-kids" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="family-kids" class="label label--radio">Family (10)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="festival" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="festival" class="label label--radio">Festival (2)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="magic-show" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="magic-show" class="label label--radio">Magic Show (1)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="musical" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="musical" class="label label--radio">Musical (30)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="mature" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="mature" class="label label--radio">Mature (5)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="opera" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="opera" class="label label--radio">Opera (3)</label>
                        </div>
                    </div>
                </div>

            </li>
            <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                <div class="form-input">
                    <div class="validation validation--radio">
                        <input type="radio" id="play" name="genre" class="radio validation">
                        <div class="radio-label-container">
                            <label for="play" class="label label--radio">Play (42)</label>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
        <button class="btn btn--base btn--primary show-filter-apply">
  Apply
</button>

    </div>
</div>
 
<div class="show-filter-btn js-show-filter-btn">
  <button class="btn btn--base btn--plain filter-btn{{#if class}} {{class}}{{/if}}"{{#if disabled}} disabled{{/if}}>
    {{render '@icons--calendar' modifiers merge=true}}
    <span class="title-highlight">{{btn-text}}</span>
    {{#if filter}}
      {{render '@icons--arrow-bottom'}}
    {{/if}}
  </button>
  {{#if filter}}
    <div class="show-filter__filters js-filter js-tabIndex" aria-hidden="true" tabindex="-1">
      {{render '@buttons--close' close-button-modifiers merge=true}}
      {{#if list}}
        {{#each list}}
          {{render '@section-title' list-title merge=true}}
          <ul class="show-filter__list js-tabIndex"{{#if list-title.aria-id}} aria-labelledby="{{list-title.aria-id}}"{{/if}} tabindex="-1">
            {{#each list-item}}
              {{#if list-item}}
                <li class="show-filter-list-item js-tabIndex" tabindex="-1">
                  {{render '@radio' list-modifiers merge=true}}
                </li>
              {{/if}}
            {{/each}}
          </ul>
        {{/each}}
      {{/if}}
      {{#if date}}
        {{render '@section-title' date-title merge=true}}
        <div class="date-filters js-tabIndex" tabindex="-1">
          <div class="date-filters__user">
            <div class="date-filters__pickers">
              {{render '@input' date-from-modifiers merge=true}}
              {{render '@input' date-to-modifiers merge=true}}
            </div>
            <ul class="show-filter__list js-tabIndex"{{#if aria-label}} aria-label="{{aria-label}}"{{/if}} tabindex="-1">
              {{#each date-list-item}}
                <li class="show-filter-list-item show-filter-list-item--full js-tabIndex" tabindex="-1">
                  {{render '@radio' date-modifiers merge=true}}
                </li>
              {{/each}}
            </ul>
          </div>
          <div class="date-picker">
            {{render '@date-picker'}}
          </div>
        </div>
      {{/if}}
      {{render '@buttons' btn-apply-modifiers merge=true}}
    </div>
  {{/if}}
</div>
 
{
  "filter": true,
  "class": "js-filter-btn",
  "btn-text": "Show Type",
  "modifiers": {
    "modifier": "sort"
  },
  "close-button-modifiers": {
    "label-menu-close": "Close Filter"
  },
  "btn-apply-modifiers": {
    "modifier": "primary show-filter-apply",
    "buttonValue": "Apply"
  },
  "list": [
    {
      "list-title": {
        "title": "Area",
        "aria-id": "area",
        "icon": {
          "modifier": "map-pin"
        }
      },
      "list-item": [
        {
          "list-item": true,
          "list-modifiers": {
            "label": "All NYC Shows (157)",
            "name": "location",
            "id": "all-nyc",
            "type-active": "checked"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Broadway (112)",
            "name": "location",
            "id": "broadway"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Off-Broadway (32)",
            "name": "location",
            "id": "off-broadway"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Off-Off-Broadway (13)",
            "name": "location",
            "id": "off-off-broadway"
          }
        }
      ]
    },
    {
      "list-title": {
        "title": "Genre",
        "aria-id": "genre",
        "icon": {
          "modifier": "sort"
        }
      },
      "list-item": [
        {
          "list-item": true,
          "list-modifiers": {
            "label": "All Genres",
            "name": "genre",
            "id": "all-genres",
            "type-active": "checked"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Benefit (1)",
            "name": "genre",
            "id": "benefit"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Cabaret (2)",
            "name": "genre",
            "id": "cabaret"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Comedy (5)",
            "name": "genre",
            "id": "comedy"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Drama (20)",
            "name": "genre",
            "id": "drama"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Family (10)",
            "name": "genre",
            "id": "family-kids"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Festival (2)",
            "name": "genre",
            "id": "festival"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Magic Show (1)",
            "name": "genre",
            "id": "magic-show"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Musical (30)",
            "name": "genre",
            "id": "musical"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Mature (5)",
            "name": "genre",
            "id": "mature"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Opera (3)",
            "name": "genre",
            "id": "opera"
          }
        },
        {
          "list-item": true,
          "list-modifiers": {
            "label": "Play (42)",
            "name": "genre",
            "id": "play"
          }
        }
      ]
    }
  ]
}
  • Content: 
    /**
 * @overview Show Filter interactions. Currently used on the Guide Page.
 * @module Show Filter.js
*/

const showFilter = document.querySelector(`.js-show-filter-btn`);
const open = {'aria-hidden':'false', 'tabIndex': '1'};
const close = {'aria-hidden':'true', 'tabIndex': '-1'};

if (showFilter) {
  const showFilterContainer = showFilter.parentElement;
  const showFilterBtns = document.querySelectorAll(`.js-filter-btn`);
  const showFilterCloseBtns = document.querySelectorAll(`.js-btn-close`);

  showFilterBtns.forEach((showFilterBtn) => {
    const filterPanel = showFilterBtn.nextElementSibling;
    const indexChildren = filterPanel.querySelectorAll(`.js-tabIndex`);
    const firstInput = filterPanel.getElementsByTagName(`input`)[0];

    showFilterBtn.addEventListener(`click`, () => {
      if (showFilterBtn.classList.contains(`is-open`)) {
        closePanels(showFilterContainer);
      }
      else {
        closePanels(showFilterContainer);
        setAttributes(filterPanel, open);
        alterIndex(indexChildren, `0`);
        showFilterBtn.classList.add(`is-open`);
        firstInput.focus();
      }
    });
  });

  const alterIndex = (els, index) => {
    els.forEach((el) => {
      el.setAttribute(`tabIndex`, index);
    });
  };

  const setAttributes = (el, state) => {
    Object.keys(state).forEach((key) => {
      el.setAttribute(key,state[key]);
    });
  };

  const closePanels = (el) => {
    const openedPanel = el.querySelector(`.is-open`);

    if (openedPanel) {
      const filterPanel = openedPanel.nextElementSibling;
      const indexChildren = filterPanel.querySelectorAll(`.js-tabIndex`);

      openedPanel.classList.remove(`is-open`);
      setAttributes(filterPanel, close);
      alterIndex(indexChildren, `-1`);
      openedPanel.focus();
    }
  };

  document.addEventListener(`click`, (e) => {
    if (!e.target.closest(`.js-show-filter-btn`)) {
      closePanels(showFilterContainer);
    }
  });

  showFilterCloseBtns.forEach((showFilterCloseBtn) => {
    showFilterCloseBtn.addEventListener(`click`, (e) => {
      closePanels(showFilterContainer);
    });
  });
}
  • URL: /components/raw/show-filter/Show%20Filter.js
  • Filesystem Path: src/components/02-Patterns/Show Filter/Show Filter.js
  • Size: 2.1 KB
  • Content: 
    .section-title {
  .show-filter__filters & {
    margin-bottom: 1.5rem;
  }
}

.filter-btn {
  .show-filter-btn & {
    position: relative;
    padding: 0.63rem 0.13rem;
    width: 100%;
    background: $color-white;

    &:focus {
      outline: none;
      border-color: $color-header-light;
      color: $color-header-light;

      .icon {
        stroke: $color-header-light;
      }
    }

    &[disabled] {
      color: $color-gray-lighter;
      border-color: $color-gray-lightest;

      &:hover {
        background: $color-white;
      }

      .icon {
        stroke: $color-gray-lighter;
      }
    }

    &.is-open {
      z-index: 2;
      border-bottom-color: $color-white;
      border-radius: $border-radius $border-radius 0 0;

      &:hover {
        border-color: $color-gray-light;
        border-bottom-color: $color-white;
      }
    }

    @include breakpoint($break-medium) {
      padding: 0.63rem 0.5rem;
    }
  }
}

.date-filters__pickers {
  position: relative;
}

.date-filters {
  @include breakpoint($break-small) {
    display: flex;
    justify-content: space-between;
  }
}

.date-filters__user {
  display: flex;
  flex-wrap: wrap;

  @include breakpoint($break-small) {
    flex: 0 1 42%;
  }
}

.date-filters__pickers {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  width: 100%;

  @include breakpoint($break-small) {
    flex-direction: column;
  }
}

.date-filter__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.date-filter-list-item {
  padding: 0;
}

.form-input {
  .date-filters__pickers & {
    flex: 0 1 48%;
    margin-top: 0;
  }

  .date-filter-list-item:last-child & {
    margin-bottom: 0;
  }

  .show-filter__filters & {
    margin-top: 0;
  }
}

.label {
  .date-filters__pickers & {
    line-height: 1;
  }

  .filter-item & {
    align-self: center;
    margin: 0 1rem 0 0;
  }

  .show-filter-list-item & {
    margin-bottom: 0;
    line-height: 1;
    font-weight: $font-normal;
  }

  .discount-filter & {
    order: 1;
    align-self: center;
    margin-bottom: 0;
    margin-left: 0.75rem;
  }
}

.btn {
  .show-filter__results & {
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    min-width: 5.63rem;
  }

  .clear-filters & {
    display: block;
    margin: 0 auto;
    padding: 0.5rem 0.75rem;
    font-size: $ms-neg-1;

    @include breakpoint($break-xsmall) {
      padding: 0.25rem 0.75rem;
    }
  }
}

.btn--close {
  .show-filter__filters & {
    align-self: flex-end;
    margin-bottom: 0.25rem;
    top: 0;
    right: 0;
    left: 0.5rem;
  }
}

.show-filter-btn {
  flex: 0 1 100%;
  position: relative;
  margin-bottom: 4%;

  &:last-child {
    margin-bottom: 0;
  }

  @include breakpoint($break-small) {
    flex: 0 1 32%;
    margin-bottom: 0;
  }

  &:first-child {
    .show-filter__filters {
      left: 0;
    }
  }

  &:last-child {
    .show-filter__filters {
      right: 0;

      @include breakpoint($break-small) {
        border-top-left-radius: $border-radius;
      }
    }
  }
}

.icon {
  .filter-btn & {
    margin-right: 0.19rem;
    width: 1.5rem;
    height: 1.5rem;
    transition: $transition;

    @include breakpoint($break-xsmall) {
      margin-right: 0.25rem;
    }

    @include breakpoint($break-small) {
      width: 1rem;
      height: 1rem;
    }

    @include breakpoint($break-medium) {
      margin-right: 0.5rem;
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .filter-btn.is-open & {
    stroke: $color-header-light;
  }

  .filter-btn--active & {
    stroke: $color-header-light;
  }
}

.icon--grid {
  .filter-item & {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.icon--arrow-bottom {
  .filter-btn & {
    margin-right: 0;
    width: 1rem;
    height: 1rem;
    stroke-width: 0.31rem;
    transition: $transition;
  }

  .filter-btn.is-open & {
    transform: rotate(-90deg);
  }
}

.title-highlight {
  .filter-btn & {
    margin-right: 0.13rem;

    @include breakpoint($break-small) {
      letter-spacing: 0;
    }

    @include breakpoint($break-medium) {
      margin-right: 0.25rem;
      letter-spacing: 1px;
    }

    .guide-page--results & {
      @include breakpoint($break-large) {
        margin-right: 0;
      }
    }
  }

  .filter-btn.is-open & {
    color: $color-header-light;
  }
}

.show-filter__filters {
  display: flex;
  flex-direction: column;
  position: absolute;
  margin-top: -1rem;
  padding: 0.5rem 1rem 1rem;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 18.94rem;
  background: $color-white;
  border: 1px solid $color-gray-lighter;
  border-radius: 0 0 $border-radius $border-radius;
  transition: $transition;
  transform: rotateX(-7deg);

  @include breakpoint($break-small) {
    margin-top: -1px;
    min-width: 32.63rem;
  }
}

.is-open {
  &:hover + .show-filter__filters {
    border-color: $color-gray-light;
  }

  & + .show-filter__filters {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.show-filter__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0;
  width: 100%;
  list-style: none;

  .date-filters__user & {
    @include breakpoint($break-small) {
      flex-direction: column;
      flex-wrap: nowrap;
      margin-bottom: 0;
    }
  }
}

.show-filter-list-item {
  flex: 0 1 100%;
  margin: 0;
  padding: 0;

  @include breakpoint($break-xsmall) {
    flex: 0 1 48%;
  }
}

.show-filter-list-item--full {
  @include breakpoint($break-xsmall) {
    margin-bottom: 0.5rem;
  }

  @include breakpoint($break-small) {
    flex: 1;
    margin-bottom: 0;
  }
}

.show-filter-apply {
  @include breakpoint($break-small) {
    align-self: flex-end;
  }
}

.validation {
  .show-type-filters & {
    display: flex;
  }
}

.filter-btn--active {
  border-color: $color-header-light;
  color: $color-header-light;
}
  • URL: /components/raw/show-filter/Show-Filter.scss
  • Filesystem Path: src/components/02-Patterns/Show Filter/Show-Filter.scss
  • Size: 5.9 KB

There are no notes for this item.