Sidecap

Basic example

<div class="overlay show">
  <a href="#" onclick="event.preventDefault();sidecaps.open(sidecaps.elements[0])">Toggle Sidecap component</a>
  <div role="dialog" aria-modal="true" tabindex="-1" class="sidecap">
    <div>
      <div>
        123
      </div>
      <div>
        <a href="#" onclick="event.preventDefault();sidecaps.close(sidecaps.elements[0])" class="btn blank">
          <svg width="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
        </a>
      </div>
    </div>
    <div>
      444
    </div>
    <div>
      333
    </div>
  </div>
</div>

@use '~/styles/app.scss' as app;

$overlay: app.get-theme(app.$theme, 'components.overlay');

@include app.generate-component(
    $overlay,
    'overlay',
    app.$config,
    app.$theme
);

$button: app.get-theme(app.$theme, 'components.button');

@include app.generate-component(
  $button,
  'btn',
  app.$config,
  app.$theme
);

$sidecap: app.get-theme(app.$theme, 'components.sidecap');

@include app.generate-component(
  $sidecap,
  'sidecap',
  app.$config,
  app.$theme
);

const sidecap = (elements, options) => {

  const defaults = {

  };


  // @TODO add scroll lock
  // @TODO add ontransitionend
  // Options
  const settings = Object.assign({}, defaults, options);

  const _close = (sidecap) => {
    sidecap.classList.remove('open');
  }

  const _open = (sidecap) => {
    sidecap.classList.add('open');
  }

  const _add_event_listeners_dom = () => {
    document.addEventListener('keydown', event => {
      if (event.key === 'Escape' || event.keyCode === 27) {
        [].forEach.call(elements, (sidecap) => {
          _close(sidecap);
        })
      }
    });
  }

  const _add_event_listeners = (sidecap) => {
      sidecap.addEventListener('click', (e) => {
        e.preventDefault();
      })
  }

  const _init = () => {
    _add_event_listeners_dom();

    [].forEach.call(elements, (sidecap) => {
      _add_event_listeners(sidecap);
    })
  };

  // Initiating the accordion
  if(sidecap) {
    _init();
  }

  return ({
    elements : elements,
    open : (element) => {
      document.body.toggleAttribute('scroll-lock');
      _open(element);
    },
    close : (element) => {
      document.body.toggleAttribute('scroll-lock');
      _close(element);
    }
  })
}

const sidecaps = sidecap(document.querySelectorAll('.sidecap'), {
});