themes
7 months ago
infinity-customizer.js
1 year ago
infinity.css
2 months ago
infinity.js
2 months ago
infinity.php
2 weeks ago
infinity.js
921 lines
| 1 | /* globals infiniteScroll, _wpmejsSettings, ga, _gaq, WPCOM_sharing_counts, MediaElementPlayer */ |
| 2 | ( function () { |
| 3 | // Open closure. |
| 4 | // Local vars. |
| 5 | var Scroller, stats, type, text, totop, loading_text; |
| 6 | |
| 7 | // IE requires special handling |
| 8 | var isIE = -1 !== navigator.userAgent.search( 'MSIE' ); |
| 9 | if ( isIE ) { |
| 10 | var IEVersion = navigator.userAgent.match( /MSIE\s?(\d+)\.?\d*;/ ); |
| 11 | IEVersion = parseInt( IEVersion[ 1 ] ); |
| 12 | } |
| 13 | |
| 14 | // HTTP ajaxurl when site is HTTPS causes Access-Control-Allow-Origin failure in Desktop and iOS Safari |
| 15 | if ( 'https:' === document.location.protocol ) { |
| 16 | infiniteScroll.settings.ajaxurl = infiniteScroll.settings.ajaxurl.replace( |
| 17 | 'http://', |
| 18 | 'https://' |
| 19 | ); |
| 20 | } |
| 21 | |
| 22 | /** |
| 23 | * Loads new posts when users scroll near the bottom of the page. |
| 24 | */ |
| 25 | Scroller = function ( settings ) { |
| 26 | var self = this; |
| 27 | |
| 28 | // Initialize our variables |
| 29 | this.id = settings.id; |
| 30 | this.body = document.body; |
| 31 | this.window = window; |
| 32 | this.element = document.getElementById( settings.id ); |
| 33 | this.wrapperClass = settings.wrapper_class; |
| 34 | this.ready = true; |
| 35 | this.disabled = false; |
| 36 | this.page = 1; |
| 37 | this.offset = settings.offset; |
| 38 | this.currentday = settings.currentday; |
| 39 | this.order = settings.order; |
| 40 | this.throttle = false; |
| 41 | this.click_handle = settings.click_handle; |
| 42 | this.google_analytics = settings.google_analytics; |
| 43 | this.history = settings.history; |
| 44 | this.origURL = window.location.href; |
| 45 | |
| 46 | // Handle element |
| 47 | this.handle = document.createElement( 'div' ); |
| 48 | this.handle.setAttribute( 'id', 'infinite-handle' ); |
| 49 | var span = document.createElement( 'span' ); |
| 50 | var button = document.createElement( 'button' ); |
| 51 | button.textContent = text; |
| 52 | span.appendChild( button ); |
| 53 | this.handle.appendChild( span ); |
| 54 | |
| 55 | // Footer settings |
| 56 | this.footer = { |
| 57 | el: document.getElementById( 'infinite-footer' ), |
| 58 | wrap: settings.footer, |
| 59 | }; |
| 60 | |
| 61 | // Bind methods used as callbacks |
| 62 | this.checkViewportOnLoadBound = self.checkViewportOnLoad.bind( this ); |
| 63 | |
| 64 | // Core's native MediaElement.js implementation needs special handling |
| 65 | this.wpMediaelement = null; |
| 66 | |
| 67 | // We have two type of infinite scroll |
| 68 | // cases 'scroll' and 'click' |
| 69 | |
| 70 | if ( type === 'scroll' ) { |
| 71 | // Bind refresh to the scroll event |
| 72 | // Throttle to check for such case every 300ms |
| 73 | |
| 74 | // On event the case becomes a fact |
| 75 | this.window.addEventListener( 'scroll', function () { |
| 76 | self.throttle = true; |
| 77 | } ); |
| 78 | |
| 79 | // Go back top method |
| 80 | self.gotop(); |
| 81 | |
| 82 | setInterval( function () { |
| 83 | if ( self.throttle ) { |
| 84 | // Once the case is the case, the action occurs and the fact is no more |
| 85 | self.throttle = false; |
| 86 | // Reveal or hide footer |
| 87 | self.thefooter(); |
| 88 | // Fire the refresh |
| 89 | self.refresh(); |
| 90 | self.determineURL(); // determine the url |
| 91 | } |
| 92 | }, 250 ); |
| 93 | |
| 94 | // Ensure that enough posts are loaded to fill the initial viewport, to compensate for short posts and large displays. |
| 95 | self.ensureFilledViewport(); |
| 96 | this.body.addEventListener( 'is.post-load', self.checkViewportOnLoadBound ); |
| 97 | } else if ( type === 'click' ) { |
| 98 | if ( this.click_handle ) { |
| 99 | this.element.appendChild( this.handle ); |
| 100 | } |
| 101 | |
| 102 | this.handle.addEventListener( 'click', function () { |
| 103 | // Handle the handle |
| 104 | if ( self.click_handle ) { |
| 105 | self.handle.parentNode.removeChild( self.handle ); |
| 106 | } |
| 107 | |
| 108 | // Fire the refresh |
| 109 | self.refresh(); |
| 110 | } ); |
| 111 | } |
| 112 | |
| 113 | // Initialize any Core audio or video players loaded via IS |
| 114 | this.body.addEventListener( 'is.post-load', self.initializeMejs ); |
| 115 | }; |
| 116 | |
| 117 | /** |
| 118 | * Normalize the access to the document scrollTop value. |
| 119 | */ |
| 120 | Scroller.prototype.getScrollTop = function () { |
| 121 | return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; |
| 122 | }; |
| 123 | |
| 124 | /** |
| 125 | * Polyfill jQuery.extend. |
| 126 | */ |
| 127 | Scroller.prototype.extend = function ( out ) { |
| 128 | out = out || {}; |
| 129 | |
| 130 | for ( var i = 1; i < arguments.length; i++ ) { |
| 131 | if ( ! arguments[ i ] ) { |
| 132 | continue; |
| 133 | } |
| 134 | |
| 135 | for ( var key in arguments[ i ] ) { |
| 136 | if ( Object.hasOwn( arguments[ i ], key ) ) { |
| 137 | out[ key ] = arguments[ i ][ key ]; |
| 138 | } |
| 139 | } |
| 140 | } |
| 141 | return out; |
| 142 | }; |
| 143 | |
| 144 | /** |
| 145 | * Check whether we should fetch any additional posts. |
| 146 | */ |
| 147 | Scroller.prototype.check = function () { |
| 148 | var wrapperMeasurements = this.measure( this.element, [ this.wrapperClass ] ); |
| 149 | |
| 150 | // Fetch more posts when we're less than 2 screens away from the bottom. |
| 151 | return wrapperMeasurements.bottom < 2 * this.window.innerHeight; |
| 152 | }; |
| 153 | |
| 154 | /** |
| 155 | * Renders the results from a successful response. |
| 156 | */ |
| 157 | Scroller.prototype.render = function ( response ) { |
| 158 | var childrenToAppend = Array.prototype.slice.call( response.fragment.childNodes ); |
| 159 | this.body.classList.add( 'infinity-success' ); |
| 160 | |
| 161 | // Render the retrieved nodes. |
| 162 | while ( childrenToAppend.length > 0 ) { |
| 163 | var currentNode = childrenToAppend.shift(); |
| 164 | this.element.appendChild( currentNode ); |
| 165 | } |
| 166 | |
| 167 | this.trigger( this.body, 'is.post-load', { |
| 168 | jqueryEventName: 'post-load', |
| 169 | data: response, |
| 170 | } ); |
| 171 | |
| 172 | this.ready = true; |
| 173 | }; |
| 174 | |
| 175 | /** |
| 176 | * Returns the object used to query for new posts. |
| 177 | */ |
| 178 | Scroller.prototype.query = function () { |
| 179 | return { |
| 180 | page: this.page + this.offset, // Load the next page. |
| 181 | currentday: this.currentday, |
| 182 | order: this.order, |
| 183 | scripts: window.infiniteScroll.settings.scripts, |
| 184 | styles: window.infiniteScroll.settings.styles, |
| 185 | query_args: window.infiniteScroll.settings.query_args, |
| 186 | query_before: window.infiniteScroll.settings.query_before, |
| 187 | last_post_date: window.infiniteScroll.settings.last_post_date, |
| 188 | }; |
| 189 | }; |
| 190 | |
| 191 | Scroller.prototype.animate = function ( cb, duration ) { |
| 192 | var start = performance.now(); |
| 193 | |
| 194 | requestAnimationFrame( function animate( time ) { |
| 195 | var timeFraction = Math.min( 1, ( time - start ) / duration ); |
| 196 | cb( timeFraction ); |
| 197 | |
| 198 | if ( timeFraction < 1 ) { |
| 199 | requestAnimationFrame( animate ); |
| 200 | } |
| 201 | } ); |
| 202 | }; |
| 203 | |
| 204 | /** |
| 205 | * Scroll back to top. |
| 206 | */ |
| 207 | Scroller.prototype.gotop = function () { |
| 208 | var blog = document.getElementById( 'infinity-blog-title' ); |
| 209 | var self = this; |
| 210 | |
| 211 | if ( ! blog ) { |
| 212 | return; |
| 213 | } |
| 214 | |
| 215 | blog.setAttribute( 'title', totop ); |
| 216 | blog.addEventListener( 'click', function ( e ) { |
| 217 | var sourceScroll = self.window.pageYOffset; |
| 218 | e.preventDefault(); |
| 219 | |
| 220 | self.animate( function ( progress ) { |
| 221 | var currentScroll = sourceScroll - sourceScroll * progress; |
| 222 | document.documentElement.scrollTop = document.body.scrollTop = currentScroll; |
| 223 | }, 200 ); |
| 224 | } ); |
| 225 | }; |
| 226 | |
| 227 | /** |
| 228 | * The infinite footer. |
| 229 | */ |
| 230 | Scroller.prototype.thefooter = function () { |
| 231 | var self = this, |
| 232 | pageWrapper, |
| 233 | footerContainer, |
| 234 | width, |
| 235 | sourceBottom, |
| 236 | targetBottom, |
| 237 | footerEnabled = this.footer && this.footer.el; |
| 238 | |
| 239 | if ( ! footerEnabled ) { |
| 240 | return; |
| 241 | } |
| 242 | |
| 243 | // Check if we have an id for the page wrapper |
| 244 | if ( 'string' === typeof this.footer.wrap ) { |
| 245 | try { |
| 246 | pageWrapper = document.getElementById( this.footer.wrap ); |
| 247 | width = pageWrapper.getBoundingClientRect(); |
| 248 | width = width.width; |
| 249 | } catch { |
| 250 | width = 0; |
| 251 | } |
| 252 | |
| 253 | // Make the footer match the width of the page |
| 254 | if ( width > 479 ) { |
| 255 | footerContainer = this.footer.el.querySelector( '.container' ); |
| 256 | if ( footerContainer ) { |
| 257 | footerContainer.style.width = width + 'px'; |
| 258 | } |
| 259 | } |
| 260 | } |
| 261 | |
| 262 | // Reveal footer |
| 263 | sourceBottom = parseInt( self.footer.el.style.bottom || -50, 10 ); |
| 264 | targetBottom = this.window.pageYOffset >= 350 ? 0 : -50; |
| 265 | |
| 266 | if ( sourceBottom !== targetBottom ) { |
| 267 | self.animate( function ( progress ) { |
| 268 | var currentBottom = sourceBottom + ( targetBottom - sourceBottom ) * progress; |
| 269 | self.footer.el.style.bottom = currentBottom + 'px'; |
| 270 | |
| 271 | if ( 1 === progress ) { |
| 272 | sourceBottom = targetBottom; |
| 273 | } |
| 274 | }, 200 ); |
| 275 | } |
| 276 | }; |
| 277 | |
| 278 | /** |
| 279 | * Recursively convert a JS object into URL encoded data. |
| 280 | */ |
| 281 | Scroller.prototype.urlEncodeJSON = function ( obj, prefix ) { |
| 282 | var params = [], |
| 283 | encodedKey, |
| 284 | newPrefix; |
| 285 | |
| 286 | for ( var key in obj ) { |
| 287 | encodedKey = encodeURIComponent( key ); |
| 288 | newPrefix = prefix ? prefix + '[' + encodedKey + ']' : encodedKey; |
| 289 | |
| 290 | if ( 'object' === typeof obj[ key ] ) { |
| 291 | if ( ! Array.isArray( obj[ key ] ) || obj[ key ].length > 0 ) { |
| 292 | params.push( this.urlEncodeJSON( obj[ key ], newPrefix ) ); |
| 293 | } else { |
| 294 | // Explicitly expose empty arrays with no values |
| 295 | params.push( newPrefix + '[]=' ); |
| 296 | } |
| 297 | } else { |
| 298 | params.push( newPrefix + '=' + encodeURIComponent( obj[ key ] ) ); |
| 299 | } |
| 300 | } |
| 301 | return params.join( '&' ); |
| 302 | }; |
| 303 | |
| 304 | /** |
| 305 | * Controls the flow of the refresh. Don't mess. |
| 306 | */ |
| 307 | Scroller.prototype.refresh = function () { |
| 308 | var self = this, |
| 309 | query, |
| 310 | xhr, |
| 311 | loader, |
| 312 | customized; |
| 313 | |
| 314 | // If we're disabled, ready, or don't pass the check, bail. |
| 315 | if ( this.disabled || ! this.ready || ! this.check() ) { |
| 316 | return; |
| 317 | } |
| 318 | |
| 319 | // Let's get going -- set ready to false to prevent |
| 320 | // multiple refreshes from occurring at once. |
| 321 | this.ready = false; |
| 322 | |
| 323 | // Create a loader element to show it's working. |
| 324 | if ( this.click_handle ) { |
| 325 | if ( ! loader ) { |
| 326 | document.getElementById( 'infinite-aria' ).textContent = loading_text; |
| 327 | loader = document.createElement( 'div' ); |
| 328 | loader.classList.add( 'infinite-loader' ); |
| 329 | loader.setAttribute( 'role', 'progress' ); |
| 330 | loader.innerHTML = |
| 331 | '<svg class="jetpack-spinner infinite-loader-spinner spinner" width="28" height="28" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><circle cx="50" cy="50" r="46" fill="none" stroke="#ddd" stroke-width="8"/><path d="M 50 4 A 46 46 0 0 1 96 50" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" dur="1.4s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></path></svg>'; |
| 332 | } |
| 333 | this.element.appendChild( loader ); |
| 334 | } |
| 335 | |
| 336 | // Generate our query vars. |
| 337 | query = self.extend( |
| 338 | { |
| 339 | action: 'infinite_scroll', |
| 340 | }, |
| 341 | this.query() |
| 342 | ); |
| 343 | |
| 344 | // Inject Customizer state. |
| 345 | if ( 'undefined' !== typeof wp && wp.customize && wp.customize.settings.theme ) { |
| 346 | customized = {}; |
| 347 | query.wp_customize = 'on'; |
| 348 | query.theme = wp.customize.settings.theme.stylesheet; |
| 349 | wp.customize.each( function ( setting ) { |
| 350 | if ( setting._dirty ) { |
| 351 | customized[ setting.id ] = setting(); |
| 352 | } |
| 353 | } ); |
| 354 | query.customized = JSON.stringify( customized ); |
| 355 | query.nonce = wp.customize.settings.nonce.preview; |
| 356 | } |
| 357 | |
| 358 | // Fire the ajax request. |
| 359 | xhr = new XMLHttpRequest(); |
| 360 | xhr.open( 'POST', infiniteScroll.settings.ajaxurl, true ); |
| 361 | xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' ); |
| 362 | xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' ); |
| 363 | xhr.send( self.urlEncodeJSON( query ) ); |
| 364 | |
| 365 | // Allow refreshes to occur again if an error is triggered. |
| 366 | xhr.onerror = function () { |
| 367 | if ( self.click_handle && loader.parentNode ) { |
| 368 | loader.parentNode.removeChild( loader ); |
| 369 | } |
| 370 | |
| 371 | self.ready = true; |
| 372 | }; |
| 373 | |
| 374 | // Success handler |
| 375 | xhr.onload = function () { |
| 376 | var response = JSON.parse( xhr.responseText ), |
| 377 | httpCheck = xhr.status >= 200 && xhr.status < 300, |
| 378 | responseCheck = 'undefined' !== typeof response.html; |
| 379 | |
| 380 | if ( ! response || ! httpCheck || ! responseCheck ) { |
| 381 | if ( self.click_handle && loader.parentNode ) { |
| 382 | loader.parentNode.removeChild( loader ); |
| 383 | } |
| 384 | return; |
| 385 | } |
| 386 | |
| 387 | // On success, let's hide the loader circle. |
| 388 | if ( self.click_handle && loader.parentNode ) { |
| 389 | loader.parentNode.removeChild( loader ); |
| 390 | } |
| 391 | |
| 392 | // If additional scripts are required by the incoming set of posts, parse them |
| 393 | if ( response.scripts && Array.isArray( response.scripts ) ) { |
| 394 | response.scripts.forEach( function ( item ) { |
| 395 | var elementToAppendTo = item.footer ? 'body' : 'head'; |
| 396 | |
| 397 | // Add script handle to list of those already parsed |
| 398 | window.infiniteScroll.settings.scripts.push( item.handle ); |
| 399 | |
| 400 | // Output extra data, if present |
| 401 | if ( item.extra_data ) { |
| 402 | self.appendInlineScript( item.extra_data, elementToAppendTo ); |
| 403 | } |
| 404 | |
| 405 | if ( item.before_handle ) { |
| 406 | self.appendInlineScript( item.before_handle, elementToAppendTo ); |
| 407 | } |
| 408 | |
| 409 | // Build script tag and append to DOM in requested location |
| 410 | var script = document.createElement( 'script' ); |
| 411 | script.type = 'text/javascript'; |
| 412 | script.src = item.src; |
| 413 | script.id = item.handle; |
| 414 | |
| 415 | // Dynamically loaded scripts are async by default. |
| 416 | // We don't want that, it breaks stuff, e.g. wp-mediaelement init. |
| 417 | script.async = false; |
| 418 | |
| 419 | if ( item.after_handle ) { |
| 420 | script.onload = function () { |
| 421 | self.appendInlineScript( item.after_handle, elementToAppendTo ); |
| 422 | }; |
| 423 | } |
| 424 | |
| 425 | // If MediaElement.js is loaded in by item set of posts, don't initialize the players a second time as it breaks them all |
| 426 | if ( 'wp-mediaelement' === item.handle ) { |
| 427 | self.body.removeEventListener( 'is.post-load', self.initializeMejs ); |
| 428 | } |
| 429 | |
| 430 | if ( 'wp-mediaelement' === item.handle && 'undefined' === typeof mejs ) { |
| 431 | self.wpMediaelement = {}; |
| 432 | self.wpMediaelement.tag = script; |
| 433 | self.wpMediaelement.element = elementToAppendTo; |
| 434 | setTimeout( self.maybeLoadMejs.bind( self ), 250 ); |
| 435 | } else { |
| 436 | document.getElementsByTagName( elementToAppendTo )[ 0 ].appendChild( script ); |
| 437 | } |
| 438 | } ); |
| 439 | } |
| 440 | |
| 441 | // If additional stylesheets are required by the incoming set of posts, parse them |
| 442 | if ( response.styles && Array.isArray( response.styles ) ) { |
| 443 | response.styles.forEach( function ( item ) { |
| 444 | // Add stylesheet handle to list of those already parsed |
| 445 | window.infiniteScroll.settings.styles.push( item.handle ); |
| 446 | |
| 447 | // Build link tag |
| 448 | var style = document.createElement( 'link' ); |
| 449 | style.rel = 'stylesheet'; |
| 450 | style.href = item.src; |
| 451 | style.id = item.handle + '-css'; |
| 452 | |
| 453 | // Destroy link tag if a conditional statement is present and either the browser isn't IE, or the conditional doesn't evaluate true |
| 454 | if ( |
| 455 | item.conditional && |
| 456 | ( ! isIE || ! eval( item.conditional.replace( /%ver/g, IEVersion ) ) ) |
| 457 | ) { |
| 458 | style = false; |
| 459 | } |
| 460 | |
| 461 | // Append link tag if necessary |
| 462 | if ( style ) { |
| 463 | document.getElementsByTagName( 'head' )[ 0 ].appendChild( style ); |
| 464 | } |
| 465 | } ); |
| 466 | } |
| 467 | |
| 468 | // Convert the response.html to a fragment element. |
| 469 | // Using a div instead of DocumentFragment, because the latter doesn't support innerHTML. |
| 470 | response.fragment = document.createElement( 'div' ); |
| 471 | response.fragment.innerHTML = response.html; |
| 472 | |
| 473 | // Increment the page number |
| 474 | self.page++; |
| 475 | |
| 476 | // Record pageview in WP Stats, if available. |
| 477 | if ( stats ) { |
| 478 | new Image().src = |
| 479 | document.location.protocol + |
| 480 | '//pixel.wp.com/g.gif?' + |
| 481 | stats + |
| 482 | '&post=0&baba=' + |
| 483 | Math.random(); |
| 484 | } |
| 485 | |
| 486 | // Add new posts to the postflair object |
| 487 | if ( 'object' === typeof response.postflair && 'object' === typeof WPCOM_sharing_counts ) { |
| 488 | WPCOM_sharing_counts = self.extend( WPCOM_sharing_counts, response.postflair ); // eslint-disable-line no-global-assign |
| 489 | } |
| 490 | |
| 491 | // Render the results |
| 492 | self.render.call( self, response ); |
| 493 | |
| 494 | // If 'click' type and there are still posts to fetch, add back the handle |
| 495 | if ( type === 'click' ) { |
| 496 | // add focus to new posts, only in button mode as we know where page focus currently is and only if we have a wrapper |
| 497 | if ( infiniteScroll.settings.wrapper ) { |
| 498 | document |
| 499 | .querySelector( |
| 500 | '#infinite-view-' + ( self.page + self.offset - 1 ) + ' a:first-of-type' |
| 501 | ) |
| 502 | .focus( { |
| 503 | preventScroll: true, |
| 504 | } ); |
| 505 | } |
| 506 | |
| 507 | if ( response.lastbatch ) { |
| 508 | if ( self.click_handle ) { |
| 509 | // Update body classes |
| 510 | self.body.classList.add( 'infinity-end' ); |
| 511 | self.body.classList.remove( 'infinity-success' ); |
| 512 | } else { |
| 513 | self.trigger( this.body, 'infinite-scroll-posts-end' ); |
| 514 | } |
| 515 | } else if ( self.click_handle ) { |
| 516 | self.element.appendChild( self.handle ); |
| 517 | } else { |
| 518 | self.trigger( this.body, 'infinite-scroll-posts-more' ); |
| 519 | } |
| 520 | } else if ( response.lastbatch ) { |
| 521 | self.disabled = true; |
| 522 | |
| 523 | self.body.classList.add( 'infinity-end' ); |
| 524 | self.body.classList.remove( 'infinity-success' ); |
| 525 | } |
| 526 | |
| 527 | // Update currentday to the latest value returned from the server |
| 528 | if ( response.currentday ) { |
| 529 | self.currentday = response.currentday; |
| 530 | } |
| 531 | |
| 532 | // Fire Google Analytics pageview |
| 533 | if ( self.google_analytics ) { |
| 534 | var ga_url = self.history.path.replace( /%d/, self.page ); |
| 535 | if ( 'object' === typeof _gaq ) { |
| 536 | _gaq.push( [ '_trackPageview', ga_url ] ); |
| 537 | } |
| 538 | if ( 'function' === typeof ga ) { |
| 539 | ga( 'send', 'pageview', ga_url ); |
| 540 | } |
| 541 | } |
| 542 | }; |
| 543 | |
| 544 | return xhr; |
| 545 | }; |
| 546 | |
| 547 | /** |
| 548 | * Given JavaScript blob and the name of a parent tag, this helper function will |
| 549 | * generate a script tag, insert the JavaScript blob, and append it to the parent. |
| 550 | * |
| 551 | * It's important to note that the JavaScript blob will be evaluated immediately. If |
| 552 | * you need a parent script to load first, use that script element's onload handler. |
| 553 | * |
| 554 | * @param {string} script The blob of JavaScript to run. |
| 555 | * @param {string} parentTag The tag name of the parent element. |
| 556 | */ |
| 557 | Scroller.prototype.appendInlineScript = function ( script, parentTag ) { |
| 558 | var element = document.createElement( 'script' ), |
| 559 | scriptContent = document.createTextNode( '//<![CDATA[ \n' + script + '\n//]]>' ); |
| 560 | |
| 561 | element.type = 'text/javascript'; |
| 562 | element.appendChild( scriptContent ); |
| 563 | |
| 564 | document.getElementsByTagName( parentTag )[ 0 ].appendChild( element ); |
| 565 | }; |
| 566 | |
| 567 | /** |
| 568 | * Core's native media player uses MediaElement.js |
| 569 | * The library's size is sufficient that it may not be loaded in time for Core's helper to invoke it, so we need to delay until `mejs` exists. |
| 570 | */ |
| 571 | Scroller.prototype.maybeLoadMejs = function () { |
| 572 | if ( null === this.wpMediaelement ) { |
| 573 | return; |
| 574 | } |
| 575 | |
| 576 | if ( 'undefined' === typeof mejs ) { |
| 577 | setTimeout( this.maybeLoadMejs.bind( this ), 250 ); |
| 578 | } else { |
| 579 | document |
| 580 | .getElementsByTagName( this.wpMediaelement.element )[ 0 ] |
| 581 | .appendChild( this.wpMediaelement.tag ); |
| 582 | this.wpMediaelement = null; |
| 583 | |
| 584 | // Ensure any subsequent IS loads initialize the players |
| 585 | this.body.addEventListener( 'is.post-load', this.initializeMejs ); |
| 586 | } |
| 587 | }; |
| 588 | |
| 589 | /** |
| 590 | * Initialize the MediaElement.js player for any posts not previously initialized |
| 591 | */ |
| 592 | Scroller.prototype.initializeMejs = function ( e ) { |
| 593 | // Are there media players in the incoming set of posts? |
| 594 | if ( |
| 595 | ! e.detail || |
| 596 | ! e.detail.html || |
| 597 | ( -1 === e.detail.html.indexOf( 'wp-audio-shortcode' ) && |
| 598 | -1 === e.detail.html.indexOf( 'wp-video-shortcode' ) ) |
| 599 | ) { |
| 600 | return; |
| 601 | } |
| 602 | |
| 603 | // Don't bother if mejs isn't loaded for some reason |
| 604 | if ( 'undefined' === typeof mejs ) { |
| 605 | return; |
| 606 | } |
| 607 | |
| 608 | // Adapted from wp-includes/js/mediaelement/wp-mediaelement.js |
| 609 | // Modified to not initialize already-initialized players, as Mejs doesn't handle that well |
| 610 | var settings = {}; |
| 611 | var audioVideoElements; |
| 612 | |
| 613 | if ( typeof _wpmejsSettings !== 'undefined' ) { |
| 614 | settings.pluginPath = _wpmejsSettings.pluginPath; |
| 615 | } |
| 616 | |
| 617 | settings.success = function ( mejs ) { |
| 618 | var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay; |
| 619 | if ( 'flash' === mejs.pluginType && autoplay ) { |
| 620 | mejs.addEventListener( |
| 621 | 'canplay', |
| 622 | function () { |
| 623 | mejs.play(); |
| 624 | }, |
| 625 | false |
| 626 | ); |
| 627 | } |
| 628 | }; |
| 629 | |
| 630 | audioVideoElements = document.querySelectorAll( '.wp-audio-shortcode, .wp-video-shortcode' ); |
| 631 | audioVideoElements = Array.prototype.slice.call( audioVideoElements ); |
| 632 | |
| 633 | // Only process already unprocessed shortcodes. |
| 634 | audioVideoElements = audioVideoElements.filter( function ( el ) { |
| 635 | while ( el.parentNode ) { |
| 636 | if ( el.classList.contains( 'mejs-container' ) ) { |
| 637 | return false; |
| 638 | } |
| 639 | el = el.parentNode; |
| 640 | } |
| 641 | return true; |
| 642 | } ); |
| 643 | |
| 644 | for ( var i = 0; i < audioVideoElements.length; i++ ) { |
| 645 | new MediaElementPlayer( audioVideoElements[ i ], settings ); |
| 646 | } |
| 647 | }; |
| 648 | |
| 649 | /** |
| 650 | * Get element measurements relative to the viewport. |
| 651 | * |
| 652 | * @return {object} |
| 653 | */ |
| 654 | Scroller.prototype.measure = function ( element, expandClasses ) { |
| 655 | expandClasses = expandClasses || []; |
| 656 | |
| 657 | var childrenToTest = Array.prototype.slice.call( element.children ); |
| 658 | var currentChild, |
| 659 | minTop = Number.MAX_VALUE, |
| 660 | maxBottom = 0, |
| 661 | currentChildRect, |
| 662 | i; |
| 663 | |
| 664 | while ( childrenToTest.length > 0 ) { |
| 665 | currentChild = childrenToTest.shift(); |
| 666 | |
| 667 | for ( i = 0; i < expandClasses.length; i++ ) { |
| 668 | // Expand (= measure) child elements of nodes with class names from expandClasses. |
| 669 | if ( currentChild.classList.contains( expandClasses[ i ] ) ) { |
| 670 | childrenToTest = childrenToTest.concat( |
| 671 | Array.prototype.slice.call( currentChild.children ) |
| 672 | ); |
| 673 | break; |
| 674 | } |
| 675 | } |
| 676 | currentChildRect = currentChild.getBoundingClientRect(); |
| 677 | |
| 678 | minTop = Math.min( minTop, currentChildRect.top ); |
| 679 | maxBottom = Math.max( maxBottom, currentChildRect.bottom ); |
| 680 | } |
| 681 | |
| 682 | var viewportMiddle = Math.round( window.innerHeight / 2 ); |
| 683 | |
| 684 | // isActive = does the middle of the viewport cross the element? |
| 685 | var isActive = minTop <= viewportMiddle && maxBottom >= viewportMiddle; |
| 686 | |
| 687 | /** |
| 688 | * Factor = percentage of viewport above the middle line occupied by the element. |
| 689 | * |
| 690 | * Negative factors are assigned for elements below the middle line. That's on purpose |
| 691 | * to only allow "page 2" to change the URL once it's in the middle of the viewport. |
| 692 | */ |
| 693 | var factor = ( Math.min( maxBottom, viewportMiddle ) - Math.max( minTop, 0 ) ) / viewportMiddle; |
| 694 | |
| 695 | return { |
| 696 | top: minTop, |
| 697 | bottom: maxBottom, |
| 698 | height: maxBottom - minTop, |
| 699 | factor: factor, |
| 700 | isActive: isActive, |
| 701 | }; |
| 702 | }; |
| 703 | |
| 704 | /** |
| 705 | * Trigger IS to load additional posts if the initial posts don't fill the window. |
| 706 | * |
| 707 | * On large displays, or when posts are very short, the viewport may not be filled with posts, |
| 708 | * so we overcome this by loading additional posts when IS initializes. |
| 709 | */ |
| 710 | Scroller.prototype.ensureFilledViewport = function () { |
| 711 | var self = this, |
| 712 | windowHeight = self.window.innerHeight, |
| 713 | wrapperMeasurements = self.measure( self.element, [ self.wrapperClass ] ); |
| 714 | |
| 715 | // Only load more posts once. This prevents infinite loops when there are no more posts. |
| 716 | self.body.removeEventListener( 'is.post-load', self.checkViewportOnLoadBound ); |
| 717 | |
| 718 | // Load more posts if space permits, otherwise stop checking for a full viewport. |
| 719 | if ( wrapperMeasurements.bottom !== 0 && wrapperMeasurements.bottom < windowHeight ) { |
| 720 | self.ready = true; |
| 721 | self.refresh(); |
| 722 | } |
| 723 | }; |
| 724 | |
| 725 | /** |
| 726 | * Event handler for ensureFilledViewport(), tied to the post-load trigger. |
| 727 | * Necessary to ensure that the variable `this` contains the scroller when used in ensureFilledViewport(). Since this function is tied to an event, `this` becomes the DOM element the event is tied to. |
| 728 | */ |
| 729 | Scroller.prototype.checkViewportOnLoad = function () { |
| 730 | this.ensureFilledViewport(); |
| 731 | }; |
| 732 | |
| 733 | function fullscreenState() { |
| 734 | return document.fullscreenElement || |
| 735 | document.mozFullScreenElement || |
| 736 | document.webkitFullscreenElement || |
| 737 | document.msFullscreenElement |
| 738 | ? 1 |
| 739 | : 0; |
| 740 | } |
| 741 | |
| 742 | var previousFullScrenState = fullscreenState(); |
| 743 | |
| 744 | /** |
| 745 | * Identify archive page that corresponds to majority of posts shown in the current browser window. |
| 746 | */ |
| 747 | Scroller.prototype.determineURL = function () { |
| 748 | var self = this, |
| 749 | pageNum = -1, |
| 750 | currentFullScreenState = fullscreenState(), |
| 751 | wrapperEls, |
| 752 | maxFactor = 0; |
| 753 | |
| 754 | // xor - check if the state has changed |
| 755 | // eslint-disable-next-line no-bitwise |
| 756 | if ( previousFullScrenState ^ currentFullScreenState ) { |
| 757 | // If we just switched to/from fullscreen, |
| 758 | // don't do the div clearing/caching or the |
| 759 | // URL setting. Doing so can break video playback |
| 760 | // if the video goes to fullscreen. |
| 761 | |
| 762 | previousFullScrenState = currentFullScreenState; |
| 763 | return; |
| 764 | } |
| 765 | previousFullScrenState = currentFullScreenState; |
| 766 | wrapperEls = document.querySelectorAll( '.' + self.wrapperClass ); |
| 767 | |
| 768 | for ( var i = 0; i < wrapperEls.length; i++ ) { |
| 769 | var setMeasurements = self.measure( wrapperEls[ i ] ); |
| 770 | |
| 771 | // If it exists, pick a set that is crossed by the middle of the viewport. |
| 772 | if ( setMeasurements.isActive ) { |
| 773 | pageNum = parseInt( wrapperEls[ i ].dataset.pageNum, 10 ); |
| 774 | break; |
| 775 | } |
| 776 | |
| 777 | // If there is such a set, pick the one that occupies the most space |
| 778 | // above the middle of the viewport. |
| 779 | if ( setMeasurements.factor > maxFactor ) { |
| 780 | pageNum = parseInt( wrapperEls[ i ].dataset.pageNum, 10 ); |
| 781 | maxFactor = setMeasurements.factor; |
| 782 | } |
| 783 | |
| 784 | // Otherwise default to -1 |
| 785 | } |
| 786 | |
| 787 | self.updateURL( pageNum ); |
| 788 | }; |
| 789 | |
| 790 | /** |
| 791 | * Update address bar to reflect archive page URL for a given page number. |
| 792 | * Checks if URL is different to prevent pollution of browser history. |
| 793 | */ |
| 794 | Scroller.prototype.updateURL = function ( page ) { |
| 795 | // IE only supports pushState() in v10 and above, so don't bother if those conditions aren't met. |
| 796 | if ( ! window.history.pushState ) { |
| 797 | return; |
| 798 | } |
| 799 | var self = this, |
| 800 | pageSlug = self.origURL; |
| 801 | |
| 802 | if ( -1 !== page ) { |
| 803 | pageSlug = |
| 804 | window.location.protocol + |
| 805 | '//' + |
| 806 | self.history.host + |
| 807 | self.history.path.replace( /%d/, page ) + |
| 808 | self.history.parameters; |
| 809 | } |
| 810 | |
| 811 | if ( window.location.href !== pageSlug ) { |
| 812 | history.pushState( null, null, pageSlug ); |
| 813 | } |
| 814 | }; |
| 815 | |
| 816 | /** |
| 817 | * Pause scrolling. |
| 818 | */ |
| 819 | Scroller.prototype.pause = function () { |
| 820 | this.disabled = true; |
| 821 | }; |
| 822 | |
| 823 | /** |
| 824 | * Resume scrolling. |
| 825 | */ |
| 826 | Scroller.prototype.resume = function () { |
| 827 | this.disabled = false; |
| 828 | }; |
| 829 | |
| 830 | /** |
| 831 | * Emits custom JS events. |
| 832 | * |
| 833 | * @param {Node} el |
| 834 | * @param {string} eventName |
| 835 | * @param {*} data |
| 836 | */ |
| 837 | Scroller.prototype.trigger = function ( el, eventName, opts ) { |
| 838 | opts = opts || {}; |
| 839 | |
| 840 | /** |
| 841 | * Emit the event in a jQuery way for backwards compatibility where necessary. |
| 842 | */ |
| 843 | if ( opts.jqueryEventName && 'undefined' !== typeof jQuery ) { |
| 844 | jQuery( el ).trigger( opts.jqueryEventName, opts.data || null ); |
| 845 | } |
| 846 | |
| 847 | /** |
| 848 | * Emit the event in a standard way. |
| 849 | */ |
| 850 | var e; |
| 851 | try { |
| 852 | e = new CustomEvent( eventName, { |
| 853 | bubbles: true, |
| 854 | cancelable: true, |
| 855 | detail: opts.data || null, |
| 856 | } ); |
| 857 | } catch { |
| 858 | e = document.createEvent( 'CustomEvent' ); |
| 859 | e.initCustomEvent( eventName, true, true, opts.data || null ); |
| 860 | } |
| 861 | el.dispatchEvent( e ); |
| 862 | }; |
| 863 | |
| 864 | /** |
| 865 | * Ready, set, go! |
| 866 | */ |
| 867 | var jetpackInfinityModule = function () { |
| 868 | // Check for our variables |
| 869 | if ( 'object' !== typeof infiniteScroll ) { |
| 870 | return; |
| 871 | } |
| 872 | |
| 873 | var bodyClasses = infiniteScroll.settings.body_class.split( ' ' ); |
| 874 | bodyClasses.forEach( function ( className ) { |
| 875 | if ( className ) { |
| 876 | document.body.classList.add( className ); |
| 877 | } |
| 878 | } ); |
| 879 | |
| 880 | // Set stats, used for tracking stats |
| 881 | stats = infiniteScroll.settings.stats; |
| 882 | |
| 883 | // Define what type of infinity we have, grab text for click-handle |
| 884 | type = infiniteScroll.settings.type; |
| 885 | text = infiniteScroll.settings.text; |
| 886 | totop = infiniteScroll.settings.totop; |
| 887 | |
| 888 | // aria text |
| 889 | loading_text = infiniteScroll.settings.loading_text; |
| 890 | |
| 891 | // Initialize the scroller (with the ID of the element from the theme) |
| 892 | infiniteScroll.scroller = new Scroller( infiniteScroll.settings ); |
| 893 | |
| 894 | /** |
| 895 | * Monitor user scroll activity to update URL to correspond to archive page for current set of IS posts |
| 896 | */ |
| 897 | if ( type === 'click' ) { |
| 898 | var timer = null; |
| 899 | window.addEventListener( 'scroll', function () { |
| 900 | // run the real scroll handler once every 250 ms. |
| 901 | if ( timer ) { |
| 902 | return; |
| 903 | } |
| 904 | timer = setTimeout( function () { |
| 905 | infiniteScroll.scroller.determineURL(); |
| 906 | timer = null; |
| 907 | }, 250 ); |
| 908 | } ); |
| 909 | } |
| 910 | }; |
| 911 | |
| 912 | /** |
| 913 | * Ready, set, go! |
| 914 | */ |
| 915 | if ( document.readyState === 'interactive' || document.readyState === 'complete' ) { |
| 916 | jetpackInfinityModule(); |
| 917 | } else { |
| 918 | document.addEventListener( 'DOMContentLoaded', jetpackInfinityModule ); |
| 919 | } |
| 920 | } )(); // Close closure |
| 921 |