BookStack Code Mirror - bookstack/blob - resources/js/editor/menu/ColorPickerGrid.js

   1 import crel from "crelt"
   2 import {prefix} from "./menu-utils";
   3 import {toggleMark} from "prosemirror-commands";
   4
   5 class ColorPickerGrid {
   6
   7     constructor(markType, attrName, colors) {
   8         this.markType = markType;
   9         this.colors = colors
  10         this.attrName = attrName;
  11     }
  12
  13     // :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
  14     // Renders the submenu.
  15     render(view) {
  16
  17         const colorElems = [];
  18         for (const color of this.colors) {
  19             const elem = crel("div", {class: prefix + "-color-grid-item", style: `background-color: ${color};`});
  20             colorElems.push(elem);
  21         }
  22
  23         const wrap = crel("div", {class: prefix + "-color-grid-container"}, colorElems);
  24         wrap.addEventListener('click', event => {
  25             if (event.target.classList.contains(prefix + "-color-grid-item")) {
  26                 const color = event.target.style.backgroundColor;
  27                 const attrs = {[this.attrName]: color};
  28                 toggleMark(this.markType, attrs)(view.state, view.dispatch, view, event);
  29             }
  30         });
  31
  32         function update(state) {
  33             return true;
  34         }
  35
  36         return {dom: wrap, update}
  37     }
  38 }
  39
  40 export default ColorPickerGrid;