src/redakcja/static/js/wiki/caret.js

   1 class Caret {
   2     constructor(view) {
   3         let self = this;
   4         self.view = view;
   5         self.singleClick = false;
   6
   7         let caret = this.element = $('<nobr><span id="caret"><textarea></textarea></span></nobr>');
   8
   9         // When user writes into caret, add it to the document.
  10         $('textarea', caret).on('input', function() {
  11             let v = $(this).val();
  12             $(this).val('');
  13             self.insertChar(v);
  14
  15         });
  16
  17         // On click on x-node element, set caret position.
  18         self.view.on('click', '*[x-node]', function(e) {
  19             if (e.redakcja_caret_ignore) return;
  20             e.redakcja_caret_ignore = true;
  21
  22             if (self.singleClick) {
  23                 self.singleClick = false;
  24                 return;
  25             }
  26
  27             self.detach();
  28
  29             var selection = window.getSelection();
  30             if (!selection.isCollapsed) return;
  31             var anchorNode = selection.anchorNode;
  32             if (anchorNode.nodeType != Node.TEXT_NODE) return;
  33             // This selection is not from this click. Ignore it.
  34             if (anchorNode.parentNode != e.target) return;
  35             // Is selection still inside a node?
  36             if (!$(anchorNode).closest('[x-node]').length) return;
  37             if ($(anchorNode).parents('[x-annotation-box]').not('.editing').length) return;
  38
  39             self.singleClick = true;
  40             setTimeout(function() {
  41                 if (self.singleClick) {
  42                     $.wiki.activePerspective().flush();
  43                     self.element.insertBefore(
  44                         anchorNode.splitText(
  45                             selection.anchorOffset
  46                         )
  47                     )
  48                     self.focus();
  49                 }
  50                 self.singleClick = false;
  51             }, 250);
  52
  53         });
  54
  55         self.element.on('keydown', function(e) {
  56             // TODO:
  57             // delete selection?
  58
  59             // cases:
  60             // we are in <akap> (no going up)
  61             // we are in <wyroznienie> (can go up)
  62             // we are next to <wyroznienie> (can go inside)
  63
  64             switch (e.key) {
  65             case "ArrowRight":
  66                 if (e.shiftKey) {
  67                     self.detach();
  68                     return;
  69                 }
  70
  71                 self.moveRight();
  72                 break;
  73             case "ArrowLeft":
  74                 if (e.shiftKey) {
  75                     self.detach();
  76                     return;
  77                 }
  78
  79                 self.moveLeft();
  80                 break;
  81             case "ArrowUp":
  82                 if (e.shiftKey) {
  83                     self.detach();
  84                     return;
  85                 }
  86                 break;
  87             case "ArrowDown":
  88                 if (e.shiftKey) {
  89                     self.detach();
  90                     return;
  91                 }
  92                 break;
  93             case "Backspace":
  94                 self.deleteBefore();
  95                 break;
  96             case "Delete":
  97                 self.deleteAfter();
  98                 break;
  99             case "Enter":
 100                 self.splitBlock();
 101                 break;
 102                 //                default:
 103                 //                    console.log('key', e.key, e.code);
 104             }
 105         })
 106     }
 107
 108     get attached() {
 109         return this.element.parent().length;
 110     }
 111
 112     detach() {
 113         let p;
 114         if (this.attached) {
 115             p = this.element.parent()[0]
 116             this.element.detach();
 117             p.normalize()
 118         }
 119     }
 120
 121     focus() {
 122         $("textarea", self.element).focus();
 123     }
 124
 125     normalize() {
 126         this.element.parent()[0].normalize();
 127     }
 128
 129     insert(elem) {
 130         elem.insertBefore(this.element);
 131     }
 132
 133     insertChar(ch) {
 134         this.insert(
 135             $(document.createTextNode(ch))
 136         );
 137         this.normalize();
 138     }
 139
 140     deleteBefore() {
 141         let contents = this.element.parent().contents();
 142         // Find the text before caret.
 143         let textBefore = contents[contents.index(this.element) - 1];
 144
 145         // Should be text, but what if not?
 146         textBefore.textContent = textBefore.textContent.substr(0, textBefore.textContent.length - 1);
 147         this.normalize();
 148
 149     }
 150
 151     deleteAfter() {
 152         let contents = this.element.parent().contents();
 153         // Find the text after caret.
 154         let textAfter = contents[contents.index(this.element) + 1];
 155         textAfter.textContent = textAfter.textContent.substr(1);
 156     }
 157
 158     splitBlock() {
 159         let splitter = this.element;
 160         let parent, newParent, splitIndex, index;
 161
 162         while (!splitter.is('div[x-node]')) {
 163             parent = splitter.parent();
 164             splitIndex = parent.contents().index(splitter);
 165
 166             if (parent.is('[x-annotation-box]')) {
 167                 // We're splitting inside an inline-style annotation.
 168                 // Convert into a block-style annotation now.
 169                 let p = $('<div x-editable="true" x-node="akap">');
 170                 parent.contents().appendTo(p);
 171                 parent.empty();
 172                 parent.append(p);
 173                 parent = p;
 174             }
 175
 176             newParent = parent.clone();
 177             index = parent.contents().length - 1;
 178             while (index >= splitIndex) {
 179                 newParent.contents()[index].remove();
 180                 --index;
 181             }
 182             while (index >= 0) {
 183                 parent.contents()[index].remove();
 184                 -- index;
 185             }
 186             newParent.insertBefore(parent);
 187
 188             splitter = parent;
 189         }
 190     }
 191
 192     moveLeft() {
 193         this.move({
 194             move: -1,
 195             edge: (i, l) => {return !i;},
 196             enter: (l) => {return l - 1;},
 197             splitTarget: (t) => {return t.splitText(t.length - 1);},
 198             noSplitTarget: (t) => {return t.splitText(t.length);},
 199         })
 200     }
 201
 202     moveRight() {
 203         this.move({
 204             move: 1,
 205             edge: (i, l) => {return i == l - 1;},
 206             enter: (l) => {return 0;},
 207             splitTarget: (t) => {return t.splitText(1);},
 208             noSplitTarget: (t) => {return t;},
 209         })
 210     }
 211
 212     move(opts) {
 213         if (!this.attached) return;
 214
 215         $.wiki.activePerspective().flush();
 216
 217         this.normalize();
 218
 219         let contents = this.element.parent().contents();
 220         let index = contents.index(this.element);
 221         let target, moved, oldparent;
 222
 223         let parent = this.element.parent()[0];
 224
 225         if (opts.edge(index, contents.length)) {
 226             // We're at the end -- what to do?
 227             // can we go up?
 228
 229             if (parent.nodeName == 'EM') {
 230                 oldparent = parent;
 231                 parent = parent.parentNode;
 232                 contents = $(parent).contents();
 233                 index = contents.index(oldparent);
 234             }
 235         }
 236
 237         index += opts.move;
 238         target = contents[index];
 239         moved = false;
 240
 241         while (target !== undefined && target.nodeType == Node.ELEMENT_NODE) {
 242             // we've encountered a node.
 243             // can we go inside?
 244
 245             if (target.nodeName == 'EM') {
 246                 // enter
 247                 parent = $(target);
 248                 contents = parent.contents();
 249                 index = opts.enter(contents.length);
 250                 target = contents[index];
 251
 252                 // what if it has no elements?
 253             } else {
 254                 // skip
 255                 index += opts.move; // again, what if end?
 256                 target = contents[index];
 257                 moved = true;
 258             }
 259
 260             // if editable?
 261             // what if editable but empty?
 262
 263         }
 264
 265         if (target !== undefined && target.nodeType == Node.TEXT_NODE ) {
 266             if (!moved) {
 267                 target = opts.splitTarget(target);
 268             } else {
 269                 target = opts.noSplitTarget(target);
 270             }
 271
 272             this.element.insertBefore(target);
 273         }
 274         this.normalize();
 275         this.focus();
 276     }
 277 }