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 split
= $input
.val().split(' ');
42 $button
.button('option', {
43 label
: split
[0] || ts('None'),
44 icons
: {primary
: $input
.val()}
46 $style
.toggle(!!split
[0]).val(split
[1] || '');
49 $input
.hide().addClass('iconpicker-widget').after($style
).after(' ').after($button
).change(formatButton
);
51 CRM
.utils
.setOptions($style
, options
, ts('Normal'));
55 $style
.change(function() {
57 var split
= $input
.val().split(' '),
59 $input
.val(split
[0] + (style
? ' ' + style
: '')).change();
63 $button
.click(function(e
) {
66 function displayIcons() {
67 var term
= $('input[name=search]', dialog
).val().replace(/-/g
, '').toLowerCase(),
68 $place
= $('div.icons', dialog
).html('');
69 $.each(icons
, function(i
, icon
) {
70 if (!term
.length
|| icon
.replace(/-/g
, '').indexOf(term
) > -1) {
71 var item
= $('<a href="#" title="' + icon
+ '"/>').button({
72 icons
: {primary
: icon
}
79 function displayDialog() {
80 dialog
.append('<style type="text/css">' +
81 '#crmIconPicker {font-size: 2em;}' +
82 '#crmIconPicker .icon-search input {font-family: FontAwesome; padding-left: .5em; margin-bottom: 1em;}' +
83 '#crmIconPicker a.ui-button {width: 2em; height: 2em; color: #222;}' +
84 '#crmIconPicker a.ui-button .ui-icon {margin-top: -0.5em; width: auto; height: auto;}' +
86 '<div class="icon-search"><input class="crm-form-text" name="search" placeholder=""/></div>' +
87 '<div class="icons"></div>'
93 function pickIcon(e
) {
94 var newIcon
= $(this).attr('title'),
96 $input
.val(newIcon
+ (style
? ' ' + style
: '')).change();
97 dialog
.dialog('close');
101 dialog
= $('<div id="crmIconPicker"/>').dialog({
102 title
: $input
.attr('title'),
107 .on('click', 'a', pickIcon
)
108 .on('keyup', 'input[name=search]', displayIcons
)
109 .on('dialogclose', function() {
110 $(this).dialog('destroy').remove();
112 loadIcons().done(displayDialog
);