Commit d11939a1 authored by dmacfarlane's avatar dmacfarlane
Browse files

Improved list positioning.

parent 84e175d0

app/tinymce.component.ts

+1 −1
Original line number Diff line number Diff line
@@ -13,7 +13,7 @@ declare var tinymce: any; 
@Component({

    selector: 'tinymce',

    template: `

    <div class="form-group">

    <div class="form-group" style="position:relative">

      <div [mention]="items" #mention></div>

      <div>

        <textarea class="hidden" cols="60" rows="4" id="tmce">{{htmlContent}}</textarea>

mention/mention-list.ts

+17 −1
Original line number Diff line number Diff line
@@ -43,8 +43,24 @@ export class MentionList { 
      coords.top = nativeParentElement.offsetTop + coords.top + 16;

      coords.left = nativeParentElement.offsetLeft + coords.left;

    }

    else if (iframe) {

      let context = {iframe:iframe,parent:iframe.offsetParent};

      coords = getContentEditableCaretCoords(context);

    }

    else {

      coords = getContentEditableCaretCoords(nativeParentElement, iframe);

      // lots of confusion here between relative coordinates and containers

      var doc = document.documentElement;

      var scrollLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);

      var scrollTop  = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);



      // bounding rectables are relative to view, offsets are relative to container?

      let caretRelativeToView = getContentEditableCaretCoords({iframe:iframe});

      let parentRelativeToContainer = nativeParentElement.getBoundingClientRect();



      coords.top = caretRelativeToView.top - parentRelativeToContainer.y +

                   nativeParentElement.offsetTop - scrollTop;

      coords.left = caretRelativeToView.left - parentRelativeToContainer.x +

                    nativeParentElement.offsetLeft - scrollLeft;

    }

    this._element.nativeElement.style.position = "absolute";

    this._element.nativeElement.style.left = coords.left + 'px';

mention/mention-utils.ts

+9 −8
Original line number Diff line number Diff line
@@ -70,11 +70,6 @@ export function getCaretPosition(el, iframe=null) { 
  }

}



export function getContentEditableCaretCoords(nativeParentElement, iframe) {

  let ctx = iframe ? { iframe: iframe } : null;

  return getContentEditableCaretPositionMentIo(ctx);

}



// Based on ment.io functions...

//
@@ -94,7 +89,7 @@ function getWindowSelection(iframe) { 
    }

}



function getContentEditableCaretPositionMentIo(ctx/*, selectedNodePosition*/) {

export function getContentEditableCaretCoords(ctx) {

    var markerTextChar = '\ufeff';

    var markerId = 'sel_' + new Date().getTime() + '_' + Math.random().toString().substr(2);

    var doc = getDocument(ctx?ctx.iframe:null);
@@ -121,16 +116,19 @@ function getContentEditableCaretPositionMentIo(ctx/*, selectedNodePosition*/) { 
        top: markerEl.offsetHeight

    };



    localToGlobalCoordinates(ctx, markerEl, coordinates);

    localToRelativeCoordinates(ctx, markerEl, coordinates);



    markerEl.parentNode.removeChild(markerEl);

    return coordinates;

}



function localToGlobalCoordinates(ctx, element, coordinates) {

function localToRelativeCoordinates(ctx, element, coordinates) {

    var obj = element;

    var iframe = ctx ? ctx.iframe : null;

    while(obj) {

        if (ctx.parent!=null&&ctx.parent==obj) {

          break;

        }

        coordinates.left += obj.offsetLeft + obj.clientLeft;

        coordinates.top += obj.offsetTop + obj.clientTop;

        obj = obj.offsetParent;
@@ -142,6 +140,9 @@ function localToGlobalCoordinates(ctx, element, coordinates) { 
    obj = element;

    iframe = ctx ? ctx.iframe : null;

    while(obj !== getDocument(null).body && obj!=null) {

        if (ctx.parent!=null&&ctx.parent==obj) {

          break;

        }

        if (obj.scrollTop && obj.scrollTop > 0) {

            coordinates.top -= obj.scrollTop;

        }

mention/mention.ts

+1 −1
Original line number Diff line number Diff line
@@ -69,7 +69,7 @@ export class Mention { 
        charPressed = String.fromCharCode(event.which || event.keyCode);

      }

    }

    console.log("keyHandler", this.mentionStart, pos, val, charPressed, event);

    //console.log("keyHandler", this.mentionStart, pos, val, charPressed, event);

    if (charPressed=="@") {

      this.mentionStart = pos;

      this.escapePressed = false;