diff options
Diffstat (limited to 'plugins/jetpack/modules/widgets/search/js/search-widget-admin.js')
| -rw-r--r-- | plugins/jetpack/modules/widgets/search/js/search-widget-admin.js | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/widgets/search/js/search-widget-admin.js b/plugins/jetpack/modules/widgets/search/js/search-widget-admin.js new file mode 100644 index 00000000..5840a408 --- /dev/null +++ b/plugins/jetpack/modules/widgets/search/js/search-widget-admin.js @@ -0,0 +1,360 @@ +/* globals jetpack_search_filter_admin, jQuery, analytics */ + +( function( $, args ) { + var defaultFilterCount = ( 'undefined' !== typeof args && args.defaultFilterCount ) ? + args.defaultFilterCount : + 5; // Just in case we couldn't find the defaultFiltercount arg + + $( document ).ready( function() { + setListeners(); + + window.JetpackSearch = window.JetpackSearch || {}; + window.JetpackSearch.addFilter = addFilter; + + // Initialize Tracks + if ( 'undefined' !== typeof analytics && args.tracksUserData ) { + analytics.initialize( args.tracksUserData.userid, args.tracksUserData.username ); + } + } ); + + function generateFilterTitlePlaceholder( container ) { + var placeholder = null, + isModified = null, + isMonth = null, + type = container.find( '.filter-select' ).val(); + + if ( 'taxonomy' === type ) { + placeholder = container.find('.taxonomy-select option:selected').text().trim(); + } else if ( 'date_histogram' === type && args && args.i18n ) { + isModified = ( -1 !== container.find( '.date-field-select' ).val().indexOf( 'modified' ) ); + isMonth = ( 'month' === container.find( '.date-interval-select' ).val() ); + + if ( isMonth ) { + placeholder = isModified ? + args.i18n.monthUpdated : + args.i18n.month; + } else { + placeholder = isModified ? + args.i18n.yearUpdated : + args.i18n.year; + } + } else { + placeholder = container.find('.filter-select option:selected').text().trim(); + } + + $( container ).find('.jetpack-search-filters-widget__title input').prop( 'placeholder', placeholder ); + } + + var addFilter = function( filtersContainer, args ) { + var template = _.template( + filtersContainer + .closest( '.jetpack-search-filters-widget' ) + .find( '.jetpack-search-filters-widget__filter-template' ) + .html() + ); + generateFilterTitlePlaceholder( filtersContainer.append( template( args ) ) ); + }; + + var setListeners = function( widget ) { + widget = ( 'undefined' === typeof widget ) ? + $( '.jetpack-search-filters-widget' ): + widget; + + var getContainer = function( el ) { + return $( el ).closest('.jetpack-search-filters-widget__filter'); + }; + + widget.on( 'change', '.filter-select', function() { + var select = $( this ), + selectVal = select.val(), + eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.type = selectVal; + + select + .closest( '.jetpack-search-filters-widget__filter' ) + .attr( 'class', 'jetpack-search-filters-widget__filter' ) + .addClass( 'is-' + selectVal ); + + generateFilterTitlePlaceholder( getContainer( this ) ); + + trackAndBumpMCStats( 'changed_filter_type', eventArgs ); + } ); + + // enable showing sort controls only if showing search box is enabled + widget.on( 'change', '.jetpack-search-filters-widget__search-box-enabled', function() { + var checkbox = $( this ), + checkboxVal = checkbox.is(':checked'), + filterParent = checkbox.closest( '.jetpack-search-filters-widget' ), + sortControl = filterParent.find( '.jetpack-search-filters-widget__sort-controls-enabled' ); + + filterParent.toggleClass( 'hide-post-types' ); + + if ( checkboxVal ) { + sortControl.removeAttr( 'disabled' ); + trackAndBumpMCStats( 'enabled_search_box', args.tracksEventData ); + } else { + sortControl.prop( 'checked', false ); + sortControl.prop( 'disabled', true ); + trackAndBumpMCStats( 'disabled_search_box', args.tracksEventData ); + } + } ); + + widget.on( 'change', '.jetpack-search-filters-widget__sort-controls-enabled', function() { + if ( $( this ).is( ':checked' ) ) { + trackAndBumpMCStats( 'enabled_sort_controls', args.tracksEventData ); + } else { + trackAndBumpMCStats( 'disabled_sort_controls', args.tracksEventData ); + } + } ); + + widget.on( 'click', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]', function( e ) { + var t = $( this ); + var siblingsChecked = t.closest( '.jetpack-search-filters-widget' ) + .find( '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]:checked' ); + + if ( 0 === siblingsChecked.length ) { + e.preventDefault(); + e.stopPropagation(); + + trackAndBumpMCStats( 'attempted_no_post_types', args.tracksEventData ); + } + } ); + + widget.on( 'change', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]', function() { + var t = $( this ); + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer, + post_type: t.val() + }; + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + if ( t.is( ':checked' ) ) { + trackAndBumpMCStats( 'added_post_type', eventArgs ); + } else { + trackAndBumpMCStats( 'removed_post_type', eventArgs ); + } + } ); + + widget.on( 'change', '.jetpack-search-filters-widget__sort-order', function() { + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.order = $( this ).val(); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + trackAndBumpMCStats( 'changed_sort_order', eventArgs ); + } ); + + widget.on( 'change', '.jetpack-search-filters-widget__taxonomy-select select', function() { + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.taxonomy = $( this ).val(); + + generateFilterTitlePlaceholder( getContainer( this ) ); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + trackAndBumpMCStats( 'changed_taxonomy', eventArgs ); + } ); + + widget.on( 'change', 'select.date-field-select', function() { + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.field = $( this ).val(); + + generateFilterTitlePlaceholder( getContainer( this ) ); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + trackAndBumpMCStats( 'changed_date_field', eventArgs ); + } ); + + widget.on( 'change', 'select.date-interval-select', function() { + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.interval = $( this ).val(); + + generateFilterTitlePlaceholder( getContainer( this ) ); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + trackAndBumpMCStats( 'changed_date_interval', eventArgs ); + } ); + + widget.on( 'change', 'input.filter-count', function() { + var eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.count = $( this ).val(); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + trackAndBumpMCStats( 'changed_filter_count', eventArgs ); + } ); + + // add filter button + widget.on( 'click', '.jetpack-search-filters-widget__add-filter', function( e ) { + e.preventDefault(); + + var filtersContainer = $( this ) + .closest( '.jetpack-search-filters-widget' ) + .find( '.jetpack-search-filters-widget__filters' ); + + addFilter( filtersContainer, { + type: 'taxonomy', + taxonomy: '', + post_type: '', + field: '', + interval: '', + count: defaultFilterCount, + name_placeholder: '', + name: '' + } ); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + + // Trigger change event to let legacy widget admin know the widget state is "dirty" + filtersContainer + .find( '.jetpack-search-filters-widget__filter' ) + .find( 'input, textarea, select' ) + .change(); + + trackAndBumpMCStats( 'added_filter', args.tracksEventData ); + } ); + + widget.on( 'click', '.jetpack-search-filters-widget__controls .delete', function( e ) { + e.preventDefault(); + var filter = $( this ).closest( '.jetpack-search-filters-widget__filter' ), + eventArgs = { + is_customizer: args.tracksEventData.is_customizer + }; + + eventArgs.type = filter.find( '.filter-select' ).val(); + + switch ( eventArgs.type ) { + case 'taxonomy': + eventArgs.taxonomy = filter.find( '.jetpack-search-filters-widget__taxonomy-select select' ).val(); + break; + case 'date_histogram': + eventArgs.dateField = filter.find( '.jetpack-search-filters-widget__date-histogram-select:first select' ).val(); + eventArgs.dateInterval = filter.find( '.jetpack-search-filters-widget__date-histogram-select:nth-child( 2 ) select' ).val(); + break; + } + + eventArgs.filterCount = filter.find( '.filter-count' ).val(); + + trackAndBumpMCStats( 'deleted_filter', eventArgs ); + + filter.find( 'input, textarea, select' ).change(); + filter.remove(); + + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + } ); + + // make the filters sortable + $( '.jetpack-search-filters-widget__filters' ).sortable( { + placeholder: 'jetpack-search-filters-widget__filter-placeholder', + axis: 'y', + revert: true, + cancel: 'input,textarea,button,select,option,.jetpack-search-filters-widget__controls a', + change: function() { + if ( wp && wp.customize ) { + wp.customize.state( 'saved' ).set( false ); + } + }, + update: function( e, ui ) { + $( ui.item ).find( 'input, textarea, select' ).change(); + } + } ) + .disableSelection(); + }; + + // When widgets are updated, remove and re-add listeners + $( document ).on( 'widget-updated widget-added', function( e, widget ) { + widget = $( widget ); + + var id = widget.attr( 'id' ), + isJetpackSearch = ( id && ( -1 !== id.indexOf( 'jetpack-search-filters' ) ) ); + + if ( ! isJetpackSearch ) { + return; + } + + // Intentionally not tracking widget additions and updates here as these events + // seem noisy in the customizer. We'll track those via PHP. + + widget.off( 'change', '.filter-select' ); + widget.off( 'click', '.jetpack-search-filters-widget__controls .delete' ); + widget.off( 'change', '.jetpack-search-filters-widget__use-filters' ); + widget.off( 'change', '.jetpack-search-filters-widget__search-box-enabled' ); + widget.off( 'change', '.jetpack-search-filters-widget__sort-controls-enabled' ); + widget.off( 'change', '.jetpack-search-filters-widget__sort-controls-enabled' ); + widget.off( 'change', '.jetpack-search-filters-widget__post-type-selector' ); + widget.off( 'change', '.jetpack-search-filters-widget__sort-order' ); + widget.off( 'change', '.jetpack-search-filters-widget__taxonomy-select' ); + widget.off( 'change', '.jetpack-search-filters-widget__date-histogram-select:first select' ); + widget.off( 'change', '.jetpack-search-filters-widget__date-histogram-select:eq(1) select' ); + widget.off( 'click', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]' ); + widget.off( 'click', '.jetpack-search-filters-widget__add-filter'); + + setListeners( widget ); + } ); + + /** + * This function will fire both a Tracks and MC stat. + * + * Tracks: Will be prefixed by 'jetpack_widget_search_' and use underscores. + * MC: Will not be prefixed, and will use dashes. + * + * Logic borrowed from `idc-notice.js`. + * + * @param eventName string + * @param extraProps object + */ + function trackAndBumpMCStats( eventName, extraProps ) { + if ( 'undefined' === typeof extraProps || 'object' !== typeof extraProps ) { + extraProps = {}; + } + + if ( eventName && eventName.length && 'undefined' !== typeof analytics && analytics.tracks && analytics.mc ) { + // Format for Tracks + eventName = eventName.replace( /-/g, '_' ); + eventName = eventName.indexOf( 'jetpack_widget_search_' ) !== 0 ? 'jetpack_widget_search_' + eventName : eventName; + analytics.tracks.recordEvent( eventName, extraProps ); + + // Now format for MC stats + eventName = eventName.replace( 'jetpack_widget_search_', '' ); + eventName = eventName.replace( /_/g, '-' ); + analytics.mc.bumpStat( 'jetpack-search-widget', eventName ); + } + } +} )( jQuery, jetpack_search_filter_admin ); |