| 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 |
|
