From 1458d5fc702e74f9c45c6f4811c315dd91b37cee Mon Sep 17 00:00:00 2001 From: colemanw Date: Thu, 1 Aug 2024 10:13:54 -0400 Subject: [PATCH] crmIconPicker - Move stylesheet, include aliases in search --- css/crm-i.css | 31 ---------------- css/crm-iconPicker.css | 30 ++++++++++++++++ js/jquery/jquery.crmIconPicker.js | 59 ++++++++++++++++++++++--------- 3 files changed, 72 insertions(+), 48 deletions(-) create mode 100644 css/crm-iconPicker.css diff --git a/css/crm-i.css b/css/crm-i.css index 18c997ceee2c..515f8ce9f965 100644 --- a/css/crm-i.css +++ b/css/crm-i.css @@ -58,34 +58,3 @@ i.crm-i { .crm-i.fa-crm-formula { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 121.83 122.88' style='enable-background:new 0 0 121.83 122.88' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M27.61 34.37l-4.07 4.6l0.4 1.74h10.48c-2.14 12.38-3.74 23.54-6.81 40.74c-3.67 21.94-5.78 27.33-7.03 29.3 c-1.1 1.95-2.68 2.96-4.82 2.96c-2.35 0-6.6-1.86-8.88-3.97c-0.82-0.56-1.79-0.42-2.82 0.26C2 111.74 0 114.42 0 116.82 c-0.12 3.24 4.21 6.06 8.34 6.06c3.64 0 9-2.28 14.64-7.64c7.71-7.31 13.48-17.34 18.3-39.02c3.1-13.84 4.56-22.84 6.74-35.5 l13.02-1.18l2.82-5.17H49.2C52.99 10.53 55.95 7 59.59 7c2.42 0 5.24 1.86 8.48 5.52c0.96 1.32 2.4 1.18 3.5 0.28 c1.85-1.1 4.13-3.92 4.28-6.48C75.96 3.5 72.6 0 66.82 0C61.58 0 53.55 3.5 46.8 10.38c-5.92 6.27-9.02 14.1-11.16 23.99H27.61 L27.61 34.37z M69.27 50.33c4.04-5.38 6.46-7.17 7.71-7.17c1.29 0 2.32 1.27 4.53 8.41l3.78 12.19 c-7.31 11.18-12.66 17.41-15.91 17.41c-1.08 0-2.17-0.34-2.94-1.1c-0.76-0.76-1.6-1.39-2.42-1.39c-2.68 0-6 3.25-6.06 7.28 c-0.06 4.11 2.82 7.05 6.6 7.05c6.49 0 11.98-6.37 22.58-23.26l3.1 10.45c2.66 8.98 5.78 12.81 9.68 12.81 c4.82 0 11.3-4.11 18.37-15.22l-2.96-3.38c-4.25 5.12-7.07 7.52-8.74 7.52c-1.86 0-3.49-2.84-5.64-9.82l-4.53-14.73 c2.68-3.95 5.32-7.27 7.64-9.92c2.76-3.15 4.89-4.49 6.34-4.49c1.22 0 2.28 0.52 2.94 1.25c0.87 0.96 1.39 1.41 2.42 1.41 c2.33 0 5.93-2.96 6.06-6.88c0.12-3.64-2.14-6.74-6.06-6.74c-5.92 0-11.14 5.1-21.19 20.04l-2.07-6.41 c-2.9-9-4.82-13.63-8.86-13.63c-4.7 0-11.16 5.78-17.48 14.94L69.27 50.33L69.27 50.33z'/%3E%3C/g%3E%3C/svg%3E"); } - -/* icon picker styles */ -#crmIconPicker { - font-size: 20px; -} - -#crmIconPicker .icon-ctrls input::placeholder { - font-family: FontAwesome; - padding-left: .5em; - margin-bottom: 1em; -} - -#crmIconPicker .icon-ctrls > * { - display: inline-block; - vertical-align: top; - margin-right: 1em; -} -#crmIconPicker .icon-ctrls > button { - float: right; - margin-right: 0; -} -#crmIconPicker a.ui-button { - width: 1em; - height: 1em; - color: #222; -} -#crmIconPicker a.ui-button .ui-icon { - margin-top: -0.5em; - width: auto; - height: auto; -} diff --git a/css/crm-iconPicker.css b/css/crm-iconPicker.css new file mode 100644 index 000000000000..da806ff1c2ab --- /dev/null +++ b/css/crm-iconPicker.css @@ -0,0 +1,30 @@ +/* icon picker styles */ +#crmIconPicker { + font-size: 20px; +} + +#crmIconPicker .icon-ctrls input::placeholder { + font-family: FontAwesome; + padding-left: .5em; + margin-bottom: 1em; +} + +#crmIconPicker .icon-ctrls > * { + display: inline-block; + vertical-align: top; + margin-right: 1em; +} +#crmIconPicker .icon-ctrls > button { + float: right; + margin-right: 0; +} +#crmIconPicker a.ui-button { + width: 1em; + height: 1em; + color: #222; +} +#crmIconPicker a.ui-button .ui-icon { + margin-top: -0.5em; + width: auto; + height: auto; +} diff --git a/js/jquery/jquery.crmIconPicker.js b/js/jquery/jquery.crmIconPicker.js index 81f47411951f..17373abc18de 100644 --- a/js/jquery/jquery.crmIconPicker.js +++ b/js/jquery/jquery.crmIconPicker.js @@ -2,21 +2,35 @@ (function($, _) { "use strict"; /* jshint validthis: true */ - var icons = [], loaded; + const icons = []; + const aliases = {}; + let loaded; $.fn.crmIconPicker = function() { function loadIcons() { if (!loaded) { loaded = $.Deferred(); - CRM.$.get(CRM.config.resourceBase + 'bower_components/font-awesome/css/all.css').done(function(data) { - var match, - prev, - regex = /\.(fa-[-a-zA-Z0-9]+):+before\s*\{\s*content:\s*"([^"]+)"/g; + // Load iconPicker stylesheet + let stylesheet = document.createElement('link'); + stylesheet.rel = 'stylesheet'; + stylesheet.type = 'text/css'; + stylesheet.href = CRM.config.resourceBase + 'css/crm-iconPicker.css'; + document.head.appendChild(stylesheet); + // Load icons + $.get(CRM.config.resourceBase + 'bower_components/font-awesome/css/all.css').done(function(data) { + let match; + let prev; + let last; + const regex = /\.(fa-[-a-zA-Z0-9]+):+before\s*\{\s*content:\s*"([^"]+)"/g; while((match = regex.exec(data)) !== null) { - // Eliminate duplicates if icon is same as previous class + // If icon is same as previous class, it's an alias if (match[2] !== prev) { icons.push(match[1]); + last = match[1]; + } else if (last) { + aliases[last] = aliases[last] || []; + aliases[last].push(match[1].replace(/-/g, '')); } prev = match[2]; } @@ -31,7 +45,7 @@ return; } - var $input = $(this), + let $input = $(this), classes = ($input.attr('class') || '').replace('crm-icon-picker', ''), $button = $('').button().removeClass('ui-corner-all').attr('title', $input.attr('title')), $style = $('').addClass(classes), @@ -44,9 +58,9 @@ ]; function formatButton() { - var val = $input.val().replace('fa ', ''); + let val = $input.val().replace('fa ', ''); val = val.replace('crm-i ', ''); - var split = val.split(' '); + const split = val.split(' '); $button.button('option', { label: split[0] || ts('None'), icons: {primary: val ? val + ' crm-i' : 'fa-'} @@ -62,21 +76,32 @@ $style.change(function() { if ($input.val()) { - var split = $input.val().split(' '), + const split = $input.val().split(' '), style = $style.val(); $input.val(split[0] + (style ? ' ' + style : '')).change(); } }); $button.click(function(e) { - var dialog; + let dialog; function displayIcons() { - var term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(), - $place = $('div.icons', dialog).html(''); + const term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(); + const $place = $('div.icons', dialog).html(''); + let matches = []; + if (term.length) { + // Match icon classes + matches = icons.filter((i) => (i.replace(/-/g, '').indexOf(term) > -1)); + // Match icon aliases + for (let [icon, iconAliases] of Object.entries(aliases)) { + if (iconAliases.filter((i) => (i.replace(/-/g, '').indexOf(term) > -1)).length) { + matches.push(icon); + } + } + } $.each(icons, function(i, icon) { - if (!term.length || icon.replace(/-/g, '').indexOf(term) > -1) { - var item = $('').button({ + if (!term.length || matches.indexOf(icon) > -1) { + const item = $('').button({ icons: {primary: 'crm-i ' + icon + ' ' + $style.val()} }); $place.append(item); @@ -94,7 +119,7 @@ '' + '
' ); - var $styleSelect = $('.icon-ctrls select', dialog); + let $styleSelect = $('.icon-ctrls select', dialog); CRM.utils.setOptions($styleSelect, options, ts('Normal')); $styleSelect.val($style.val()); $styleSelect.change(function() { @@ -107,7 +132,7 @@ } function pickIcon(e) { - var newIcon = $(this).attr('title'), + const newIcon = $(this).attr('title'), style = newIcon ? $style.val() : ''; $input.val(newIcon + (style ? ' ' + style : '')).change(); dialog.dialog('close');