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() { | |
41 | var split = $input.val().split(' '); | |
42 | $button.button('option', { | |
43 | label: split[0] || ts('None'), | |
44 | icons: {primary: $input.val()} | |
e03e6f28 | 45 | }); |
0b4d4209 CW |
46 | $style.toggle(!!split[0]).val(split[1] || ''); |
47 | } | |
48 | ||
c615ef58 | 49 | $input.hide().addClass('iconpicker-widget').after($style).after(' ').after($button).change(formatButton); |
0b4d4209 CW |
50 | |
51 | CRM.utils.setOptions($style, options, ts('Normal')); | |
52 | ||
53 | formatButton(); | |
54 | ||
55 | $style.change(function() { | |
56 | if ($input.val()) { | |
57 | var split = $input.val().split(' '), | |
58 | style = $style.val(); | |
59 | $input.val(split[0] + (style ? ' ' + style : '')).change(); | |
60 | } | |
0c6fe5b5 CW |
61 | }); |
62 | ||
0b4d4209 | 63 | $button.click(function(e) { |
0c6fe5b5 CW |
64 | var dialog; |
65 | ||
66 | function displayIcons() { | |
67 | var term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(), | |
0b4d4209 | 68 | $place = $('div.icons', dialog).html(''); |
0c6fe5b5 CW |
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} | |
73 | }); | |
74 | $place.append(item); | |
75 | } | |
76 | }); | |
77 | } | |
78 | ||
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;}' + | |
85 | '</style>' + | |
86 | '<div class="icon-search"><input class="crm-form-text" name="search" placeholder=""/></div>' + | |
87 | '<div class="icons"></div>' | |
88 | ); | |
89 | displayIcons(); | |
90 | dialog.unblock(); | |
91 | } | |
92 | ||
93 | function pickIcon(e) { | |
0b4d4209 CW |
94 | var newIcon = $(this).attr('title'), |
95 | style = $style.val(); | |
96 | $input.val(newIcon + (style ? ' ' + style : '')).change(); | |
0c6fe5b5 CW |
97 | dialog.dialog('close'); |
98 | e.preventDefault(); | |
99 | } | |
100 | ||
101 | dialog = $('<div id="crmIconPicker"/>').dialog({ | |
102 | title: $input.attr('title'), | |
103 | width: '80%', | |
104 | height: 400, | |
105 | modal: true | |
106 | }).block() | |
107 | .on('click', 'a', pickIcon) | |
108 | .on('keyup', 'input[name=search]', displayIcons) | |
109 | .on('dialogclose', function() { | |
110 | $(this).dialog('destroy').remove(); | |
111 | }); | |
112 | loadIcons().done(displayDialog); | |
113 | e.preventDefault(); | |
114 | }); | |
0b4d4209 | 115 | |
0c6fe5b5 CW |
116 | }); |
117 | }; | |
118 | }(CRM.$, CRM._)); |