wbu-design-system/dist/services/customizedButtonService.js

WhereBy.Design is the nascent design system for WhereBy.Us

import Quill from 'quill';
import { isNull, isUndefined } from 'lodash';

const BlockEmbed = Quill.import('blots/block/embed');
const QuillClipboard = Quill.import('modules/clipboard');

class Clipboard extends QuillClipboard {
  onPaste(event) {
    // catch c/p when it happens in input/textarea
    if (['INPUT', 'TEXTAREA'].indexOf(event.target.nodeName) !== -1) {
      return;
    }

    super.onPaste(event);
  }
}

Quill.register('modules/clipboard', Clipboard, true);

class CustomizedButton extends BlockEmbed {
  static create({
    align = 'center',
    color,
    textColor = '#FFFFFF',
    href = '',
    label = 'New customized button',
    id,
  }) {
    const divNode = document.createElement('div');
    divNode.classList.add('composer__customized-button');
    divNode.classList.add('d-flex', 'flex-column', 'justify-content-center');
    if (align === 'right') {
      divNode.classList.add('ml-auto', 'mr-0');
    }
    if (align === 'center') {
      divNode.classList.add('ml-auto', 'mr-auto');
    }

    /**
     * delete button
     */
    const deleteBtnNode = document.createElement('button');
    deleteBtnNode.classList.add('composer__customized-button__overlay-button', 'cursor-pointer', 'rounded-full', 'z-10');
    deleteBtnNode.style.setProperty('border', '1px solid #999');
    deleteBtnNode.innerText = 'X';
    deleteBtnNode.contentEditable = 'false';

    /**
     * insert button
     */
    const buttonNode = document.createElement('button');
    buttonNode.innerHTML = label;
    buttonNode.classList.add('button', 'd-block', 'align-self-center');

    /** hover overlay */
    const overlayNode = document.createElement('div');
    overlayNode.classList.add('composer__customized-button__overlay', 'bg-gray-500', 'rounded-md', 'cursor-pointer');
    const overlayTextNode = document.createElement('div');
    overlayTextNode.innerText = 'Edit';
    overlayTextNode.contentEditable = 'false';
    overlayTextNode.classList.add('composer__customized-button__overlay-text');
    overlayNode.appendChild(overlayTextNode);

    buttonNode.style.setProperty('color', textColor);
    buttonNode.style.setProperty('background-color', color);
    buttonNode.contentEditable = 'false';

    divNode.appendChild(deleteBtnNode);
    divNode.appendChild(overlayNode);
    divNode.appendChild(buttonNode);

    const isExistingBtnBlotWithoutId = isNull(id) || isUndefined(id);
    const btnBlotId = isExistingBtnBlotWithoutId
      ? Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1)
      : id;

    divNode.setAttribute('data-align', align);
    divNode.setAttribute('data-color', color);
    divNode.setAttribute('data-text-color', textColor);
    divNode.setAttribute('data-href', href);
    divNode.setAttribute('data-label', label);
    divNode.setAttribute('data-id', btnBlotId);

    // eslint-disable-next-line func-names
    overlayNode.onclick = function () {
      const buttonBlotToEmit = {
        align,
        color,
        textColor,
        href,
        label,
        id,
      };

      const triggerButtonSettingsOverlayEvent = new CustomEvent('trigger-customized-button-settings-overlay', {
        bubbles: true,
        cancelable: true,
        composed: false,
        detail: buttonBlotToEmit,
      });

      document.dispatchEvent(triggerButtonSettingsOverlayEvent);
    };

    // eslint-disable-next-line func-names
    deleteBtnNode.onclick = function () {
      return divNode.parentNode.removeChild(divNode);
    };

    return divNode;
  }

  static value(node) {
    return {
      align: node.getAttribute('data-align'),
      color: node.getAttribute('data-color'),
      textColor: node.getAttribute('data-text-color'),
      href: node.getAttribute('data-href'),
      label: node.getAttribute('data-label'),
      id: node.getAttribute('data-id'),
    };
  }
}
CustomizedButton.blotName = 'customizedButton';
CustomizedButton.className = 'composer__customized-button';

export {
  CustomizedButton, // eslint-disable-line import/prefer-default-export
};