From fa109241cc14043c77bcd064582cb0ecc4feca90 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Tue, 22 Sep 2015 11:37:09 -0400 Subject: [PATCH] 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 | 48 +++++++++++++++++++++++++----- src/views/partials/fontawesome.tpl | 9 +++++- 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index c8cd3ac529..53a5780b5a 100644 --- a/public/src/modules/iconSelect.js +++ b/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 = $('
').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(); + } + }); }); }); }; diff --git a/src/views/partials/fontawesome.tpl b/src/views/partials/fontawesome.tpl index c5c768fc42..6ede4e70d3 100644 --- a/src/views/partials/fontawesome.tpl +++ b/src/views/partials/fontawesome.tpl @@ -1,6 +1,13 @@
+
+ + +
-
+

+ For a full list of icons, please consult: + FontAwesome +

\ No newline at end of file