sc-separator - create component

    // generalize, i.e. handle position / size of container
    _resize(e, direction) {
      const { width, height } = e.currentTarget.parentElement.getBoundingClientRect();
      const $prev = e.currentTarget.previousElementSibling;
      const $next = e.currentTarget.nextElementSibling;

      document.body.style.userSelect = 'none';
      document.body.style.cursor = direction === 'vertical' ? 'ns-resize' : 'ex-resize';

      const resize = e => {
        if (direction === 'horizontal') {
          // clientX should be relative to parentElement
          const ratio = Math.max(0.02, Math.min(0.98, e.clientX / width));
          $prev.style.width = `${ratio * 100}%`;
          $next.style.width = `${(1 - ratio) * 100}%`;
        } else if (direction === 'vertical') {
           //clientY should be relative to parentElement
          const ratio = Math.max(0.02, Math.min(0.98, e.clientY / height));
          $prev.style.height = `${ratio * 100}%`;
          $next.style.height = `${(1 - ratio) * 100}%`;
        }
      }

      window.addEventListener('mousemove', resize);
      window.addEventListener('mouseup', () => {
        document.body.style.userSelect = 'auto';
        document.body.style.cursor = 'auto';
        window.removeEventListener('mousemove', resize);
      });
    },
ircam-ismm / sc-components

sc-separator - create component #32
