Swegon Component Library

Show Info 

<div id="show-info" class="show-info js-show-info ">
    <div class="show-info__wrapper js-show-info-wrapper">
        <div class="show-info__content">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
        </div>
    </div>

    <div class="show-info__btn-holder js-show-info-btn-holder">
        <button class="show-info__btn js-show-info-btn">
            <span class="show-info__btn-opened-text">
                More info
            </span>
            <span class="show-info__btn-closed-text">
                Hide info
            </span>
            <svg class="icon show-info__btn-icon" focusable="false">
                <use xlink:href="#icon-close"></use>
            </svg>
        </button>
    </div>
</div>
 
<div id="{{id}}" class="show-info js-show-info {{ getmodifiers modifiers "show-info"}}">
    <div class="show-info__wrapper js-show-info-wrapper">
        <div class="show-info__content">
            {{#>@partial-block}}
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, reprehenderit.</p>
            {{/@partial-block}}
        </div>
    </div>

    <div class="show-info__btn-holder js-show-info-btn-holder">
        <button class="show-info__btn js-show-info-btn">
            <span class="show-info__btn-opened-text">
                {{showMoreText}}
            </span>
            <span class="show-info__btn-closed-text">
                {{hideText}}
            </span>
            {{> @icon id='close' additionalClasses="show-info__btn-icon"}}
        </button>
    </div>
</div>
 
{
  "showMoreText": "More info",
  "hideText": "Hide info",
  "id": "show-info"
}
  • Content: 
    const ShowInfo = (el) => {
    const showInfoContent = el.querySelector('.js-show-info-wrapper');
    const showInfoBtnHolder = el.querySelector('.js-show-info-btn-holder');
    const showInfoBtn = showInfoBtnHolder.querySelector('.js-show-info-btn');
    const openText = showInfoBtnHolder.querySelector(
        '.show-info__btn-opened-text'
    );
    const hideText = showInfoBtnHolder.querySelector(
        '.show-info__btn-closed-text'
    );
    const icon = showInfoBtnHolder.querySelector('.show-info__btn-icon');
    const triggers = document.querySelectorAll(
        '[aria-controls="' + el.id + '"]'
    );

    const toggleShowInfo = () => {
        const isOpen = showInfoContent.style.maxHeight !== '0px';
        showInfoContent.style.maxHeight = isOpen
            ? 0
            : `${showInfoContent.scrollHeight}px`;
        openText.style.display = isOpen ? 'block' : 'none';
        hideText.style.display = isOpen ? 'none' : 'block';
        icon.classList.toggle('active');
        showInfoContent.closest('.show-info').classList.toggle('open');
    };

    const init = () => {
        showInfoContent.style.maxHeight = 0;
        hideText.style.display = 'none';

        triggers.forEach((trigger) => {
            trigger.addEventListener('click', toggleShowInfo);
        });

        showInfoBtn.addEventListener('click', toggleShowInfo);
    };
    el.classList.remove('js-show-info');

    init();
};

export default ShowInfo;
  • URL: /components/raw/show-info/ShowInfo.js
  • Filesystem Path: src/components/show-info/ShowInfo.js
  • Size: 1.5 KB
  • Content: 
    import ShowInfo from './ShowInfo';

const els = document.querySelectorAll('.js-show-info');

for (let el of els) {
    ShowInfo(el);
}

window.addEventListener('click', (event) => {
    const link = event.target.closest('a');
    if (link) {
        const data = link.dataset.params;
        localStorage.setItem('data-params', data);
    }
});
  • URL: /components/raw/show-info/index.js
  • Filesystem Path: src/components/show-info/index.js
  • Size: 345 Bytes
  • Content: 
    .show-info {
    background: $color-white;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: $color-gray-1;
    display: flex;
    flex-direction: column;

    &.open {
        justify-content: space-between;
        flex-grow: 1;
    }
}

.show-info__wrapper {
    overflow: hidden;

    .show-info--active & {
        display: block;
    }
}

.show-info__content {
    padding: size(2.2) size(2) size(2.2) size(1.5);

    &.no-padding-vertical {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.show-info__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: $font-weight-bold;
    padding: size(1.6) size(2);
    cursor: pointer;

    &:hover {
        background: $color-green-pale;
    }

    &-text {
        position: relative;
        padding-right: 28px;
    }

    &-icon {
        width: 20px;
        height: 20px;
        margin-left: 20px;
        transform: rotate(45deg);

        &.active {
            transform: rotate(0deg);
        }
    }
}
  • URL: /components/raw/show-info/show-info.scss
  • Filesystem Path: src/components/show-info/show-info.scss
  • Size: 1.1 KB

No notes defined.