@ebl-vue/editor-full 2.31.35 → 2.31.37

package/src/plugins/imageResizeCrop/ImageTune.ts

@@ -0,0 +1,635 @@
+
+import './index.css';
+import  type {  BlockTune,  API,  BlockAPI } from '@ebl-vue/editorjs/types'
+
+
+export interface TuneSetting {
+  name: string;
+  icon: string;
+  label: string;
+  group: string;
+}
+
+export interface ImageToolTuneData {
+  floatLeft: boolean;
+  floatRight: boolean;
+  center: boolean;
+  sizeSmall: boolean;
+  sizeMiddle: boolean;
+  sizeLarge: boolean;
+  resize: boolean;
+  resizeSize: number;
+}
+
+export interface ImageToolTuneConfig {
+  resize: boolean;
+}
+
+export interface CustomStyles {
+  settingsButton: string;
+  settingsButtonActive: string;
+  settingsButtonModifier?: string;
+  settingsButtonModifierActive?: string;
+}
+
+export interface ImageToolTuneConstructor  {
+  api: API;
+  data: ImageToolTuneData;
+  config?: ImageToolTuneConfig;
+  block: BlockAPI;
+};
+
+export default class ImageToolTune  implements BlockTune {
+  private settings: TuneSetting[];
+  private api: API;
+  private block: BlockAPI;
+  private data: ImageToolTuneData;
+  private wrapper: HTMLElement | undefined;
+  private buttons: HTMLElement[];
+  private styles: CustomStyles;
+
+  constructor({ api, data, config, block }: ImageToolTuneConstructor) {
+    this.settings = [
+      
+    ];
+
+    this.api = api;
+    this.block = block;
+    this.data = {
+      floatLeft: data?.floatLeft ?? false,
+      floatRight: data?.floatRight ?? false,
+      center: data?.center ?? false,
+      sizeSmall: data?.sizeSmall ?? false,
+      sizeMiddle: data?.sizeMiddle ?? false,
+      sizeLarge: data?.sizeLarge ?? false,
+      resize: data?.resize ?? config?.resize ?? false,
+      resizeSize: data?.resizeSize ?? 0,
+     
+    };
+    this.wrapper = undefined;
+    this.buttons = [];
+    this.styles = {
+      settingsButton: 'cdx-settings-button',
+      settingsButtonActive: 'cdx-settings-button--active',
+      settingsButtonModifier: '',
+      settingsButtonModifierActive: '',
+    };
+  }
+
+  static get isTune(): boolean {
+    return true;
+  }
+
+  static get sanitize() {
+    return {
+      floatLeft: {},
+      floatRight: {},
+      center: {},
+      sizeSmall: {},
+      sizeMiddle: {},
+      sizeLarge: {},
+      resize: {},
+      resizeSize: {},
+     
+    };
+  }
+
+  /**
+   * CSS classes
+   *  @return {object}
+   * @constructor
+   * @property {string} CSS.wrapper - wrapper for buttons
+   * @property {string} CSS.button - button
+   * @property {string} CSS.buttonActive - active button
+   * @property {string} CSS.buttonModifier - button with modifier
+   * @property {string} CSS.buttonModifierActive - active button with modifier
+   */
+  get CSS(): Record<string, string> {
+    return {
+      wrapper: 'cdx-image-tool-tune',
+      button: this.styles.settingsButton,
+      buttonActive: this.styles.settingsButtonActive,
+      buttonModifier: this.styles.settingsButtonModifier || '',
+      buttonModifierActive: this.styles.settingsButtonModifierActive || '',
+      isFloatLeft: 'cdx-image-tool-tune--floatLeft',
+      isFloatRight: 'cdx-image-tool-tune--floatRight',
+      isCenter: 'cdx-image-tool-tune--center',
+      isSizeSmall: 'cdx-image-tool-tune--sizeSmall',
+      isSizeMiddle: 'cdx-image-tool-tune--sizeMiddle',
+      isSizeLarge: 'cdx-image-tool-tune--sizeLarge',
+      isResize: 'cdx-image-tool-tune--resize',
+  
+    };
+  }
+
+  /**
+   *
+   * @return {HTMLElement}
+   * @public
+   * @readonly
+   * @property {HTMLElement} wrapper - tune buttons wrapper
+   */
+  get view(): HTMLElement {
+    if (!this.wrapper) {
+      this.wrapper = this.createView();
+    }
+
+    return this.wrapper;
+  }
+
+  /**
+   * Clicks to one of the tunes
+   * @param {MouseEvent} e - click
+   * @param {HTMLElement} tune - clicked tune button
+   * @private
+   * @return {void}
+   * */
+  tuneClicked(e: MouseEvent, tune: HTMLElement): void {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const tuneName = tune.dataset.tune || '';
+    const tuneGroup = this.settings.find(t => t.name === tuneName)?.group;
+
+    this.buttons.forEach(button => {
+      //if is the same group
+      if (
+        this.settings.find(t => t.name === button.dataset.tune)?.group ===
+        tuneGroup
+      ) {
+        if (button !== tune) {
+          button.classList.remove(this.CSS.buttonActive);
+        }
+      }
+    });
+
+    tune.classList.toggle(this.CSS.buttonActive);
+    this.setTune(tuneName);
+  }
+
+  /**
+   * Styles the image with a tune
+   * @param {string} tune - tune name
+   * @private
+   * @return {void}
+   * */
+  setTune(tune: string): void {
+    switch (tune) {
+      case 'floatLeft':
+        this.data.floatLeft = !this.data.floatLeft;
+        this.data.floatRight = false;
+        this.data.center = false;
+        break;
+      case 'floatRight':
+        this.data.floatLeft = false;
+        this.data.floatRight = !this.data.floatRight;
+        this.data.center = false;
+        break;
+      case 'center':
+        this.data.center = !this.data.center;
+        this.data.floatLeft = false;
+        this.data.floatRight = false;
+        break;
+      case 'sizeSmall':
+        this.data.sizeSmall = !this.data.sizeSmall;
+        this.data.sizeMiddle = false;
+        this.data.sizeLarge = false;
+        this.data.resize = false;
+        
+        break;
+      case 'sizeMiddle':
+        this.data.sizeSmall = false;
+        this.data.sizeMiddle = !this.data.sizeMiddle;
+        this.data.sizeLarge = false;
+        this.data.resize = false;
+        
+        break;
+      case 'sizeLarge':
+        this.data.sizeSmall = false;
+        this.data.sizeMiddle = false;
+        this.data.sizeLarge = !this.data.sizeLarge;
+        this.data.resize = false;
+        
+        break;
+      case 'resize':
+        this.data.sizeSmall = false;
+        this.data.sizeMiddle = false;
+        this.data.sizeLarge = false;
+        this.data.resize = !this.data.resize;
+        
+        break;
+ 
+      default:
+        this.data.floatLeft = false;
+        this.data.floatRight = false;
+        this.data.sizeSmall = false;
+        this.data.sizeMiddle = false;
+        this.data.sizeLarge = false;
+        this.data.resize = false;
+    
+        break;
+    }
+
+    if (!this.data.resize) {
+      this.data.resizeSize = 0;
+    }
+
+    
+
+    const blockContent = this.block.holder.querySelector(
+      '.ce-block__content',
+    ) as HTMLElement;
+    this.apply(blockContent);
+    this.block.dispatchChange();
+  }
+
+  /**
+   * Append class to block by tune data
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @public
+   * @return {void}
+   *  */
+  apply(blockContent: HTMLElement): void {
+    if (this.data.floatLeft) {
+      blockContent.classList.add(this.CSS.isFloatLeft);
+    } else {
+      blockContent.classList.remove(this.CSS.isFloatLeft);
+    }
+
+    if (this.data.floatRight) {
+      blockContent.classList.add(this.CSS.isFloatRight);
+    } else {
+      blockContent.classList.remove(this.CSS.isFloatRight);
+    }
+
+    if (this.data.center) {
+      blockContent.classList.add(this.CSS.isCenter);
+    } else {
+      blockContent.classList.remove(this.CSS.isCenter);
+    }
+
+    if (this.data.sizeSmall) {
+      blockContent.classList.add(this.CSS.isSizeSmall);
+    } else {
+      blockContent.classList.remove(this.CSS.isSizeSmall);
+    }
+
+    if (this.data.sizeMiddle) {
+      blockContent.classList.add(this.CSS.isSizeMiddle);
+    } else {
+      blockContent.classList.remove(this.CSS.isSizeMiddle);
+    }
+
+    if (this.data.sizeLarge) {
+      blockContent.classList.add(this.CSS.isSizeLarge);
+    } else {
+      blockContent.classList.remove(this.CSS.isSizeLarge);
+    }
+
+    if (this.data.resize) {
+      blockContent.classList.add(this.CSS.isResize);
+
+      if (this.data.resizeSize > 0) {
+        const cdxBlock = blockContent.getElementsByClassName(
+          'cdx-block',
+        )[0] as HTMLElement;
+        cdxBlock.style.width = this.data.resizeSize + 'px';
+      }
+
+      this.resize(blockContent);
+    } else {
+      blockContent.classList.remove(this.CSS.isResize);
+      this.unresize(blockContent);
+    }
+
+  }
+
+
+
+  /**
+   * Add resize handles to block
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @public
+   * @return {void}
+   * */
+  resize(blockContent: HTMLElement): void {
+    if (this.api.readOnly.isEnabled) return;
+    const resizable = document.createElement('div');
+    resizable.classList.add('resizable');
+
+    const resizers = document.createElement('div');
+    resizers.classList.add('resizers');
+
+    const resizerTopRight = document.createElement('div');
+    resizerTopRight.classList.add('resizer', 'top-right');
+    resizerTopRight.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "right",
+        e,
+      );
+    });
+
+    const resizerBottomRight = document.createElement('div');
+    resizerBottomRight.classList.add('resizer', 'bottom-right');
+    resizerBottomRight.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "right",
+        e,
+      );
+    });
+
+    const resizerTopLeft = document.createElement('div');
+    resizerTopLeft.classList.add('resizer', 'top-left');
+    resizerTopLeft.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "left",
+        e,
+      );
+    });
+    const resizerBottomLeft = document.createElement('div');
+    resizerBottomLeft.classList.add('resizer', 'bottom-left');
+    resizerBottomLeft.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "left",
+        e,
+      );
+    });
+
+
+    resizers.appendChild(resizerTopRight);
+    resizers.appendChild(resizerBottomRight);
+    resizers.appendChild(resizerTopLeft);
+    resizers.appendChild(resizerBottomLeft);
+    resizable.appendChild(resizers);
+    blockContent.getElementsByClassName('cdx-block')[0].appendChild(resizable);
+  }
+
+  /**
+   * click event to resize handles
+   * preserve aspect ratio
+   * prevent block from moving when dragging resize handles
+   * max size = 100%
+   * min size = 50px
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @param {HTMLElement} handle - resize handle
+   * @param {MouseEvent} e - mouse event
+   * @public
+   * @return {void}
+   * */
+  resizeClick(blockContent: HTMLElement, handleDirection: String, e: MouseEvent): void {
+    const maxWidth =
+      document.getElementsByClassName('ce-block__content')[0].clientWidth;
+    let startX = 0;
+    let startWidth = 0;
+
+    const mouseMoveHandler = (e: MouseEvent) => {
+      const dx = e.clientX - startX;
+      let newWidth = startWidth;
+      if (handleDirection === "right") {
+        newWidth += dx;
+      }
+      if (handleDirection === "left") {
+        newWidth -= dx;
+      }
+
+      if (newWidth > 50 && newWidth < maxWidth) {
+        (
+          blockContent as HTMLElement & { style: CSSStyleDeclaration }
+        ).style.width = newWidth + 'px';
+      }
+    };
+
+    const mouseUpHandler = () => {
+      const blockWidth = parseInt(
+        window.getComputedStyle(blockContent).width,
+        10,
+      );
+
+      if (blockWidth > 0) {
+        this.data.resizeSize = blockWidth;
+      }
+
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+
+      this.block.dispatchChange();
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+
+    startX = e.clientX;
+    startWidth = parseInt(window.getComputedStyle(blockContent).width, 10);
+  }
+
+  /**
+   * Remove resize handles from block
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @public
+   * @return {void}
+   */
+  unresize(blockContent: HTMLElement): void {
+    const unresizable = blockContent.getElementsByClassName(
+      'resizable',
+    )[0] as HTMLElement;
+    if (unresizable) {
+      blockContent
+        .getElementsByClassName('cdx-block')[0]
+        .removeChild(unresizable);
+    }
+
+    const block: HTMLElement = blockContent.getElementsByClassName(
+      'cdx-block',
+    )[0] as HTMLElement;
+    block.style.width = 'auto';
+  }
+
+  /**
+   * Remove tunes from block wrapper
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @public
+   * @return {HTMLElement}
+   */
+  unwrap(blockContent: HTMLElement): HTMLElement {
+    //remove tunes from block
+    this.buttons.forEach(button => {
+      button.classList.remove(this.CSS.buttonActive);
+    });
+
+    //remove isFloatLeft class
+    blockContent.classList.remove(this.CSS.isFloatLeft);
+
+    //remove isFloatRight class
+    blockContent.classList.remove(this.CSS.isFloatRight);
+
+    //remove isCenter class
+    blockContent.classList.remove(this.CSS.isCenter);
+
+    //remove isSizeSmall class
+    blockContent.classList.remove(this.CSS.isSizeSmall);
+
+    //remove isSizeMiddle class
+    blockContent.classList.remove(this.CSS.isSizeMiddle);
+
+    //remove isSizeLarge class
+    blockContent.classList.remove(this.CSS.isSizeLarge);
+
+    //remove isResize class
+    blockContent.classList.remove(this.CSS.isResize);
+
+
+
+    const cdxBlock = blockContent.getElementsByClassName(
+      'cdx-block',
+    )[0] as HTMLElement;
+
+    
+
+
+
+    //remove min and max width
+    cdxBlock.style.minWidth = '';
+    cdxBlock.style.maxWidth = '';
+
+    //remove image width and height
+    const imageToolImage = blockContent.getElementsByClassName(
+      'image-tool__image',
+    )[0] as HTMLElement;
+    imageToolImage.style.width = '';
+    imageToolImage.style.height = '';
+
+    //remove image left and top
+    const image = imageToolImage.getElementsByTagName(
+      'img',
+    )[0] as HTMLImageElement;
+    image.style.left = '';
+    image.style.top = '';
+
+    //remove image width and height
+    image.style.width = '';
+    image.style.height = '';
+
+    //remove resize handles
+    this.unresize(blockContent);
+
+    return blockContent;
+  }
+
+  /**
+   * Add tune to block data
+   * @private
+   * @return {ImageToolTuneData}
+   * */
+  save(): ImageToolTuneData {
+    return this.data;
+  }
+
+  /**
+   * Append tunes to block wrapper
+   * @param {HTMLElement} blockContent - wrapper for block content
+   * @public
+   * @return {HTMLElement}
+   * */
+  wrap(blockContent: HTMLElement): HTMLElement {
+    //createview if not exists
+    if (!this.wrapper) {
+      this.wrapper = this.createView();
+    }
+
+    this.apply(blockContent);
+    return blockContent;
+  }
+
+  private tuneNameToI18nKey(tuneName: string): string {
+    const translation: Record<string, string> = {
+      resize: 'Resize',
+    };
+    return translation[tuneName];
+  }
+
+  /**
+   * Creates a view for tunes
+   * @return {HTMLElement}
+   * @private
+   * */
+  createView(): HTMLElement {
+    this.buttons = this.settings.map(tune => {
+      const el = document.createElement('div');
+      const buttonIco = document.createElement('span');
+      const buttonTxt = document.createElement('span');
+      el.classList.add(this.CSS.button);
+      buttonTxt.style.fontSize = '8px';
+      buttonIco.innerHTML = tune.icon;
+      buttonTxt.innerHTML = tune.label;
+      el.appendChild(buttonIco);
+      el.appendChild(buttonTxt);
+      el.dataset.tune = tune.name;
+      el.title = tune.label;
+
+      el.addEventListener('click', e => this.tuneClicked(e, el));
+      this.api.tooltip.onHover(
+        el,
+        this.api.i18n.t(this.tuneNameToI18nKey(tune.name)),
+      );
+      return el;
+    });
+    const wrapper = document.createElement('div');
+    this.buttons.forEach(button => {
+      wrapper.appendChild(button);
+    });
+    wrapper.classList.add(this.CSS.wrapper);
+    return wrapper;
+  }
+
+  /**
+   * Checks if tune is active
+   * @param {string} tune - tune name
+   * @return {boolean}
+   * @private
+   * */
+  isTuneActive(tune: string): boolean {
+    return !!this.data[tune as keyof ImageToolTuneData];
+  }
+
+  /**
+   * Makes buttons with tunes
+   * @return {HTMLElement}
+   * @public
+   * */
+  render(): HTMLElement {
+    //when editor is ready
+    this.buttons.forEach(button => {
+      const tuneName = button.dataset.tune || '';
+      button.classList.toggle(
+        this.CSS.buttonActive,
+        this.isTuneActive(tuneName),
+      );
+    });
+
+    return this.view;
+  }
+
+  /**
+   * Destroys the plugin
+   * @public
+   * @return {void}
+   * */
+  destroy(): void {
+    this.wrapper = undefined;
+    this.buttons = [];
+  }
+
+  /**
+   * Toggle tune
+   * @param {string} tuneName - tune name
+   * @private
+   * @return {void}
+   * */
+  _toggleTune(tuneName: string): void {
+    this.setTune(tuneName);
+  }
+}