/* global wpcom_reblog */

[0] Fix | Delete

[1] Fix | Delete

var jetpackLikesWidgetBatch = [];

[2] Fix | Delete

var jetpackLikesMasterReady = false;

[3] Fix | Delete

[4] Fix | Delete

// Due to performance problems on pages with a large number of widget iframes that need to be loaded,

[5] Fix | Delete

// we are limiting the processing at any instant to unloaded widgets that are currently in viewport,

[6] Fix | Delete

// plus this constant that will allow processing of widgets above and bellow the current fold.

[7] Fix | Delete

// This aim of it is to improve the UX and hide the transition from unloaded to loaded state from users.

[8] Fix | Delete

var jetpackLikesLookAhead = 2000; // pixels

[9] Fix | Delete

[10] Fix | Delete

// Keeps track of loaded comment likes widget so we can unload them when they are scrolled out of view.

[11] Fix | Delete

var jetpackCommentLikesLoadedWidgets = [];

[12] Fix | Delete

[13] Fix | Delete

var jetpackLikesDocReadyPromise = new Promise( resolve => {

[14] Fix | Delete

if ( document.readyState !== 'loading' ) {

[15] Fix | Delete

resolve();

[16] Fix | Delete

} else {

[17] Fix | Delete

window.addEventListener( 'DOMContentLoaded', () => resolve() );

[18] Fix | Delete

}

[19] Fix | Delete

} );

[20] Fix | Delete

[21] Fix | Delete

function JetpackLikesPostMessage( message, target ) {

[22] Fix | Delete

if ( typeof message === 'string' ) {

[23] Fix | Delete

try {

[24] Fix | Delete

message = JSON.parse( message );

[25] Fix | Delete

} catch {

[26] Fix | Delete

return;

[27] Fix | Delete

}

[28] Fix | Delete

}

[29] Fix | Delete

[30] Fix | Delete

if ( target && typeof target.postMessage === 'function' ) {

[31] Fix | Delete

try {

[32] Fix | Delete

target.postMessage(

[33] Fix | Delete

JSON.stringify( {

[34] Fix | Delete

type: 'likesMessage',

[35] Fix | Delete

data: message,

[36] Fix | Delete

} ),

[37] Fix | Delete

'*'

[38] Fix | Delete

);

[39] Fix | Delete

} catch {

[40] Fix | Delete

// Ignore error

[41] Fix | Delete

}

[42] Fix | Delete

}

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

function JetpackLikesBatchHandler() {

[46] Fix | Delete

const requests = [];

[47] Fix | Delete

document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' ).forEach( widget => {

[48] Fix | Delete

if ( jetpackLikesWidgetBatch.indexOf( widget.id ) > -1 ) {

[49] Fix | Delete

return;

[50] Fix | Delete

}

[51] Fix | Delete

[52] Fix | Delete

if ( ! jetpackIsScrolledIntoView( widget ) ) {

[53] Fix | Delete

return;

[54] Fix | Delete

}

[55] Fix | Delete

[56] Fix | Delete

jetpackLikesWidgetBatch.push( widget.id );

[57] Fix | Delete

[58] Fix | Delete

var regex = /like-(post|comment)-wrapper-(\d+)-(\d+)-(\w+)/,

[59] Fix | Delete

match = regex.exec( widget.id ),

[60] Fix | Delete

info;

[61] Fix | Delete

[62] Fix | Delete

if ( ! match || match.length !== 5 ) {

[63] Fix | Delete

return;

[64] Fix | Delete

}

[65] Fix | Delete

[66] Fix | Delete

info = {

[67] Fix | Delete

blog_id: match[ 2 ],

[68] Fix | Delete

width: widget.width,

[69] Fix | Delete

};

[70] Fix | Delete

[71] Fix | Delete

if ( 'post' === match[ 1 ] ) {

[72] Fix | Delete

info.post_id = match[ 3 ];

[73] Fix | Delete

} else if ( 'comment' === match[ 1 ] ) {

[74] Fix | Delete

info.comment_id = match[ 3 ];

[75] Fix | Delete

}

[76] Fix | Delete

[77] Fix | Delete

info.obj_id = match[ 4 ];

[78] Fix | Delete

[79] Fix | Delete

requests.push( info );

[80] Fix | Delete

} );

