Config updates to support multiple trigger characters (a1c9ff0c) · Commits · Isfand Yar Khan / angular-mentions

README.md

+39 −0

Original line number	Original line	Diff line number	Diff line
	@@ -56,6 +56,7 @@ The following optional configuration items can be used.

	\| Option \| Default \| Description \|		\| Option \| Default \| Description \|
	\| --- \| --- \| --- \|		\| --- \| --- \| --- \|
			\| 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. \|		\| 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. \|		\| mentionSelect \| \| An optional function to format the selected item before inserting the text. \|
	@@ -71,3 +72,41 @@ For Example:
	#### Output Events		#### Output Events

	- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.		- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.

			### Alternative Usage

			The component can also be used by only specifying the mentionConfig object:

			```html
			<input type="text" [mentionConfig]="mentionConfig">
			```

			With the following structure:

			```javascript
			let mentionConfig = {
			items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
			triggerChar: "@",
			...
			}
			```

			In this way, multiple config objects can be used:

			```javascript
			let mentionConfig = {
			configs: [
			{
			items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
			triggerChar: '@'
			},
			{
			items: [ "Red", "Yellow", "Green", ... ],
			triggerChar: '#'
			},
			}]
			}
			```
			This allows different lists and trigger characters to be configured.

			Note that becuase objects are mutable, changes to the items within the config will not be picked up unless a new mentionConfig object is created.

e2e/app.po.ts

+8 −0

Original line number	Original line	Diff line number	Diff line
	@@ -5,10 +5,18 @@ export class AngularMentionsPage {
	return browser.get('/');		return browser.get('/');
	}		}

			navigateToDemoConfig() {
			return browser.get('/config');
			}

	getHeadingText() {		getHeadingText() {
	return element(by.css('app-root h1')).getText();		return element(by.css('app-root h1')).getText();
	}		}

			getSubHeadingText() {
			return element(by.css('app-root h3')).getText();
			}

	getValue(el, tagName) {		getValue(el, tagName) {
	if (tagName=="input" \|\| tagName=="textarea") {		if (tagName=="input" \|\| tagName=="textarea") {
	return el.getAttribute('value');		return el.getAttribute('value');

e2e/demo-config.e2e-spec.ts

0 → 100644

+61 −0

Original line number	Original line	Diff line number	Diff line
			import { element, by, protractor } from 'protractor';

			import { AngularMentionsPage } from './app.po';

			/**
			* Page is configured to test:
			* - complex items using labelKey
			* - format function
			* - different trigger chars
			* - updating configured items
			*
			* Not tested:
			* - combining mentions and mentions in config ? what behvaior is this?
			*/

			describe('angular-mentions demo-config', function() {
			var EC = protractor.ExpectedConditions;
			let page: AngularMentionsPage;

			beforeEach(() => {
			page = new AngularMentionsPage();
			page.navigateToDemoConfig();
			expect(page.getHeadingText()).toEqual('Angular Mentions');
			expect(page.getSubHeadingText()).toEqual('Configuration');
			})

			it('test mentions config', () => {
			let el = element.all(by.css('input')).first();

			el.getTagName().then(function(tagName){
			let menu = element(by.css('.dropdown-menu'));
			el.click();
			expect(page.getValue(el, tagName)).toEqual('');

			// basic mention
			el.sendKeys('Hello @Gav');
			expect(menu.isDisplayed()).toBe(true);
			expect(page.getValue(el, tagName)).toEqual('Hello @Gav');

			// select the mention
			el.sendKeys(protractor.Key.ENTER);
			expect(menu.isDisplayed()).toBe(false);
			expect(page.getValue(el, tagName)).toEqual('Hello @Gavin');

			// select another mention
			el.sendKeys(' and #');
			expect(element(by.css('.dropdown-menu li:nth-child(2) a')).getText()).toEqual('User 2');
			element(by.css('.dropdown-menu li:nth-child(3) a')).click();
			expect(page.getValue(el, tagName)).toEqual('Hello @Gavin and USER3');

			// press button to add a user, testing updates to the data
			element(by.buttonText('Add User')).click();
			el.click();
			el.sendKeys(' or #');
			expect(element(by.css('.dropdown-menu li:nth-child(4) a')).getText()).toEqual('User 4');
			element(by.css('.dropdown-menu li:nth-child(4) a')).click();
			expect(page.getValue(el, tagName)).toEqual('Hello @Gavin and USER3 or USER4');
			});
			});

			});

src/app/app.component.html

+16 −11

Original line number	Original line	Diff line number	Diff line
	@@ -4,6 +4,8 @@
	<p style="color:grey">Supports auto-complete for mentions in text input fields, text areas,		<p style="color:grey">Supports auto-complete for mentions in text input fields, text areas,
	and content editable fields. Try entering some @names below.</p>		and content editable fields. Try entering some @names below.</p>

			<ng-container *ngIf="!test">

	<h3>Minimal</h3>		<h3>Minimal</h3>
	<input [mention]="items" class="form-control" type="text">		<input [mention]="items" class="form-control" type="text">

	@@ -16,10 +18,13 @@ and content editable fields. Try entering some @names below.</p>
	<h3>Embedded Editor</h3>		<h3>Embedded Editor</h3>
	<app-demo-tinymce></app-demo-tinymce>		<app-demo-tinymce></app-demo-tinymce>

			</ng-container>

	<!-- other demos that can be enabled -->		<!-- other demos that can be enabled -->
	<!-- <app-demo-async></app-demo-async> -->		<app-demo-async *ngIf="test=='async'"></app-demo-async>
	<!-- <app-demo-options></app-demo-options> -->		<app-demo-config *ngIf="test=='config'"></app-demo-config>
	<!-- <app-demo-template></app-demo-template> -->		<app-demo-options *ngIf="test=='options'"></app-demo-options>
			<app-demo-template *ngIf="test=='template'"></app-demo-template>

	<br><p style="color:grey">angular-mentions on <a href="https://github.com/dmacfarlane/angular-mentions">Github</a></p>		<br><p style="color:grey">angular-mentions on <a href="https://github.com/dmacfarlane/angular-mentions">Github</a></p>
	<a href="https://github.com/dmacfarlane/angular-mentions"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>		<a href="https://github.com/dmacfarlane/angular-mentions"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

src/app/app.component.ts

+8 −0

Original line number	Original line	Diff line number	Diff line
	@@ -12,4 +12,12 @@ import { COMMON_NAMES } from './common-names';
	})		})
	export class AppComponent {		export class AppComponent {
	items: string[] = COMMON_NAMES;		items: string[] = COMMON_NAMES;
			get test() {
			switch (window.location.pathname) {
			case '/config' : return 'config';
			case '/async' : return 'async';
			case '/options' : return 'options';
			case '/async' : return 'template';
			}
			}
	}		}