(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('
'); 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( ''); }); $('.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('') 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 = '