diff options
Diffstat (limited to 'plugins/jetpack/modules/related-posts/related-posts.js')
| -rw-r--r-- | plugins/jetpack/modules/related-posts/related-posts.js | 227 |
1 files changed, 140 insertions, 87 deletions
diff --git a/plugins/jetpack/modules/related-posts/related-posts.js b/plugins/jetpack/modules/related-posts/related-posts.js index 76f7d33d..223fb719 100644 --- a/plugins/jetpack/modules/related-posts/related-posts.js +++ b/plugins/jetpack/modules/related-posts/related-posts.js @@ -3,7 +3,9 @@ /** * Load related posts */ -( function( $ ) { +( function () { + 'use strict'; + var jprp = { response: null, @@ -13,7 +15,7 @@ * @param {string} URL (optional) * @return {string} Endpoint URL */ - getEndpointURL: function( URL ) { + getEndpointURL: function ( URL ) { var locationObject, is_customizer = 'undefined' !== typeof wp && @@ -36,8 +38,14 @@ } var args = 'relatedposts=1'; - if ( $( '#jp-relatedposts' ).data( 'exclude' ) ) { - args += '&relatedposts_exclude=' + $( '#jp-relatedposts' ).data( 'exclude' ); + var relatedPosts = document.querySelector( '#jp-relatedposts' ); + + if ( ! relatedPosts ) { + return false; + } + + if ( relatedPosts.hasAttribute( 'data-exclude' ) ) { + args += '&relatedposts_exclude=' + relatedPosts.getAttribute( 'data-exclude' ); } if ( is_customizer ) { @@ -56,39 +64,31 @@ } }, - getAnchor: function( post, classNames ) { - var anchor_title = post.title; - if ( '' !== '' + post.excerpt ) { - anchor_title += '\n\n' + post.excerpt; - } - - var anchor = $( '<a>' ); - - anchor.attr( { - class: classNames, - href: post.url, - title: anchor_title, - 'data-origin': post.url_meta.origin, - 'data-position': post.url_meta.position, - } ); + getAnchor: function ( post, classNames ) { + var anchorTitle = post.title; + var anchor = document.createElement( 'a' ); + anchor.setAttribute( 'class', classNames ); + anchor.setAttribute( 'href', post.url ); + anchor.setAttribute( 'title', anchorTitle ); + anchor.setAttribute( 'data-origin', post.url_meta.origin ); + anchor.setAttribute( 'data-position', post.url_meta.position ); if ( '' !== post.rel ) { - anchor.attr( { - rel: post.rel, - } ); + anchor.setAttribute( 'rel', post.rel ); } - var anchor_html = $( '<div>' ) - .append( anchor ) - .html(); - return [ anchor_html.substring( 0, anchor_html.length - 4 ), '</a>' ]; + var div = document.createElement( 'div' ); + div.appendChild( anchor ); + + var anchorHTML = div.innerHTML; + return [ anchorHTML.substring( 0, anchorHTML.length - 4 ), '</a>' ]; }, - generateMinimalHtml: function( posts, options ) { + generateMinimalHtml: function ( posts, options ) { var self = this; var html = ''; - $.each( posts, function( index, post ) { + posts.forEach( function ( post, index ) { var anchor = self.getAnchor( post, 'jp-relatedposts-post-a' ); var classes = 'jp-relatedposts-post jp-relatedposts-post' + index; @@ -111,7 +111,12 @@ anchor[ 1 ] + '</span>'; if ( options.showDate ) { - html += '<span class="jp-relatedposts-post-date">' + post.date + '</span>'; + html += + '<time class="jp-relatedposts-post-date" datetime="' + + post.date + + '">' + + post.date + + '</time>'; } if ( options.showContext ) { html += '<span class="jp-relatedposts-post-context">' + post.context + '</span>'; @@ -127,11 +132,11 @@ ); }, - generateVisualHtml: function( posts, options ) { + generateVisualHtml: function ( posts, options ) { var self = this; var html = ''; - $.each( posts, function( index, post ) { + posts.forEach( function ( post, index ) { var anchor = self.getAnchor( post, 'jp-relatedposts-post-a' ); var classes = 'jp-relatedposts-post jp-relatedposts-post' + index; @@ -145,6 +150,10 @@ classes += ' jp-relatedposts-post-thumbs'; } + var dummyContainer = document.createElement( 'p' ); + dummyContainer.innerHTML = post.excerpt; + var excerpt = dummyContainer.textContent; + html += '<div class="' + classes + @@ -156,12 +165,14 @@ if ( post.img.src ) { html += anchor[ 0 ] + - '<img class="jp-relatedposts-post-img" src="' + + '<img class="jp-relatedposts-post-img" loading="lazy" src="' + post.img.src + '" width="' + post.img.width + + '" height="' + + post.img.height + '" alt="' + - post.title + + post.img.alt_text + '" />' + anchor[ 1 ]; } else { @@ -181,14 +192,14 @@ '</' + related_posts_js_options.post_heading + '>'; - html += - '<p class="jp-relatedposts-post-excerpt">' + - $( '<p>' ) - .text( post.excerpt ) - .html() + - '</p>'; + html += '<p class="jp-relatedposts-post-excerpt">' + excerpt + '</p>'; if ( options.showDate ) { - html += '<p class="jp-relatedposts-post-date">' + post.date + '</p>'; + html += + '<time class="jp-relatedposts-post-date" datetime="' + + post.date + + '">' + + post.date + + '</time>'; } if ( options.showContext ) { html += '<p class="jp-relatedposts-post-context">' + post.context + '</p>'; @@ -210,26 +221,30 @@ * cut off a line of text in the middle so we need to do some detective * work. */ - setVisualExcerptHeights: function() { - var elements = $( + setVisualExcerptHeights: function () { + var elements = document.querySelectorAll( '#jp-relatedposts .jp-relatedposts-post-nothumbs .jp-relatedposts-post-excerpt' ); - if ( 0 >= elements.length ) { + if ( ! elements.length ) { return; } - var fontSize = parseInt( elements.first().css( 'font-size' ), 10 ), - lineHeight = parseInt( elements.first().css( 'line-height' ), 10 ); + var firstElementStyles = getComputedStyle( elements[ 0 ] ); + + var fontSize = parseInt( firstElementStyles.fontSize, 10 ); + var lineHeight = parseInt( firstElementStyles.lineHeight, 10 ); // Show 5 lines of text - elements.css( 'max-height', ( 5 * lineHeight ) / fontSize + 'em' ); + for ( var i = 0; i < elements.length; i++ ) { + elements[ i ].style.maxHeight = ( 5 * lineHeight ) / fontSize + 'em'; + } }, - getTrackedUrl: function( anchor ) { + getTrackedUrl: function ( anchor ) { var args = 'relatedposts_hit=1'; - args += '&relatedposts_origin=' + $( anchor ).data( 'origin' ); - args += '&relatedposts_position=' + $( anchor ).data( 'position' ); + args += '&relatedposts_origin=' + anchor.getAttribute( 'data-origin' ); + args += '&relatedposts_position=' + anchor.getAttribute( 'data-position' ); var pathname = anchor.pathname; if ( '/' !== pathname[ 0 ] ) { @@ -243,7 +258,7 @@ } }, - cleanupTrackedUrl: function() { + cleanupTrackedUrl: function () { if ( 'function' !== typeof history.replaceState ) { return; } @@ -263,8 +278,12 @@ function afterPostsHaveLoaded() { jprp.setVisualExcerptHeights(); - $( '#jp-relatedposts a.jp-relatedposts-post-a' ).click( function() { - this.href = jprp.getTrackedUrl( this ); + var posts = document.querySelectorAll( '#jp-relatedposts a.jp-relatedposts-post-a' ); + + Array.prototype.forEach.call( posts, function ( post ) { + document.addEventListener( 'click', function () { + post.href = jprp.getTrackedUrl( post ); + } ); } ); } @@ -274,54 +293,82 @@ function startRelatedPosts() { jprp.cleanupTrackedUrl(); - var endpointURL = jprp.getEndpointURL(), - $relatedPosts = $( '#jp-relatedposts' ); + var endpointURL = jprp.getEndpointURL(); + var relatedPosts = document.querySelector( '#jp-relatedposts' ); + + if ( ! endpointURL ) { + return; + } - if ( $( '#jp-relatedposts .jp-relatedposts-post' ).length ) { + if ( document.querySelectorAll( '#jp-relatedposts .jp-relatedposts-post' ).length ) { afterPostsHaveLoaded(); return; } - $.getJSON( endpointURL, function( response ) { - if ( 0 === response.items.length || 0 === $relatedPosts.length ) { - return; - } + var request = new XMLHttpRequest(); + request.open( 'GET', endpointURL, true ); + request.setRequestHeader( 'x-requested-with', 'XMLHttpRequest' ); + + request.onreadystatechange = function () { + if ( this.readyState === XMLHttpRequest.DONE && this.status === 200 ) { + try { + var response = JSON.parse( request.responseText ); - jprp.response = response; + if ( 0 === response.items.length || 0 === relatedPosts.length ) { + return; + } - var html, - showThumbnails, - options = {}; + jprp.response = response; + + var html, + showThumbnails, + options = {}; + + if ( 'undefined' !== typeof wp && wp.customize ) { + showThumbnails = wp.customize.instance( 'jetpack_relatedposts[show_thumbnails]' ).get(); + options.showDate = wp.customize.instance( 'jetpack_relatedposts[show_date]' ).get(); + options.showContext = wp.customize + .instance( 'jetpack_relatedposts[show_context]' ) + .get(); + options.layout = wp.customize.instance( 'jetpack_relatedposts[layout]' ).get(); + } else { + showThumbnails = response.show_thumbnails; + options.showDate = response.show_date; + options.showContext = response.show_context; + options.layout = response.layout; + } - if ( 'undefined' !== typeof wp && wp.customize ) { - showThumbnails = wp.customize.instance( 'jetpack_relatedposts[show_thumbnails]' ).get(); - options.showDate = wp.customize.instance( 'jetpack_relatedposts[show_date]' ).get(); - options.showContext = wp.customize.instance( 'jetpack_relatedposts[show_context]' ).get(); - options.layout = wp.customize.instance( 'jetpack_relatedposts[layout]' ).get(); - } else { - showThumbnails = response.show_thumbnails; - options.showDate = response.show_date; - options.showContext = response.show_context; - options.layout = response.layout; - } + html = ! showThumbnails + ? jprp.generateMinimalHtml( response.items, options ) + : jprp.generateVisualHtml( response.items, options ); + + var div = document.createElement( 'div' ); + relatedPosts.appendChild( div ); + div.outerHTML = html; - html = ! showThumbnails - ? jprp.generateMinimalHtml( response.items, options ) - : jprp.generateVisualHtml( response.items, options ); + if ( options.showDate ) { + var dates = relatedPosts.querySelectorAll( '.jp-relatedposts-post-date' ); - $relatedPosts.append( html ); - if ( options.showDate ) { - $relatedPosts.find( '.jp-relatedposts-post-date' ).show(); + Array.prototype.forEach.call( dates, function ( date ) { + date.style.display = 'block'; + } ); + } + + relatedPosts.style.display = 'block'; + afterPostsHaveLoaded(); + } catch ( error ) { + // Do nothing + } } - $relatedPosts.show(); - afterPostsHaveLoaded(); - } ); + }; + + request.send(); } - $( function() { + function init() { if ( 'undefined' !== typeof wp && wp.customize ) { if ( wp.customize.selectiveRefresh ) { - wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) { + wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) { if ( 'jetpack_relatedposts' === placement.partial.id ) { startRelatedPosts(); } @@ -331,5 +378,11 @@ } else { startRelatedPosts(); } - } ); -} )( jQuery ); + } + + if ( document.readyState !== 'loading' ) { + init(); + } else { + document.addEventListener( 'DOMContentLoaded', init ); + } +} )(); |