Commit | Line | Data |
---|---|---|
0c6fe5b5 CW |
1 | // https://civicrm.org/licensing |
2 | (function($, _) { | |
3 | "use strict"; | |
4 | /* jshint validthis: true */ | |
5 | var icons = [], loaded; | |
6 | ||
7 | $.fn.crmIconPicker = function() { | |
8 | ||
9 | function loadIcons() { | |
10 | if (!loaded) { | |
11 | loaded = $.Deferred(); | |
12 | CRM.$.get(CRM.config.resourceBase + 'bower_components/font-awesome/css/font-awesome.css').done(function(data) { | |
13 | var match, | |
14 | regex = /\.(fa-[-a-zA-Z0-9]+):before {/g; | |
15 | while((match = regex.exec(data)) !== null) { | |
16 | icons.push(match[1]); | |
17 | } | |
18 | loaded.resolve(); | |
19 | }); | |
20 | } | |
21 | return loaded; | |
22 | } | |
23 | ||
24 | return this.each(function() { | |
25 | if ($(this).hasClass('iconpicker-widget')) { | |
26 | return; | |
27 | } | |
0b4d4209 | 28 | |
0c6fe5b5 | 29 | var $input = $(this), |
c615ef58 | 30 | $button = $('<a class="crm-icon-picker-button" href="#" />').button().removeClass('ui-corner-all').attr('title', $input.attr('title')), |
0b4d4209 CW |
31 | $style = $('<select class="crm-form-select"></select>'), |
32 | options = [ | |
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')} | |
38 | ]; | |
39 | ||
40 | function formatButton() { | |
a2a3cc46 CW |
41 | var val = $input.val().replace('fa ', ''); |
42 | val = val.replace('crm-i ', ''); | |
43 | var split = val.split(' '); | |
0b4d4209 CW |
44 | $button.button('option', { |
45 | label: split[0] || ts('None'), | |
a2a3cc46 | 46 | icons: {primary: val ? val : 'fa-'} |
e03e6f28 | 47 | }); |
0b4d4209 CW |
48 | $style.toggle(!!split[0]).val(split[1] || ''); |
49 | } | |
50 | ||
c615ef58 | 51 | $input.hide().addClass('iconpicker-widget').after($style).after(' ').after($button).change(formatButton); |
0b4d4209 CW |
52 | |
53 | CRM.utils.setOptions($style, options, ts('Normal')); | |
54 | ||
55 | formatButton(); | |
56 | ||
57 | $style.change(function() { | |
58 | if ($input.val()) { | |
59 | var split = $input.val().split(' '), | |
60 | style = $style.val(); | |
61 | $input.val(split[0] + (style ? ' ' + style : '')).change(); | |
62 | } | |
0c6fe5b5 CW |
63 | }); |
64 | ||
0b4d4209 | 65 | $button.click(function(e) { |
0c6fe5b5 CW |
66 | var dialog; |
67 | ||
68 | function displayIcons() { | |
69 | var term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(), | |
0b4d4209 | 70 | $place = $('div.icons', dialog).html(''); |
0c6fe5b5 CW |
71 | $.each(icons, function(i, icon) { |
72 | if (!term.length || icon.replace(/-/g, '').indexOf(term) > -1) { | |
73 | var item = $('<a href="#" title="' + icon + '"/>').button({ | |
f42b70be | 74 | icons: {primary: icon + ' ' + $style.val()} |
0c6fe5b5 CW |
75 | }); |
76 | $place.append(item); | |
77 | } | |
78 | }); | |
79 | } | |
80 | ||
81 | function displayDialog() { | |
82 | dialog.append('<style type="text/css">' + | |
d2b384e9 | 83 | '#crmIconPicker {font-size: 20px;}' + |
f42b70be CW |
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;}' + | |
d2b384e9 | 87 | '#crmIconPicker a.ui-button {width: 1em; height: 1em; color: #222;}' + |
0c6fe5b5 CW |
88 | '#crmIconPicker a.ui-button .ui-icon {margin-top: -0.5em; width: auto; height: auto;}' + |
89 | '</style>' + | |
f42b70be CW |
90 | '<div class="icon-ctrls crm-clearfix">' + |
91 | '<input class="crm-form-text" name="search" placeholder=""/>' + | |
92 | '<select class="crm-form-select"></select>' + | |
13a3d214 | 93 | '<button type="button" class="cancel" title=""><i class="crm-i fa-ban" aria-hidden="true"></i> ' + ts('No icon') + '</button>' + |
f42b70be | 94 | '</div>' + |
0c6fe5b5 CW |
95 | '<div class="icons"></div>' |
96 | ); | |
f42b70be CW |
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()); | |
102 | displayIcons(); | |
103 | }); | |
104 | $('.icon-ctrls button', dialog).click(pickIcon); | |
0c6fe5b5 CW |
105 | displayIcons(); |
106 | dialog.unblock(); | |
107 | } | |
108 | ||
109 | function pickIcon(e) { | |
0b4d4209 | 110 | var newIcon = $(this).attr('title'), |
f42b70be | 111 | style = newIcon ? $style.val() : ''; |
0b4d4209 | 112 | $input.val(newIcon + (style ? ' ' + style : '')).change(); |
0c6fe5b5 CW |
113 | dialog.dialog('close'); |
114 | e.preventDefault(); | |
115 | } | |
116 | ||
117 | dialog = $('<div id="crmIconPicker"/>').dialog({ | |
118 | title: $input.attr('title'), | |
119 | width: '80%', | |
f42b70be | 120 | height: '90%', |
0c6fe5b5 CW |
121 | modal: true |
122 | }).block() | |
123 | .on('click', 'a', pickIcon) | |
124 | .on('keyup', 'input[name=search]', displayIcons) | |
125 | .on('dialogclose', function() { | |
126 | $(this).dialog('destroy').remove(); | |
127 | }); | |
128 | loadIcons().done(displayDialog); | |
129 | e.preventDefault(); | |
130 | }); | |
0b4d4209 | 131 | |
0c6fe5b5 CW |
132 | }); |
133 | }; | |
d2b384e9 CW |
134 | |
135 | $(document) | |
136 | .on('crmLoad', function(e) { | |
137 | $('.crm-icon-picker', e.target).not('.iconpicker-widget').crmIconPicker(); | |
138 | }); | |
0c6fe5b5 | 139 | }(CRM.$, CRM._)); |