Source: xxe/view/CaretPlaceholder.js

  1. /**
  2.  * Draw a caret placeholder when the document view looses the keyboard focus.
  3.  */
  4. class CaretPlaceholder {
  5.     constructor(docView) {
  6.         this._docView = docView;
  7.         
  8.         this._disabled = false;
  9.         this._caret = null;
  10.         
  11.         const activeElem = document.activeElement;
  12.         this._docViewHasFocus = (activeElem !== null &&
  13.                                  docView.contains(activeElem));
  15.         this._onFocusin = this.onFocusin.bind(this);
  16.         docView.addEventListener("focusin", this._onFocusin);
  17.         this._onFocusout = this.onFocusout.bind(this);
  18.         docView.addEventListener("focusout", this._onFocusout);
  19.     }
  21.     dispose() {
  22.         if (this._onFocusin) {
  23.             this._docView.removeEventListener("focusin", this._onFocusin);
  24.             this._onFocusin = null;
  25.         }
  26.         if (this._onFocusout) {
  27.             this._docView.removeEventListener("focusout", this._onFocusout);
  28.             this._onFocusout = null;
  29.         }
  30.     }
  32.     onFocusin(event) {
  33.         // Do not consume event.
  34.         if (!this._docViewHasFocus) {
  35.             this._docViewHasFocus = true;
  37.             if (!this._disabled) {
  38.                 this.hide();
  39.             }
  40.         }
  41.     }
  43.     onFocusout(event) {
  44.         // Do not consume event.
  45.         if (this._docViewHasFocus) {
  46.             let receivingFocus = event.relatedTarget;
  47.             if (receivingFocus === null ||
  48.                 !this._docView.contains(receivingFocus)) {
  49.                 this._docViewHasFocus = false;
  51.                 if (!this._disabled) {
  52.                     this.show();
  53.                 }
  54.             }
  55.         }
  56.     }
  58.     get disabled() {
  59.         return this._disabled;
  60.     }
  61.     
  62.     set disabled(disable) {
  63.         this._disabled = disable;
  64.     }
  65.     
  66.     hide() {
  67.         this.erase();
  68.         
  69.         // "Redraw" actual caret because in most cases it is lost.
  70.         TextHighlight.drawDot(this._docView.dot, this._docView.dotOffset);
  71.     }
  73.     erase() {
  74.         // Do not make any assumption about caret and its the parent.
  75.         
  76.         let caret = this._caret;
  77.         if (caret !== null) {
  78.             this._caret = null;
  80.             let container = caret.parentNode;
  81.             if (container !== null && container.isConnected) {
  82.                 container.removeChild(caret);
  84.                 container = NodeView.getTextualContent(container);
  85.                 if (container !== null) {
  86.                     NodeView.normalizeTextualContent(container);
  87.                 }
  88.             }
  89.         }
  90.     }
  91.     
  92.     show() {
  93.         const dot = this._docView.dot;
  94.         if (dot !== null && !this._docView.hasTextSelection()) {
  95.             this.erase();
  96.             this.draw(dot, this._docView.dotOffset);
  97.         }
  98.     }
  99.     
  100.     draw(dot, dotOffset) {
  101.         // Do not make any assumption about the contents of dotContent.
  102.         // dotContent may even be null in case of a TextNode's view having
  103.         // replaced content.
  104.         
  105.         let dotContent = NodeView.getTextualContent(dot);
  106.         if (dotContent !== null) {
  107.             let [charsNode, charOffset] =
  108.                 NodeView.textualContentToCharOffset(dotContent, dotOffset);
  109.             if (charsNode !== null) {
  110.                 this._caret = document.createElement("a");
  111.                 this._caret.classList.add("xxe-caret");
  113.                 if (charOffset === 0) {
  114.                     charsNode.parentNode.insertBefore(this._caret, charsNode);
  115.                 } else if (charOffset === charsNode.length) {
  116.                     charsNode.parentNode.insertBefore(this._caret,
  117.                                                       charsNode.nextSibling);
  118.                 } else {
  119.                     let beforeNode = charsNode.splitText(charOffset);
  120.                     charsNode.parentNode.insertBefore(this._caret, beforeNode);
  121.                 }
  123.                 if (dotContent.textContent.length === 0) {
  124.                     this._caret.classList.add("xxe-caret-empty");
  125.                 }
  126.             } else {
  127.                 console.error(`CaretPlaceholder.draw: INTERNAL ERROR: \
  128. cannot convert dot offset ${dotOffset} to char offset in \
  129. ${DOMUtil.dumpNode(dotContent)}`);
  130.             }
  131.         }
  132.     }
  133. }