Improve popup and use for emoji

client/views/app/chatWindowDashboard.coffee

@@ -252,14 +252,45 @@ Template.chatWindowDashboard.helpers
 
 	popupConfig: ->
 		template = Template.instance()
-		return {
+		config =
+			title: 'People'
 			collection: Meteor.users
 			template: 'messagePopupUser'
 			getInput: ->
 				return template.find('.input-message')
 			getFilter: (collection, filter) ->
 				return collection.find name: new RegExp(filter, 'i')
-		}
+
+		return config
+
+	popupEmojiConfig: ->
+		template = Template.instance()
+		config = 
+			title: 'Emoji'
+			collection: emojione.emojioneList
+			template: 'messagePopupEmoji'
+			trigger: ':'
+			prefix: ''
+			getInput: ->
+				return template.find('.input-message')
+			getFilter: (collection, filter) ->
+				results = []
+				for shortname, data of collection
+					if shortname.indexOf(filter) > -1
+						results.push
+							_id: shortname
+							data: data
+
+					if results.length > 10
+						break
+
+				if filter.length >= 3
+					results.sort (a, b) ->
+						a.length > b.length
+
+				return results
+
+		return config
 
 
 Template.chatWindowDashboard.events
@@ -451,29 +482,29 @@ ChatMessages = (->
 				resize()
 				toBottom() if self.scrollable
 
-		$(".input-message").textcomplete [ {
-			match: /\B:([\-+\w]*)$/
-			search: (term, callback) ->
-				results = []
-				$.each emojione.emojioneList, (shortname, data) ->
-					if shortname.indexOf(term) > -1
-						results.push shortname
-					return
-				if term.length >= 3
-					results.sort (a, b) ->
-						a.length > b.length
-				callback results
-				return
-			template: (shortname) ->
-				length = emojione.emojioneList[shortname].length
-				'<img class="emojione" src="//cdn.jsdelivr.net/emojione/assets/png/' + emojione.emojioneList[shortname][length - 1].toUpperCase() + '.png"> ' + shortname
-			replace: (shortname) ->
-				event.stopPropagation()
-				event.preventDefault()
-				shortname
-			index: 1
-			maxCount: 10
-		} ], footer: '', placement: 'top'
+		# $(".input-message").textcomplete [ {
+		# 	match: /\B:([\-+\w]*)$/
+		# 	search: (term, callback) ->
+		# 		results = []
+		# 		$.each emojione.emojioneList, (shortname, data) ->
+		# 			if shortname.indexOf(term) > -1
+		# 				results.push shortname
+		# 			return
+		# 		if term.length >= 3
+		# 			results.sort (a, b) ->
+		# 				a.length > b.length
+		# 		callback results
+		# 		return
+		# 	template: (shortname) ->
+		# 		length = emojione.emojioneList[shortname].length
+		# 		'<img class="emojione" src="//cdn.jsdelivr.net/emojione/assets/png/' + emojione.emojioneList[shortname][length - 1].toUpperCase() + '.png"> ' + shortname
+		# 	replace: (shortname) ->
+		# 		event.stopPropagation()
+		# 		event.preventDefault()
+		# 		shortname
+		# 	index: 1
+		# 	maxCount: 10
+		# } ], footer: '', placement: 'top'
 
 		return
 

client/views/app/chatWindowDashboard.html

@@ -53,6 +53,7 @@
 				<span>{{_ "chatWindowDashboard.New_messages"}}</span>
 			</div>
 		</div>
+		{{> messagePopup popupEmojiConfig}}
 		{{> messagePopup popupConfig}}
 		<footer class="footer">
 			<form class="message-form" method="post" action="/">

client/views/app/message-popup-emoji.coffee

+Template.messagePopupEmoji.helpers
+	value: ->
+		length = this.data.length
+		return this.data[length - 1].toUpperCase()

client/views/app/message-popup-emoji.html

+<template name="messagePopupEmoji">
+	<img class="emojione" src="//cdn.jsdelivr.net/emojione/assets/png/{{value}}.png">  {{_id}}
+</template>
\ No newline at end of file

client/views/app/message-popup.coffee

+val = (v, d) ->
+	return if v? then v else d
+
 Template.messagePopup.onCreated ->
+	template = this
+
+	template.textFilter = new ReactiveVar ''
+
+	template.open = new ReactiveVar false
+
+	template.value = new ReactiveVar
+
+	template.trigger = val(template.data.trigger, '@')
+
+	template.prefix = val(template.data.prefix, template.trigger)
 
-	this.textFilter = new ReactiveVar ''
+	template.suffix = val(template.data.suffix, ' ')
 
-	this.open = new ReactiveVar false
+	template.matchSelectorRegex = val(template.data.matchSelectorRegex, new RegExp "#{template.trigger}[A-Za-z0-9-_]*$")
 
-	this.value = new ReactiveVar
+	template.selectorRegex = val(template.data.selectorRegex, new RegExp "#{template.trigger}([A-Za-z0-9-_]*)$")
 
-	this.up = =>
-		current = this.find('.popup-item.selected')
-		previous = current.previousElementSibling or this.find('.popup-item:last-child')
+	template.replaceRegex = val(template.data.replaceRegex, new RegExp "#{template.trigger}[A-Za-z0-9-_]*$")
+
+	template.up = =>
+		current = template.find('.popup-item.selected')
+		previous = current.previousElementSibling or template.find('.popup-item:last-child')
 		if previous?
 			current.className = current.className.replace /\sselected/, ''
 			previous.className += ' selected'
-			this.value.set previous.getAttribute('data-id')
+			template.value.set previous.getAttribute('data-id')
 
-	this.down = =>
-		current = this.find('.popup-item.selected')
-		next = current.nextElementSibling or this.find('.popup-item')
+	template.down = =>
+		current = template.find('.popup-item.selected')
+		next = current.nextElementSibling or template.find('.popup-item')
 		if next?
 			current.className = current.className.replace /\sselected/, ''
 			next.className += ' selected'
-			this.value.set next.getAttribute('data-id')
+			template.value.set next.getAttribute('data-id')
 
-	this.verifySelection = =>
-		current = this.find('.popup-item.selected')
+	template.verifySelection = =>
+		current = template.find('.popup-item.selected')
 		if not current?
-			first = this.find('.popup-item')
+			first = template.find('.popup-item')
 			if first?
 				first.className += ' selected'
-				this.value.set first.getAttribute('data-id')
+				template.value.set first.getAttribute('data-id')
+
+	template.onInputKeydown = (event) =>
+		if template.open.curValue isnt true
+			return
 
-	this.onInputKeydown = (event) =>
-		if event.which is 13 and this.open.curValue is true
-			this.open.set false
-			this.input.value = this.input.value.replace /@[A-Za-z0-9-_]*$/, '@' + this.value.curValue + ' '
+		if event.which is 13
+			template.open.set false
+			template.input.value = template.input.value.replace template.selectorRegex, template.prefix + template.value.curValue + template.suffix
 			event.preventDefault()
 			event.stopPropagation()
 
-	this.onInputKeyup = (event) =>
+	template.onInputKeyup = (event) =>
+		if template.open.curValue is true and event.which is 27
+			template.open.set false
+			event.preventDefault()
+			event.stopPropagation()
+			return
+
+		if template.matchSelectorRegex.test template.input.value
+			template.textFilter.set(template.input.value.match(template.selectorRegex)[1])
+			template.open.set true
+		else
+			template.open.set false
+
+		if template.open.curValue isnt true
+			return
+
 		if event.which is 38
-			this.up()
+			template.up()
 		else if event.which is 40
-			this.down()
+			template.down()
 		else
 			Meteor.defer =>
-				this.verifySelection()
-
-		if /@[A-Za-z0-9-_]*$/.test this.input.value
-			this.textFilter.set(this.input.value.match(/@([A-Za-z0-9-_]*)$/)[1])
-			this.open.set true
-		else
-			this.open.set false
+				template.verifySelection()
 
 
 Template.messagePopup.onRendered ->
 	this.input = this.data.getInput?()
-	$(this.input).on 'keyup', this.onInputKeyup
-	$(this.input).on 'keydown', this.onInputKeydown
+	$(this.input).on 'keyup', this.onInputKeyup.bind this
+	$(this.input).on 'keydown', this.onInputKeydown.bind this
 
 
 Template.messagePopup.onDestroyed ->
@@ -92,4 +120,8 @@ Template.messagePopup.helpers
 	data: ->
 		template = Template.instance()
 		filter = template.textFilter.get()
-		return template.data.getFilter template.data.collection, filter
+		result = template.data.getFilter template.data.collection, filter
+		if (template.data.collection instanceof Meteor.Collection and result.count() is 0) or result?.length is 0
+			template.open.set false
+
+		return result

client/views/app/message-popup.html

@@ -2,7 +2,7 @@
 	{{#if isOpen}}
 		<div class="message-popup">
 			<div class="message-popup-title">
-				People
+				{{title}}
 			</div>
 			<div>
 				{{#each data}}