@opentiny/fluent-editor/lib/modules/table/modules/table-selector.cjs.js

A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index = require("../utils/index.cjs.js");
const GRID_SIZE = {
  ROWS: 10,
  COLS: 10,
  CELL_SIZE: 15
};
const STYLES = {
  container: {
    "position": "absolute",
    "z-index": "1000",
    "background": "white",
    "border": "1px solid #ccc",
    "padding": "5px",
    "box-shadow": "0 2px 8px rgba(0,0,0,0.1)"
  },
  grid: {
    "display": "grid",
    "grid-template-columns": `repeat(${GRID_SIZE.COLS}, ${GRID_SIZE.CELL_SIZE - 1}px)`,
    "grid-template-rows": `repeat(${GRID_SIZE.ROWS}, ${GRID_SIZE.CELL_SIZE - 1}px)`,
    "gap": "0px"
  },
  row: {
    display: "contents"
  },
  cell: {
    "width": `${GRID_SIZE.CELL_SIZE}px`,
    "height": `${GRID_SIZE.CELL_SIZE}px`,
    "border": "1px solid #ddd",
    "background-color": "#fff",
    "box-sizing": "border-box"
  },
  label: {
    "text-align": "center",
    "margin-top": "5px",
    "font-size": "12px",
    "color": "#666"
  }
};
function createCell(row, col, handleMouseOver, handleClick) {
  const cellDiv = document.createElement("div");
  cellDiv.className = "cell";
  index.css(cellDiv, STYLES.cell);
  const mouseOverListener = () => handleMouseOver(row + 1, col + 1);
  const clickListener = () => handleClick();
  cellDiv.addEventListener("mouseover", mouseOverListener);
  cellDiv.addEventListener("click", clickListener);
  const removeListeners = () => {
    cellDiv.removeEventListener("mouseover", mouseOverListener);
    cellDiv.removeEventListener("click", clickListener);
  };
  return { cellDiv, removeListeners };
}
function createRow(rowIndex, handleMouseOver, handleClick) {
  const rowDiv = document.createElement("div");
  rowDiv.className = "row";
  index.css(rowDiv, STYLES.row);
  const fragment = document.createDocumentFragment();
  const removeListenersArray = [];
  for (let col = 0; col < GRID_SIZE.COLS; col++) {
    const { cellDiv, removeListeners: removeListeners2 } = createCell(rowIndex, col, handleMouseOver, handleClick);
    fragment.appendChild(cellDiv);
    removeListenersArray.push(removeListeners2);
  }
  rowDiv.appendChild(fragment);
  const removeListeners = () => {
    removeListenersArray.forEach((remove) => remove());
  };
  return { rowDiv, removeListeners };
}
class TableSelector {
  constructor({ onSelect }) {
    this.rows = 0;
    this.cols = 0;
    this.removeListenersArray = [];
    this.onSelect = onSelect;
    this.initContainer();
    this.initGrid();
    this.initLabel();
  }
  // init table-selector container
  initContainer() {
    this.container = document.createElement("div");
    this.container.className = "table-selector";
    index.css(this.container, STYLES.container);
  }
  // init grid
  initGrid() {
    this.grid = document.createElement("div");
    this.grid.className = "grid";
    index.css(this.grid, STYLES.grid);
    const fragment = document.createDocumentFragment();
    for (let row = 0; row < GRID_SIZE.ROWS; row++) {
      const { rowDiv, removeListeners } = createRow(
        row,
        this.handleMouseOver.bind(this),
        this.handleClick.bind(this)
      );
      fragment.appendChild(rowDiv);
      this.removeListenersArray.push(removeListeners);
    }
    this.grid.appendChild(fragment);
    this.container.appendChild(this.grid);
  }
  // init label
  initLabel() {
    this.label = document.createElement("div");
    this.label.className = "label";
    index.css(this.label, STYLES.label);
    this.container.appendChild(this.label);
  }
  handleMouseOver(row, col) {
    this.rows = row;
    this.cols = col;
    this.updateGrid();
  }
  handleClick() {
    this.onSelect(this.rows, this.cols);
    this.hide();
  }
  updateGrid() {
    const cells = this.grid.getElementsByClassName("cell");
    for (let i = 0; i < cells.length; i++) {
      const cell = cells[i];
      const row = Math.floor(i / GRID_SIZE.COLS);
      const col = i % GRID_SIZE.COLS;
      index.css(cell, {
        "background-color": row < this.rows && col < this.cols ? "#e6f3ff" : "#fff"
      });
    }
    this.label.textContent = `${this.rows} x ${this.cols}`;
  }
  show(x, y) {
    index.css(this.container, {
      "left": `${x}px`,
      "top": `${y}px`,
      "display": "block",
      "margin-top": "1px"
    });
  }
  hide() {
    index.css(this.container, { display: "none" });
  }
  destroy() {
    this.removeListenersArray.forEach((remove) => remove());
    this.removeListenersArray = [];
    this.hide();
    if (this.container.parentNode) {
      this.container.parentNode.removeChild(this.container);
    }
    this.rows = 0;
    this.cols = 0;
    return null;
  }
}
exports.default = TableSelector;
//# sourceMappingURL=table-selector.cjs.js.map