init
This commit is contained in:
emmymayo
@@ -0,0 +1,548 @@
|
||||
/* global wpcom_reblog */
|
||||
|
||||
var jetpackLikesWidgetBatch = [];
|
||||
var jetpackLikesMasterReady = false;
|
||||
|
||||
// Due to performance problems on pages with a large number of widget iframes that need to be loaded,
|
||||
// we are limiting the processing at any instant to unloaded widgets that are currently in viewport,
|
||||
// plus this constant that will allow processing of widgets above and bellow the current fold.
|
||||
// This aim of it is to improve the UX and hide the transition from unloaded to loaded state from users.
|
||||
var jetpackLikesLookAhead = 2000; // pixels
|
||||
|
||||
// Keeps track of loaded comment likes widget so we can unload them when they are scrolled out of view.
|
||||
var jetpackCommentLikesLoadedWidgets = [];
|
||||
|
||||
var jetpackLikesDocReadyPromise = new Promise( resolve => {
|
||||
if ( document.readyState !== 'loading' ) {
|
||||
resolve();
|
||||
} else {
|
||||
window.addEventListener( 'DOMContentLoaded', () => resolve() );
|
||||
}
|
||||
} );
|
||||
|
||||
function JetpackLikesPostMessage( message, target ) {
|
||||
if ( typeof message === 'string' ) {
|
||||
try {
|
||||
message = JSON.parse( message );
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if ( target && typeof target.postMessage === 'function' ) {
|
||||
try {
|
||||
target.postMessage(
|
||||
JSON.stringify( {
|
||||
type: 'likesMessage',
|
||||
data: message,
|
||||
} ),
|
||||
'*'
|
||||
);
|
||||
} catch {
|
||||
// Ignore error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function JetpackLikesBatchHandler() {
|
||||
const requests = [];
|
||||
document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' ).forEach( widget => {
|
||||
if ( jetpackLikesWidgetBatch.indexOf( widget.id ) > -1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! jetpackIsScrolledIntoView( widget ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
jetpackLikesWidgetBatch.push( widget.id );
|
||||
|
||||
var regex = /like-(post|comment)-wrapper-(\d+)-(\d+)-(\w+)/,
|
||||
match = regex.exec( widget.id ),
|
||||
info;
|
||||
|
||||
if ( ! match || match.length !== 5 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
info = {
|
||||
blog_id: match[ 2 ],
|
||||
width: widget.width,
|
||||
};
|
||||
|
||||
if ( 'post' === match[ 1 ] ) {
|
||||
info.post_id = match[ 3 ];
|
||||
} else if ( 'comment' === match[ 1 ] ) {
|
||||
info.comment_id = match[ 3 ];
|
||||
}
|
||||
|
||||
info.obj_id = match[ 4 ];
|
||||
|
||||
requests.push( info );
|
||||
} );
|
||||
|
||||
if ( requests.length > 0 ) {
|
||||
JetpackLikesPostMessage(
|
||||
{ event: 'initialBatch', requests: requests },
|
||||
window.frames[ 'likes-master' ]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function JetpackLikesMessageListener( event ) {
|
||||
let message = event && event.data;
|
||||
if ( typeof message === 'string' ) {
|
||||
try {
|
||||
message = JSON.parse( message );
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const type = message && message.type;
|
||||
const data = message && message.data;
|
||||
|
||||
if ( type !== 'likesMessage' || typeof data.event === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We only allow messages from one origin
|
||||
const allowedOrigin = 'https://widgets.wp.com';
|
||||
if ( allowedOrigin !== event.origin ) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch ( data.event ) {
|
||||
case 'masterReady':
|
||||
jetpackLikesDocReadyPromise.then( () => {
|
||||
jetpackLikesMasterReady = true;
|
||||
|
||||
const stylesData = {
|
||||
event: 'injectStyles',
|
||||
};
|
||||
const sdTextColor = document.querySelector( '.sd-text-color' );
|
||||
const sdLinkColor = document.querySelector( '.sd-link-color' );
|
||||
const sdTextColorStyles = ( sdTextColor && getComputedStyle( sdTextColor ) ) || {};
|
||||
const sdLinkColorStyles = ( sdLinkColor && getComputedStyle( sdLinkColor ) ) || {};
|
||||
|
||||
// enable reblogs if we're on a single post page
|
||||
if ( document.body.classList.contains( 'single' ) ) {
|
||||
JetpackLikesPostMessage( { event: 'reblogsEnabled' }, window.frames[ 'likes-master' ] );
|
||||
}
|
||||
|
||||
stylesData.textStyles = {
|
||||
color: sdTextColorStyles.color,
|
||||
fontFamily: sdTextColorStyles[ 'font-family' ],
|
||||
fontSize: sdTextColorStyles[ 'font-size' ],
|
||||
direction: sdTextColorStyles.direction,
|
||||
fontWeight: sdTextColorStyles[ 'font-weight' ],
|
||||
fontStyle: sdTextColorStyles[ 'font-style' ],
|
||||
textDecoration: sdTextColorStyles[ 'text-decoration' ],
|
||||
};
|
||||
|
||||
stylesData.linkStyles = {
|
||||
color: sdLinkColorStyles.color,
|
||||
fontFamily: sdLinkColorStyles[ 'font-family' ],
|
||||
fontSize: sdLinkColorStyles[ 'font-size' ],
|
||||
textDecoration: sdLinkColorStyles[ 'text-decoration' ],
|
||||
fontWeight: sdLinkColorStyles[ 'font-weight' ],
|
||||
fontStyle: sdLinkColorStyles[ 'font-style' ],
|
||||
};
|
||||
|
||||
JetpackLikesPostMessage( stylesData, window.frames[ 'likes-master' ] );
|
||||
|
||||
JetpackLikesBatchHandler();
|
||||
} );
|
||||
|
||||
break;
|
||||
|
||||
case 'showLikeWidget': {
|
||||
const placeholder = document.querySelector( `#${ data.id } .likes-widget-placeholder` );
|
||||
if ( placeholder ) {
|
||||
placeholder.style.display = 'none';
|
||||
}
|
||||
|
||||
// Add a `liked` class to the wrapper if the post already has likes.
|
||||
if ( data.total > 0 ) {
|
||||
document.querySelector( `#${ data.id }` ).classList.add( 'liked' );
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'showCommentLikeWidget': {
|
||||
const placeholder = document.querySelector( `#${ data.id } .likes-widget-placeholder` );
|
||||
if ( placeholder ) {
|
||||
placeholder.style.display = 'none';
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'killCommentLikes':
|
||||
// If kill switch for comment likes is enabled remove all widgets wrappers and `Loading...` placeholders.
|
||||
document
|
||||
.querySelectorAll( '.jetpack-comment-likes-widget-wrapper' )
|
||||
.forEach( wrapper => wrapper.remove() );
|
||||
break;
|
||||
|
||||
case 'clickReblogFlair':
|
||||
if ( wpcom_reblog && typeof wpcom_reblog.toggle_reblog_box_flair === 'function' ) {
|
||||
wpcom_reblog.toggle_reblog_box_flair( data.obj_id );
|
||||
}
|
||||
break;
|
||||
|
||||
case 'hideOtherGravatars': {
|
||||
hideLikersPopover();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'clickPostLike':
|
||||
// Add or remove the wrapper `liked` class based on the total likes.
|
||||
if ( data.total > 0 ) {
|
||||
document.querySelector( `#${ data.id }` ).classList.add( 'liked' );
|
||||
} else {
|
||||
document.querySelector( `#${ data.id }` ).classList.remove( 'liked' );
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'showOtherGravatars': {
|
||||
const container = document.querySelector( '#likes-other-gravatars' );
|
||||
|
||||
if ( ! container ) {
|
||||
break;
|
||||
}
|
||||
|
||||
const newLayout = container.classList.contains( 'wpl-new-layout' );
|
||||
|
||||
const list = container.querySelector( 'ul' );
|
||||
|
||||
container.style.display = 'none';
|
||||
list.innerHTML = '';
|
||||
|
||||
if ( newLayout ) {
|
||||
container
|
||||
.querySelectorAll( '.likes-text span' )
|
||||
.forEach( item => ( item.textContent = data.totalLikesLabel ) );
|
||||
} else {
|
||||
container
|
||||
.querySelectorAll( '.likes-text span' )
|
||||
.forEach( item => ( item.textContent = data.total ) );
|
||||
}
|
||||
|
||||
( data.likers || [] ).forEach( async ( liker, index ) => {
|
||||
if ( liker.profile_URL.substr( 0, 4 ) !== 'http' ) {
|
||||
// We only display gravatars with http or https schema
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.createElement( 'li' );
|
||||
list.append( element );
|
||||
|
||||
if ( newLayout ) {
|
||||
element.innerHTML = `
|
||||
<a href="${ encodeURI( liker.profile_URL ) }" rel="nofollow" target="_parent" class="wpl-liker">
|
||||
<img src="${ encodeURI( liker.avatar_URL ) }"
|
||||
alt=""
|
||||
style="width: 28px; height: 28px;" />
|
||||
<span></span>
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
element.innerHTML = `
|
||||
<a href="${ encodeURI( liker.profile_URL ) }" rel="nofollow" target="_parent" class="wpl-liker">
|
||||
<img src="${ encodeURI( liker.avatar_URL ) }"
|
||||
alt=""
|
||||
style="width: 30px; height: 30px; padding-right: 3px;" />
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add some extra attributes through native methods, to ensure strings are sanitized.
|
||||
element.classList.add( liker.css_class );
|
||||
element.querySelector( 'img' ).alt = data.avatarAltTitle.replace( '%s', liker.name );
|
||||
|
||||
if ( newLayout ) {
|
||||
element.querySelector( 'span' ).innerText = liker.name;
|
||||
}
|
||||
|
||||
if ( index === data.likers.length - 1 ) {
|
||||
element.addEventListener( 'keydown', e => {
|
||||
if ( e.key === 'Tab' && ! e.shiftKey ) {
|
||||
e.preventDefault();
|
||||
hideLikersPopover();
|
||||
|
||||
JetpackLikesPostMessage(
|
||||
{ event: 'focusLikesCount', parent: data.parent },
|
||||
window.frames[ 'likes-master' ]
|
||||
);
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
const positionPopup = function () {
|
||||
const containerStyle = getComputedStyle( container );
|
||||
const isRtl = containerStyle.direction === 'rtl';
|
||||
|
||||
const el = document.querySelector( `*[name='${ data.parent }']` );
|
||||
const rect = el.getBoundingClientRect();
|
||||
const win = el.ownerDocument.defaultView;
|
||||
const offset = {
|
||||
top: rect.top + win.pageYOffset,
|
||||
left: rect.left + win.pageXOffset,
|
||||
};
|
||||
|
||||
let containerLeft = 0;
|
||||
if ( newLayout ) {
|
||||
container.style.top = offset.top + data.position.top - 1 + 'px';
|
||||
|
||||
if ( isRtl ) {
|
||||
const visibleAvatarsCount = data && data.likers ? Math.min( data.likers.length, 5 ) : 0;
|
||||
// 24px is the width of the avatar + 4px is the padding between avatars
|
||||
containerLeft = offset.left + data.position.left + 24 * visibleAvatarsCount + 4;
|
||||
container.style.transform = 'translateX(-100%)';
|
||||
} else {
|
||||
containerLeft = offset.left + data.position.left;
|
||||
}
|
||||
container.style.left = containerLeft + 'px';
|
||||
} else {
|
||||
container.style.left = offset.left + data.position.left - 10 + 'px';
|
||||
container.style.top = offset.top + data.position.top - 33 + 'px';
|
||||
}
|
||||
|
||||
// Container width - padding
|
||||
const initContainerWidth = data.width - 20;
|
||||
const rowLength = Math.floor( initContainerWidth / 37 );
|
||||
// # of rows + (avatar + avatar padding) + text above + container padding
|
||||
let height = Math.ceil( data.likers.length / rowLength ) * 37 + 17 + 22;
|
||||
if ( height > 204 ) {
|
||||
height = 204;
|
||||
}
|
||||
|
||||
if ( ! newLayout ) {
|
||||
// Avatars + padding
|
||||
const containerWidth = rowLength * 37 + 13;
|
||||
container.style.height = height + 'px';
|
||||
container.style.width = containerWidth + 'px';
|
||||
|
||||
const listWidth = rowLength * 37;
|
||||
list.style.width = listWidth + 'px';
|
||||
}
|
||||
|
||||
// If the popup is overflows viewport width, we should show it on the next line
|
||||
if ( newLayout ) {
|
||||
// Push it offscreen to calculated rendered width
|
||||
container.style.left = '-9999px';
|
||||
container.style.display = 'block';
|
||||
|
||||
// If the popup exceeds the viewport width,
|
||||
// flip the position of the popup.
|
||||
const containerWidth = container.offsetWidth;
|
||||
const containerRight = containerLeft + containerWidth;
|
||||
if ( containerRight > win.innerWidth ) {
|
||||
containerLeft = rect.right - containerWidth;
|
||||
}
|
||||
|
||||
// Set the container left
|
||||
container.style.left = containerLeft + 'px';
|
||||
} else {
|
||||
container.style.display = 'block';
|
||||
}
|
||||
container.setAttribute( 'aria-hidden', 'false' );
|
||||
};
|
||||
|
||||
positionPopup();
|
||||
container.focus();
|
||||
|
||||
const debounce = function ( func, wait ) {
|
||||
var timeout;
|
||||
return function () {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
clearTimeout( timeout );
|
||||
timeout = setTimeout( function () {
|
||||
func.apply( context, args );
|
||||
}, wait );
|
||||
};
|
||||
};
|
||||
|
||||
const debouncedPositionPopup = debounce( positionPopup, 100 );
|
||||
|
||||
// Keep a reference of this function in the element itself
|
||||
// so that we can destroy it later
|
||||
container.__resizeHandler = debouncedPositionPopup;
|
||||
|
||||
// When window is resized, resize the popup.
|
||||
window.addEventListener( 'resize', debouncedPositionPopup );
|
||||
|
||||
container.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener( 'message', JetpackLikesMessageListener );
|
||||
|
||||
function hideLikersPopover() {
|
||||
const container = document.querySelector( '#likes-other-gravatars' );
|
||||
|
||||
if ( container ) {
|
||||
container.style.display = 'none';
|
||||
container.setAttribute( 'aria-hidden', 'true' );
|
||||
|
||||
// Remove the resize event listener and cleanup.
|
||||
const resizeHandler = container.__resizeHandler;
|
||||
if ( resizeHandler ) {
|
||||
window.removeEventListener( 'resize', resizeHandler );
|
||||
delete container.__resizeHandler;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener( 'click', hideLikersPopover );
|
||||
|
||||
function JetpackLikesWidgetQueueHandler() {
|
||||
var wrapperID;
|
||||
|
||||
if ( ! jetpackLikesMasterReady ) {
|
||||
setTimeout( JetpackLikesWidgetQueueHandler, 500 );
|
||||
return;
|
||||
}
|
||||
|
||||
// Restore widgets to initial unloaded state when they are scrolled out of view.
|
||||
jetpackUnloadScrolledOutWidgets();
|
||||
|
||||
var unloadedWidgetsInView = jetpackGetUnloadedWidgetsInView();
|
||||
|
||||
if ( unloadedWidgetsInView.length > 0 ) {
|
||||
// Grab any unloaded widgets for a batch request
|
||||
JetpackLikesBatchHandler();
|
||||
}
|
||||
|
||||
for ( var i = 0, length = unloadedWidgetsInView.length; i <= length - 1; i++ ) {
|
||||
wrapperID = unloadedWidgetsInView[ i ].id;
|
||||
|
||||
if ( ! wrapperID ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
jetpackLoadLikeWidgetIframe( wrapperID );
|
||||
}
|
||||
}
|
||||
|
||||
function jetpackLoadLikeWidgetIframe( wrapperID ) {
|
||||
if ( typeof wrapperID === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapper = document.querySelector( '#' + wrapperID );
|
||||
wrapper.querySelectorAll( 'iframe' ).forEach( iFrame => iFrame.remove() );
|
||||
|
||||
const placeholder = wrapper.querySelector( '.likes-widget-placeholder' );
|
||||
|
||||
// Post like iframe
|
||||
if ( placeholder && placeholder.classList.contains( 'post-likes-widget-placeholder' ) ) {
|
||||
const postLikesFrame = document.createElement( 'iframe' );
|
||||
|
||||
postLikesFrame.classList.add( 'post-likes-widget', 'jetpack-likes-widget' );
|
||||
postLikesFrame.name = wrapper.dataset.name;
|
||||
postLikesFrame.src = wrapper.dataset.src;
|
||||
postLikesFrame.height = '55px';
|
||||
postLikesFrame.width = '100%';
|
||||
postLikesFrame.frameBorder = '0';
|
||||
postLikesFrame.scrolling = 'no';
|
||||
postLikesFrame.title = wrapper.dataset.title;
|
||||
|
||||
placeholder.after( postLikesFrame );
|
||||
}
|
||||
|
||||
// Comment like iframe
|
||||
if ( placeholder.classList.contains( 'comment-likes-widget-placeholder' ) ) {
|
||||
const commentLikesFrame = document.createElement( 'iframe' );
|
||||
|
||||
commentLikesFrame.class = 'comment-likes-widget-frame jetpack-likes-widget-frame';
|
||||
commentLikesFrame.name = wrapper.dataset.name;
|
||||
commentLikesFrame.src = wrapper.dataset.src;
|
||||
commentLikesFrame.height = '18px';
|
||||
commentLikesFrame.width = '100%';
|
||||
commentLikesFrame.frameBorder = '0';
|
||||
commentLikesFrame.scrolling = 'no';
|
||||
|
||||
wrapper.querySelector( '.comment-like-feedback' ).after( commentLikesFrame );
|
||||
|
||||
jetpackCommentLikesLoadedWidgets.push( commentLikesFrame );
|
||||
}
|
||||
|
||||
wrapper.classList.remove( 'jetpack-likes-widget-unloaded' );
|
||||
wrapper.classList.add( 'jetpack-likes-widget-loading' );
|
||||
|
||||
wrapper.querySelector( 'iframe' ).addEventListener( 'load', e => {
|
||||
JetpackLikesPostMessage(
|
||||
{ event: 'loadLikeWidget', name: e.target.name, width: e.target.width },
|
||||
window.frames[ 'likes-master' ]
|
||||
);
|
||||
|
||||
wrapper.classList.remove( 'jetpack-likes-widget-loading' );
|
||||
wrapper.classList.add( 'jetpack-likes-widget-loaded' );
|
||||
} );
|
||||
}
|
||||
|
||||
function jetpackGetUnloadedWidgetsInView() {
|
||||
const unloadedWidgets = document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' );
|
||||
|
||||
return [ ...unloadedWidgets ].filter( item => jetpackIsScrolledIntoView( item ) );
|
||||
}
|
||||
|
||||
function jetpackIsScrolledIntoView( element ) {
|
||||
const top = element.getBoundingClientRect().top;
|
||||
const bottom = element.getBoundingClientRect().bottom;
|
||||
|
||||
// Allow some slack above and bellow the fold with jetpackLikesLookAhead,
|
||||
// with the aim of hiding the transition from unloaded to loaded widget from users.
|
||||
return top + jetpackLikesLookAhead >= 0 && bottom <= window.innerHeight + jetpackLikesLookAhead;
|
||||
}
|
||||
|
||||
function jetpackUnloadScrolledOutWidgets() {
|
||||
for ( let i = jetpackCommentLikesLoadedWidgets.length - 1; i >= 0; i-- ) {
|
||||
const currentWidgetIframe = jetpackCommentLikesLoadedWidgets[ i ];
|
||||
|
||||
if ( ! jetpackIsScrolledIntoView( currentWidgetIframe ) ) {
|
||||
const widgetWrapper =
|
||||
currentWidgetIframe &&
|
||||
currentWidgetIframe.parentElement &&
|
||||
currentWidgetIframe.parentElement.parentElement;
|
||||
|
||||
// Restore parent class to 'unloaded' so this widget can be picked up by queue manager again if needed.
|
||||
widgetWrapper.classList.remove( 'jetpack-likes-widget-loaded' );
|
||||
widgetWrapper.classList.remove( 'jetpack-likes-widget-loading' );
|
||||
widgetWrapper.classList.add( 'jetpack-likes-widget-unloaded' );
|
||||
|
||||
// Bring back the loading placeholder into view.
|
||||
widgetWrapper
|
||||
.querySelectorAll( '.comment-likes-widget-placeholder' )
|
||||
.forEach( item => ( item.style.display = 'block' ) );
|
||||
|
||||
// Remove it from the list of loaded widgets.
|
||||
jetpackCommentLikesLoadedWidgets.splice( i, 1 );
|
||||
|
||||
// Remove comment like widget iFrame.
|
||||
currentWidgetIframe.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var jetpackWidgetsDelayedExec = function ( after, fn ) {
|
||||
var timer;
|
||||
return function () {
|
||||
clearTimeout( timer );
|
||||
timer = setTimeout( fn, after );
|
||||
};
|
||||
};
|
||||
|
||||
var jetpackOnScrollStopped = jetpackWidgetsDelayedExec( 250, JetpackLikesWidgetQueueHandler );
|
||||
|
||||
// Load initial batch of widgets, prior to any scrolling events.
|
||||
JetpackLikesWidgetQueueHandler();
|
||||
|
||||
// Add event listener to execute queue handler after scroll.
|
||||
window.addEventListener( 'scroll', jetpackOnScrollStopped, true );
|
||||
Reference in New Issue
Block a user