diff --git a/services/web/app/coffee/Features/Contacts/ContactController.coffee b/services/web/app/coffee/Features/Contacts/ContactController.coffee
new file mode 100644
index 0000000000..3fc2160f59
--- /dev/null
+++ b/services/web/app/coffee/Features/Contacts/ContactController.coffee
@@ -0,0 +1,37 @@
+AuthenticationController = require "../Authentication/AuthenticationController"
+ContactManager = require "./ContactManager"
+UserGetter = require "../User/UserGetter"
+logger = require "logger-sharelatex"
+
+module.exports = ContactsController =
+ getContacts: (req, res, next) ->
+ AuthenticationController.getLoggedInUserId req, (error, user_id) ->
+ return next(error) if error?
+ ContactManager.getContactIds user_id, {limit: 50}, (error, contact_ids) ->
+ return next(error) if error?
+ UserGetter.getUsers contact_ids, {
+ email: 1, first_name: 1, last_name: 1, holdingAccount: 1
+ }, (error, contacts) ->
+ return next(error) if error?
+
+ # UserGetter.getUsers may not preserve order so put them back in order
+ positions = {}
+ for contact_id, i in contact_ids
+ positions[contact_id] = i
+ contacts.sort (a,b) -> positions[a._id?.toString()] - positions[b._id?.toString()]
+
+ # Don't count holding accounts to discourage users from repeating mistakes (mistyped or wrong emails, etc)
+ contacts = contacts.filter (c) -> !c.holdingAccount
+
+ contacts = contacts.map(ContactsController._formatContact)
+ res.send({
+ contacts: contacts
+ })
+
+ _formatContact: (contact) ->
+ return {
+ id: contact._id?.toString()
+ email: contact.email
+ first_name: contact.first_name
+ last_name: contact.last_name
+ }
diff --git a/services/web/app/coffee/Features/Contacts/ContactManager.coffee b/services/web/app/coffee/Features/Contacts/ContactManager.coffee
new file mode 100644
index 0000000000..8f08b5ea41
--- /dev/null
+++ b/services/web/app/coffee/Features/Contacts/ContactManager.coffee
@@ -0,0 +1,39 @@
+request = require "request"
+settings = require "settings-sharelatex"
+logger = require "logger-sharelatex"
+
+module.exports = ContactManager =
+ getContactIds: (user_id, options = { limits: 50 }, callback = (error, contacts) ->) ->
+ logger.log {user_id}, "getting user contacts"
+ url = "#{settings.apis.contacts.url}/user/#{user_id}/contacts"
+ request.get {
+ url: url
+ qs: options
+ json: true
+ jar: false
+ }, (error, res, data) ->
+ return callback(error) if error?
+ if 200 <= res.statusCode < 300
+ callback(null, data?.contact_ids or [])
+ else
+ error = new Error("contacts api responded with non-success code: #{res.statusCode}")
+ logger.error {err: error, user_id}, "error getting contacts for user"
+ callback(error)
+
+ addContact: (user_id, contact_id, callback = (error) ->) ->
+ logger.log {user_id, contact_id}, "add user contact"
+ url = "#{settings.apis.contacts.url}/user/#{user_id}/contacts"
+ request.post {
+ url: url
+ json: {
+ contact_id: contact_id
+ }
+ jar: false
+ }, (error, res, data) ->
+ return callback(error) if error?
+ if 200 <= res.statusCode < 300
+ callback(null, data?.contact_ids or [])
+ else
+ error = new Error("contacts api responded with non-success code: #{res.statusCode}")
+ logger.error {err: error, user_id, contact_id}, "error adding contact for user"
+ callback(error)
\ No newline at end of file
diff --git a/services/web/app/coffee/Features/Contacts/ContactRouter.coffee b/services/web/app/coffee/Features/Contacts/ContactRouter.coffee
new file mode 100644
index 0000000000..211a83c18f
--- /dev/null
+++ b/services/web/app/coffee/Features/Contacts/ContactRouter.coffee
@@ -0,0 +1,9 @@
+AuthenticationController = require('../Authentication/AuthenticationController')
+ContactController = require "./ContactController"
+
+module.exports =
+ apply: (webRouter, apiRouter) ->
+ webRouter.get '/user/contacts',
+ AuthenticationController.requireLogin(),
+ ContactController.getContacts
+
diff --git a/services/web/app/coffee/Features/User/UserGetter.coffee b/services/web/app/coffee/Features/User/UserGetter.coffee
index a0b2b766b7..c90cff38bc 100644
--- a/services/web/app/coffee/Features/User/UserGetter.coffee
+++ b/services/web/app/coffee/Features/User/UserGetter.coffee
@@ -16,3 +16,11 @@ module.exports = UserGetter =
query = _id: query
db.users.findOne query, projection, callback
+
+ getUsers: (user_ids, projection, callback = (error, users) ->) ->
+ try
+ user_ids = user_ids.map (u) -> ObjectId(u.toString())
+ catch error
+ return callback error
+
+ db.users.find { _id: { $in: user_ids} }, projection, callback
\ No newline at end of file
diff --git a/services/web/app/coffee/router.coffee b/services/web/app/coffee/router.coffee
index aab3ea6f58..a0c1b50d21 100644
--- a/services/web/app/coffee/router.coffee
+++ b/services/web/app/coffee/router.coffee
@@ -36,6 +36,7 @@ Modules = require "./infrastructure/Modules"
RateLimiterMiddlewear = require('./Features/Security/RateLimiterMiddlewear')
RealTimeProxyRouter = require('./Features/RealTimeProxy/RealTimeProxyRouter')
InactiveProjectController = require("./Features/InactiveData/InactiveProjectController")
+ContactRouter = require("./Features/Contacts/ContactRouter")
logger = require("logger-sharelatex")
_ = require("underscore")
@@ -65,6 +66,7 @@ module.exports = class Router
PasswordResetRouter.apply(webRouter, apiRouter)
StaticPagesRouter.apply(webRouter, apiRouter)
RealTimeProxyRouter.apply(webRouter, apiRouter)
+ ContactRouter.apply(webRouter, apiRouter)
Modules.applyRouter(webRouter, apiRouter)
diff --git a/services/web/app/views/project/editor/share.jade b/services/web/app/views/project/editor/share.jade
index 4b73c414c4..00a3c6f9b4 100644
--- a/services/web/app/views/project/editor/share.jade
+++ b/services/web/app/views/project/editor/share.jade
@@ -47,12 +47,21 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
form(ng-show="canAddCollaborators")
.small #{translate("share_with_your_collabs")}
.form-group
- input.form-control(
- type="text"
+ tags-input(
+ template="shareTagTemplate"
placeholder="joe@example.com, sue@example.com, ..."
- ng-model="inputs.email"
+ ng-model="inputs.contacts"
focus-on="open"
+ display-property="email"
+ key-property="id"
+ add-on-paste="true"
)
+ auto-complete(
+ source="filterAutocompleteUsers($query)"
+ template="shareAutocompleteTemplate"
+ display-property="email"
+ min-length="0"
+ )
.form-group
.pull-right
select.privileges.form-control(
@@ -123,3 +132,21 @@ script(type="text/ng-template", id="makePrivateModalTemplate")
button.btn.btn-info(
ng-click="makePrivate()"
) #{translate("make_private")}
+
+script(type="text/ng-template", id="shareTagTemplate")
+ .tag-template
+ span(ng-if="data.type")
+ i.fa.fa-fw(ng-class="{'fa-user': data.type == 'user', 'fa-group': data.type == 'group'}")
+ |
+ span {{$getDisplayText()}}
+ |
+ a(href, ng-click="$removeTag()").remove-button
+ i.fa.fa-fw.fa-close
+
+script(type="text/ng-template", id="shareAutocompleteTemplate")
+ .autocomplete-template
+ i.fa(ng-class="{'fa-user': data.type == 'user', 'fa-group': data.type == 'group'}")
+ |
+ span(ng-bind-html="$highlight(data.email)")
+ div.subdued.small(ng-show="data.name", ng-bind-html="$highlight(data.name)")
+ div.subdued.small(ng-show="data.memberCount") {{ data.memberCount }} members
diff --git a/services/web/config/settings.defaults.coffee b/services/web/config/settings.defaults.coffee
index 2b367871f0..85d25f4e9e 100644
--- a/services/web/config/settings.defaults.coffee
+++ b/services/web/config/settings.defaults.coffee
@@ -102,6 +102,8 @@ module.exports =
url: "http://localhost:8080/json"
realTime:
url: "http://localhost:3026"
+ contacts:
+ url: "http://localhost:3036"
templates:
user_id: process.env.TEMPLATES_USER_ID or "5395eb7aad1f29a88756c7f2"
diff --git a/services/web/public/coffee/base.coffee b/services/web/public/coffee/base.coffee
index a58fb02f31..69242b1099 100644
--- a/services/web/public/coffee/base.coffee
+++ b/services/web/public/coffee/base.coffee
@@ -15,6 +15,7 @@ define [
"ipCookie"
"ErrorCatcher"
"localStorage"
+ "ngTagsInput"
])
return App
diff --git a/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee b/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
index e569a2fee8..74243948ab 100644
--- a/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
+++ b/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
@@ -1,7 +1,7 @@
define [
"base"
], (App) ->
- App.controller "ShareProjectModalController", ["$scope", "$modalInstance", "$timeout", "projectMembers", "$modal", ($scope, $modalInstance, $timeout, projectMembers, $modal) ->
+ App.controller "ShareProjectModalController", ($scope, $modalInstance, $timeout, projectMembers, $modal, $http) ->
$scope.inputs = {
privileges: "readAndWrite"
email: ""
@@ -22,34 +22,54 @@ define [
allowedNoOfMembers = $scope.project.features.collaborators
$scope.canAddCollaborators = noOfMembers < allowedNoOfMembers or allowedNoOfMembers == INFINITE_COLLABORATORS
+ $scope.$watchCollection "inputs.contacts", (value) ->
+ console.log "EMAILS", value
+
+ $scope.autocompleteContacts = []
+ do loadAutocompleteUsers = () ->
+ $http.get "/user/contacts"
+ .success (data) ->
+ console.log "Got contacts", data
+ $scope.autocompleteContacts = data.contacts or []
+
+ $scope.filterAutocompleteUsers = ($query) ->
+ return $scope.autocompleteContacts.filter (user) ->
+ for text in [user.name, user.email]
+ if text?.toLowerCase().indexOf($query.toLowerCase()) > -1
+ return true
+ return false
+
$scope.addMembers = () ->
- return if !$scope.inputs.email? or $scope.inputs.email == ""
+ $timeout -> # Give email list a chance to update
+ return if $scope.inputs.contacts.length == 0
- emails = $scope.inputs.email.split(/,\s*/)
- $scope.inputs.email = ""
- $scope.state.error = null
- $scope.state.inflight = true
-
- do addNextMember = () ->
- if emails.length == 0 or !$scope.canAddCollaborators
- $scope.state.inflight = false
- $scope.$apply()
- return
+ emails = $scope.inputs.contacts.map (contact) -> contact.email
+ $scope.inputs.contacts = []
+ $scope.state.error = null
+ $scope.state.inflight = true
- email = emails.shift()
- projectMembers
- .addMember(email, $scope.inputs.privileges)
- .success (data) ->
- if data?.user # data.user is false if collaborator limit is hit.
- $scope.project.members.push data.user
- setTimeout () ->
- # Give $scope a chance to update $scope.canAddCollaborators
- # with new collaborator information.
- addNextMember()
- , 0
- .error () ->
+ console.log "Adding emails", emails
+
+ do addNextMember = () ->
+ if emails.length == 0 or !$scope.canAddCollaborators
$scope.state.inflight = false
- $scope.state.error = "Sorry, something went wrong :("
+ $scope.$apply()
+ return
+
+ email = emails.shift()
+ projectMembers
+ .addMember(email, $scope.inputs.privileges)
+ .success (data) ->
+ if data?.user # data.user is false if collaborator limit is hit.
+ $scope.project.members.push data.user
+ setTimeout () ->
+ # Give $scope a chance to update $scope.canAddCollaborators
+ # with new collaborator information.
+ addNextMember()
+ , 0
+ .error () ->
+ $scope.state.inflight = false
+ $scope.state.error = "Sorry, something went wrong :("
$scope.removeMember = (member) ->
@@ -85,7 +105,6 @@ define [
$scope.cancel = () ->
$modalInstance.dismiss()
- ]
App.controller "MakePublicModalController", ["$scope", "$modalInstance", "settings", ($scope, $modalInstance, settings) ->
$scope.inputs = {
diff --git a/services/web/public/coffee/libs.coffee b/services/web/public/coffee/libs.coffee
index 99c8603ebc..7a809f8a06 100644
--- a/services/web/public/coffee/libs.coffee
+++ b/services/web/public/coffee/libs.coffee
@@ -10,4 +10,5 @@ define [
"libs/angular-sanitize-1.2.17"
"libs/angular-cookie"
"libs/passfield"
+ "libs/ng-tags-input-3.0.0"
], () ->
diff --git a/services/web/public/js/libs/ng-tags-input-3.0.0.js b/services/web/public/js/libs/ng-tags-input-3.0.0.js
new file mode 100644
index 0000000000..fb5f2d7fb4
--- /dev/null
+++ b/services/web/public/js/libs/ng-tags-input-3.0.0.js
@@ -0,0 +1,1151 @@
+/*!
+ * ngTagsInput v3.0.0
+ * http://mbenford.github.io/ngTagsInput
+ *
+ * Copyright (c) 2013-2015 Michael Benford
+ * License: MIT
+ *
+ * Generated at 2015-07-13 02:08:11 -0300
+ */
+(function() {
+'use strict';
+
+var KEYS = {
+ backspace: 8,
+ tab: 9,
+ enter: 13,
+ escape: 27,
+ space: 32,
+ up: 38,
+ down: 40,
+ left: 37,
+ right: 39,
+ delete: 46,
+ comma: 188
+};
+
+var MAX_SAFE_INTEGER = 9007199254740991;
+var SUPPORTED_INPUT_TYPES = ['text', 'email', 'url'];
+
+var tagsInput = angular.module('ngTagsInput', []);
+
+/**
+ * @ngdoc directive
+ * @name tagsInput
+ * @module ngTagsInput
+ *
+ * @description
+ * Renders an input box with tag editing support.
+ *
+ * @param {string} ngModel Assignable Angular expression to data-bind to.
+ * @param {string=} [template=NA] URL or id of a custom template for rendering each tag.
+ * @param {string=} [displayProperty=text] Property to be rendered as the tag label.
+ * @param {string=} [keyProperty=text] Property to be used as a unique identifier for the tag.
+ * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
+ * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text.
+ * @param {number=} tabindex Tab order of the control.
+ * @param {string=} [placeholder=Add a tag] Placeholder text for the control.
+ * @param {number=} [minLength=3] Minimum length for a new tag.
+ * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag.
+ * @param {number=} [minTags=0] Sets minTags validation error key if the number of tags added is less than minTags.
+ * @param {number=} [maxTags=MAX_SAFE_INTEGER] Sets maxTags validation error key if the number of tags added is greater
+ * than maxTags.
+ * @param {boolean=} [allowLeftoverText=false] Sets leftoverText validation error key if there is any leftover text in
+ * the input element when the directive loses focus.
+ * @param {string=} [removeTagSymbol=×] (Obsolete) Symbol character for the remove tag button.
+ * @param {boolean=} [addOnEnter=true] Flag indicating that a new tag will be added on pressing the ENTER key.
+ * @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
+ * @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
+ * @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
+ * @param {boolean=} [addOnPaste=false] Flag indicating that the text pasted into the input field will be split into tags.
+ * @param {string=} [pasteSplitPattern=,] Regular expression used to split the pasted text into tags.
+ * @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
+ * @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid.
+ * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into the new tag
+ * input box instead of being removed when the backspace key is pressed and the input box is empty.
+ * @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list
+ * will be allowed. When this flag is true, addOnEnter, addOnComma, addOnSpace and addOnBlur values are ignored.
+ * @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not.
+ * @param {expression=} [onTagAdding=NA] Expression to evaluate that will be invoked before adding a new tag. The new
+ * tag is available as $tag. This method must return either true or false. If false, the tag will not be added.
+ * @param {expression=} [onTagAdded=NA] Expression to evaluate upon adding a new tag. The new tag is available as $tag.
+ * @param {expression=} [onInvalidTag=NA] Expression to evaluate when a tag is invalid. The invalid tag is available as $tag.
+ * @param {expression=} [onTagRemoving=NA] Expression to evaluate that will be invoked before removing a tag. The tag
+ * is available as $tag. This method must return either true or false. If false, the tag will not be removed.
+ * @param {expression=} [onTagRemoved=NA] Expression to evaluate upon removing an existing tag. The removed tag is
+ * available as $tag.
+ * @param {expression=} [onTagClicked=NA] Expression to evaluate upon clicking an existing tag. The clicked tag is available as $tag.
+ */
+tagsInput.directive('tagsInput', ["$timeout", "$document", "$window", "tagsInputConfig", "tiUtil", function($timeout, $document, $window, tagsInputConfig, tiUtil) {
+ function TagList(options, events, onTagAdding, onTagRemoving) {
+ var self = {}, getTagText, setTagText, tagIsValid;
+
+ getTagText = function(tag) {
+ return tiUtil.safeToString(tag[options.displayProperty]);
+ };
+
+ setTagText = function(tag, text) {
+ tag[options.displayProperty] = text;
+ };
+
+ tagIsValid = function(tag) {
+ var tagText = getTagText(tag);
+
+ return tagText &&
+ tagText.length >= options.minLength &&
+ tagText.length <= options.maxLength &&
+ options.allowedTagsPattern.test(tagText) &&
+ !tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty) &&
+ onTagAdding({ $tag: tag });
+ };
+
+ self.items = [];
+
+ self.addText = function(text) {
+ var tag = {};
+ setTagText(tag, text);
+ return self.add(tag);
+ };
+
+ self.add = function(tag) {
+ var tagText = getTagText(tag);
+
+ if (options.replaceSpacesWithDashes) {
+ tagText = tiUtil.replaceSpacesWithDashes(tagText);
+ }
+
+ setTagText(tag, tagText);
+
+ if (tagIsValid(tag)) {
+ self.items.push(tag);
+ events.trigger('tag-added', { $tag: tag });
+ }
+ else if (tagText) {
+ events.trigger('invalid-tag', { $tag: tag });
+ }
+
+ return tag;
+ };
+
+ self.remove = function(index) {
+ var tag = self.items[index];
+
+ if (onTagRemoving({ $tag: tag })) {
+ self.items.splice(index, 1);
+ self.clearSelection();
+ events.trigger('tag-removed', { $tag: tag });
+ return tag;
+ }
+ };
+
+ self.select = function(index) {
+ if (index < 0) {
+ index = self.items.length - 1;
+ }
+ else if (index >= self.items.length) {
+ index = 0;
+ }
+
+ self.index = index;
+ self.selected = self.items[index];
+ };
+
+ self.selectPrior = function() {
+ self.select(--self.index);
+ };
+
+ self.selectNext = function() {
+ self.select(++self.index);
+ };
+
+ self.removeSelected = function() {
+ return self.remove(self.index);
+ };
+
+ self.clearSelection = function() {
+ self.selected = null;
+ self.index = -1;
+ };
+
+ self.clearSelection();
+
+ return self;
+ }
+
+ function validateType(type) {
+ return SUPPORTED_INPUT_TYPES.indexOf(type) !== -1;
+ }
+
+ return {
+ restrict: 'E',
+ require: 'ngModel',
+ scope: {
+ tags: '=ngModel',
+ text: '=?',
+ onTagAdding: '&',
+ onTagAdded: '&',
+ onInvalidTag: '&',
+ onTagRemoving: '&',
+ onTagRemoved: '&',
+ onTagClicked: '&'
+ },
+ replace: false,
+ transclude: true,
+ templateUrl: 'ngTagsInput/tags-input.html',
+ controller: ["$scope", "$attrs", "$element", function($scope, $attrs, $element) {
+ $scope.events = tiUtil.simplePubSub();
+
+ tagsInputConfig.load('tagsInput', $scope, $attrs, {
+ template: [String, 'ngTagsInput/tag-item.html'],
+ type: [String, 'text', validateType],
+ placeholder: [String, 'Add a tag'],
+ tabindex: [Number, null],
+ removeTagSymbol: [String, String.fromCharCode(215)],
+ replaceSpacesWithDashes: [Boolean, true],
+ minLength: [Number, 3],
+ maxLength: [Number, MAX_SAFE_INTEGER],
+ addOnEnter: [Boolean, true],
+ addOnSpace: [Boolean, false],
+ addOnComma: [Boolean, true],
+ addOnBlur: [Boolean, true],
+ addOnPaste: [Boolean, false],
+ pasteSplitPattern: [RegExp, /,/],
+ allowedTagsPattern: [RegExp, /.+/],
+ enableEditingLastTag: [Boolean, false],
+ minTags: [Number, 0],
+ maxTags: [Number, MAX_SAFE_INTEGER],
+ displayProperty: [String, 'text'],
+ keyProperty: [String, ''],
+ allowLeftoverText: [Boolean, false],
+ addFromAutocompleteOnly: [Boolean, false],
+ spellcheck: [Boolean, true]
+ });
+
+ $scope.tagList = new TagList($scope.options, $scope.events,
+ tiUtil.handleUndefinedResult($scope.onTagAdding, true),
+ tiUtil.handleUndefinedResult($scope.onTagRemoving, true));
+
+ this.registerAutocomplete = function() {
+ var input = $element.find('input');
+
+ return {
+ addTag: function(tag) {
+ return $scope.tagList.add(tag);
+ },
+ focusInput: function() {
+ input[0].focus();
+ },
+ getTags: function() {
+ return $scope.tagList.items;
+ },
+ getCurrentTagText: function() {
+ return $scope.newTag.text();
+ },
+ getOptions: function() {
+ return $scope.options;
+ },
+ on: function(name, handler) {
+ $scope.events.on(name, handler);
+ return this;
+ }
+ };
+ };
+
+ this.registerTagItem = function() {
+ return {
+ getOptions: function() {
+ return $scope.options;
+ },
+ removeTag: function(index) {
+ if ($scope.disabled) {
+ return;
+ }
+ $scope.tagList.remove(index);
+ }
+ };
+ };
+ }],
+ link: function(scope, element, attrs, ngModelCtrl) {
+ var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace, KEYS.delete, KEYS.left, KEYS.right],
+ tagList = scope.tagList,
+ events = scope.events,
+ options = scope.options,
+ input = element.find('input'),
+ validationOptions = ['minTags', 'maxTags', 'allowLeftoverText'],
+ setElementValidity;
+
+ setElementValidity = function() {
+ ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags);
+ ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags);
+ ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text());
+ };
+
+ ngModelCtrl.$isEmpty = function(value) {
+ return !value || !value.length;
+ };
+
+ scope.newTag = {
+ text: function(value) {
+ if (angular.isDefined(value)) {
+ scope.text = value;
+ events.trigger('input-change', value);
+ }
+ else {
+ return scope.text || '';
+ }
+ },
+ invalid: null
+ };
+
+ scope.track = function(tag) {
+ return tag[options.keyProperty || options.displayProperty];
+ };
+
+ scope.$watch('tags', function(value) {
+ if (value) {
+ tagList.items = tiUtil.makeObjectArray(value, options.displayProperty);
+ scope.tags = tagList.items;
+ }
+ else {
+ tagList.items = [];
+ }
+ });
+
+ scope.$watch('tags.length', function() {
+ setElementValidity();
+
+ // ngModelController won't trigger validators when the model changes (because it's an array),
+ // so we need to do it ourselves. Unfortunately this won't trigger any registered formatter.
+ ngModelCtrl.$validate();
+ });
+
+ attrs.$observe('disabled', function(value) {
+ scope.disabled = value;
+ });
+
+ scope.eventHandlers = {
+ input: {
+ keydown: function($event) {
+ events.trigger('input-keydown', $event);
+ },
+ focus: function() {
+ if (scope.hasFocus) {
+ return;
+ }
+
+ scope.hasFocus = true;
+ events.trigger('input-focus');
+ },
+ blur: function() {
+ $timeout(function() {
+ var activeElement = $document.prop('activeElement'),
+ lostFocusToBrowserWindow = activeElement === input[0],
+ lostFocusToChildElement = element[0].contains(activeElement);
+
+ if (lostFocusToBrowserWindow || !lostFocusToChildElement) {
+ scope.hasFocus = false;
+ events.trigger('input-blur');
+ }
+ });
+ },
+ paste: function($event) {
+ $event.getTextData = function() {
+ var clipboardData = $event.clipboardData || ($event.originalEvent && $event.originalEvent.clipboardData);
+ return clipboardData ? clipboardData.getData('text/plain') : $window.clipboardData.getData('Text');
+ };
+ events.trigger('input-paste', $event);
+ }
+ },
+ host: {
+ click: function() {
+ if (scope.disabled) {
+ return;
+ }
+ input[0].focus();
+ }
+ },
+ tag: {
+ click: function(tag) {
+ events.trigger('tag-clicked', { $tag: tag });
+ }
+ }
+ };
+
+ events
+ .on('tag-added', scope.onTagAdded)
+ .on('invalid-tag', scope.onInvalidTag)
+ .on('tag-removed', scope.onTagRemoved)
+ .on('tag-clicked', scope.onTagClicked)
+ .on('tag-added', function() {
+ scope.newTag.text('');
+ })
+ .on('tag-added tag-removed', function() {
+ scope.tags = tagList.items;
+ // Ideally we should be able call $setViewValue here and let it in turn call $setDirty and $validate
+ // automatically, but since the model is an array, $setViewValue does nothing and it's up to us to do it.
+ // Unfortunately this won't trigger any registered $parser and there's no safe way to do it.
+ ngModelCtrl.$setDirty();
+ })
+ .on('invalid-tag', function() {
+ scope.newTag.invalid = true;
+ })
+ .on('option-change', function(e) {
+ if (validationOptions.indexOf(e.name) !== -1) {
+ setElementValidity();
+ }
+ })
+ .on('input-change', function() {
+ tagList.clearSelection();
+ scope.newTag.invalid = null;
+ })
+ .on('input-focus', function() {
+ element.triggerHandler('focus');
+ ngModelCtrl.$setValidity('leftoverText', true);
+ })
+ .on('input-blur', function() {
+ if (options.addOnBlur && !options.addFromAutocompleteOnly) {
+ tagList.addText(scope.newTag.text());
+ }
+ element.triggerHandler('blur');
+ setElementValidity();
+ })
+ .on('input-keydown', function(event) {
+ var key = event.keyCode,
+ addKeys = {},
+ shouldAdd, shouldRemove, shouldSelect, shouldEditLastTag;
+
+ if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
+ return;
+ }
+
+ addKeys[KEYS.enter] = options.addOnEnter;
+ addKeys[KEYS.comma] = options.addOnComma;
+ addKeys[KEYS.space] = options.addOnSpace;
+
+ shouldAdd = !options.addFromAutocompleteOnly && addKeys[key];
+ shouldRemove = (key === KEYS.backspace || key === KEYS.delete) && tagList.selected;
+ shouldEditLastTag = key === KEYS.backspace && scope.newTag.text().length === 0 && options.enableEditingLastTag;
+ shouldSelect = (key === KEYS.backspace || key === KEYS.left || key === KEYS.right) && scope.newTag.text().length === 0 && !options.enableEditingLastTag;
+
+ if (shouldAdd) {
+ tagList.addText(scope.newTag.text());
+ }
+ else if (shouldEditLastTag) {
+ var tag;
+
+ tagList.selectPrior();
+ tag = tagList.removeSelected();
+
+ if (tag) {
+ scope.newTag.text(tag[options.displayProperty]);
+ }
+ }
+ else if (shouldRemove) {
+ tagList.removeSelected();
+ }
+ else if (shouldSelect) {
+ if (key === KEYS.left || key === KEYS.backspace) {
+ tagList.selectPrior();
+ }
+ else if (key === KEYS.right) {
+ tagList.selectNext();
+ }
+ }
+
+ if (shouldAdd || shouldSelect || shouldRemove || shouldEditLastTag) {
+ event.preventDefault();
+ }
+ })
+ .on('input-paste', function(event) {
+ if (options.addOnPaste) {
+ var data = event.getTextData();
+ var tags = data.split(options.pasteSplitPattern);
+
+ if (tags.length > 1) {
+ tags.forEach(function(tag) {
+ tagList.addText(tag);
+ });
+ event.preventDefault();
+ }
+ }
+ });
+ }
+ };
+}]);
+
+
+/**
+ * @ngdoc directive
+ * @name tiTagItem
+ * @module ngTagsInput
+ *
+ * @description
+ * Represents a tag item. Used internally by the tagsInput directive.
+ */
+tagsInput.directive('tiTagItem', ["tiUtil", function(tiUtil) {
+ return {
+ restrict: 'E',
+ require: '^tagsInput',
+ template: '',
+ scope: { data: '=' },
+ link: function(scope, element, attrs, tagsInputCtrl) {
+ var tagsInput = tagsInputCtrl.registerTagItem(),
+ options = tagsInput.getOptions();
+
+ scope.$$template = options.template;
+ scope.$$removeTagSymbol = options.removeTagSymbol;
+
+ scope.$getDisplayText = function() {
+ return tiUtil.safeToString(scope.data[options.displayProperty]);
+ };
+ scope.$removeTag = function() {
+ tagsInput.removeTag(scope.$index);
+ };
+
+ scope.$watch('$parent.$index', function(value) {
+ scope.$index = value;
+ });
+ }
+ };
+}]);
+
+
+/**
+ * @ngdoc directive
+ * @name autoComplete
+ * @module ngTagsInput
+ *
+ * @description
+ * Provides autocomplete support for the tagsInput directive.
+ *
+ * @param {expression} source Expression to evaluate upon changing the input content. The input value is available as
+ * $query. The result of the expression must be a promise that eventually resolves to an array of strings.
+ * @param {string=} [template=NA] URL or id of a custom template for rendering each element of the autocomplete list.
+ * @param {string=} [displayProperty=tagsInput.displayText] Property to be rendered as the autocomplete label.
+ * @param {number=} [debounceDelay=100] Amount of time, in milliseconds, to wait before evaluating the expression in
+ * the source option after the last keystroke.
+ * @param {number=} [minLength=3] Minimum number of characters that must be entered before evaluating the expression
+ * in the source option.
+ * @param {boolean=} [highlightMatchedText=true] Flag indicating that the matched text will be highlighted in the
+ * suggestions list.
+ * @param {number=} [maxResultsToShow=10] Maximum number of results to be displayed at a time.
+ * @param {boolean=} [loadOnDownArrow=false] Flag indicating that the source option will be evaluated when the down arrow
+ * key is pressed and the suggestion list is closed. The current input value is available as $query.
+ * @param {boolean=} [loadOnEmpty=false] Flag indicating that the source option will be evaluated when the input content
+ * becomes empty. The $query variable will be passed to the expression as an empty string.
+ * @param {boolean=} [loadOnFocus=false] Flag indicating that the source option will be evaluated when the input element
+ * gains focus. The current input value is available as $query.
+ * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once
+ * the suggestion list is shown.
+ */
+tagsInput.directive('autoComplete', ["$document", "$timeout", "$sce", "$q", "tagsInputConfig", "tiUtil", function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) {
+ function SuggestionList(loadFn, options, events) {
+ var self = {}, getDifference, lastPromise, getTagId;
+
+ getTagId = function() {
+ return options.tagsInput.keyProperty || options.tagsInput.displayProperty;
+ };
+
+ getDifference = function(array1, array2) {
+ return array1.filter(function(item) {
+ return !tiUtil.findInObjectArray(array2, item, getTagId(), function(a, b) {
+ if (options.tagsInput.replaceSpacesWithDashes) {
+ a = tiUtil.replaceSpacesWithDashes(a);
+ b = tiUtil.replaceSpacesWithDashes(b);
+ }
+ return tiUtil.defaultComparer(a, b);
+ });
+ });
+ };
+
+ self.reset = function() {
+ lastPromise = null;
+
+ self.items = [];
+ self.visible = false;
+ self.index = -1;
+ self.selected = null;
+ self.query = null;
+ };
+ self.show = function() {
+ if (options.selectFirstMatch) {
+ self.select(0);
+ }
+ else {
+ self.selected = null;
+ }
+ self.visible = true;
+ };
+ self.load = tiUtil.debounce(function(query, tags) {
+ self.query = query;
+
+ var promise = $q.when(loadFn({ $query: query }));
+ lastPromise = promise;
+
+ promise.then(function(items) {
+ if (promise !== lastPromise) {
+ return;
+ }
+
+ items = tiUtil.makeObjectArray(items.data || items, getTagId());
+ items = getDifference(items, tags);
+ self.items = items.slice(0, options.maxResultsToShow);
+
+ if (self.items.length > 0) {
+ self.show();
+ }
+ else {
+ self.reset();
+ }
+ });
+ }, options.debounceDelay);
+
+ self.selectNext = function() {
+ self.select(++self.index);
+ };
+ self.selectPrior = function() {
+ self.select(--self.index);
+ };
+ self.select = function(index) {
+ if (index < 0) {
+ index = self.items.length - 1;
+ }
+ else if (index >= self.items.length) {
+ index = 0;
+ }
+ self.index = index;
+ self.selected = self.items[index];
+ events.trigger('suggestion-selected', index);
+ };
+
+ self.reset();
+
+ return self;
+ }
+
+ function scrollToElement(root, index) {
+ var element = root.find('li').eq(index),
+ parent = element.parent(),
+ elementTop = element.prop('offsetTop'),
+ elementHeight = element.prop('offsetHeight'),
+ parentHeight = parent.prop('clientHeight'),
+ parentScrollTop = parent.prop('scrollTop');
+
+ if (elementTop < parentScrollTop) {
+ parent.prop('scrollTop', elementTop);
+ }
+ else if (elementTop + elementHeight > parentHeight + parentScrollTop) {
+ parent.prop('scrollTop', elementTop + elementHeight - parentHeight);
+ }
+ }
+
+ return {
+ restrict: 'E',
+ require: '^tagsInput',
+ scope: { source: '&' },
+ templateUrl: 'ngTagsInput/auto-complete.html',
+ controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
+ $scope.events = tiUtil.simplePubSub();
+
+ tagsInputConfig.load('autoComplete', $scope, $attrs, {
+ template: [String, 'ngTagsInput/auto-complete-match.html'],
+ debounceDelay: [Number, 100],
+ minLength: [Number, 3],
+ highlightMatchedText: [Boolean, true],
+ maxResultsToShow: [Number, 10],
+ loadOnDownArrow: [Boolean, false],
+ loadOnEmpty: [Boolean, false],
+ loadOnFocus: [Boolean, false],
+ selectFirstMatch: [Boolean, true],
+ displayProperty: [String, '']
+ });
+
+ $scope.suggestionList = new SuggestionList($scope.source, $scope.options, $scope.events);
+
+ this.registerAutocompleteMatch = function() {
+ return {
+ getOptions: function() {
+ return $scope.options;
+ },
+ getQuery: function() {
+ return $scope.suggestionList.query;
+ }
+ };
+ };
+ }],
+ link: function(scope, element, attrs, tagsInputCtrl) {
+ var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
+ suggestionList = scope.suggestionList,
+ tagsInput = tagsInputCtrl.registerAutocomplete(),
+ options = scope.options,
+ events = scope.events,
+ shouldLoadSuggestions;
+
+ options.tagsInput = tagsInput.getOptions();
+
+ shouldLoadSuggestions = function(value) {
+ return value && value.length >= options.minLength || !value && options.loadOnEmpty;
+ };
+
+ scope.addSuggestionByIndex = function(index) {
+ suggestionList.select(index);
+ scope.addSuggestion();
+ };
+
+ scope.addSuggestion = function() {
+ var added = false;
+
+ if (suggestionList.selected) {
+ tagsInput.addTag(angular.copy(suggestionList.selected));
+ suggestionList.reset();
+ tagsInput.focusInput();
+
+ added = true;
+ }
+ return added;
+ };
+
+ scope.track = function(item) {
+ return item[options.tagsInput.keyProperty || options.tagsInput.displayProperty];
+ };
+
+ tagsInput
+ .on('tag-added tag-removed invalid-tag input-blur', function() {
+ suggestionList.reset();
+ })
+ .on('input-change', function(value) {
+ if (shouldLoadSuggestions(value)) {
+ suggestionList.load(value, tagsInput.getTags());
+ }
+ else {
+ suggestionList.reset();
+ }
+ })
+ .on('input-focus', function() {
+ var value = tagsInput.getCurrentTagText();
+ if (options.loadOnFocus && shouldLoadSuggestions(value)) {
+ suggestionList.load(value, tagsInput.getTags());
+ }
+ })
+ .on('input-keydown', function(event) {
+ var key = event.keyCode,
+ handled = false;
+
+ if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
+ return;
+ }
+
+ if (suggestionList.visible) {
+
+ if (key === KEYS.down) {
+ suggestionList.selectNext();
+ handled = true;
+ }
+ else if (key === KEYS.up) {
+ suggestionList.selectPrior();
+ handled = true;
+ }
+ else if (key === KEYS.escape) {
+ suggestionList.reset();
+ handled = true;
+ }
+ else if (key === KEYS.enter || key === KEYS.tab) {
+ handled = scope.addSuggestion();
+ }
+ }
+ else {
+ if (key === KEYS.down && scope.options.loadOnDownArrow) {
+ suggestionList.load(tagsInput.getCurrentTagText(), tagsInput.getTags());
+ handled = true;
+ }
+ }
+
+ if (handled) {
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ return false;
+ }
+ });
+
+ events.on('suggestion-selected', function(index) {
+ scrollToElement(element, index);
+ });
+ }
+ };
+}]);
+
+
+/**
+ * @ngdoc directive
+ * @name tiAutocompleteMatch
+ * @module ngTagsInput
+ *
+ * @description
+ * Represents an autocomplete match. Used internally by the autoComplete directive.
+ */
+tagsInput.directive('tiAutocompleteMatch', ["$sce", "tiUtil", function($sce, tiUtil) {
+ return {
+ restrict: 'E',
+ require: '^autoComplete',
+ template: '',
+ scope: { data: '=' },
+ link: function(scope, element, attrs, autoCompleteCtrl) {
+ var autoComplete = autoCompleteCtrl.registerAutocompleteMatch(),
+ options = autoComplete.getOptions();
+
+ scope.$$template = options.template;
+ scope.$index = scope.$parent.$index;
+
+ scope.$highlight = function(text) {
+ if (options.highlightMatchedText) {
+ text = tiUtil.safeHighlight(text, autoComplete.getQuery());
+ }
+ return $sce.trustAsHtml(text);
+ };
+ scope.$getDisplayText = function() {
+ return tiUtil.safeToString(scope.data[options.displayProperty || options.tagsInput.displayProperty]);
+ };
+ }
+ };
+}]);
+
+
+/**
+ * @ngdoc directive
+ * @name tiTranscludeAppend
+ * @module ngTagsInput
+ *
+ * @description
+ * Re-creates the old behavior of ng-transclude. Used internally by tagsInput directive.
+ */
+tagsInput.directive('tiTranscludeAppend', function() {
+ return function(scope, element, attrs, ctrl, transcludeFn) {
+ transcludeFn(function(clone) {
+ element.append(clone);
+ });
+ };
+});
+
+/**
+ * @ngdoc directive
+ * @name tiAutosize
+ * @module ngTagsInput
+ *
+ * @description
+ * Automatically sets the input's width so its content is always visible. Used internally by tagsInput directive.
+ */
+tagsInput.directive('tiAutosize', ["tagsInputConfig", function(tagsInputConfig) {
+ return {
+ restrict: 'A',
+ require: 'ngModel',
+ link: function(scope, element, attrs, ctrl) {
+ var threshold = tagsInputConfig.getTextAutosizeThreshold(),
+ span, resize;
+
+ span = angular.element('');
+ span.css('display', 'none')
+ .css('visibility', 'hidden')
+ .css('width', 'auto')
+ .css('white-space', 'pre');
+
+ element.parent().append(span);
+
+ resize = function(originalValue) {
+ var value = originalValue, width;
+
+ if (angular.isString(value) && value.length === 0) {
+ value = attrs.placeholder;
+ }
+
+ if (value) {
+ span.text(value);
+ span.css('display', '');
+ width = span.prop('offsetWidth');
+ span.css('display', 'none');
+ }
+
+ element.css('width', width ? width + threshold + 'px' : '');
+
+ return originalValue;
+ };
+
+ ctrl.$parsers.unshift(resize);
+ ctrl.$formatters.unshift(resize);
+
+ attrs.$observe('placeholder', function(value) {
+ if (!ctrl.$modelValue) {
+ resize(value);
+ }
+ });
+ }
+ };
+}]);
+
+/**
+ * @ngdoc directive
+ * @name tiBindAttrs
+ * @module ngTagsInput
+ *
+ * @description
+ * Binds attributes to expressions. Used internally by tagsInput directive.
+ */
+tagsInput.directive('tiBindAttrs', function() {
+ return function(scope, element, attrs) {
+ scope.$watch(attrs.tiBindAttrs, function(value) {
+ angular.forEach(value, function(value, key) {
+ attrs.$set(key, value);
+ });
+ }, true);
+ };
+});
+
+/**
+ * @ngdoc service
+ * @name tagsInputConfig
+ * @module ngTagsInput
+ *
+ * @description
+ * Sets global configuration settings for both tagsInput and autoComplete directives. It's also used internally to parse and
+ * initialize options from HTML attributes.
+ */
+tagsInput.provider('tagsInputConfig', function() {
+ var globalDefaults = {},
+ interpolationStatus = {},
+ autosizeThreshold = 3;
+
+ /**
+ * @ngdoc method
+ * @name tagsInputConfig#setDefaults
+ * @description Sets the default configuration option for a directive.
+ *
+ * @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
+ * @param {object} defaults Object containing options and their values.
+ *
+ * @returns {object} The service itself for chaining purposes.
+ */
+ this.setDefaults = function(directive, defaults) {
+ globalDefaults[directive] = defaults;
+ return this;
+ };
+
+ /**
+ * @ngdoc method
+ * @name tagsInputConfig#setActiveInterpolation
+ * @description Sets active interpolation for a set of options.
+ *
+ * @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
+ * @param {object} options Object containing which options should have interpolation turned on at all times.
+ *
+ * @returns {object} The service itself for chaining purposes.
+ */
+ this.setActiveInterpolation = function(directive, options) {
+ interpolationStatus[directive] = options;
+ return this;
+ };
+
+ /**
+ * @ngdoc method
+ * @name tagsInputConfig#setTextAutosizeThreshold
+ * @description Sets the threshold used by the tagsInput directive to re-size the inner input field element based on its contents.
+ *
+ * @param {number} threshold Threshold value, in pixels.
+ *
+ * @returns {object} The service itself for chaining purposes.
+ */
+ this.setTextAutosizeThreshold = function(threshold) {
+ autosizeThreshold = threshold;
+ return this;
+ };
+
+ this.$get = ["$interpolate", function($interpolate) {
+ var converters = {};
+ converters[String] = function(value) { return value; };
+ converters[Number] = function(value) { return parseInt(value, 10); };
+ converters[Boolean] = function(value) { return value.toLowerCase() === 'true'; };
+ converters[RegExp] = function(value) { return new RegExp(value); };
+
+ return {
+ load: function(directive, scope, attrs, options) {
+ var defaultValidator = function() { return true; };
+
+ scope.options = {};
+
+ angular.forEach(options, function(value, key) {
+ var type, localDefault, validator, converter, getDefault, updateValue;
+
+ type = value[0];
+ localDefault = value[1];
+ validator = value[2] || defaultValidator;
+ converter = converters[type];
+
+ getDefault = function() {
+ var globalValue = globalDefaults[directive] && globalDefaults[directive][key];
+ return angular.isDefined(globalValue) ? globalValue : localDefault;
+ };
+
+ updateValue = function(value) {
+ scope.options[key] = value && validator(value) ? converter(value) : getDefault();
+ };
+
+ if (interpolationStatus[directive] && interpolationStatus[directive][key]) {
+ attrs.$observe(key, function(value) {
+ updateValue(value);
+ scope.events.trigger('option-change', { name: key, newValue: value });
+ });
+ }
+ else {
+ updateValue(attrs[key] && $interpolate(attrs[key])(scope.$parent));
+ }
+ });
+ },
+ getTextAutosizeThreshold: function() {
+ return autosizeThreshold;
+ }
+ };
+ }];
+});
+
+
+/***
+ * @ngdoc service
+ * @name tiUtil
+ * @module ngTagsInput
+ *
+ * @description
+ * Helper methods used internally by the directive. Should not be called directly from user code.
+ */
+tagsInput.factory('tiUtil', ["$timeout", function($timeout) {
+ var self = {};
+
+ self.debounce = function(fn, delay) {
+ var timeoutId;
+ return function() {
+ var args = arguments;
+ $timeout.cancel(timeoutId);
+ timeoutId = $timeout(function() { fn.apply(null, args); }, delay);
+ };
+ };
+
+ self.makeObjectArray = function(array, key) {
+ if (!angular.isArray(array) || array.length === 0 || angular.isObject(array[0])) {
+ return array;
+ }
+
+ var newArray = [];
+ array.forEach(function(item) {
+ var obj = {};
+ obj[key] = item;
+ newArray.push(obj);
+ });
+ return newArray;
+ };
+
+ self.findInObjectArray = function(array, obj, key, comparer) {
+ var item = null;
+ comparer = comparer || self.defaultComparer;
+
+ array.some(function(element) {
+ if (comparer(element[key], obj[key])) {
+ item = element;
+ return true;
+ }
+ });
+
+ return item;
+ };
+
+ self.defaultComparer = function(a, b) {
+ // I'm aware of the internationalization issues regarding toLowerCase()
+ // but I couldn't come up with a better solution right now
+ return self.safeToString(a).toLowerCase() === self.safeToString(b).toLowerCase();
+ };
+
+ self.safeHighlight = function(str, value) {
+ if (!value) {
+ return str;
+ }
+
+ function escapeRegexChars(str) {
+ return str.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
+ }
+
+ str = self.encodeHTML(str);
+ value = self.encodeHTML(value);
+
+ var expression = new RegExp('&[^;]+;|' + escapeRegexChars(value), 'gi');
+ return str.replace(expression, function(match) {
+ return match.toLowerCase() === value.toLowerCase() ? '' + match + '' : match;
+ });
+ };
+
+ self.safeToString = function(value) {
+ return angular.isUndefined(value) || value == null ? '' : value.toString().trim();
+ };
+
+ self.encodeHTML = function(value) {
+ return self.safeToString(value)
+ .replace(/&/g, '&')
+ .replace(//g, '>');
+ };
+
+ self.handleUndefinedResult = function(fn, valueIfUndefined) {
+ return function() {
+ var result = fn.apply(null, arguments);
+ return angular.isUndefined(result) ? valueIfUndefined : result;
+ };
+ };
+
+ self.replaceSpacesWithDashes = function(str) {
+ return self.safeToString(str).replace(/\s/g, '-');
+ };
+
+ self.isModifierOn = function(event) {
+ return event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
+ };
+
+ self.simplePubSub = function() {
+ var events = {};
+ return {
+ on: function(names, handler) {
+ names.split(' ').forEach(function(name) {
+ if (!events[name]) {
+ events[name] = [];
+ }
+ events[name].push(handler);
+ });
+ return this;
+ },
+ trigger: function(name, args) {
+ var handlers = events[name] || [];
+ handlers.every(function(handler) {
+ return self.handleUndefinedResult(handler, true)(args);
+ });
+ return this;
+ }
+ };
+ };
+
+ return self;
+}]);
+
+/* HTML templates */
+tagsInput.run(["$templateCache", function($templateCache) {
+ $templateCache.put('ngTagsInput/tags-input.html',
+ ""
+ );
+
+ $templateCache.put('ngTagsInput/tag-item.html',
+ " "
+ );
+
+ $templateCache.put('ngTagsInput/auto-complete.html',
+ ""
+ );
+
+ $templateCache.put('ngTagsInput/auto-complete-match.html',
+ ""
+ );
+}]);
+
+}());
\ No newline at end of file
diff --git a/services/web/public/stylesheets/components/tags-input.less b/services/web/public/stylesheets/components/tags-input.less
new file mode 100644
index 0000000000..48b03aa742
--- /dev/null
+++ b/services/web/public/stylesheets/components/tags-input.less
@@ -0,0 +1,143 @@
+tags-input {
+ display: block;
+}
+tags-input *, tags-input *:before, tags-input *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+tags-input .host {
+ position: relative;
+ height: 100%;
+}
+tags-input .host:active {
+ outline: none;
+}
+
+tags-input .tags {
+ .form-control;
+ -moz-appearance: textfield;
+ -webkit-appearance: textfield;
+ padding: 2px 5px;
+ overflow: hidden;
+ word-wrap: break-word;
+ cursor: text;
+ background-color: #fff;
+ height: 100%;
+}
+tags-input .tags.focused {
+ outline: none;
+ -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+ -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+ box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+}
+tags-input .tags .tag-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+tags-input .tags .tag-item {
+ margin: 2px;
+ padding: 0 7px;
+ display: inline-block;
+ float: left;
+ height: 26px;
+ line-height: 25px;
+ border: 1px solid @gray-light;
+ background-color: @gray-lightest;
+ border-radius: 3px;
+}
+tags-input .tags .tag-item.selected {
+ background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+ background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+}
+tags-input .tags .tag-item .remove-button {
+ color: @gray-light;
+ text-decoration: none;
+}
+tags-input .tags .tag-item .remove-button:active {
+ color: @brand-primary;
+}
+tags-input .tags .input {
+ border: 0;
+ outline: none;
+ margin: 2px;
+ padding: 0;
+ padding-left: 5px;
+ float: left;
+ height: 26px;
+}
+tags-input .tags .input.invalid-tag {
+ color: @brand-danger;
+}
+tags-input .tags .input::-ms-clear {
+ display: none;
+}
+tags-input.ng-invalid .tags {
+ -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+ -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+ box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+}
+tags-input[disabled] .host:focus {
+ outline: none;
+}
+tags-input[disabled] .tags {
+ background-color: #eee;
+ cursor: default;
+}
+tags-input[disabled] .tags .tag-item {
+ opacity: 0.65;
+ background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
+ background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
+}
+tags-input[disabled] .tags .tag-item .remove-button {
+ cursor: default;
+}
+tags-input[disabled] .tags .tag-item .remove-button:active {
+ color: @brand-primary;
+}
+tags-input[disabled] .tags .input {
+ background-color: #eee;
+ cursor: default;
+}
+
+tags-input .autocomplete {
+ margin-top: 5px;
+ position: absolute;
+ padding: 5px 0;
+ z-index: 999;
+ width: 100%;
+ background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+tags-input .autocomplete .suggestion-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ max-height: 280px;
+ overflow-y: auto;
+ position: relative;
+}
+tags-input .autocomplete .suggestion-item {
+ padding: 5px 10px;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+tags-input .autocomplete .suggestion-item.selected {
+ color: white;
+ background-color: @brand-primary;
+ .subdued {
+ color: white;
+ }
+}
+tags-input .autocomplete .suggestion-item em {
+ font-weight: bold;
+ font-style: normal;
+}
+
+/*# sourceMappingURL=ng-tags-input.css.map */
diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less
index b2691a5bcc..5613671db9 100755
--- a/services/web/public/stylesheets/style.less
+++ b/services/web/public/stylesheets/style.less
@@ -47,6 +47,9 @@
@import "components/popovers.less";
@import "components/carousel.less";
+// ngTagsInput
+@import "components/tags-input.less";
+
// Utility classes
@import "core/utilities.less";
@import "core/responsive-utilities.less";
diff --git a/services/web/test/UnitTests/coffee/Contact/ContactControllerTests.coffee b/services/web/test/UnitTests/coffee/Contact/ContactControllerTests.coffee
new file mode 100644
index 0000000000..468a97e8e7
--- /dev/null
+++ b/services/web/test/UnitTests/coffee/Contact/ContactControllerTests.coffee
@@ -0,0 +1,57 @@
+sinon = require('sinon')
+chai = require('chai')
+should = chai.should()
+assert = chai.assert
+expect = chai.expect
+modulePath = "../../../../app/js/Features/Contacts/ContactController.js"
+SandboxedModule = require('sandboxed-module')
+
+describe "ContactController", ->
+ beforeEach ->
+ @ContactController = SandboxedModule.require modulePath, requires:
+ "logger-sharelatex": @logger = { log: sinon.stub(), error: sinon.stub() }
+ "../User/UserGetter": @UserGetter = {}
+ "./ContactManager": @ContactManager = {}
+ "../Authentication/AuthenticationController": @AuthenticationController = {}
+
+ @next = sinon.stub()
+ @req = {}
+ @res = {}
+ @res.status = sinon.stub().returns @req
+ @res.send = sinon.stub()
+
+ describe "getContacts", ->
+ beforeEach ->
+ @user_id = "mock-user-id"
+ @contact_ids = ["contact-1", "contact-2", "contact-3"]
+ @contacts = [
+ { _id: "contact-1", email: "joe@example.com", first_name: "Joe", last_name: "Example", unsued: "foo" }
+ { _id: "contact-2", email: "jane@example.com", first_name: "Jane", last_name: "Example", unsued: "foo", holdingAccount: true }
+ { _id: "contact-3", email: "jim@example.com", first_name: "Jim", last_name: "Example", unsued: "foo" }
+ ]
+ @AuthenticationController.getLoggedInUserId = sinon.stub().callsArgWith(1, null, @user_id)
+ @ContactManager.getContactIds = sinon.stub().callsArgWith(2, null, @contact_ids)
+ @UserGetter.getUsers = sinon.stub().callsArgWith(2, null, @contacts)
+
+ @ContactController.getContacts @req, @res, @next
+
+ it "should look up the logged in user id", ->
+ @AuthenticationController.getLoggedInUserId
+ .calledWith(@req)
+ .should.equal true
+
+ it "should get the users contact ids", ->
+ @ContactManager.getContactIds
+ .calledWith(@user_id, { limit: 50 })
+ .should.equal true
+
+ it "should populate the users contacts ids", ->
+ @UserGetter.getUsers
+ .calledWith(@contact_ids, { email: 1, first_name: 1, last_name: 1, holdingAccount: 1 })
+ .should.equal true
+
+ it "should return a formatted list of contacts in contact list order, without holding accounts", ->
+ @res.send.args[0][0].contacts.should.deep.equal [
+ { id: "contact-1", email: "joe@example.com", first_name: "Joe", last_name: "Example" }
+ { id: "contact-3", email: "jim@example.com", first_name: "Jim", last_name: "Example" }
+ ]
diff --git a/services/web/test/UnitTests/coffee/Contact/ContactManagerTests.coffee b/services/web/test/UnitTests/coffee/Contact/ContactManagerTests.coffee
new file mode 100644
index 0000000000..054a7ec56f
--- /dev/null
+++ b/services/web/test/UnitTests/coffee/Contact/ContactManagerTests.coffee
@@ -0,0 +1,91 @@
+chai = require('chai')
+chai.should()
+sinon = require("sinon")
+modulePath = "../../../../app/js/Features/Contacts/ContactManager"
+SandboxedModule = require('sandboxed-module')
+
+describe "ContactManager", ->
+ beforeEach ->
+ @ContactManager = SandboxedModule.require modulePath, requires:
+ "request" : @request = sinon.stub()
+ "settings-sharelatex": @settings =
+ apis:
+ contacts:
+ url: "contacts.sharelatex.com"
+ "logger-sharelatex": @logger = {log: sinon.stub(), error: sinon.stub(), err:->}
+
+ @user_id = "user-id-123"
+ @contact_id = "contact-id-123"
+ @callback = sinon.stub()
+
+ describe "getContacts", ->
+ describe "with a successful response code", ->
+ beforeEach ->
+ @request.get = sinon.stub().callsArgWith(1, null, statusCode: 204, { contact_ids: @contact_ids = ["mock", "contact_ids"]})
+ @ContactManager.getContactIds @user_id, { limit: 42 }, @callback
+
+ it "should get the contacts from the contacts api", ->
+ @request.get
+ .calledWith({
+ url: "#{@settings.apis.contacts.url}/user/#{@user_id}/contacts"
+ qs: { limit: 42 }
+ json: true
+ jar: false
+ })
+ .should.equal true
+
+ it "should call the callback with the contatcs", ->
+ @callback.calledWith(null, @contact_ids).should.equal true
+
+ describe "with a failed response code", ->
+ beforeEach ->
+ @request.get = sinon.stub().callsArgWith(1, null, statusCode: 500, null)
+ @ContactManager.getContactIds @user_id, { limit: 42 }, @callback
+
+ it "should call the callback with an error", ->
+ @callback.calledWith(new Error("contacts api responded with non-success code: 500")).should.equal true
+
+ it "should log the error", ->
+ @logger.error
+ .calledWith({
+ err: new Error("contacts api responded with a non-success code: 500")
+ user_id: @user_id
+ }, "error getting contacts for user")
+ .should.equal true
+
+ describe "addContact", ->
+ describe "with a successful response code", ->
+ beforeEach ->
+ @request.post = sinon.stub().callsArgWith(1, null, statusCode: 200, null)
+ @ContactManager.addContact @user_id, @contact_id, @callback
+
+ it "should add the contacts for the user in the contacts api", ->
+ @request.post
+ .calledWith({
+ url: "#{@settings.apis.contacts.url}/user/#{@user_id}/contacts"
+ json: {
+ contact_id: @contact_id
+ }
+ jar: false
+ })
+ .should.equal true
+
+ it "should call the callback", ->
+ @callback.called.should.equal true
+
+ describe "with a failed response code", ->
+ beforeEach ->
+ @request.post = sinon.stub().callsArgWith(1, null, statusCode: 500, null)
+ @ContactManager.addContact @user_id, @contact_id, @callback
+
+ it "should call the callback with an error", ->
+ @callback.calledWith(new Error("contacts api responded with non-success code: 500")).should.equal true
+
+ it "should log the error", ->
+ @logger.error
+ .calledWith({
+ err: new Error("contacts api responded with a non-success code: 500")
+ user_id: @user_id
+ contact_id: @contact_id
+ }, "error adding contact for user")
+ .should.equal true