| 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 | } |
| 28 | |
| 29 | var $input = $(this), |
| 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>'), |
| 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 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-'} |
| 47 | }); |
| 48 | $style.toggle(!!split[0]).val(split[1] || ''); |
| 49 | } |
| 50 | |
| 51 | $input.hide().addClass('iconpicker-widget').after($style).after(' ').after($button).change(formatButton); |
| 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 | } |
| 63 | }); |
| 64 | |
| 65 | $button.click(function(e) { |
| 66 | var dialog; |
| 67 | |
| 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()} |
| 75 | }); |
| 76 | $place.append(item); |
| 77 | } |
| 78 | }); |
| 79 | } |
| 80 | |
| 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;}' + |
| 89 | '</style>' + |
| 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>' + |
| 94 | '</div>' + |
| 95 | '<div class="icons"></div>' |
| 96 | ); |
| 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); |
| 105 | displayIcons(); |
| 106 | dialog.unblock(); |
| 107 | } |
| 108 | |
| 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'); |
| 114 | e.preventDefault(); |
| 115 | } |
| 116 | |
| 117 | dialog = $('<div id="crmIconPicker"/>').dialog({ |
| 118 | title: $input.attr('title'), |
| 119 | width: '80%', |
| 120 | height: '90%', |
| 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 | }); |
| 131 | |
| 132 | }); |
| 133 | }; |
| 134 | |
| 135 | $(document) |
| 136 | .on('crmLoad', function(e) { |
| 137 | $('.crm-icon-picker', e.target).not('.iconpicker-widget').crmIconPicker(); |
| 138 | }); |
| 139 | }(CRM.$, CRM._)); |