From dca9218ee94bd94c88594ec69beaef188e15624e Mon Sep 17 00:00:00 2001 From: Raphael Beer Date: Wed, 20 Apr 2016 04:58:48 +0200 Subject: [PATCH 1/5] Add .selected to currently set icon in modal --- public/src/modules/iconSelect.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index 53a5780b5a..d5e8507aea 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -60,8 +60,12 @@ define('iconSelect', function() { // Focus on the input box searchEl.focus(); + if (selected) { + modalEl.find('.icon-container .' + selected).addClass('selected'); + } + modalEl.find('.icon-container').on('click', 'i', function() { - searchEl.val($(this).attr('class').replace('fa fa-', '')); + searchEl.val($(this).attr('class').replace('fa fa-', '').replace('selected', '')); modalEl.find('.icon-container i').removeClass('selected'); $(this).addClass('selected'); }); From ff2ca0f7861f53cef7890d74c17d24bd1a29564b Mon Sep 17 00:00:00 2001 From: Raphael Beer Date: Wed, 20 Apr 2016 07:31:00 +0200 Subject: [PATCH 2/5] Add changeSelection to iconSelect --- public/src/modules/iconSelect.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index d5e8507aea..d9ab54e67d 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -57,6 +57,19 @@ define('iconSelect', function() { icons = modalEl.find('.fa-icons i'), submitEl = modalEl.find('button.btn-primary'); + function changeSelection(newSelection) { + $('.icon-container i.selected').removeClass('selected'); + if (newSelection) { + newSelection.addClass('selected'); + } else if (searchEl.val().length === 0) { + if (selected) { + $('.icon-container .' + selected).addClass('selected'); + } + } else { + $('.icon-container i:visible').first().addClass('selected'); + } + } + // Focus on the input box searchEl.focus(); @@ -66,8 +79,7 @@ define('iconSelect', function() { modalEl.find('.icon-container').on('click', 'i', function() { searchEl.val($(this).attr('class').replace('fa fa-', '').replace('selected', '')); - modalEl.find('.icon-container i').removeClass('selected'); - $(this).addClass('selected'); + changeSelection($(this)); }); searchEl.on('keyup', function(e) { @@ -79,9 +91,8 @@ define('iconSelect', function() { $(el).hide(); } }); + changeSelection(); } else { - // Pick first match - $('.icon-container i:visible').first().addClass('selected'); submitEl.click(); } }); From aaef2d4362f60123ce93422a4a09c031e280504d Mon Sep 17 00:00:00 2001 From: Raphael Beer Date: Wed, 20 Apr 2016 09:34:20 +0200 Subject: [PATCH 3/5] Use modal Element as traversing root --- public/src/modules/iconSelect.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index d9ab54e67d..252f8778d9 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -58,15 +58,15 @@ define('iconSelect', function() { submitEl = modalEl.find('button.btn-primary'); function changeSelection(newSelection) { - $('.icon-container i.selected').removeClass('selected'); + modalEl.find('i.selected').removeClass('selected'); if (newSelection) { newSelection.addClass('selected'); } else if (searchEl.val().length === 0) { if (selected) { - $('.icon-container .' + selected).addClass('selected'); + modalEl.find('.' + selected).addClass('selected'); } } else { - $('.icon-container i:visible').first().addClass('selected'); + modalEl.find('i:visible').first().addClass('selected'); } } @@ -74,7 +74,7 @@ define('iconSelect', function() { searchEl.focus(); if (selected) { - modalEl.find('.icon-container .' + selected).addClass('selected'); + modalEl.find('.' + selected).addClass('selected'); } modalEl.find('.icon-container').on('click', 'i', function() { From c9b2011a11ed1b7f3d69affc2badc2469aab0b0b Mon Sep 17 00:00:00 2001 From: Raphael Beer Date: Wed, 20 Apr 2016 10:59:09 +0200 Subject: [PATCH 4/5] Set input#fa-filter value to name of selected icon - Set selected icon before modal is visible. - Select input#fa-filter content to allow immediate typing/searching. --- public/src/modules/iconSelect.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index 252f8778d9..0f8cf6d182 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -20,6 +20,7 @@ define('iconSelect', function() { var picker = bootbox.dialog({ onEscape: true, backdrop: true, + show: false, message: html, title: 'Select an Icon', buttons: { @@ -51,6 +52,16 @@ define('iconSelect', function() { } }); + picker.on('show.bs.modal', function() { + var modalEl = $(this), + searchEl = modalEl.find('input'); + + if (selected) { + modalEl.find('.' + selected).addClass('selected'); + searchEl.val(selected.replace('fa-', '')); + } + }).modal('show'); + picker.on('shown.bs.modal', function() { var modalEl = $(this), searchEl = modalEl.find('input'), @@ -71,11 +82,7 @@ define('iconSelect', function() { } // Focus on the input box - searchEl.focus(); - - if (selected) { - modalEl.find('.' + selected).addClass('selected'); - } + searchEl.selectRange(0, searchEl.val().length); modalEl.find('.icon-container').on('click', 'i', function() { searchEl.val($(this).attr('class').replace('fa fa-', '').replace('selected', '')); From ee2c178f2a5e474fe850636f77befc47b11cb49e Mon Sep 17 00:00:00 2001 From: Raphael Beer Date: Wed, 20 Apr 2016 11:46:02 +0200 Subject: [PATCH 5/5] Don't add .undefined if selection is empty --- public/src/modules/iconSelect.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index 0f8cf6d182..b1f8a30112 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -42,9 +42,11 @@ define('iconSelect', function() { var iconClass = $('.bootbox .selected').attr('class'); var categoryIconClass = $('
').addClass(iconClass).removeClass('fa').removeClass('selected').attr('class'); - el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass); - el.val(categoryIconClass); - el.attr('value', categoryIconClass); + if (categoryIconClass) { + el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass); + el.val(categoryIconClass); + el.attr('value', categoryIconClass); + } onModified(el); }