[81] Fix | Delete

[82] Fix | Delete

if ( requests.length > 0 ) {

[83] Fix | Delete

JetpackLikesPostMessage(

[84] Fix | Delete

{ event: 'initialBatch', requests: requests },

[85] Fix | Delete

window.frames[ 'likes-master' ]

[86] Fix | Delete

);

[87] Fix | Delete

}

[88] Fix | Delete

}

[89] Fix | Delete

[90] Fix | Delete

function JetpackLikesMessageListener( event ) {

[91] Fix | Delete

let message = event && event.data;

[92] Fix | Delete

if ( typeof message === 'string' ) {

[93] Fix | Delete

try {

[94] Fix | Delete

message = JSON.parse( message );

[95] Fix | Delete

} catch {

[96] Fix | Delete

return;

[97] Fix | Delete

}

[98] Fix | Delete

}

[99] Fix | Delete

[100] Fix | Delete

const type = message && message.type;

[101] Fix | Delete

const data = message && message.data;

[102] Fix | Delete

[103] Fix | Delete

if ( type !== 'likesMessage' || typeof data.event === 'undefined' ) {

[104] Fix | Delete

return;

[105] Fix | Delete

}

[106] Fix | Delete

[107] Fix | Delete

// We only allow messages from one origin

[108] Fix | Delete

const allowedOrigin = 'https://widgets.wp.com';

[109] Fix | Delete

if ( allowedOrigin !== event.origin ) {

[110] Fix | Delete

return;

[111] Fix | Delete

}

[112] Fix | Delete

[113] Fix | Delete

switch ( data.event ) {

[114] Fix | Delete

case 'masterReady':

[115] Fix | Delete

jetpackLikesDocReadyPromise.then( () => {

[116] Fix | Delete

jetpackLikesMasterReady = true;

[117] Fix | Delete

[118] Fix | Delete

const stylesData = {

[119] Fix | Delete

event: 'injectStyles',

[120] Fix | Delete

};

[121] Fix | Delete

const sdTextColor = document.querySelector( '.sd-text-color' );

[122] Fix | Delete

const sdLinkColor = document.querySelector( '.sd-link-color' );

[123] Fix | Delete

const sdTextColorStyles = ( sdTextColor && getComputedStyle( sdTextColor ) ) || {};

[124] Fix | Delete

const sdLinkColorStyles = ( sdLinkColor && getComputedStyle( sdLinkColor ) ) || {};

[125] Fix | Delete

[126] Fix | Delete

// enable reblogs if we're on a single post page

[127] Fix | Delete

if ( document.body.classList.contains( 'single' ) ) {

[128] Fix | Delete

JetpackLikesPostMessage( { event: 'reblogsEnabled' }, window.frames[ 'likes-master' ] );

[129] Fix | Delete

}

[130] Fix | Delete

[131] Fix | Delete

stylesData.textStyles = {

[132] Fix | Delete

color: sdTextColorStyles.color,

[133] Fix | Delete

fontFamily: sdTextColorStyles[ 'font-family' ],

[134] Fix | Delete

fontSize: sdTextColorStyles[ 'font-size' ],

[135] Fix | Delete

direction: sdTextColorStyles.direction,

[136] Fix | Delete

fontWeight: sdTextColorStyles[ 'font-weight' ],

[137] Fix | Delete

fontStyle: sdTextColorStyles[ 'font-style' ],

[138] Fix | Delete

textDecoration: sdTextColorStyles[ 'text-decoration' ],

[139] Fix | Delete

};

[140] Fix | Delete

[141] Fix | Delete

stylesData.linkStyles = {

[142] Fix | Delete

color: sdLinkColorStyles.color,

[143] Fix | Delete

fontFamily: sdLinkColorStyles[ 'font-family' ],

[144] Fix | Delete

fontSize: sdLinkColorStyles[ 'font-size' ],

[145] Fix | Delete

textDecoration: sdLinkColorStyles[ 'text-decoration' ],

[146] Fix | Delete

fontWeight: sdLinkColorStyles[ 'font-weight' ],

[147] Fix | Delete

fontStyle: sdLinkColorStyles[ 'font-style' ],

[148] Fix | Delete

};

[149] Fix | Delete

[150] Fix | Delete

JetpackLikesPostMessage( stylesData, window.frames[ 'likes-master' ] );

[151] Fix | Delete

[152] Fix | Delete

JetpackLikesBatchHandler();

[153] Fix | Delete

} );

[154] Fix | Delete

[155] Fix | Delete

break;

[156] Fix | Delete

[157] Fix | Delete

// We're keeping this for planned future follow ups.

[158] Fix | Delete

// @see: https://github.com/Automattic/jetpack/pull/42361#discussion_r1995338815

[159] Fix | Delete

case 'showLikeWidget':

[160] Fix | Delete

break;

[161] Fix | Delete

[162] Fix | Delete

// We're keeping this for planned future follow ups.

[163] Fix | Delete

// @see: https://github.com/Automattic/jetpack/pull/42361#discussion_r1995338815

[164] Fix | Delete

case 'showCommentLikeWidget':

[165] Fix | Delete

break;

[166] Fix | Delete

[167] Fix | Delete

case 'killCommentLikes':

[168] Fix | Delete

// If kill switch for comment likes is enabled remove all widgets wrappers and `Loading...` placeholders.

[169] Fix | Delete

document

[170] Fix | Delete

.querySelectorAll( '.jetpack-comment-likes-widget-wrapper' )

[171] Fix | Delete

.forEach( wrapper => wrapper.remove() );

[172] Fix | Delete

break;

[173] Fix | Delete

[174] Fix | Delete

case 'clickReblogFlair':

[175] Fix | Delete

if ( wpcom_reblog && typeof wpcom_reblog.toggle_reblog_box_flair === 'function' ) {

[176] Fix | Delete

wpcom_reblog.toggle_reblog_box_flair( data.obj_id );

[177] Fix | Delete

}

[178] Fix | Delete

break;

[179] Fix | Delete

[180] Fix | Delete

case 'hideOtherGravatars': {

[181] Fix | Delete

hideLikersPopover();

[182] Fix | Delete

break;

[183] Fix | Delete

}

[184] Fix | Delete

[185] Fix | Delete

case 'showOtherGravatars': {

[186] Fix | Delete

const container = document.querySelector( '#likes-other-gravatars' );

[187] Fix | Delete

[188] Fix | Delete

if ( ! container ) {

[189] Fix | Delete

break;

[190] Fix | Delete

}

[191] Fix | Delete

[192] Fix | Delete

const list = container.querySelector( 'ul' );

[193] Fix | Delete

[194] Fix | Delete

container.style.display = 'none';

[195] Fix | Delete

list.innerHTML = '';

[196] Fix | Delete

[197] Fix | Delete

container

[198] Fix | Delete

.querySelectorAll( '.likes-text span' )

[199] Fix | Delete

.forEach( item => ( item.textContent = data.totalLikesLabel ) );

[200] Fix | Delete

[201] Fix | Delete

( data.likers || [] ).forEach( async ( liker, index ) => {

[202] Fix | Delete

if ( liker.profile_URL.substr( 0, 4 ) !== 'http' ) {

[203] Fix | Delete

// We only display gravatars with http or https schema

[204] Fix | Delete

return;

[205] Fix | Delete

}

[206] Fix | Delete

[207] Fix | Delete

const element = document.createElement( 'li' );

[208] Fix | Delete

list.append( element );

[209] Fix | Delete

[210] Fix | Delete

const profileLink = encodeURI( liker.profile_URL );

[211] Fix | Delete

const avatarLink = encodeURI( liker.avatar_URL );

[212] Fix | Delete

element.innerHTML = `<a href="${ profileLink }" rel="nofollow" target="_parent" class="wpl-liker">

[213] Fix | Delete

<img src="${ avatarLink }"

[214] Fix | Delete

alt=""

[215] Fix | Delete

style="width: 28px; height: 28px;" />

[216] Fix | Delete

<span></span>

[217] Fix | Delete

</a>`;

[218] Fix | Delete

[219] Fix | Delete

// Add some extra attributes through native methods, to ensure strings are sanitized.

[220] Fix | Delete

element.classList.add( liker.css_class );

[221] Fix | Delete

element.querySelector( 'img' ).alt = data.avatarAltTitle.replace( '%s', liker.name );

[222] Fix | Delete

element.querySelector( 'span' ).innerText = liker.name;

[223] Fix | Delete

[224] Fix | Delete

if ( index === data.likers.length - 1 ) {

[225] Fix | Delete

element.addEventListener( 'keydown', e => {

[226] Fix | Delete

if ( e.key === 'Tab' && ! e.shiftKey ) {

[227] Fix | Delete

e.preventDefault();

[228] Fix | Delete

hideLikersPopover();

[229] Fix | Delete

[230] Fix | Delete

JetpackLikesPostMessage(

[231] Fix | Delete

{ event: 'focusLikesCount', parent: data.parent },

[232] Fix | Delete

window.frames[ 'likes-master' ]

[233] Fix | Delete

);

[234] Fix | Delete

}

[235] Fix | Delete

} );

[236] Fix | Delete

}

[237] Fix | Delete

} );

[238] Fix | Delete

[239] Fix | Delete

const positionPopup = function () {

[240] Fix | Delete

const containerStyle = getComputedStyle( container );

[241] Fix | Delete

const isRtl = containerStyle.direction === 'rtl';

[242] Fix | Delete

[243] Fix | Delete

const el = document.querySelector( `*[name='${ data.parent }']` );

[244] Fix | Delete

const rect = el.getBoundingClientRect();

[245] Fix | Delete

const win = el.ownerDocument.defaultView;

[246] Fix | Delete

const offset = {

[247] Fix | Delete

top: rect.top + win.pageYOffset,

[248] Fix | Delete

left: rect.left + win.pageXOffset,

[249] Fix | Delete

};

[250] Fix | Delete

[251] Fix | Delete

let containerLeft = 0;

[252] Fix | Delete

container.style.top = offset.top + data.position.top - 1 + 'px';

[253] Fix | Delete

[254] Fix | Delete

if ( isRtl ) {

[255] Fix | Delete

const visibleAvatarsCount = data && data.likers ? Math.min( data.likers.length, 5 ) : 0;

[256] Fix | Delete

// 24px is the width of the avatar + 4px is the padding between avatars

[257] Fix | Delete

containerLeft = offset.left + data.position.left + 24 * visibleAvatarsCount + 4;

[258] Fix | Delete

container.style.transform = 'translateX(-100%)';

[259] Fix | Delete

} else {

[260] Fix | Delete

containerLeft = offset.left + data.position.left;

[261] Fix | Delete

}

[262] Fix | Delete

container.style.left = containerLeft + 'px';

[263] Fix | Delete

[264] Fix | Delete

// Container width - padding

[265] Fix | Delete

const initContainerWidth = data.width - 20;

[266] Fix | Delete

const rowLength = Math.floor( initContainerWidth / 37 );

[267] Fix | Delete

// # of rows + (avatar + avatar padding) + text above + container padding

[268] Fix | Delete

let height = Math.ceil( data.likers.length / rowLength ) * 37 + 17 + 22;

[269] Fix | Delete

if ( height > 204 ) {

[270] Fix | Delete

height = 204;

[271] Fix | Delete

}

[272] Fix | Delete

[273] Fix | Delete

// If the popup overflows viewport width, we should show it on the next line.

[274] Fix | Delete

// Push it offscreen to calculated rendered width.

[275] Fix | Delete

container.style.left = '-9999px';

[276] Fix | Delete

container.style.display = 'block';

[277] Fix | Delete

[278] Fix | Delete

// If the popup exceeds the viewport width,

[279] Fix | Delete

// flip the position of the popup.

[280] Fix | Delete

const containerWidth = container.offsetWidth;

[281] Fix | Delete

const containerRight = containerLeft + containerWidth;

[282] Fix | Delete

if ( containerRight > win.innerWidth ) {

[283] Fix | Delete

containerLeft = rect.right - containerWidth;

[284] Fix | Delete

}

[285] Fix | Delete

[286] Fix | Delete

// Set the container left

[287] Fix | Delete

container.style.left = containerLeft + 'px';

[288] Fix | Delete

container.setAttribute( 'aria-hidden', 'false' );

[289] Fix | Delete

};

[290] Fix | Delete

[291] Fix | Delete

positionPopup();

[292] Fix | Delete

container.focus();

[293] Fix | Delete

[294] Fix | Delete

const debounce = function ( func, wait ) {

[295] Fix | Delete

var timeout;

[296] Fix | Delete

return function () {

[297] Fix | Delete

var context = this;

[298] Fix | Delete

var args = arguments;

[299] Fix | Delete

clearTimeout( timeout );

[300] Fix | Delete

timeout = setTimeout( function () {

[301] Fix | Delete

func.apply( context, args );

[302] Fix | Delete

}, wait );

[303] Fix | Delete

};

[304] Fix | Delete

};

[305] Fix | Delete

[306] Fix | Delete

const debouncedPositionPopup = debounce( positionPopup, 100 );

[307] Fix | Delete

[308] Fix | Delete

// Keep a reference of this function in the element itself

[309] Fix | Delete

// so that we can destroy it later

[310] Fix | Delete

container.__resizeHandler = debouncedPositionPopup;

[311] Fix | Delete

[312] Fix | Delete

// When window is resized, resize the popup.

[313] Fix | Delete

window.addEventListener( 'resize', debouncedPositionPopup );

[314] Fix | Delete

[315] Fix | Delete

container.focus();

[316] Fix | Delete

}

[317] Fix | Delete

}

[318] Fix | Delete

}

