Inline Toolbar moving

src/components/modules/blockManager.js

@@ -544,4 +544,4 @@ class Blocks {
 
     return instance.get(index);
   }
-}
+}

src/components/modules/caret.js

@@ -9,11 +9,11 @@
  * @version 2.0.0
  */
 
+import Selection from '../selection';
+
 /**
  * @typedef {Caret} Caret
  */
-import Selection from '../Selection';
-
 export default class Caret extends Module {
   /**
    * @constructor

src/components/modules/listeners.js

@@ -146,23 +146,20 @@ export default class Listeners extends Module {
    * @return {Array}
    */
   findAll(element, eventType, handler) {
-    let foundAllListeners,
-      foundByElements = [],
-      foundByEventType = [],
-      foundByHandler = [];
-
-    if (element)
-      foundByElements = this.findByElement(element);
-
-    if (eventType)
-      foundByEventType = this.findByType(eventType);
-
-    if (handler)
-      foundByHandler = this.findByHandler(handler);
-
-    foundAllListeners = foundByElements.concat(foundByEventType, foundByHandler);
+    let found,
+      foundByElements = element ? this.findByElement(element) : [];
+      // foundByEventType = eventType ? this.findByType(eventType) : [],
+      // foundByHandler = handler ? this.findByHandler(handler) : [];
+
+    if (element && eventType && handler) {
+      found = foundByElements.filter( event => event.eventType === eventType && event.handler === handler );
+    } else if (element && eventType) {
+      found = foundByElements.filter( event => event.eventType === eventType);
+    } else {
+      found = foundByElements;
+    }
 
-    return foundAllListeners;
+    return found;
   }
 
   /**
@@ -175,4 +172,4 @@ export default class Listeners extends Module {
 
     this.allListeners = [];
   }
-}
+}

src/components/modules/toolbar-inline.ts

@@ -8,37 +8,52 @@
  */
 declare var Module: any;
 declare var $: any;
+declare var _: any;
+import Selection from '../selection';
 
 /**
  * DOM Elements
  */
-interface InlineToolbarNodes {
-  wrapper?: Element; // main wrapper
+interface INodes {
+  wrapper?: HTMLElement; // main wrapper
 }
 
 /**
  * CSS
  */
-interface InlineToolbarCSS {
+interface ICSS {
   inlineToolbar: string;
 }
 
+/**
+ * Coordinates
+ */
+interface ICoords {
+  x: number;
+  y: number;
+}
+
 export default class InlineToolbar extends Module {
 
   /**
    * Inline Toolbar elements
    */
-  private nodes: InlineToolbarNodes = {
+  private nodes: INodes = {
       wrapper: null,
   };
 
   /**
    * CSS styles
    */
-  private CSS: InlineToolbarCSS = {
+  private CSS: ICSS = {
       inlineToolbar: 'ce-inline-toolbar',
   };
 
+  /**
+   * Margin above/below the Toolbar
+   */
+  private readonly toolbarVerticalMargin: number = 10;
+
   /**
    * @constructor
    */
@@ -62,7 +77,56 @@ export default class InlineToolbar extends Module {
 
   }
 
+  /**
+   * Move Toolbar to the selected text
+   */
   public move() {
-    // moving
+
+    if (!this.allowedToShow()) {
+      // close
+      return;
+    }
+
+    const selectionCoords: ICoords = Selection.getCoords;
+    const wrapperOffset = this.getWrapperOffset();
+    const toolbarHeight = this.nodes.wrapper.offsetHeight || 40;
+
+    const newCoords: ICoords = {
+      x: selectionCoords.x - wrapperOffset.left,
+      y: selectionCoords.y
+      + window.scrollY
+      - wrapperOffset.top
+      + toolbarHeight
+      + this.toolbarVerticalMargin,
+    };
+
+    this.nodes.wrapper.style.left = Math.floor(newCoords.x) + 'px';
+    this.nodes.wrapper.style.top = Math.floor(newCoords.y) + 'px';
+
+  }
+
+  /**
+   * Need to show Inline Toolbar or not
+   */
+  private allowedToShow(): boolean {
+
+    /**
+     * @todo check for empty selection, tagsConflictsWithSelection, currentBlock 'inlineToolbar' settings
+     */
+    return true;
+  }
+
+  /**
+   * Returns editor wrapper offset
+   * @return {{bottom: number, top: number, left: number, right: number, height: number: width: number}}
+   */
+  private getWrapperOffset() {
+    const rect = this.Editor.UI.nodes.wrapper.getBoundingClientRect();
+
+    /**
+     * @todo
+     * add cache
+     */
+    return rect;
   }
 }

src/components/selection.js

@@ -1,5 +1,6 @@
 /**
  * Working with selection
+ * @typedef {Selection} Selection
  */
 export default class Selection {
   /**
@@ -50,4 +51,73 @@ export default class Selection {
 
     return selection ? selection.isCollapsed : null;
   }
-}
+
+  /**
+   * Calculates position of selected text
+   * @return {{x: number, y: number}}
+   */
+  static get getCoords() {
+    let sel = document.selection, range, rect;
+    let coords = {
+      x: 0,
+      y: 0
+    };
+
+    if (sel && sel.type !== 'Control') {
+      range = sel.createRange();
+      range.collapse(true);
+      coords.x = range.boundingLeft;
+      coords.y = range.boundingTop;
+
+      return coords;
+    }
+
+    if (!window.getSelection) {
+      _.log('Method window.getSelection is not supported', 'warn');
+      return coords;
+    }
+
+    sel = window.getSelection();
+
+    if (!sel.rangeCount) {
+      _.log('Method Selection.rangeCount() is not supported', 'warn');
+      return coords;
+    }
+
+    range = sel.getRangeAt(0).cloneRange();
+
+    if (range.getClientRects) {
+      range.collapse(true);
+
+      let rects = range.getClientRects();
+
+      if (rects.length > 0) {
+        rect = rects[0];
+        coords.x = rect.left;
+        coords.y = rect.top;
+      }
+    }
+    // Fall back to inserting a temporary element
+    if (coords.x === 0 && coords.y === 0) {
+      let span = document.createElement('span');
+
+      if (span.getClientRects) {
+        // Ensure span has dimensions and position by
+        // adding a zero-width space character
+        span.appendChild( document.createTextNode('\u200b') );
+        range.insertNode(span);
+        rect = span.getClientRects()[0];
+        coords.x = rect.left;
+        coords.y = rect.top;
+        let spanParent = span.parentNode;
+
+        spanParent.removeChild(span);
+
+        // Glue any broken text nodes back together
+        spanParent.normalize();
+      }
+    }
+
+    return coords;
+  }
+}

src/components/utils.js

@@ -168,4 +168,4 @@ export default class Util {
       window.setTimeout(() => method.apply(context, args), timeout);
     };
   }
-};
+};

src/styles/inline-toolbar.css

@@ -1,8 +1,7 @@
 .ce-inline-toolbar {
-    position: absolute;
-    z-index: 2;
     @apply --overlay-pane;
 
     width: 100px;
     height: 40px;
-}
+    transform: translateX(-50%);
+}

src/styles/variables.css

@@ -21,10 +21,11 @@
     --toolbar-buttons-size: 34px;
 
     --overlay-pane: {
+        position: absolute;
         background: #FFFFFF;
         box-shadow: 0 8px 23px -6px rgba(21,40,54,0.31), 22px -14px 34px -18px rgba(33,48,73,0.26);
         border-radius: 4px;
-        position: relative;
+        z-index: 2;
 
         &::before {
             content: '';
@@ -39,4 +40,4 @@
         }
     }
 
-}
+}

tslint.json

@@ -1,6 +1,7 @@
 {
   "extends": "tslint:recommended",
   "rules": {
-    "quotemark": [true, "single"]
+    "quotemark": [true, "single"],
+    "no-console": false
   }
 }