1 // https://civicrm.org/licensing
4 /* jshint validthis: true */
5 var icons
= [], loaded
;
7 $.fn
.crmIconPicker = function() {
11 loaded
= $.Deferred();
12 CRM
.$.get(CRM
.config
.resourceBase
+ 'bower_components/font-awesome/css/font-awesome.css').done(function(data
) {
14 regex
= /\.(fa-[-a-zA-Z0-9]+):before {/g;
15 while((match
= regex
.exec(data
)) !== null) {
24 return this.each(function() {
25 if ($(this).hasClass('iconpicker-widget')) {
30 $button
= $('<a class="crm-icon-picker-button" href="#" />').button().removeClass('ui-corner-all').attr('title', $input
.attr('title')),
31 $style
= $('<select class="crm-form-select"></select>'),
33 {key
: 'fa-rotate-90', value
: ts('Rotate right')},
34 {key
: 'fa-rotate-270', value
: ts('Rotate left')},
35 {key
: 'fa-rotate-180', value
: ts('Rotate 180')},
36 {key
: 'fa-flip-horizontal', value
: ts('Flip horizontal')},
37 {key
: 'fa-flip-vertical', value
: ts('Flip vertical')}
40 function formatButton() {
41 var val
= $input
.val().replace('fa ', '');
42 val
= val
.replace('crm-i ', '');
43 var split
= val
.split(' ');
44 $button
.button('option', {
45 label
: split
[0] || ts('None'),
46 icons
: {primary
: val
? val
: 'fa-'}
48 $style
.toggle(!!split
[0]).val(split
[1] || '');
51 $input
.hide().addClass('iconpicker-widget').after($style
).after(' ').after($button
).change(formatButton
);
53 CRM
.utils
.setOptions($style
, options
, ts('Normal'));
57 $style
.change(function() {
59 var split
= $input
.val().split(' '),
61 $input
.val(split
[0] + (style
? ' ' + style
: '')).change();
65 $button
.click(function(e
) {
68 function displayIcons() {
69 var term
= $('input[name=search]', dialog
).val().replace(/-/g
, '').toLowerCase(),
70 $place
= $('div.icons', dialog
).html('');
71 $.each(icons
, function(i
, icon
) {
72 if (!term
.length
|| icon
.replace(/-/g
, '').indexOf(term
) > -1) {
73 var item
= $('<a href="#" title="' + icon
+ '"/>').button({
74 icons
: {primary
: icon
+ ' ' + $style
.val()}
81 function displayDialog() {
82 dialog
.append('<style type="text/css">' +
83 '#crmIconPicker {font-size: 20px;}' +
84 '#crmIconPicker .icon-ctrls input {font-family: FontAwesome; padding-left: .5em; margin-bottom: 1em;}' +
85 '#crmIconPicker .icon-ctrls > * {display: inline-block; vertical-align: top; margin-right: 1em;}' +
86 '#crmIconPicker .icon-ctrls > button {float: right; margin-right: 0;}' +
87 '#crmIconPicker a.ui-button {width: 1em; height: 1em; color: #222;}' +
88 '#crmIconPicker a.ui-button .ui-icon {margin-top: -0.5em; width: auto; height: auto;}' +
90 '<div class="icon-ctrls crm-clearfix">' +
91 '<input class="crm-form-text" name="search" placeholder=""/>' +
92 '<select class="crm-form-select"></select>' +
93 '<button type="button" class="cancel" title=""><i class="crm-i fa-ban" aria-hidden="true"></i> ' + ts('No icon') + '</button>' +
95 '<div class="icons"></div>'
97 var $styleSelect
= $('.icon-ctrls select', dialog
);
98 CRM
.utils
.setOptions($styleSelect
, options
, ts('Normal'));
99 $styleSelect
.val($style
.val());
100 $styleSelect
.change(function() {
101 $style
.val($styleSelect
.val());
104 $('.icon-ctrls button', dialog
).click(pickIcon
);
109 function pickIcon(e
) {
110 var newIcon
= $(this).attr('title'),
111 style
= newIcon
? $style
.val() : '';
112 $input
.val(newIcon
+ (style
? ' ' + style
: '')).change();
113 dialog
.dialog('close');
117 dialog
= $('<div id="crmIconPicker"/>').dialog({
118 title
: $input
.attr('title'),
123 .on('click', 'a', pickIcon
)
124 .on('keyup', 'input[name=search]', displayIcons
)
125 .on('dialogclose', function() {
126 $(this).dialog('destroy').remove();
128 loadIcons().done(displayDialog
);
136 .on('crmLoad', function(e
) {
137 $('.crm-icon-picker', e
.target
).not('.iconpicker-widget').crmIconPicker();