123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- (function($){
- /**
- * Helper class for the icon selector lightbox.
- *
- * @class FLIconSelector
- * @since 1.0
- */
- FLIconSelector = {
- /**
- * A reference to the lightbox HTML content that is
- * loaded via AJAX.
- *
- * @since 1.0
- * @access private
- * @property {String} _content
- */
- _content : null,
- /**
- * A reference to a FLLightbox object.
- *
- * @since 1.0
- * @access private
- * @property {FLLightbox} _lightbox
- */
- _lightbox : null,
- /**
- * A flag for whether the content has already
- * been rendered or not.
- *
- * @since 1.0
- * @access private
- * @property {Boolean} _rendered
- */
- _rendered : false,
- /**
- * The text that is used to filter the selection
- * of visible icons.
- *
- * @since 1.0
- * @access private
- * @property {String} _filterText
- */
- _filterText : '',
- _liveFilterText: '',
- /**
- * Opens the icon selector lightbox.
- *
- * @since 1.0
- * @method open
- * @param {Function} callback A callback that fires when an icon is selected.
- */
- open: function(callback)
- {
- if(!FLIconSelector._rendered) {
- FLIconSelector._render();
- }
- if(FLIconSelector._content === null) {
- FLIconSelector._lightbox.open('<div class="fl-builder-lightbox-loading"></div>');
- FLBuilder.ajax({
- action: 'render_icon_selector'
- }, FLIconSelector._getContentComplete);
- }
- else {
- FLIconSelector._lightbox.open();
- $('.fl-icons-filter-text-live', window.parent.document).focus();
- }
- FLIconSelector._lightbox.on('icon-selected', function(event, icon){
- FLIconSelector._lightbox.off('icon-selected');
- FLIconSelector._lightbox.close();
- callback(icon);
- });
- },
- /**
- * Renders a new instance of FLLightbox.
- *
- * @since 1.0
- * @access private
- * @method _render
- */
- _render: function()
- {
- FLIconSelector._lightbox = new FLLightbox({
- className: 'fl-icon-selector'
- });
- FLIconSelector._rendered = true;
- FLBuilder.addHook( 'endEditingSession', function() {
- FLIconSelector._lightbox.close()
- } );
- },
- /**
- * Callback for when the lightbox content
- * has been returned via AJAX.
- *
- * @since 1.0
- * @access private
- * @method _getContentComplete
- * @param {String} response The JSON with the HTML lightbox content.
- */
- _getContentComplete: function(response)
- {
- var data = FLBuilder._jsonParse(response);
- FLIconSelector._content = data.html;
- FLIconSelector._lightbox.setContent(data.html);
- $('.fl-icons-filter-text-live', window.parent.document).on('keyup', $.debounce( 1000, FLIconSelector.livefilter ));
- $('.fl-icons-filter-text-live', window.parent.document).focus();
- $('.fl-icons-list i', window.parent.document).on('click', FLIconSelector._select);
- $('.fl-icon-selector-cancel', window.parent.document).on('click', $.proxy(FLIconSelector._lightbox.close, FLIconSelector._lightbox));
- FLIconSelector.renderRecent();
- },
- renderRecent: function() {
- var recent = FLBuilderConfig.recentIcons;
- if ( recent.length < 1 ) {
- $('.fl-icons-section.recent h2.recent', window.parent.document).hide();
- return false;
- }
- $('.fl-icons-section.recent h2.recent', window.parent.document).show();
- $('.fl-icons-section.recent', window.parent.document).show()
- $('.recent-icons', window.parent.document).html('');
- $.each(recent, function( i, icon ) {
- $('.recent-icons', window.parent.document).append( '<i class="' + icon + '"></i>');
- });
- $('.recent-icons', window.parent.document).show();
- $('.recent-icons i', window.parent.document).on('click', FLIconSelector._select);
- // check if recent icons have ::before, if they dont the css for set is missing, so hide icon
- var recents = $('.recent-icons i', window.parent.document);
- $.each( recents, function( i,icon ) {
- var str = window.parent.getComputedStyle($(icon)[0], ':before').getPropertyValue('content');
- if ( 'none' == str ) {
- $(icon).hide();
- }
- });
- },
- livefilter: function() {
- var text = $( '.fl-icons-filter-text-live', window.parent.document ).val();
- if ( text === FLIconSelector._liveFilterText ) {
- return false;
- }
- $( '.fl-icons-section.results', window.parent.document ).html('')
- if ( '' === text ) {
- FLIconSelector._liveFilterText = '';
- $( '.fl-icons-section', window.parent.document ).show();
- FLIconSelector.renderRecent();
- } else {
- $('.fl-icons-section.recent', window.parent.document).hide();
- $('.fl-icons-section.all-icons', window.parent.document).hide()
- $('.fl-icons-section.results', window.parent.document).html('<i class="fas fa-spinner fa-spin"></i>')
- FLIconSelector._liveFilterText = text;
- FLBuilder.ajax({
- action: 'query_icons',
- text: text
- }, FLIconSelector._query_result);
- }
- },
- _query_result: function(result) {
- var results = $('.fl-icons-section.results', window.parent.document),
- html = '';
- if ( ! result || '[]' === result ) {
- html = '<h2>No Icons Found</h2>'
- FLIconSelector.renderRecent();
- results.html(html);
- results.show();
- return false;
- }
- var data = FLBuilder._jsonParse( result ),
- prefix = '';
- $.each(data, function(i,section) {
- html += '<h2>' + section.name + '</h2>';
- $.each(section.data, function( i, icon ) {
- $.each(icon.styles, function( i,style) {
- prefix = '';
- switch( style ) {
- case 'solid':
- prefix = 'fas';
- break;
- case 'regular':
- prefix = 'far';
- break;
- case 'light':
- prefix = 'fal';
- break;
- case 'duotone':
- prefix = 'fad';
- break;
- case 'thin':
- prefix = 'fa-thin' // fa6
- break;
- case 'brands':
- prefix = 'fa-brands fab' // fa6 + fa5
- break;
- case 'legacy':
- prefix = section.prefix;
- }
- if ( prefix.length > 0 ) {
- prefix += ' ';
- }
- html += '<i class="' + prefix + icon.tag + '" title="' + icon.label + '"></i>';
- })
- });
- })
- results.html(html);
- results.show();
- $('.fl-icons-section.results i', window.parent.document).on('click', FLIconSelector._select);
- },
- /**
- * Filters the selection of visible icons based on
- * the library select and search input text.
- *
- * @since 1.0
- * @access private
- * @method _filter
- */
- _filter: function()
- {
- var section = $( '.fl-icons-filter-select', window.parent.document ).val(),
- text = $( '.fl-icons-filter-text', window.parent.document ).val() || '';
- // Filter sections.
- if ( 'all' == section ) {
- $( '.fl-icons-section', window.parent.document ).show();
- }
- else {
- $( '.fl-icons-section', window.parent.document ).hide();
- $( '.fl-' + section, window.parent.document ).show();
- }
- // Filter icons.
- FLIconSelector._filterText = text;
- if ( '' !== text ) {
- $( '.fl-icons-list i', window.parent.document ).each( FLIconSelector._filterIcon );
- }
- else {
- $( '.fl-icons-list i', window.parent.document ).show();
- }
- },
- /**
- * Shows or hides an icon based on the filter text.
- *
- * @since 1.0
- * @access private
- * @method _filterIcon
- */
- _filterIcon: function()
- {
- var icon = $( this );
- if ( -1 == icon.attr( 'class' ).indexOf( FLIconSelector._filterText ) ) {
- icon.hide();
- }
- else {
- icon.show();
- }
- },
- /**
- * Called when an icon is selected and fires the
- * icon-selected event on the lightbox.
- *
- * @since 1.0
- * @access private
- * @method _select
- */
- _select: function()
- {
- var icon = $(this).attr('class');
- FLBuilder.ajax({
- action: 'recent_icons',
- icon: icon
- }, FLIconSelector._updateRecents);
- FLIconSelector._lightbox.trigger('icon-selected', icon);
- },
- _updateRecents: function(result) {
- FLBuilderConfig.recentIcons = FLBuilder._jsonParse(result);
- }
- };
- })(jQuery);
|