Aeroporto di Bologna - Design System

Multiselect 

<div class="c-multiselect c-form ">

    <button type="button" class="c-multiselect__button js-toggleMultiSelectBtn" aria-expanded="false" aria-label="Seleziona le compagnie aeree" aria-controls="aria-MultiSelectOptions">
        <span>Tutte le compagnie aeree</span>
        <img src="../../images/svgs/arrow-down-blue.svg" aria-hidden="true" alt="">
    </button>

    <div class="c-multiselect__options js-multiselectOptions" role="region" aria-live="polite" id="aria-MultiSelectOptions">
        <input type="checkbox" id="alitalia" name="alitalia" class="u-visuallyhidden " role="group" aria-label="alitalia">

        <label for="alitalia" class="">
            Alitalia
        </label> <input type="checkbox" id="ryanair" name="ryanair" class="u-visuallyhidden " role="group" aria-label="ryanair">

        <label for="ryanair" class="">
            Ryanair
        </label> <input type="checkbox" id="emirates" name="emirates" class="u-visuallyhidden " role="group" aria-label="emirates">

        <label for="emirates" class="">
            Emirates
        </label> <input type="checkbox" id="klm" name="kml" class="u-visuallyhidden " role="group" aria-label="klm">

        <label for="klm" class="">
            KLM
        </label> <input type="checkbox" id="delta" name="delta" class="u-visuallyhidden " role="group" aria-label="delta">

        <label for="delta" class="">
            Delta Airlines
        </label> <input type="checkbox" id="lufthansa" name="lufthansa" class="u-visuallyhidden " role="group" aria-label="lufthansa">

        <label for="lufthansa" class="">
            Lufthansa
        </label> <input type="checkbox" id="airdolomiti" name="airdolomiti" class="u-visuallyhidden " role="group" aria-label="airdolomiti">

        <label for="airdolomiti" class="">
            Air Dolomiti
        </label>
    </div>

</div>
 
<div class="c-multiselect c-form {{ modifier }}">

  <button type="button" class="c-multiselect__button js-toggleMultiSelectBtn" aria-expanded="false" aria-label="{{ aria-label }}"
    aria-controls="aria-MultiSelectOptions">
    <span>{{ exposed-text }}</span>
    <img src="{{ path '/images/svgs/arrow-down-blue.svg' }}" aria-hidden="true" alt="">
  </button>

  <div class="c-multiselect__options js-multiselectOptions" role="region" aria-live="polite" id="aria-MultiSelectOptions">
    {{#each options}} {{> @checkbox }} {{/each}}
  </div>

</div>
 
{
  "exposed-text": "Tutte le compagnie aeree",
  "aria-label": "Seleziona le compagnie aeree",
  "options": [
    {
      "id": "alitalia",
      "name": "alitalia",
      "text": "Alitalia"
    },
    {
      "id": "ryanair",
      "name": "ryanair",
      "text": "Ryanair"
    },
    {
      "id": "emirates",
      "name": "emirates",
      "text": "Emirates"
    },
    {
      "id": "klm",
      "name": "kml",
      "text": "KLM"
    },
    {
      "id": "delta",
      "name": "delta",
      "text": "Delta Airlines"
    },
    {
      "id": "lufthansa",
      "name": "lufthansa",
      "text": "Lufthansa"
    },
    {
      "id": "airdolomiti",
      "name": "airdolomiti",
      "text": "Air Dolomiti"
    }
  ]
}
  • Content: 
    .c-multiselect {
  position: relative;
  min-width: remify(280px);
  max-width: remify(680px);
  color: primary(night, 60);
}

.c-multiselect__button,
.c-multiselect__options {
  width: 100%;
}

.c-multiselect__button {
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid primary(sky, 20);
  color: primary(night, 60);
  font-weight: fw(regular);
  border-radius: remify(12px);
  padding: remify(12px) remify(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.c-multiselect__button[aria-expanded="true"] {

  img {
    transform: rotate(180deg);
  }

}

.c-multiselect__options {
  display: none;
  background-color: #fff;
  @include shadow(small);
  padding: remify(16px);
  position: absolute;
  max-height: remify(250px);
  overflow: auto;
  z-index: $zIndex-multiselect;

  &.is-visible {
    display: block;
  }

  &>* {
    display: block;
    width: 100%;
  }

}
  • URL: /components/raw/multiselect/_multiselect.scss
  • Filesystem Path: src/views/02-molecules/multiselect/_multiselect.scss
  • Size: 946 Bytes
  • Content: 
    (function($){
  'use strict';

  if(!$.tangible){
    $.tangible = new Object();
  };

  $.tangible.multiSelect = function(el, options){
    var base = this;

    base.$el = $(el);
    base.el = el;

    base.init = function(){
      
      base.$btnMultiSelect = $('.js-toggleMultiSelectBtn');
      base.$multiSelectOptions = $('.js-multiselectOptions');

      // Opens the box of options
      base.$btnMultiSelect.click(function(e){
        e.preventDefault();
        base.$multiSelectOptions.toggleClass('is-visible');
        // Switches the state of aria-expanded
        var expanded = $(this).attr('aria-expanded') === 'true' || false;
        $(this).attr('aria-expanded', !expanded);
      });

    };


    base.init();

  };

  $.fn.tangible_multiSelect = function(options){
    return this.each(function(){
      (new $.tangible.multiSelect(this, options));
    });
  };

})(jQuery);
  • URL: /components/raw/multiselect/multiselect.js
  • Filesystem Path: src/views/02-molecules/multiselect/multiselect.js
  • Size: 899 Bytes

No notes defined.