Merge pull request #81 from dmacfarlane/config (19707ed5) · Commits · Isfand Yar Khan / angular-mentions

README.md

+43 −2

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

		\| Option \| Default \| Description \|
		\| --- \| --- \| --- \|
		\| items \| \| An array of strings or objects to suggest. \|
		\| 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). \|
		\| disableSort \| false \| Disable sorting of suggested items. \|
		\| 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:

		@@ -71,3 +74,41 @@ For Example:
		#### Output Events

		- `(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.e2e-spec.ts

+11 −0

Original line number	Diff line number	Diff line
		@@ -59,6 +59,17 @@ describe('angular-mentions app', function() {
		el.sendKeys(protractor.Key.BACK_SPACE, protractor.Key.BACK_SPACE);
		expect(page.getValue(el, tagName)).toEqual('');

		// another variation of issue #59
		el.sendKeys('xx @');
		expect(menu.isDisplayed()).toBe(true);
		el.sendKeys(protractor.Key.BACK_SPACE);
		expect(menu.isDisplayed()).toBe(false);
		el.sendKeys('xa');
		expect(menu.isDisplayed()).toBe(false);
		// el.clear(); // clear does not work for tinymce
		el.sendKeys((new Array(6)).fill(protractor.Key.BACK_SPACE).join(''));
		expect(page.getValue(el, tagName)).toEqual('');

		// popup menu
		el.sendKeys('Hello @');
		expect(menu.isDisplayed()).toBe(true);

e2e/app.po.ts

+8 −0

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

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

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

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

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

e2e/demo-config.e2e-spec.ts

0 → 100644

+61 −0

Original line number	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');
		});
		});

		});

package.json

+1 −1

Original line number	Diff line number	Diff line
		{
		"name": "angular-mentions",
		"version": "0.8.0",
		"version": "0.9.0",
		"description": "Angular mentions for text fields.",
		"keywords": [
		"angular",