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({ | |
74 | icons: {primary: icon} | |
75 | }); | |
76 | $place.append(item); | |
77 | } | |
78 | }); | |
79 | } | |
80 | ||
81 | function displayDialog() { | |
82 | dialog.append('<style type="text/css">' + | |
83 | '#crmIconPicker {font-size: 2em;}' + | |
84 | '#crmIconPicker .icon-search input {font-family: FontAwesome; padding-left: .5em; margin-bottom: 1em;}' + | |
85 | '#crmIconPicker a.ui-button {width: 2em; height: 2em; color: #222;}' + | |
86 | '#crmIconPicker a.ui-button .ui-icon {margin-top: -0.5em; width: auto; height: auto;}' + | |
87 | '</style>' + | |
88 | '<div class="icon-search"><input class="crm-form-text" name="search" placeholder=""/></div>' + | |
89 | '<div class="icons"></div>' | |
90 | ); | |
91 | displayIcons(); | |
92 | dialog.unblock(); | |
93 | } | |
94 | ||
95 | function pickIcon(e) { | |
0b4d4209 CW |
96 | var newIcon = $(this).attr('title'), |
97 | style = $style.val(); | |
98 | $input.val(newIcon + (style ? ' ' + style : '')).change(); | |
0c6fe5b5 CW |
99 | dialog.dialog('close'); |
100 | e.preventDefault(); | |
101 | } | |
102 | ||
103 | dialog = $('<div id="crmIconPicker"/>').dialog({ | |
104 | title: $input.attr('title'), | |
105 | width: '80%', | |
106 | height: 400, | |
107 | modal: true | |
108 | }).block() | |
109 | .on('click', 'a', pickIcon) | |
110 | .on('keyup', 'input[name=search]', displayIcons) | |
111 | .on('dialogclose', function() { | |
112 | $(this).dialog('destroy').remove(); | |
113 | }); | |
114 | loadIcons().done(displayDialog); | |
115 | e.preventDefault(); | |
116 | }); | |
0b4d4209 | 117 | |
0c6fe5b5 CW |
118 | }); |
119 | }; | |
120 | }(CRM.$, CRM._)); |