Swegon Component Library

Options Limiter 

<div class="filter-checkbox-list js-options-limiter">
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Aula">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Aula" value="Aula" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Aula</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Biograf">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Biograf" value="Biograf" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Biograf</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Butik">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Butik" value="Butik" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Butik</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Grupprum">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Grupprum" value="Grupprum" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Grupprum</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Gym">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Gym" value="Gym" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Gym</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Hotellrum">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Hotellrum" value="Hotellrum" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Hotellrum</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Receptionfoaje">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Receptionfoaje" value="Receptionfoaje" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Receptionfoaje</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Isolerrum">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Isolerrum" value="Isolerrum" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Isolerrum</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Klassrum">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Klassrum" value="Klassrum" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Klassrum</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Konferensrum">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Konferensrum" value="Konferensrum" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Konferensrum</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Kontor">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Kontor" value="Kontor" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Kontor</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Kontorslandskap">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Kontorslandskap" value="Kontorslandskap" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Kontorslandskap</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Lager">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Lager" value="Lager" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Lager</span>
                </label>
            </div>

        </div>
    </div>
    <div class="filter-checkbox-list__item">
        <div class="form-item">

            <div class="checkbox__item ">
                <label class="checkbox__label js-filter checkbox-simple" for="Matsal">
                    <input class="checkbox__input js-filter checkbox-simple" type="checkbox" name="filters[Lokaltyp]" id="Matsal" value="Matsal" aria-controls="filter-products-grid" data-type="checkbox">
                    <span class="checkbox__title">Matsal</span>
                </label>
            </div>

        </div>
    </div>
    <div class="button-wrapper">
        <button type="button" class="show-more-filters">Show More</button>
    </div>
</div>
 
<div class="filter-checkbox-list js-options-limiter">
    {{#each checkboxes}}
        <div class="filter-checkbox-list__item">
            {{> @checkbox this }}
        </div>
    {{/each}}
    <div class="button-wrapper">
        <button type="button" class="show-more-filters">Show More</button>
    </div>
</div>
 
{
  "checkboxes": [
    {
      "name": "filters[Lokaltyp]",
      "label": "Aula",
      "value": "Aula",
      "type": "checkbox",
      "description": "Checkbox description",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Biograf",
      "value": "Biograf",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Butik",
      "value": "Butik",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Grupprum",
      "value": "Grupprum",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Gym",
      "value": "Gym",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Hotellrum",
      "value": "Hotellrum",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Receptionfoaje",
      "value": "Receptionfoaje",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Isolerrum",
      "value": "Isolerrum",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Klassrum",
      "value": "Klassrum",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Konferensrum",
      "value": "Konferensrum",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Kontor",
      "value": "Kontor",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Kontorslandskap",
      "value": "Kontorslandskap",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Lager",
      "value": "Lager",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    },
    {
      "name": "filters[Lokaltyp]",
      "label": "Matsal",
      "value": "Matsal",
      "type": "checkbox",
      "disabled": false,
      "checked": false,
      "additionalClasses": "js-filter checkbox-simple",
      "attr": {
        "aria-controls": "filter-products-grid",
        "data-type": "checkbox"
      }
    }
  ]
}
  • Content: 
    class OptionsLimiter {
    constructor(el) {
        const optionsLimitedListWrapper = el;
        const optionSelector = optionsLimitedListWrapper.dataset.optionSelector || '.filter-checkbox-list__item';
        const optionLimit = Number(optionsLimitedListWrapper.dataset.optionLimit || 10);
        const isDesktopEnabled = !optionsLimitedListWrapper.dataset.desktopDisabled;

        if (window.matchMedia('(min-width: 640px)').matches && !isDesktopEnabled) {
            return;
        }
        const optionsLimitedList = optionsLimitedListWrapper.querySelectorAll(optionSelector);
        optionsLimitedList.forEach((option, index) => {
            if (index >= optionLimit) {
                option.classList.add('js-option--hidden');
            }
        });

        if (optionsLimitedList.length > optionLimit) {
            optionsLimitedListWrapper.classList.add('js-options-limiter--padded');
            const buttonWrapper = el.querySelector('.button-wrapper');
            const button = el.querySelector('.show-more-filters');
            buttonWrapper.classList.add('button-wrapper--visible');
            button.addEventListener('click', () => {
                optionsLimitedList.forEach((option, index) => {
                    option.classList.remove('js-option--hidden');
                });
                buttonWrapper.classList.remove('button-wrapper--visible');
                optionsLimitedListWrapper.classList.remove('js-options-limiter--padded');
            });
        }
    }
}

export default OptionsLimiter;
  • URL: /components/raw/options-limiter/OptionsLimiter.js
  • Filesystem Path: src/components/options-limiter/OptionsLimiter.js
  • Size: 1.5 KB
  • Content: 
    import OptionsLimiter from './OptionsLimiter';

const els = document.querySelectorAll('.js-options-limiter');

for (let el of els) {
    new OptionsLimiter(el);
}
  • URL: /components/raw/options-limiter/index.js
  • Filesystem Path: src/components/options-limiter/index.js
  • Size: 163 Bytes
  • Content: 
    .filter-checkbox-list {
    position: relative;
    padding: 0 0 0 16px;

    .checkbox__item--simple {
        .checkbox__label {
            line-height: 20px;
            color: $color-gray-5;
        }
    }

    .filter-checkbox-list__item {
        margin-top: 8px;
    }
}

.js-options-limiter {
    &--padded {
        padding-bottom: 40px;
    }
    .js-option {
        &--hidden {
            display: none;
        }
    }

    .show-more-filters {
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        color: $color-green-dark;
    }

    .button-wrapper {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        right:0;
        width: 100%;
        text-align: center;

        &:after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            height: 48px;
            background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
            bottom: 30px;
        }

        &--visible {
            display: block;
        }
    }
}
  • URL: /components/raw/options-limiter/options-limiter.scss
  • Filesystem Path: src/components/options-limiter/options-limiter.scss
  • Size: 1.1 KB

No notes defined.