Update fontawesome picker module (iconSelect)

- Removed 'fa-doesnt-exist' icon
- Added a icon filter search input
- Added a "No Icon" button at the bottom
- Added link back to full FA list
- If icon is picked, it shows the icon class in the search input

public/src/modules/iconSelect.js

@@ -1,6 +1,6 @@
 "use strict";
 
-/* globals define, bootbox */
+/* globals define, bootbox, templates */
 
 define('iconSelect', function() {
 	var iconSelect = {};
@@ -12,26 +12,34 @@ define('iconSelect', function() {
 
 		$('#icons .selected').removeClass('selected');
 
-		if (selected === '') {
-			selected = 'fa-doesnt-exist';
-		}
 		if (selected) {
 			$('#icons .fa-icons .fa.' + selected).addClass('selected');
 		}
 
 		templates.parse('partials/fontawesome', {}, function(html) {
 			var picker = bootbox.dialog({
+					onEscape: true,
+					backdrop: true,
 					message: html,
 					title: 'Select an Icon',
 					buttons: {
+						noIcon: {
+							label: 'No Icon',
+							className: 'btn-default',
+							callback: function() {
+								el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : ''));
+								el.val('');
+								el.attr('value', '');
+
+								onModified(el);
+							}
+						},
 						success: {
 							label: 'Select',
+							className: 'btn-primary',
 							callback: function(confirm) {
 								var iconClass = $('.bootbox .selected').attr('class');
 								var categoryIconClass = $('<div/>').addClass(iconClass).removeClass('fa').removeClass('selected').attr('class');
-								if (categoryIconClass === 'fa-doesnt-exist') {
-									categoryIconClass = '';
-								}
 
 								el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass);
 								el.val(categoryIconClass);
@@ -44,11 +52,35 @@ define('iconSelect', function() {
 				});
 
 			picker.on('shown.bs.modal', function() {
-				var modalEl = $(this);
+				var modalEl = $(this),
+					searchEl = modalEl.find('input'),
+					icons = modalEl.find('.fa-icons i'),
+					submitEl = modalEl.find('button.btn-primary');
+
+				// Focus on the input box
+				searchEl.focus();
+
 				modalEl.find('.icon-container').on('click', 'i', function() {
+					searchEl.val($(this).attr('class').replace('fa fa-', ''));
 					modalEl.find('.icon-container i').removeClass('selected');
 					$(this).addClass('selected');
 				});
+
+				searchEl.on('keyup', function(e) {
+					if (e.keyCode !== 13) {
+						// Filter
+						icons.show();
+						icons.each(function(idx, el) {
+							if (!el.className.match(new RegExp('^fa fa-.*' + searchEl.val() + '.*$'))) {
+								$(el).hide();
+							}
+						});
+					} else {
+						// Pick first match
+						$('.icon-container i:visible').first().addClass('selected');
+						submitEl.click();
+					}
+				});
 			});
 		});
 	};