diff options
Diffstat (limited to 'plugins/jetpack/modules/likes/queuehandler.js')
| -rw-r--r-- | plugins/jetpack/modules/likes/queuehandler.js | 363 |
1 files changed, 195 insertions, 168 deletions
diff --git a/plugins/jetpack/modules/likes/queuehandler.js b/plugins/jetpack/modules/likes/queuehandler.js index df6970f2..8d2c0e3f 100644 --- a/plugins/jetpack/modules/likes/queuehandler.js +++ b/plugins/jetpack/modules/likes/queuehandler.js @@ -1,4 +1,4 @@ -/* global pm, wpcom_reblog, JSON */ +/* global wpcom_reblog */ var jetpackLikesWidgetBatch = []; var jetpackLikesMasterReady = false; @@ -12,8 +12,16 @@ 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 ( 'string' === typeof message ) { + if ( typeof message === 'string' ) { try { message = JSON.parse( message ); } catch ( e ) { @@ -21,29 +29,36 @@ function JetpackLikesPostMessage( message, target ) { } } - pm( { - target: target, - type: 'likesMessage', - data: message, - origin: '*', - } ); + if ( target && typeof target.postMessage === 'function' ) { + try { + target.postMessage( + JSON.stringify( { + type: 'likesMessage', + data: message, + } ), + '*' + ); + } catch ( e ) { + return; + } + } } function JetpackLikesBatchHandler() { - var requests = []; - jQuery( 'div.jetpack-likes-widget-unloaded' ).each( function() { - if ( jetpackLikesWidgetBatch.indexOf( this.id ) > -1 ) { + const requests = []; + document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' ).forEach( widget => { + if ( jetpackLikesWidgetBatch.indexOf( widget.id ) > -1 ) { return; } - if ( ! jetpackIsScrolledIntoView( this ) ) { + if ( ! jetpackIsScrolledIntoView( widget ) ) { return; } - jetpackLikesWidgetBatch.push( this.id ); + jetpackLikesWidgetBatch.push( widget.id ); var regex = /like-(post|comment)-wrapper-(\d+)-(\d+)-(\w+)/, - match = regex.exec( this.id ), + match = regex.exec( widget.id ), info; if ( ! match || match.length !== 5 ) { @@ -52,7 +67,7 @@ function JetpackLikesBatchHandler() { info = { blog_id: match[ 2 ], - width: this.width, + width: widget.width, }; if ( 'post' === match[ 1 ] ) { @@ -74,62 +89,79 @@ function JetpackLikesBatchHandler() { } } -function JetpackLikesMessageListener( event, message ) { - var allowedOrigin, $container, $list, offset, rowLength, height, scrollbarWidth; +function JetpackLikesMessageListener( event ) { + let message = event && event.data; + if ( typeof message === 'string' ) { + try { + message = JSON.parse( message ); + } catch ( err ) { + return; + } + } + + const type = message && message.type; + const data = message && message.data; - if ( 'undefined' === typeof event.event ) { + if ( type !== 'likesMessage' || typeof data.event === 'undefined' ) { return; } // We only allow messages from one origin - allowedOrigin = 'https://widgets.wp.com'; - if ( allowedOrigin !== message.origin ) { + const allowedOrigin = 'https://widgets.wp.com'; + if ( allowedOrigin !== event.origin ) { return; } - switch ( event.event ) { + switch ( data.event ) { case 'masterReady': - jQuery( document ).ready( function() { + jetpackLikesDocReadyPromise.then( () => { jetpackLikesMasterReady = true; - var stylesData = { - event: 'injectStyles', - }, - $sdTextColor = jQuery( '.sd-text-color' ), - $sdLinkColor = jQuery( '.sd-link-color' ); + 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 ) ) || {}; - if ( jQuery( 'iframe.admin-bar-likes-widget' ).length > 0 ) { + if ( document.querySelectorAll( 'iframe.admin-bar-likes-widget' ).length > 0 ) { JetpackLikesPostMessage( { event: 'adminBarEnabled' }, window.frames[ 'likes-master' ] ); + const bgSource = document.querySelector( + '#wpadminbar .quicklinks li#wp-admin-bar-wpl-like > a' + ); + + const wpAdminBar = document.querySelector( '#wpadminbar' ); + stylesData.adminBarStyles = { - background: jQuery( '#wpadminbar .quicklinks li#wp-admin-bar-wpl-like > a' ).css( - 'background' - ), - isRtl: 'rtl' === jQuery( '#wpadminbar' ).css( 'direction' ), + background: bgSource && getComputedStyle( bgSource ).background, + isRtl: wpAdminBar && getComputedStyle( wpAdminBar ).direction === 'rtl', }; } - if ( ! window.addEventListener ) { - jQuery( '#wp-admin-bar-admin-bar-likes-widget' ).hide(); + // 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: $sdTextColor.css( 'color' ), - fontFamily: $sdTextColor.css( 'font-family' ), - fontSize: $sdTextColor.css( 'font-size' ), - direction: $sdTextColor.css( 'direction' ), - fontWeight: $sdTextColor.css( 'font-weight' ), - fontStyle: $sdTextColor.css( 'font-style' ), - textDecoration: $sdTextColor.css( 'text-decoration' ), + 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: $sdLinkColor.css( 'color' ), - fontFamily: $sdLinkColor.css( 'font-family' ), - fontSize: $sdLinkColor.css( 'font-size' ), - textDecoration: $sdLinkColor.css( 'text-decoration' ), - fontWeight: $sdLinkColor.css( 'font-weight' ), - fontStyle: $sdLinkColor.css( 'font-style' ), + 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' ] ); @@ -139,102 +171,114 @@ function JetpackLikesMessageListener( event, message ) { break; - case 'showLikeWidget': - jQuery( '#' + event.id + ' .likes-widget-placeholder' ).fadeOut( 'fast' ); + case 'showLikeWidget': { + const placeholder = document.querySelector( `#${ data.id } .likes-widget-placeholder` ); + if ( placeholder ) { + placeholder.style.display = 'none'; + } break; + } - case 'showCommentLikeWidget': - jQuery( '#' + event.id + ' .likes-widget-placeholder' ).fadeOut( 'fast' ); + 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. - jQuery( '.jetpack-comment-likes-widget-wrapper' ).remove(); + document + .querySelectorAll( '.jetpack-comment-likes-widget-wrapper' ) + .forEach( wrapper => wrapper.remove() ); break; case 'clickReblogFlair': - wpcom_reblog.toggle_reblog_box_flair( event.obj_id ); + if ( wpcom_reblog && typeof wpcom_reblog.toggle_reblog_box_flair === 'function' ) { + wpcom_reblog.toggle_reblog_box_flair( data.obj_id ); + } break; - case 'showOtherGravatars': - $container = jQuery( '#likes-other-gravatars' ); - $list = $container.find( 'ul' ); + case 'showOtherGravatars': { + const container = document.querySelector( '#likes-other-gravatars' ); + if ( ! container ) { + break; + } - $container.hide(); - $list.html( '' ); + const list = container.querySelector( 'ul' ); - $container.find( '.likes-text span' ).text( event.total ); + container.style.display = 'none'; + list.innerHTML = ''; - jQuery.each( event.likers, function( i, liker ) { - var element; + container + .querySelectorAll( '.likes-text span' ) + .forEach( item => ( item.textContent = data.total ) ); - if ( 'http' !== liker.profile_URL.substr( 0, 4 ) ) { + ( data.likers || [] ).forEach( liker => { + if ( liker.profile_URL.substr( 0, 4 ) !== 'http' ) { // We only display gravatars with http or https schema return; } - element = jQuery( '<li><a><img /></a></li>' ); - element.addClass( liker.css_class ); - - element - .find( 'a' ) - .attr( { - href: liker.profile_URL, - rel: 'nofollow', - target: '_parent', - } ) - .addClass( 'wpl-liker' ); - - element - .find( 'img' ) - .attr( { - src: liker.avatar_URL, - alt: liker.name, - } ) - .css( { - width: '30px', - height: '30px', - paddingRight: '3px', - } ); - - $list.append( element ); + const element = document.createElement( 'li' ); + 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> + `; + + list.append( element ); + + // Add some extra attributes through native methods, to ensure strings are sanitized. + element.classList.add( liker.css_class ); + element.querySelector( 'img' ).alt = liker.name; } ); - offset = jQuery( 'body' ) - .find( "[name='" + event.parent + "']" ) - .offset(); + 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, + }; - $container.css( 'left', offset.left + event.position.left - 10 + 'px' ); - $container.css( 'top', offset.top + event.position.top - 33 + 'px' ); + container.style.left = offset.left + data.position.left - 10 + 'px'; + container.style.top = offset.top + data.position.top - 33 + 'px'; - rowLength = Math.floor( event.width / 37 ); - height = Math.ceil( event.likers.length / rowLength ) * 37 + 13; + const rowLength = Math.floor( data.width / 37 ); + let height = Math.ceil( data.likers.length / rowLength ) * 37 + 13; if ( height > 204 ) { height = 204; } - $container.css( 'height', height + 'px' ); - $container.css( 'width', rowLength * 37 - 7 + 'px' ); + const containerWidth = rowLength * 37 - 7; + container.style.height = height + 'px'; + container.style.width = containerWidth + 'px'; - $list.css( 'width', rowLength * 37 + 'px' ); + const listWidth = rowLength * 37; + list.style.width = listWidth + 'px'; - $container.fadeIn( 'slow' ); + container.style.display = 'block'; - scrollbarWidth = $list[ 0 ].offsetWidth - $list[ 0 ].clientWidth; + const scrollbarWidth = list.offsetWidth - list.clientWidth; if ( scrollbarWidth > 0 ) { - $container.width( $container.width() + scrollbarWidth ); - $list.width( $list.width() + scrollbarWidth ); + container.style.width = containerWidth + scrollbarWidth + 'px'; + list.style.width = listWidth + scrollbarWidth + 'px'; } + } } } -pm.bind( 'likesMessage', JetpackLikesMessageListener ); +window.addEventListener( 'message', JetpackLikesMessageListener ); -jQuery( document ).click( function( e ) { - var $container = jQuery( '#likes-other-gravatars' ); +document.addEventListener( 'click', e => { + const container = document.querySelector( '#likes-other-gravatars' ); - if ( $container.has( e.target ).length === 0 ) { - $container.fadeOut( 'slow' ); + if ( container && ! container.contains( e.target ) ) { + container.style.display = 'none'; } } ); @@ -268,91 +312,71 @@ function JetpackLikesWidgetQueueHandler() { } function jetpackLoadLikeWidgetIframe( wrapperID ) { - var $wrapper; - - if ( 'undefined' === typeof wrapperID ) { + if ( typeof wrapperID === 'undefined' ) { return; } - $wrapper = jQuery( '#' + wrapperID ); - $wrapper.find( 'iframe' ).remove(); + const wrapper = document.querySelector( '#' + wrapperID ); + wrapper.querySelectorAll( 'iframe' ).forEach( iFrame => iFrame.remove() ); - var placeholder = $wrapper.find( '.likes-widget-placeholder' ); + const placeholder = wrapper.querySelector( '.likes-widget-placeholder' ); // Post like iframe - if ( placeholder.hasClass( 'post-likes-widget-placeholder' ) ) { - var postLikesFrame = document.createElement( 'iframe' ); - - postLikesFrame[ 'class' ] = 'post-likes-widget jetpack-likes-widget'; - postLikesFrame.name = $wrapper.data( 'name' ); - postLikesFrame.src = $wrapper.data( 'src' ); - postLikesFrame.height = '18px'; - postLikesFrame.width = '200px'; + 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'; - - if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { - postLikesFrame.height = '22px'; - postLikesFrame.width = '68px'; - postLikesFrame.scrolling = 'no'; - } else { - postLikesFrame.height = '55px'; - postLikesFrame.width = '100%'; - } + postLikesFrame.title = wrapper.dataset.title; placeholder.after( postLikesFrame ); } // Comment like iframe - if ( placeholder.hasClass( 'comment-likes-widget-placeholder' ) ) { - var commentLikesFrame = document.createElement( '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.data( 'name' ); - commentLikesFrame.src = $wrapper.data( 'src' ); + 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.find( '.comment-like-feedback' ).after( commentLikesFrame ); + wrapper.querySelector( '.comment-like-feedback' ).after( commentLikesFrame ); jetpackCommentLikesLoadedWidgets.push( commentLikesFrame ); } - $wrapper - .removeClass( 'jetpack-likes-widget-unloaded' ) - .addClass( 'jetpack-likes-widget-loading' ); - - $wrapper.find( 'iframe' ).load( function( e ) { - var $iframe = jQuery( e.target ); + wrapper.classList.remove( 'jetpack-likes-widget-unloaded' ); + wrapper.classList.add( 'jetpack-likes-widget-loading' ); + wrapper.querySelector( 'iframe' ).addEventListener( 'load', e => { JetpackLikesPostMessage( - { event: 'loadLikeWidget', name: $iframe.attr( 'name' ), width: $iframe.width() }, + { event: 'loadLikeWidget', name: e.target.name, width: e.target.width }, window.frames[ 'likes-master' ] ); - $wrapper - .removeClass( 'jetpack-likes-widget-loading' ) - .addClass( 'jetpack-likes-widget-loaded' ); - - if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { - $wrapper.find( 'iframe' ).Jetpack( 'resizeable' ); - } + wrapper.classList.remove( 'jetpack-likes-widget-loading' ); + wrapper.classList.add( 'jetpack-likes-widget-loaded' ); } ); } function jetpackGetUnloadedWidgetsInView() { - var $unloadedWidgets = jQuery( 'div.jetpack-likes-widget-unloaded' ); + const unloadedWidgets = document.querySelectorAll( 'div.jetpack-likes-widget-unloaded' ); - return $unloadedWidgets.filter( function() { - return jetpackIsScrolledIntoView( this ); - } ); + return [ ...unloadedWidgets ].filter( item => jetpackIsScrolledIntoView( item ) ); } function jetpackIsScrolledIntoView( element ) { - var top = element.getBoundingClientRect().top; - var bottom = element.getBoundingClientRect().bottom; + 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. @@ -360,35 +384,38 @@ function jetpackIsScrolledIntoView( element ) { } function jetpackUnloadScrolledOutWidgets() { - for ( var i = jetpackCommentLikesLoadedWidgets.length - 1; i >= 0; i-- ) { - var currentWidgetIframe = jetpackCommentLikesLoadedWidgets[ i ]; + for ( let i = jetpackCommentLikesLoadedWidgets.length - 1; i >= 0; i-- ) { + const currentWidgetIframe = jetpackCommentLikesLoadedWidgets[ i ]; if ( ! jetpackIsScrolledIntoView( currentWidgetIframe ) ) { - var $widgetWrapper = jQuery( currentWidgetIframe ) - .parent() - .parent(); + 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 - .removeClass( 'jetpack-likes-widget-loaded jetpack-likes-widget-loading' ) - .addClass( 'jetpack-likes-widget-unloaded' ); + 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.children( '.comment-likes-widget-placeholder' ).fadeIn(); + 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. - jQuery( currentWidgetIframe ).remove(); + currentWidgetIframe.remove(); } } } -var jetpackWidgetsDelayedExec = function( after, fn ) { +var jetpackWidgetsDelayedExec = function ( after, fn ) { var timer; - return function() { - timer && clearTimeout( timer ); + return function () { + clearTimeout( timer ); timer = setTimeout( fn, after ); }; }; |