From 0c6fe5b5d6072efa68c700863cba449fad538db8 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Wed, 7 Dec 2016 11:06:36 -0500 Subject: [PATCH] CRM-19723 - Add crmIconPicker widget --- CRM/Admin/Form.php | 1 + CRM/Admin/Form/Options.php | 3 + CRM/Core/Form/Renderer.php | 2 +- js/Common.js | 6 +- js/crm.admin.js | 15 +++++ js/jquery/jquery.crmIconPicker.js | 94 ++++++++++++++++++++++++++++ templates/CRM/Admin/Form/Options.tpl | 6 ++ 7 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 js/crm.admin.js create mode 100644 js/jquery/jquery.crmIconPicker.js diff --git a/CRM/Admin/Form.php b/CRM/Admin/Form.php index c6b535c079..13afcc276b 100644 --- a/CRM/Admin/Form.php +++ b/CRM/Admin/Form.php @@ -69,6 +69,7 @@ class CRM_Admin_Form extends CRM_Core_Form { */ public function preProcess() { Civi::resources()->addStyleFile('civicrm', 'css/admin.css'); + Civi::resources()->addScriptFile('civicrm', 'js/crm.admin.js'); $this->_id = $this->get('id'); $this->_BAOName = $this->get('BAOName'); diff --git a/CRM/Admin/Form/Options.php b/CRM/Admin/Form/Options.php index d7e38155b7..6c8dad5c5c 100644 --- a/CRM/Admin/Form/Options.php +++ b/CRM/Admin/Form/Options.php @@ -170,6 +170,9 @@ class CRM_Admin_Form_Options extends CRM_Admin_Form { TRUE ); } + else { + $this->add('text', 'icon', ts('Icon'), array('class' => 'crm-icon-picker', 'title' => ts('Choose Icon'), 'allowClear' => TRUE)); + } if (!in_array($this->_gName, array( 'email_greeting', diff --git a/CRM/Core/Form/Renderer.php b/CRM/Core/Form/Renderer.php index 1535fd111e..6f235382db 100644 --- a/CRM/Core/Form/Renderer.php +++ b/CRM/Core/Form/Renderer.php @@ -139,7 +139,7 @@ class CRM_Core_Form_Renderer extends HTML_QuickForm_Renderer_ArraySmarty { $this->addOptionsEditLink($el, $element); } - if ($element->getType() == 'group' && $element->getAttribute('allowClear')) { + if ($element->getAttribute('allowClear')) { $this->appendUnselectButton($el, $element); } } diff --git a/js/Common.js b/js/Common.js index b2d7d461c0..0c0dfc4950 100644 --- a/js/Common.js +++ b/js/Common.js @@ -1500,8 +1500,10 @@ if (!CRM.vars) CRM.vars = {}; $(this).siblings('input:text').val('').trigger('change', ['crmClear']); return false; }) - .on('change', 'input.crm-form-radio:checked', function() { - $(this).siblings('.crm-clear-link').css({visibility: ''}); + .on('change', 'input.crm-form-radio:checked, input[allowclear=1]', function(e, context) { + if (context !== 'crmClear' && ($(this).is(':checked') || ($(this).is('[allowclear=1]') && $(this).val()))) { + $(this).siblings('.crm-clear-link').css({visibility: ''}); + } }) // Allow normal clicking of links within accordions diff --git a/js/crm.admin.js b/js/crm.admin.js new file mode 100644 index 0000000000..f555df2b36 --- /dev/null +++ b/js/crm.admin.js @@ -0,0 +1,15 @@ +// https://civicrm.org/licensing +(function($) { + "use strict"; + $(document) + .on('crmLoad', function(e) { + $('.crm-icon-picker', e.target).not('.iconpicker-widget').each(function() { + var $el = $(this); + CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() { + $el.crmIconPicker(); + }); + // Hack to get the strings in this lazy-loaded file translated + ts('None'); + }); + }) +})(CRM.$); diff --git a/js/jquery/jquery.crmIconPicker.js b/js/jquery/jquery.crmIconPicker.js new file mode 100644 index 0000000000..7e76f53881 --- /dev/null +++ b/js/jquery/jquery.crmIconPicker.js @@ -0,0 +1,94 @@ +// https://civicrm.org/licensing +(function($, _) { + "use strict"; + /* jshint validthis: true */ + var icons = [], loaded; + + $.fn.crmIconPicker = function() { + + function loadIcons() { + if (!loaded) { + loaded = $.Deferred(); + CRM.$.get(CRM.config.resourceBase + 'bower_components/font-awesome/css/font-awesome.css').done(function(data) { + var match, + regex = /\.(fa-[-a-zA-Z0-9]+):before {/g; + while((match = regex.exec(data)) !== null) { + icons.push(match[1]); + } + loaded.resolve(); + }); + } + return loaded; + } + + return this.each(function() { + if ($(this).hasClass('iconpicker-widget')) { + return; + } + var $input = $(this), + button = $('').button({ + label: $(this).val() || ts('None'), + icons: {primary: $(this).val()} + }).attr('title', $input.attr('title')); + $input.hide().addClass('iconpicker-widget').after(button).change(function() { + button.button('option', { + label: $(this).val() || ts('None'), + icons: {primary: $(this).val()} + }); + }); + + button.click(function(e) { + var dialog; + + function displayIcons() { + var term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(), + $place = $('div.icons', dialog); + $place.html(''); + $.each(icons, function(i, icon) { + if (!term.length || icon.replace(/-/g, '').indexOf(term) > -1) { + var item = $('').button({ + icons: {primary: icon} + }); + $place.append(item); + } + }); + } + + function displayDialog() { + dialog.append('' + + '
' + + '
' + ); + displayIcons(); + dialog.unblock(); + } + + function pickIcon(e) { + var newIcon = $(this).attr('title'); + $input.val(newIcon).change(); + dialog.dialog('close'); + e.preventDefault(); + } + + dialog = $('
').dialog({ + title: $input.attr('title'), + width: '80%', + height: 400, + modal: true + }).block() + .on('click', 'a', pickIcon) + .on('keyup', 'input[name=search]', displayIcons) + .on('dialogclose', function() { + $(this).dialog('destroy').remove(); + }); + loadIcons().done(displayDialog); + e.preventDefault(); + }); + }); + }; +}(CRM.$, CRM._)); diff --git a/templates/CRM/Admin/Form/Options.tpl b/templates/CRM/Admin/Form/Options.tpl index bc560673ba..a127ed006a 100644 --- a/templates/CRM/Admin/Form/Options.tpl +++ b/templates/CRM/Admin/Form/Options.tpl @@ -133,6 +133,12 @@ {$form.weight.label} {$form.weight.html} + {if $form.icon.html} + + {$form.icon.label} + {$form.icon.html} + + {/if} {if $form.component_id.html} {* Component ID is exposed for activity types if CiviCase is enabled. *} {$form.component_id.label} -- 2.25.1