diff options
Diffstat (limited to 'plugins/jetpack/modules/likes')
| -rw-r--r-- | plugins/jetpack/modules/likes/jetpack-likes-settings.php | 93 | ||||
| -rw-r--r-- | plugins/jetpack/modules/likes/post-count-jetpack.js | 14 | ||||
| -rw-r--r-- | plugins/jetpack/modules/likes/post-count.js | 36 | ||||
| -rw-r--r-- | plugins/jetpack/modules/likes/queuehandler.js | 363 | ||||
| -rw-r--r-- | plugins/jetpack/modules/likes/style.css | 44 |
5 files changed, 302 insertions, 248 deletions
diff --git a/plugins/jetpack/modules/likes/jetpack-likes-settings.php b/plugins/jetpack/modules/likes/jetpack-likes-settings.php index a172603b..0e373f58 100644 --- a/plugins/jetpack/modules/likes/jetpack-likes-settings.php +++ b/plugins/jetpack/modules/likes/jetpack-likes-settings.php @@ -246,25 +246,59 @@ class Jetpack_Likes_Settings { $sitewide_likes_enabled = (bool) $this->is_enabled_sitewide(); $post_likes_switched = get_post_meta( $post->ID, 'switch_like_status', true ); - // on WPCOM, we need to look at post edit date so we don't break old posts - // if post edit date predates this code, stick with the former (buggy) behavior - // see: p7DVsv-64H-p2 + /* + * On WPCOM, headstart was inserting bad data for post_likes_switched. + * it was wrapping the boolean value in an array. The array is always truthy regardless of its contents. + * There was another bug where truthy values were ignored if the global like setting was false. + * So in effect, the values for headstart never had an inpact. + * Delete the $post_likes_switched flag in this case in order to keep the behaviour as it was. + */ + if ( is_array( $post_likes_switched ) ) { + $post_likes_switched = null; + } + + /* + * on WPCOM, we need to look at post edit date so we don't break old posts + * if post edit date predates this code, stick with the former (buggy) behavior + * see: p7DVsv-64H-p2 + */ $last_modified_time = strtotime( $post->post_modified_gmt ); $behavior_was_changed_at = strtotime( "2019-02-22 00:40:42" ); if ( $this->in_jetpack || $last_modified_time > $behavior_was_changed_at ) { - // the new and improved behavior on Jetpack and recent WPCOM posts: - // $post_likes_switched is empty to follow site setting, - // 0 if we want likes disabled, 1 if we want likes enabled + /* + * the new and improved behavior on Jetpack and recent WPCOM posts: + * $post_likes_switched is empty to follow site setting, + * 0 if we want likes disabled, 1 if we want likes enabled. + */ return $post_likes_switched || ( $sitewide_likes_enabled && $post_likes_switched !== '0' ); } - // implicit else (old behavior): $post_likes_switched simply inverts the global setting + // implicit else (old behavior): $post_likes_switched simply inverts the global setting. return ( (bool) $post_likes_switched ) xor $sitewide_likes_enabled; } /** + * Is the like button itself visible (as opposed to the reblog button) + * + * If called from within The Loop or if called with a $post_id set, then the post will be checked. + * Otherwise the sitewide setting will be used. + * + * @param int $post_id The ID of the post being rendered. Defaults to the current post if called from within The Loop. + * @return bool + */ + public function is_likes_button_visible( $post_id = 0 ) { + if ( in_the_loop() || $post_id ) { + // If in The Loop, is_post_likeable will check the current post. + return $this->is_post_likeable( $post_id ); + } else { + // Otherwise, check and see if likes are enabled sitewide. + return $this->is_enabled_sitewide(); + } + } + + /** * Are likes visible in this context? * * Some of this code was taken and modified from sharing_display() to ensure @@ -275,53 +309,52 @@ class Jetpack_Likes_Settings { return false; } - global $wp_current_filter; // Used to apply 'sharing_show' filter + return $this->is_likes_button_visible() && $this->is_likes_module_enabled(); + } - $post = get_post(); + /** + * Apply filters to determine if the likes module itself is enabled + * + * @return bool + */ + public function is_likes_module_enabled() { + global $wp_current_filter; // Used to apply 'sharing_show' filter. + + $post = get_post(); + $enabled = true; - // Never show on feeds or previews + // Never show on feeds or previews. if ( is_feed() || is_preview() ) { $enabled = false; - // Not a feed or preview, so what is it? } else { - - if ( in_the_loop() ) { - // If in the loop, check if the current post is likeable - $enabled = $this->is_post_likeable(); - } else { - // Otherwise, check and see if likes are enabled sitewide - $enabled = $this->is_enabled_sitewide(); - } - - if ( post_password_required() ) + if ( post_password_required() ) { $enabled = false; + } if ( in_array( 'get_the_excerpt', (array) $wp_current_filter ) ) { $enabled = false; } - // Sharing Setting Overrides **************************************** - - // Single post including custom post types + // Single post including custom post types. if ( is_single() ) { - if ( ! $this->is_single_post_enabled( $post->post_type ) ) { + if ( ! $this->is_single_post_enabled( ( $post instanceof WP_Post ) ? $post->post_type : 'post' ) ) { $enabled = false; } - // Single page + // Single page. } elseif ( is_page() && ! is_front_page() ) { if ( ! $this->is_single_page_enabled() ) { $enabled = false; } - // Attachment + // Attachment. } elseif ( is_attachment() ) { if ( ! $this->is_attachment_enabled() ) { $enabled = false; } - // All other loops + // All other loops. } elseif ( ! $this->is_index_enabled() ) { $enabled = false; } @@ -339,7 +372,7 @@ class Jetpack_Likes_Settings { } } - // Run through the sharing filters + // Run through the sharing filters. /** This filter is documented in modules/sharedaddy/sharing-service.php */ $enabled = apply_filters( 'sharing_show', $enabled, $post ); @@ -389,7 +422,7 @@ class Jetpack_Likes_Settings { function get_options() { $setting = array(); $setting['disabled'] = get_option( 'disabled_likes' ); - $sharing = get_option( 'sharing-options' ); + $sharing = get_option( 'sharing-options', array() ); // Default visibility settings if ( ! isset( $sharing['global']['show'] ) ) { diff --git a/plugins/jetpack/modules/likes/post-count-jetpack.js b/plugins/jetpack/modules/likes/post-count-jetpack.js index 1059e9bd..89d03681 100644 --- a/plugins/jetpack/modules/likes/post-count-jetpack.js +++ b/plugins/jetpack/modules/likes/post-count-jetpack.js @@ -1,17 +1,17 @@ -var wpPostLikeCount = wpPostLikeCount || {}; +window.wpPostLikeCount = window.wpPostLikeCount || {}; -( function( $ ) { - wpPostLikeCount = jQuery.extend( wpPostLikeCount, { - request: function( options ) { +( function ( $ ) { + window.wpPostLikeCount = jQuery.extend( window.wpPostLikeCount, { + request: function ( options ) { return $.ajax( { type: 'GET', - url: wpPostLikeCount.jsonAPIbase + options.path, + url: window.wpPostLikeCount.jsonAPIbase + options.path, dataType: 'jsonp', data: options.data, - success: function( response ) { + success: function ( response ) { options.success( response ); }, - error: function( response ) { + error: function ( response ) { options.error( response ); }, } ); diff --git a/plugins/jetpack/modules/likes/post-count.js b/plugins/jetpack/modules/likes/post-count.js index 6f4c779f..8ea4466a 100644 --- a/plugins/jetpack/modules/likes/post-count.js +++ b/plugins/jetpack/modules/likes/post-count.js @@ -1,20 +1,22 @@ -var wpPostLikeCount = wpPostLikeCount || {}; +window.wpPostLikeCount = window.wpPostLikeCount || {}; -( function( $ ) { - wpPostLikeCount = jQuery.extend( wpPostLikeCount, { +( function ( $ ) { + window.wpPostLikeCount = jQuery.extend( window.wpPostLikeCount, { jsonAPIbase: 'https://public-api.wordpress.com/rest/v1', APIqueue: [], - wpPostLikeCount: function() { - $( '.post-like-count' ).each( function() { + wpPostLikeCount: function () { + $( '.post-like-count' ).each( function () { var post_id = $( this ).attr( 'data-post-id' ); var blog_id = $( this ).attr( 'data-blog-id' ); - wpPostLikeCount.APIqueue.push( '/sites/' + blog_id + '/posts/' + post_id + '/likes' ); + window.wpPostLikeCount.APIqueue.push( + '/sites/' + blog_id + '/posts/' + post_id + '/likes' + ); } ); - wpPostLikeCount.getCounts(); + window.wpPostLikeCount.getCounts(); }, - showCount: function( post_id, count ) { + showCount: function ( post_id, count ) { if ( count > 0 ) { $( '#post-like-count-' + post_id ) .find( '.comment-count' ) @@ -28,35 +30,35 @@ var wpPostLikeCount = wpPostLikeCount || {}; } }, - getCounts: function() { + getCounts: function () { var batchRequest = { path: '/batch', data: '', - success: function( response ) { + success: function ( response ) { for ( var path in response ) { if ( ! response[ path ].error_data ) { var urlPieces = path.split( '/' ); // pieces[4] = post id; var post_id = urlPieces[ 4 ]; - wpPostLikeCount.showCount( post_id, response[ path ].found ); + window.wpPostLikeCount.showCount( post_id, response[ path ].found ); } } }, - error: function(/*response*/) {}, + error: function (/*response*/) {}, }; var amp = ''; - for ( var i = 0; i < wpPostLikeCount.APIqueue.length; i++ ) { + for ( var i = 0; i < window.wpPostLikeCount.APIqueue.length; i++ ) { if ( i > 0 ) { amp = '&'; } - batchRequest.data += amp + 'urls[]=' + wpPostLikeCount.APIqueue[ i ]; + batchRequest.data += amp + 'urls[]=' + window.wpPostLikeCount.APIqueue[ i ]; } - wpPostLikeCount.request( batchRequest ); + window.wpPostLikeCount.request( batchRequest ); }, } ); } )( jQuery ); -jQuery( document ).ready( function(/*$*/) { - wpPostLikeCount.wpPostLikeCount(); +jQuery( document ).ready( function (/*$*/) { + window.wpPostLikeCount.wpPostLikeCount(); } ); 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 ); }; }; diff --git a/plugins/jetpack/modules/likes/style.css b/plugins/jetpack/modules/likes/style.css index e76b0c2d..b89727ba 100644 --- a/plugins/jetpack/modules/likes/style.css +++ b/plugins/jetpack/modules/likes/style.css @@ -2,11 +2,6 @@ * Like Button toolbar button, loading text & container styles */ -@font-face { - font-family: Noticons; - src: url(https://wordpress.com/i/noticons/Noticons.woff); -} - /* Master container */ #jp-post-flair { padding-top: .5em; @@ -32,7 +27,7 @@ div.sharedaddy h3.sd-title:before { display: block; width: 100%; min-width: 30px; - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; margin-bottom: 1em; } @@ -62,11 +57,6 @@ div.jetpack-likes-widget-wrapper .sd-link-color { font-size: 12px; } -div.jetpack-likes-widget-wrapper.slim-likes-widget { - width: 1px; /* initial default */ - min-height: 0; -} - div.jetpack-comment-likes-widget-wrapper { width: 100%; position: relative; @@ -139,7 +129,7 @@ div.jetpack-comment-likes-widget-wrapper iframe { } div.sd-box { - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; border-top: 1px solid rgba(0,0,0,.13); } @@ -163,19 +153,20 @@ div.sd-box { position: absolute; display: flex; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; - margin-top: 4px; } .comment-likes-widget-placeholder::before { - -webkit-font-smoothing: antialiased; - font-family: "Noticons"; - font-size: 20px; - line-height: .9; - color: #5CB5D4; - content: '\f408'; + color: #2EA2CC; width: 16px; + height: 16px; + content: ''; display: inline-block; - vertical-align: middle; + position: relative; + top: 3px; + padding-right: 5px; + background-repeat: no-repeat; + background-size: 16px 16px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' fill='none' width='24' height='24'/%3E%3Cg%3E%3Cpath fill='%232EA2CC' d='M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304'/%3E%3C/g%3E%3C/svg%3E"); } .post-likes-widget-placeholder .button { @@ -193,16 +184,11 @@ div.sd-box { .comment-likes-widget-placeholder .loading { padding-left: 5px; - margin-top: 2px; + margin-top: 4px; align-self: center; color: #4E4E4E; } -.slim-likes-widget .post-likes-widget { - width: auto; - float: none; -} - /* Like Special cases (display on it's own) */ div.sharedaddy.sd-like-enabled .sd-like h3 { display: none; @@ -231,3 +217,9 @@ div.sharedaddy.sd-like-enabled .sd-like .post-likes-widget { .sd-gplus .sd-title { display: none; } + +@media print { + .jetpack-likes-widget-wrapper { + display: none; + } +} |