[319] Fix | Delete

[320] Fix | Delete

window.addEventListener( 'message', JetpackLikesMessageListener );

[321] Fix | Delete

[322] Fix | Delete

function hideLikersPopover() {

[323] Fix | Delete

const container = document.querySelector( '#likes-other-gravatars' );

[324] Fix | Delete

[325] Fix | Delete

if ( container ) {

[326] Fix | Delete

container.style.display = 'none';

[327] Fix | Delete

container.setAttribute( 'aria-hidden', 'true' );

[328] Fix | Delete

[329] Fix | Delete

// Remove the resize event listener and cleanup.

[330] Fix | Delete

const resizeHandler = container.__resizeHandler;

[331] Fix | Delete

if ( resizeHandler ) {

[332] Fix | Delete

window.removeEventListener( 'resize', resizeHandler );

[333] Fix | Delete

delete container.__resizeHandler;

[334] Fix | Delete

}

[335] Fix | Delete

}

[336] Fix | Delete

}

[337] Fix | Delete

[338] Fix | Delete

document.addEventListener( 'click', hideLikersPopover );

[339] Fix | Delete

[340] Fix | Delete

function JetpackLikesWidgetQueueHandler() {

[341] Fix | Delete

var wrapperID;

[342] Fix | Delete

[343] Fix | Delete

if ( ! jetpackLikesMasterReady ) {

[344] Fix | Delete

setTimeout( JetpackLikesWidgetQueueHandler, 500 );

[345] Fix | Delete

return;

[346] Fix | Delete

}

[347] Fix | Delete

[348] Fix | Delete

// Restore widgets to initial unloaded state when they are scrolled out of view.

[349] Fix | Delete

jetpackUnloadScrolledOutWidgets();

[350] Fix | Delete

[351] Fix | Delete

var unloadedWidgetsInView = jetpackGetUnloadedWidgetsInView();

[352] Fix | Delete

[353] Fix | Delete

if ( unloadedWidgetsInView.length > 0 ) {

[354] Fix | Delete

// Grab any unloaded widgets for a batch request

[355] Fix | Delete

JetpackLikesBatchHandler();

[356] Fix | Delete

}

[357] Fix | Delete

[358] Fix | Delete

for ( var i = 0, length = unloadedWidgetsInView.length; i <= length - 1; i++ ) {

[359] Fix | Delete

wrapperID = unloadedWidgetsInView[ i ].id;

[360] Fix | Delete

[361] Fix | Delete

if ( ! wrapperID ) {

[362] Fix | Delete

continue;

[363] Fix | Delete

}

[364] Fix | Delete

[365] Fix | Delete

jetpackLoadLikeWidgetIframe( wrapperID );

[366] Fix | Delete

}

[367] Fix | Delete

}

