jetpack
/
jetpack_vendor
/
automattic
/
jetpack-search
/
src
/
widgets
/
js
/
search-widget-admin.js
search-widget-admin.js in Jetpack – WP Security, Backup, Speed, & Growth 16.3, at jetpack_vendor/automattic/jetpack-search/src/widgets/js/search-widget-admin.js
| 1 | /* globals jetpack_search_filter_admin, jQuery, analytics */ |
| 2 | |
| 3 | ( function( $, args ) { |
| 4 | var defaultFilterCount = ( 'undefined' !== typeof args && args.defaultFilterCount ) ? |
| 5 | args.defaultFilterCount : |
| 6 | 5; // Just in case we couldn't find the defaultFiltercount arg |
| 7 | |
| 8 | $( document ).ready( function() { |
| 9 | setListeners(); |
| 10 | |
| 11 | window.JetpackSearch = window.JetpackSearch || {}; |
| 12 | window.JetpackSearch.addFilter = addFilter; |
| 13 | |
| 14 | // Initialize Tracks |
| 15 | if ( 'undefined' !== typeof analytics && args.tracksUserData ) { |
| 16 | analytics.initialize( args.tracksUserData.userid, args.tracksUserData.username ); |
| 17 | } |
| 18 | } ); |
| 19 | |
| 20 | function generateFilterTitlePlaceholder( container ) { |
| 21 | var placeholder = null, |
| 22 | isModified = null, |
| 23 | isMonth = null, |
| 24 | type = container.find( '.filter-select' ).val(); |
| 25 | |
| 26 | if ( 'taxonomy' === type ) { |
| 27 | placeholder = container.find('.taxonomy-select option:selected').text().trim(); |
| 28 | } else if ( 'date_histogram' === type && args && args.i18n ) { |
| 29 | isModified = ( -1 !== container.find( '.date-field-select' ).val().indexOf( 'modified' ) ); |
| 30 | isMonth = ( 'month' === container.find( '.date-interval-select' ).val() ); |
| 31 | |
| 32 | if ( isMonth ) { |
| 33 | placeholder = isModified ? |
| 34 | args.i18n.monthUpdated : |
| 35 | args.i18n.month; |
| 36 | } else { |
| 37 | placeholder = isModified ? |
| 38 | args.i18n.yearUpdated : |
| 39 | args.i18n.year; |
| 40 | } |
| 41 | } else { |
| 42 | placeholder = container.find('.filter-select option:selected').text().trim(); |
| 43 | } |
| 44 | |
| 45 | $( container ).find('.jetpack-search-filters-widget__title input').prop( 'placeholder', placeholder ); |
| 46 | } |
| 47 | |
| 48 | var addFilter = function( filtersContainer, args ) { |
| 49 | var template = _.template( |
| 50 | filtersContainer |
| 51 | .closest( '.jetpack-search-filters-widget' ) |
| 52 | .find( '.jetpack-search-filters-widget__filter-template' ) |
| 53 | .html() |
| 54 | ); |
| 55 | generateFilterTitlePlaceholder( filtersContainer.append( template( args ) ) ); |
| 56 | }; |
| 57 | |
| 58 | var setListeners = function( widget ) { |
| 59 | widget = ( 'undefined' === typeof widget ) ? |
| 60 | $( '.jetpack-search-filters-widget' ): |
| 61 | widget; |
| 62 | |
| 63 | var getContainer = function( el ) { |
| 64 | return $( el ).closest('.jetpack-search-filters-widget__filter'); |
| 65 | }; |
| 66 | |
| 67 | widget.on( 'change', '.filter-select', function() { |
| 68 | var select = $( this ), |
| 69 | selectVal = select.val(), |
| 70 | eventArgs = { |
| 71 | is_customizer: args.tracksEventData.is_customizer |
| 72 | }; |
| 73 | |
| 74 | eventArgs.type = selectVal; |
| 75 | |
| 76 | select |
| 77 | .closest( '.jetpack-search-filters-widget__filter' ) |
| 78 | .attr( 'class', 'jetpack-search-filters-widget__filter' ) |
| 79 | .addClass( 'is-' + selectVal ); |
| 80 | |
| 81 | generateFilterTitlePlaceholder( getContainer( this ) ); |
| 82 | |
| 83 | trackAndBumpMCStats( 'changed_filter_type', eventArgs ); |
| 84 | } ); |
| 85 | |
| 86 | // enable showing sort controls only if showing search box is enabled |
| 87 | widget.on( 'change', '.jetpack-search-filters-widget__search-box-enabled', function() { |
| 88 | var checkbox = $( this ), |
| 89 | checkboxVal = checkbox.is(':checked'), |
| 90 | filterParent = checkbox.closest( '.jetpack-search-filters-widget' ), |
| 91 | sortControl = filterParent.find( '.jetpack-search-filters-widget__sort-controls-enabled' ); |
| 92 | |
| 93 | filterParent.toggleClass( 'hide-post-types' ); |
| 94 | |
| 95 | if ( checkboxVal ) { |
| 96 | sortControl.removeAttr( 'disabled' ); |
| 97 | trackAndBumpMCStats( 'enabled_search_box', args.tracksEventData ); |
| 98 | } else { |
| 99 | sortControl.prop( 'checked', false ); |
| 100 | sortControl.prop( 'disabled', true ); |
| 101 | trackAndBumpMCStats( 'disabled_search_box', args.tracksEventData ); |
| 102 | } |
| 103 | } ); |
| 104 | |
| 105 | widget.on( 'change', '.jetpack-search-filters-widget__sort-controls-enabled', function() { |
| 106 | if ( $( this ).is( ':checked' ) ) { |
| 107 | trackAndBumpMCStats( 'enabled_sort_controls', args.tracksEventData ); |
| 108 | } else { |
| 109 | trackAndBumpMCStats( 'disabled_sort_controls', args.tracksEventData ); |
| 110 | } |
| 111 | } ); |
| 112 | |
| 113 | widget.on( 'click', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]', function( e ) { |
| 114 | var t = $( this ); |
| 115 | var siblingsChecked = t.closest( '.jetpack-search-filters-widget' ) |
| 116 | .find( '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]:checked' ); |
| 117 | |
| 118 | if ( 0 === siblingsChecked.length ) { |
| 119 | e.preventDefault(); |
| 120 | e.stopPropagation(); |
| 121 | |
| 122 | trackAndBumpMCStats( 'attempted_no_post_types', args.tracksEventData ); |
| 123 | } |
| 124 | } ); |
| 125 | |
| 126 | widget.on( 'change', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]', function() { |
| 127 | var t = $( this ); |
| 128 | var eventArgs = { |
| 129 | is_customizer: args.tracksEventData.is_customizer, |
| 130 | post_type: t.val() |
| 131 | }; |
| 132 | |
| 133 | if ( wp && wp.customize ) { |
| 134 | wp.customize.state( 'saved' ).set( false ); |
| 135 | } |
| 136 | |
| 137 | if ( t.is( ':checked' ) ) { |
| 138 | trackAndBumpMCStats( 'added_post_type', eventArgs ); |
| 139 | } else { |
| 140 | trackAndBumpMCStats( 'removed_post_type', eventArgs ); |
| 141 | } |
| 142 | } ); |
| 143 | |
| 144 | widget.on( 'change', '.jetpack-search-filters-widget__sort-order', function() { |
| 145 | var eventArgs = { |
| 146 | is_customizer: args.tracksEventData.is_customizer |
| 147 | }; |
| 148 | |
| 149 | eventArgs.order = $( this ).val(); |
| 150 | |
| 151 | if ( wp && wp.customize ) { |
| 152 | wp.customize.state( 'saved' ).set( false ); |
| 153 | } |
| 154 | |
| 155 | trackAndBumpMCStats( 'changed_sort_order', eventArgs ); |
| 156 | } ); |
| 157 | |
| 158 | widget.on( 'change', '.jetpack-search-filters-widget__taxonomy-select select', function() { |
| 159 | var eventArgs = { |
| 160 | is_customizer: args.tracksEventData.is_customizer |
| 161 | }; |
| 162 | |
| 163 | eventArgs.taxonomy = $( this ).val(); |
| 164 | |
| 165 | generateFilterTitlePlaceholder( getContainer( this ) ); |
| 166 | |
| 167 | if ( wp && wp.customize ) { |
| 168 | wp.customize.state( 'saved' ).set( false ); |
| 169 | } |
| 170 | |
| 171 | trackAndBumpMCStats( 'changed_taxonomy', eventArgs ); |
| 172 | } ); |
| 173 | |
| 174 | widget.on( 'change', 'select.date-field-select', function() { |
| 175 | var eventArgs = { |
| 176 | is_customizer: args.tracksEventData.is_customizer |
| 177 | }; |
| 178 | |
| 179 | eventArgs.field = $( this ).val(); |
| 180 | |
| 181 | generateFilterTitlePlaceholder( getContainer( this ) ); |
| 182 | |
| 183 | if ( wp && wp.customize ) { |
| 184 | wp.customize.state( 'saved' ).set( false ); |
| 185 | } |
| 186 | |
| 187 | trackAndBumpMCStats( 'changed_date_field', eventArgs ); |
| 188 | } ); |
| 189 | |
| 190 | widget.on( 'change', 'select.date-interval-select', function() { |
| 191 | var eventArgs = { |
| 192 | is_customizer: args.tracksEventData.is_customizer |
| 193 | }; |
| 194 | |
| 195 | eventArgs.interval = $( this ).val(); |
| 196 | |
| 197 | generateFilterTitlePlaceholder( getContainer( this ) ); |
| 198 | |
| 199 | if ( wp && wp.customize ) { |
| 200 | wp.customize.state( 'saved' ).set( false ); |
| 201 | } |
| 202 | |
| 203 | trackAndBumpMCStats( 'changed_date_interval', eventArgs ); |
| 204 | } ); |
| 205 | |
| 206 | widget.on( 'change', 'input.filter-count', function() { |
| 207 | var eventArgs = { |
| 208 | is_customizer: args.tracksEventData.is_customizer |
| 209 | }; |
| 210 | |
| 211 | eventArgs.count = $( this ).val(); |
| 212 | |
| 213 | if ( wp && wp.customize ) { |
| 214 | wp.customize.state( 'saved' ).set( false ); |
| 215 | } |
| 216 | |
| 217 | trackAndBumpMCStats( 'changed_filter_count', eventArgs ); |
| 218 | } ); |
| 219 | |
| 220 | // add filter button |
| 221 | widget.on( 'click', '.jetpack-search-filters-widget__add-filter', function( e ) { |
| 222 | e.preventDefault(); |
| 223 | |
| 224 | var filtersContainer = $( this ) |
| 225 | .closest( '.jetpack-search-filters-widget' ) |
| 226 | .find( '.jetpack-search-filters-widget__filters' ); |
| 227 | |
| 228 | addFilter( filtersContainer, { |
| 229 | type: 'taxonomy', |
| 230 | taxonomy: '', |
| 231 | post_type: '', |
| 232 | field: '', |
| 233 | interval: '', |
| 234 | count: defaultFilterCount, |
| 235 | name_placeholder: '', |
| 236 | name: '' |
| 237 | } ); |
| 238 | |
| 239 | if ( wp && wp.customize ) { |
| 240 | wp.customize.state( 'saved' ).set( false ); |
| 241 | } |
| 242 | |
| 243 | // Trigger change event to let legacy widget admin know the widget state is "dirty" |
| 244 | filtersContainer |
| 245 | .find( '.jetpack-search-filters-widget__filter' ) |
| 246 | .find( 'input, textarea, select' ) |
| 247 | .change(); |
| 248 | |
| 249 | trackAndBumpMCStats( 'added_filter', args.tracksEventData ); |
| 250 | } ); |
| 251 | |
| 252 | widget.on( 'click', '.jetpack-search-filters-widget__controls .delete', function( e ) { |
| 253 | e.preventDefault(); |
| 254 | var filter = $( this ).closest( '.jetpack-search-filters-widget__filter' ), |
| 255 | eventArgs = { |
| 256 | is_customizer: args.tracksEventData.is_customizer |
| 257 | }; |
| 258 | |
| 259 | eventArgs.type = filter.find( '.filter-select' ).val(); |
| 260 | |
| 261 | switch ( eventArgs.type ) { |
| 262 | case 'taxonomy': |
| 263 | eventArgs.taxonomy = filter.find( '.jetpack-search-filters-widget__taxonomy-select select' ).val(); |
| 264 | break; |
| 265 | case 'date_histogram': |
| 266 | eventArgs.dateField = filter.find( '.jetpack-search-filters-widget__date-histogram-select:first select' ).val(); |
| 267 | eventArgs.dateInterval = filter.find( '.jetpack-search-filters-widget__date-histogram-select:nth-child( 2 ) select' ).val(); |
| 268 | break; |
| 269 | } |
| 270 | |
| 271 | eventArgs.filterCount = filter.find( '.filter-count' ).val(); |
| 272 | |
| 273 | trackAndBumpMCStats( 'deleted_filter', eventArgs ); |
| 274 | |
| 275 | filter.find( 'input, textarea, select' ).change(); |
| 276 | filter.remove(); |
| 277 | |
| 278 | if ( wp && wp.customize ) { |
| 279 | wp.customize.state( 'saved' ).set( false ); |
| 280 | } |
| 281 | } ); |
| 282 | |
| 283 | // make the filters sortable |
| 284 | $( '.jetpack-search-filters-widget__filters' ).sortable( { |
| 285 | placeholder: 'jetpack-search-filters-widget__filter-placeholder', |
| 286 | axis: 'y', |
| 287 | revert: true, |
| 288 | cancel: 'input,textarea,button,select,option,.jetpack-search-filters-widget__controls a', |
| 289 | change: function() { |
| 290 | if ( wp && wp.customize ) { |
| 291 | wp.customize.state( 'saved' ).set( false ); |
| 292 | } |
| 293 | }, |
| 294 | update: function( e, ui ) { |
| 295 | $( ui.item ).find( 'input, textarea, select' ).change(); |
| 296 | } |
| 297 | } ) |
| 298 | .disableSelection(); |
| 299 | }; |
| 300 | |
| 301 | // When widgets are updated, remove and re-add listeners |
| 302 | $( document ).on( 'widget-updated widget-added', function( e, widget ) { |
| 303 | var idBase = $( widget ).find('.id_base').val(), |
| 304 | isJetpackSearch = ( idBase && ( 'jetpack-search-filters' === idBase ) ); |
| 305 | |
| 306 | if ( ! isJetpackSearch ) { |
| 307 | return; |
| 308 | } |
| 309 | |
| 310 | // Intentionally not tracking widget additions and updates here as these events |
| 311 | // seem noisy in the customizer. We'll track those via PHP. |
| 312 | |
| 313 | widget.off( 'change', '.filter-select' ); |
| 314 | widget.off( 'click', '.jetpack-search-filters-widget__controls .delete' ); |
| 315 | widget.off( 'change', '.jetpack-search-filters-widget__use-filters' ); |
| 316 | widget.off( 'change', '.jetpack-search-filters-widget__search-box-enabled' ); |
| 317 | widget.off( 'change', '.jetpack-search-filters-widget__sort-controls-enabled' ); |
| 318 | widget.off( 'change', '.jetpack-search-filters-widget__sort-controls-enabled' ); |
| 319 | widget.off( 'change', '.jetpack-search-filters-widget__post-type-selector' ); |
| 320 | widget.off( 'change', '.jetpack-search-filters-widget__sort-order' ); |
| 321 | widget.off( 'change', '.jetpack-search-filters-widget__taxonomy-select' ); |
| 322 | widget.off( 'change', '.jetpack-search-filters-widget__date-histogram-select:first select' ); |
| 323 | widget.off( 'change', '.jetpack-search-filters-widget__date-histogram-select:eq(1) select' ); |
| 324 | widget.off( 'click', '.jetpack-search-filters-widget__post-types-select input[type="checkbox"]' ); |
| 325 | widget.off( 'click', '.jetpack-search-filters-widget__add-filter'); |
| 326 | |
| 327 | setListeners( widget ); |
| 328 | } ); |
| 329 | |
| 330 | /** |
| 331 | * This function will fire both a Tracks and MC stat. |
| 332 | * |
| 333 | * Tracks: Will be prefixed by 'jetpack_widget_search_' and use underscores. |
| 334 | * MC: Will not be prefixed, and will use dashes. |
| 335 | * |
| 336 | * Logic borrowed from `idc-notice.js`. |
| 337 | * |
| 338 | * @param eventName string |
| 339 | * @param extraProps object |
| 340 | */ |
| 341 | function trackAndBumpMCStats( eventName, extraProps ) { |
| 342 | if ( 'undefined' === typeof extraProps || 'object' !== typeof extraProps ) { |
| 343 | extraProps = {}; |
| 344 | } |
| 345 | |
| 346 | if ( eventName && eventName.length && 'undefined' !== typeof analytics && analytics.tracks && analytics.mc ) { |
| 347 | // Format for Tracks |
| 348 | eventName = eventName.replace( /-/g, '_' ); |
| 349 | eventName = eventName.indexOf( 'jetpack_widget_search_' ) !== 0 ? 'jetpack_widget_search_' + eventName : eventName; |
| 350 | analytics.tracks.recordEvent( eventName, extraProps ); |
| 351 | |
| 352 | // Now format for MC stats |
| 353 | eventName = eventName.replace( 'jetpack_widget_search_', '' ); |
| 354 | eventName = eventName.replace( /_/g, '-' ); |
| 355 | analytics.mc.bumpStat( 'jetpack-search-widget', eventName ); |
| 356 | } |
| 357 | } |
| 358 | } )( jQuery, jetpack_search_filter_admin ); |
| 359 |