Commit a9a2e53e authored by dmacfarlane's avatar dmacfarlane
Browse files

Option to display menu above text

parent b831dd93

README.md

+5 −4
Original line number Original line Diff line number Diff line
@@ -56,13 +56,14 @@ The following optional configuration items can be used. 




| Option        | Default  | Description |

| Option        | Default  | Description |

| ---           | ---      | ---         |

| ---           | ---      | ---         |

| items         |          | An array of strings or objects to suggest.

| items         |          | An array of strings or objects to suggest. |

| triggerChar   | @        | The character that will trigger the menu behavior. |

| triggerChar   | @        | The character that will trigger the menu behavior. |

| maxItems      |          | Limit the number of items shown in the pop-up menu. The default is no limit. |

| mentionSelect |          | An optional function to format the selected item before inserting the text. |

| labelKey      | label    | The field to be used as the item label (when the items are objects). |

| labelKey      | label    | The field to be used as the item label (when the items are objects). |

| disableSort   | false    | Dsiable sorting of suggested items. |

| disableSort   | false    | Disable sorting of suggested items. |

| disableSearch | false    | Disable internal filtering (only useful if async search is used). |

| disableSearch | false    | Disable internal filtering (only useful if async search is used). |

| dropUp        | false    | Show the menu above the cursor instead of below. |

| maxItems      | ∞        | Limit the number of items shown in the text. The default is no limit. |

| mentionSelect |          | An optional function to format the selected item before inserting the text. |





For Example: 

For Example:

src/app/demo-config/demo-config.component.ts

+2 −1
Original line number Original line Diff line number Diff line 
import { Component } from '@angular/core';

import { Component } from '@angular/core';

import { COMMON_NAMES } from '../common-names';

import { COMMON_NAMES } from '../common-names';

import { MentionConfig } from 'mention/mention-config';





@Component({

@Component({

  selector: 'app-demo-config',

  selector: 'app-demo-config',
@@ -29,7 +30,7 @@ export class DemoConfigComponent { 
    return item['value'].toUpperCase();

    return item['value'].toUpperCase();

  }

  }





  mentionConfig = {

  mentionConfig:MentionConfig = {

    mentions: [

    mentions: [

      {

      {

        items: this.complexItems,

        items: this.complexItems,

src/mention/mention-config.ts

+4 −1
Original line number Original line Diff line number Diff line
@@ -7,7 +7,7 @@ export interface MentionConfig extends Mentions { 




export interface Mentions {

export interface Mentions {

  // an array of strings or objects to suggest

  // an array of strings or objects to suggest

  items:any[];

  items?:any[];

  

  

  // the character that will trigger the menu behavior  

  // the character that will trigger the menu behavior  

  triggerChar?:string;

  triggerChar?:string;
@@ -21,6 +21,9 @@ export interface Mentions { 
  // option to disable sorting

  // option to disable sorting

  disableSort?:boolean;

  disableSort?:boolean;





  // display menu above text instead of below

  dropUp?:boolean;

  

  // optional function to format the selected item before inserting the text

  // optional function to format the selected item before inserting the text

  mentionSelect?:(item: any) => (string);

  mentionSelect?:(item: any) => (string);

}
 
}
 
 No newline at end of file

src/mention/mention-list.component.ts

+5 −3
Original line number Original line Diff line number Diff line
@@ -52,7 +52,7 @@ export class MentionListComponent implements OnInit { 
  items = [];

  items = [];

  activeIndex: number = 0;

  activeIndex: number = 0;

  hidden: boolean = false;

  hidden: boolean = false;

  constructor(private _element: ElementRef) {}

  constructor(private element: ElementRef) {}





  ngOnInit() {

  ngOnInit() {

    if (!this.itemTemplate) {

    if (!this.itemTemplate) {
@@ -61,7 +61,7 @@ export class MentionListComponent implements OnInit { 
  }

  }





  // lots of confusion here between relative coordinates and containers

  // lots of confusion here between relative coordinates and containers

  position(nativeParentElement: HTMLInputElement, iframe: HTMLIFrameElement = null) {

  position(nativeParentElement: HTMLInputElement, iframe: HTMLIFrameElement = null, dropUp: boolean) {

    let coords = { top: 0, left: 0 };

    let coords = { top: 0, left: 0 };

    if (isInputOrTextAreaElement(nativeParentElement)) {

    if (isInputOrTextAreaElement(nativeParentElement)) {

      // parent elements need to have postition:relative for this to work correctly?

      // parent elements need to have postition:relative for this to work correctly?
@@ -85,7 +85,9 @@ export class MentionListComponent implements OnInit { 
      coords.top = caretRelativeToView.top - parentRelativeToContainer.top + nativeParentElement.offsetTop - scrollTop;

      coords.top = caretRelativeToView.top - parentRelativeToContainer.top + nativeParentElement.offsetTop - scrollTop;

      coords.left = caretRelativeToView.left - parentRelativeToContainer.left + nativeParentElement.offsetLeft - scrollLeft;

      coords.left = caretRelativeToView.left - parentRelativeToContainer.left + nativeParentElement.offsetLeft - scrollLeft;

    }

    }

    let el: HTMLElement = this._element.nativeElement;

    let el: HTMLElement = this.element.nativeElement;

    this.list.nativeElement.style.marginBottom = dropUp ? '24px' : null;

    el.className = dropUp ? 'dropup' : null;

    el.style.position = "absolute";

    el.style.position = "absolute";

    el.style.left = coords.left + 'px';

    el.style.left = coords.left + 'px';

    el.style.top = coords.top + 'px';

    el.style.top = coords.top + 'px';

src/mention/mention.directive.ts

+2 −2
Original line number Original line Diff line number Diff line
@@ -288,7 +288,7 @@ export class MentionDirective implements OnChanges { 
      let componentFactory = this._componentResolver.resolveComponentFactory(MentionListComponent);

      let componentFactory = this._componentResolver.resolveComponentFactory(MentionListComponent);

      let componentRef = this._viewContainerRef.createComponent(componentFactory);

      let componentRef = this._viewContainerRef.createComponent(componentFactory);

      this.searchList = componentRef.instance;

      this.searchList = componentRef.instance;

      this.searchList.position(nativeElement, this.iframe);

      this.searchList.position(nativeElement, this.iframe, this.activeConfig.dropUp);

      this.searchList.itemTemplate = this.mentionListTemplate;

      this.searchList.itemTemplate = this.mentionListTemplate;

      componentRef.instance['itemClick'].subscribe(() => {

      componentRef.instance['itemClick'].subscribe(() => {

        nativeElement.focus();

        nativeElement.focus();
@@ -299,7 +299,7 @@ export class MentionDirective implements OnChanges { 
    else {

    else {

      this.searchList.labelKey = this.activeConfig.labelKey;

      this.searchList.labelKey = this.activeConfig.labelKey;

      this.searchList.activeIndex = 0;

      this.searchList.activeIndex = 0;

      this.searchList.position(nativeElement, this.iframe);

      this.searchList.position(nativeElement, this.iframe, this.activeConfig.dropUp);

      window.setTimeout(() => this.searchList.resetScroll());

      window.setTimeout(() => this.searchList.resetScroll());

    }

    }

  }

  }