Vechtsport Online Components for Magento 2

Popup 

<button class="button popup-trigger" data-popuptrigger="popup-1" type="button">
        Popup trigger button
    </button>

    <dialog data-popup="popup-1" class="js--popup popup " role="alertdialog">
        <div class="popup__handler">
            <div class="popup__content" tabindex="0" role="document">
                <button class="button " type="button">
                    I am a button
                </button>

            </div>
            <button class="button button--icon popup__close-button" type="button" aria-label="close popup button, click to close the popup">

                <svg class="icon button__icon popup__close-button-icon" role="img">
                    <title>Close</title>
                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>

        </div>
    </dialog>

    <script src="/components/raw/popup/popup.js"></script>
 
{{#if popupTrigger }}
    {{ render '@button' buttonPopupTrigger merge=true }}
{{/if}}
<dialog data-popup="{{ popupId }}" class="js--popup popup {{ class }}" role="alertdialog" >
    <div class="popup__handler">
        <div class="popup__content" tabindex="0" role="document">
            {{ render (component content) contentContext }}
        </div>
        {{#if buttonClose }}
            {{ render '@button--icon' buttonClose }}
        {{/if}}
    </div>
</dialog>

{{#if script }}
<script src="{{static 'popup.js' }}"></script>
{{/if}}
 
{
  "popupTrigger": true,
  "buttonPopupTrigger": {
    "class": "popup-trigger",
    "text": "Popup trigger button",
    "attributes": "data-popuptrigger=\"popup-1\" type=\"button\""
  },
  "class": "",
  "popupId": "popup-1",
  "content": "button",
  "buttonClose": {
    "tag": "button",
    "text": "",
    "class": "button--icon popup__close-button",
    "icon": {
      "id": "close",
      "title": "Close",
      "class": "button__icon popup__close-button-icon"
    },
    "attributes": "type=\"button\" aria-label=\"close popup button, click to close the popup\""
  },
  "script": true
}
  • Content: 
    $popup__padding                  : 0 !default;
$popup__content-top-margin       : 0 !default;
$popup__width                    : 320px !default;
$popup__width--screen-s          : 100% !default;
$popup__background               : $white !default;
$popup__z-index                  : 50 !default;
$popup__border                   : 0 !default;
$popup__box-shadow-color         : $black !default;
$popup__box-shadow               : 0 4px 6px 0 rgba($popup__box-shadow-color, 0.3) !default;
$popup__close-button-bg          : $white !default;
$popup__close-button-border      : 0 !default;
$popup__button-icon-fill         : $black !default;
$popup__button-icon-fill--active : $color-primary !default;
$popup__margin                   : 0 !default;

.popup {
    display: none;
    position: fixed;
    right: 0;
    left: auto;
    width: $popup__width--screen-s;
    padding: $popup__padding;
    margin: $popup__margin;
    z-index: $popup__z-index;
    box-shadow: $popup__box-shadow;
    background-color: $popup__background;
    border: $popup__border;
    @include mq($screen-s) {
        position: absolute;
        width: $popup__width;
        right: - $spacer;
    }
    &--active {
        display: block;
    }

    &__handler {
        position: relative;
        margin-top: $popup__content-top-margin;
    }

    &__close-button {
        position: absolute;
        top: -48px;
        right: -16px;
        background-color: $popup__close-button-bg;
        border: $popup__close-button-border;

        &:hover,
        &:focus {
            background-color: $popup__close-button-bg;
        }

        &-icon {
            fill: $popup__button-icon-fill;

            &:hover,
            &:focus {
                fill: $popup__button-icon-fill--active;
            }
        }
    }
}
.modal-popup {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: scroll;

    &._show {
        display: block;
    }
}
  • URL: /components/raw/popup/_popup.scss
  • Filesystem Path: build/components/03-modules/popup/_popup.scss
  • Size: 2 KB
  • Content: 
    (function() { //eslint-disable-line func-names

  'use strict';
  const popupsButtons = [...document.querySelectorAll('.popup-trigger')],
        popupSelector = '.js--popup';

  class Popup {
    constructor(button, popup = popupSelector) {
      this.active       = 'popup--active';
      this.body         = document.querySelector('body');
      this.button       = button;
      this.buttonId     = button.dataset.popuptrigger;
      this.buttonClass  = 'popup-button--active';
      this.popup        = document.querySelector(`${popup}[data-popup=${this.buttonId}]`);
      this.popupContent = this.popup.querySelector('.popup__content');
      this.closeButton  = this.popup.querySelector('.js--popup__close-button');

      this.button.addEventListener('click', (e) => {
        e.preventDefault();
        this.toggle();
      });

      if (this.closeButton) {
        this.closeButton.addEventListener('click', () => {
          this.hide();
        });
      }

      window.addEventListener('click', (e) => {
        if ((e.target !== this.button)
          && (!this.popup.contains(e.target))
          && (!this.button.contains(e.target))
        ) {
          if (this.isActive()) {
            this.hide();
          }
        }
      });
    }

    toggle() {
      if (this.isActive()) {
        this.hide();
      }
      else {
        this.show();
      }
    }

    show() {
      this.popup.classList.add(this.active);
      this.popup.open = true;
      this.popupContent.focus();
      window.addEventListener('keydown', this.keyboardClosePopup.bind(this));
    }

    hide() {
      this.popup.classList.remove(this.active);
      this.button.classList.remove(this.buttonClass);
      this.button.focus();
      this.popup.open = false;
    }

    isActive() {
      return this.popup.classList.contains(this.active);
    }

    keyboardClosePopup(event) {
      if (event.which === 27) {
        if (this.isActive()) {
          event.preventDefault();
          this.hide();
        }
      }
    }
  }

  popupsButtons.forEach(popupButton => {
    new Popup(popupButton);
  });
}());
  • URL: /components/raw/popup/popup.js
  • Filesystem Path: build/components/03-modules/popup/popup.js
  • Size: 2.1 KB

There are no notes for this item.