[368] Fix | Delete

[369] Fix | Delete

function jetpackLoadLikeWidgetIframe( wrapperID ) {

[370] Fix | Delete

if ( typeof wrapperID === 'undefined' ) {

[371] Fix | Delete

return;

[372] Fix | Delete

}

[373] Fix | Delete

[374] Fix | Delete

const wrapper = document.querySelector( '#' + wrapperID );

[375] Fix | Delete

wrapper.querySelectorAll( 'iframe' ).forEach( iFrame => iFrame.remove() );

[376] Fix | Delete

[377] Fix | Delete

const placeholder = wrapper.querySelector( '.likes-widget-placeholder' );

[378] Fix | Delete

[379] Fix | Delete

// Post like iframe

[380] Fix | Delete

if ( placeholder && placeholder.classList.contains( 'post-likes-widget-placeholder' ) ) {

[381] Fix | Delete

const postLikesFrame = document.createElement( 'iframe' );

[382] Fix | Delete

[383] Fix | Delete

postLikesFrame.classList.add( 'post-likes-widget', 'jetpack-likes-widget' );

[384] Fix | Delete

postLikesFrame.name = wrapper.dataset.name;

[385] Fix | Delete

postLikesFrame.src = wrapper.dataset.src;

[386] Fix | Delete

postLikesFrame.height = '55px';

[387] Fix | Delete

postLikesFrame.width = '100%';

[388] Fix | Delete

postLikesFrame.frameBorder = '0';

[389] Fix | Delete

postLikesFrame.scrolling = 'no';

[390] Fix | Delete

postLikesFrame.title = wrapper.dataset.title;

[391] Fix | Delete

[392] Fix | Delete

placeholder.after( postLikesFrame );

[393] Fix | Delete

}

[394] Fix | Delete

[395] Fix | Delete

// Comment like iframe

[396] Fix | Delete

if ( placeholder.classList.contains( 'comment-likes-widget-placeholder' ) ) {

[397] Fix | Delete

const commentLikesFrame = document.createElement( 'iframe' );

[398] Fix | Delete

[399] Fix | Delete

commentLikesFrame.class = 'comment-likes-widget-frame jetpack-likes-widget-frame';

[400] Fix | Delete

commentLikesFrame.name = wrapper.dataset.name;

[401] Fix | Delete

commentLikesFrame.src = wrapper.dataset.src;

[402] Fix | Delete

commentLikesFrame.height = '18px';

[403] Fix | Delete

commentLikesFrame.width = '100%';

[404] Fix | Delete

commentLikesFrame.frameBorder = '0';

[405] Fix | Delete

commentLikesFrame.scrolling = 'no';

[406] Fix | Delete

[407] Fix | Delete

wrapper.querySelector( '.comment-like-feedback' ).after( commentLikesFrame );

[408] Fix | Delete

[409] Fix | Delete

jetpackCommentLikesLoadedWidgets.push( commentLikesFrame );

[410] Fix | Delete

}

[411] Fix | Delete

[412] Fix | Delete

wrapper.classList.remove( 'jetpack-likes-widget-unloaded' );

[413] Fix | Delete

wrapper.classList.add( 'jetpack-likes-widget-loading' );

[414] Fix | Delete

[415] Fix | Delete

wrapper.querySelector( 'iframe' ).addEventListener( 'load', e => {

[416] Fix | Delete

JetpackLikesPostMessage(

[417] Fix | Delete

{ event: 'loadLikeWidget', name: e.target.name, width: e.target.width },

[418] Fix | Delete

window.frames[ 'likes-master' ]

[419] Fix | Delete

);

[420] Fix | Delete

[421] Fix | Delete

wrapper.classList.remove( 'jetpack-likes-widget-loading' );

[422] Fix | Delete

wrapper.classList.add( 'jetpack-likes-widget-loaded' );

[423] Fix | Delete

} );

[424] Fix | Delete

}

[425] Fix | Delete

[426] Fix | Delete

function jetpackGetUnloadedWidgetsInView() {

[427] Fix | Delete

const unloadedWidgets = document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' );

[428] Fix | Delete

[429] Fix | Delete

return [ ...unloadedWidgets ].filter( item => jetpackIsScrolledIntoView( item ) );

[430] Fix | Delete

}

[431] Fix | Delete

[432] Fix | Delete

function jetpackIsScrolledIntoView( element ) {

[433] Fix | Delete

const top = element.getBoundingClientRect().top;

[434] Fix | Delete

const bottom = element.getBoundingClientRect().bottom;

[435] Fix | Delete

[436] Fix | Delete

// Allow some slack above and bellow the fold with jetpackLikesLookAhead,

[437] Fix | Delete

// with the aim of hiding the transition from unloaded to loaded widget from users.

[438] Fix | Delete

return top + jetpackLikesLookAhead >= 0 && bottom <= window.innerHeight + jetpackLikesLookAhead;

[439] Fix | Delete

}

[440] Fix | Delete

[441] Fix | Delete

function jetpackUnloadScrolledOutWidgets() {

[442] Fix | Delete

for ( let i = jetpackCommentLikesLoadedWidgets.length - 1; i >= 0; i-- ) {

[443] Fix | Delete

const currentWidgetIframe = jetpackCommentLikesLoadedWidgets[ i ];

[444] Fix | Delete

[445] Fix | Delete

if ( ! jetpackIsScrolledIntoView( currentWidgetIframe ) ) {

[446] Fix | Delete

const widgetWrapper =

[447] Fix | Delete

currentWidgetIframe &&

[448] Fix | Delete

currentWidgetIframe.parentElement &&

[449] Fix | Delete

currentWidgetIframe.parentElement.parentElement;

[450] Fix | Delete

[451] Fix | Delete

// Restore parent class to 'unloaded' so this widget can be picked up by queue manager again if needed.

[452] Fix | Delete

widgetWrapper.classList.remove( 'jetpack-likes-widget-loaded' );

[453] Fix | Delete

widgetWrapper.classList.remove( 'jetpack-likes-widget-loading' );

[454] Fix | Delete

widgetWrapper.classList.add( 'jetpack-likes-widget-unloaded' );

[455] Fix | Delete

[456] Fix | Delete

// Remove it from the list of loaded widgets.

[457] Fix | Delete

jetpackCommentLikesLoadedWidgets.splice( i, 1 );

[458] Fix | Delete

[459] Fix | Delete

// Remove comment like widget iFrame.

[460] Fix | Delete

currentWidgetIframe.remove();

[461] Fix | Delete

}

[462] Fix | Delete

}

[463] Fix | Delete

}

[464] Fix | Delete

[465] Fix | Delete

var jetpackWidgetsDelayedExec = function ( after, fn ) {

[466] Fix | Delete

var timer;

[467] Fix | Delete

return function () {

[468] Fix | Delete

clearTimeout( timer );

[469] Fix | Delete

timer = setTimeout( fn, after );

[470] Fix | Delete

};

[471] Fix | Delete

};

[472] Fix | Delete

[473] Fix | Delete

var jetpackOnScrollStopped = jetpackWidgetsDelayedExec( 250, JetpackLikesWidgetQueueHandler );

[474] Fix | Delete

[475] Fix | Delete

// Load initial batch of widgets, prior to any scrolling events.

[476] Fix | Delete

JetpackLikesWidgetQueueHandler();

[477] Fix | Delete

[478] Fix | Delete

// Add event listener to execute queue handler after scroll.

[479] Fix | Delete

window.addEventListener( 'scroll', jetpackOnScrollStopped, true );

[480] Fix | Delete

[481] Fix | Delete