Skip to content

Instantly share code, notes, and snippets.

@wpmudev-sls
Last active August 15, 2017 19:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wpmudev-sls/193031928213e778b246139c324d7b90 to your computer and use it in GitHub Desktop.
Save wpmudev-sls/193031928213e778b246139c324d7b90 to your computer and use it in GitHub Desktop.
Custom auto page reload with js
<?php
/*
Plugin Name: Custom auto page reload
Plugin URI: https://premium.wpmudev.org/
Description: It will update the content of the page without member re-loading the page
Version: 2.0
Author: Panos Lyrakis @ WPMUDEV
Author URI: https://premium.wpmudev.org/
License: GPLv2 or later
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! class_exists( 'WPMUDEV_Custom_Page_Autoreload' ) ) {
class WPMUDEV_Custom_Page_Autoreload {
private static $_instance = null;
private static $_time_frame = 5; //seconds
private static $_content_wrap_element = '.entry-content';
public static function get_instance() {
if( is_null( self::$_instance ) ){
self::$_instance = new WPMUDEV_Custom_Page_Autoreload();
}
return self::$_instance;
}
private function __construct() {
add_action( 'wp_footer', array( $this, 'load_script' ) );
}
public function load_script(){
global $post;
if( ! $post instanceof WP_Post || ! apply_filters( 'wpmudev_allow_autoreload_page', true, $post ) ){
return;
}
$rest_url = esc_url_raw( rest_url() ) . 'wp/v2/posts/' . $post->ID;
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var time_frame = 1000 * parseInt( "<?php echo absint( self::$_time_frame ); ?>" ),
last_modified = "<?php echo $post->post_modified; ?>",
rest_url = "<?php echo $rest_url; ?>";
/*var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}};*/
setInterval(function(){
$.ajax({
url: rest_url,
method: 'GET',
//crossDomain: true,
//beforeSend: function ( xhr ) {
// xhr.setRequestHeader( 'Authorization', 'Basic ' + Base64.encode( 'wp_username:wp_password' ) );
//},
success: function( data, txtStatus, xhr ) {
var d1 = new Date( last_modified ),
d2 = new Date( data.modified ),
timeDiff = Math.abs( d2.getTime() - d1.getTime() ) / 1000; //seconds
if( timeDiff > 0 ){
last_modified = data.modified;
$( '<?php echo self::$_content_wrap_element; ?>' ).html( data.content.rendered );
wpmudev_notify_content_reload();
}
}
});
}, time_frame );
});
function wpmudev_notify_content_reload(){
popup_wrap = $( '<div/>',{
"class":"wpmudev_notify_content_wrap",
} );
popup_content = $( '<div/>');
popup_content.css( { "padding":"20px", "text-align":"center", "color":"#eee" } ).html( '<?php _e( "Page content has been updated" ) ?>' );
popup_wrap.append( popup_content );
popup_wrap.css( { "background":"rgba( 0,0,0,.7 )", "border":"2px solid #C5B358", "border-radius":"15px", "position":"fixed", "z-index":"9999" } );
popup_wrap.css("top", Math.max(0, (($(window).height() - popup_wrap.outerHeight()) / 2) ) + "px");
popup_wrap.css("left", Math.max(0, (($(window).width() - popup_wrap.outerWidth()) / 2) + $(window).scrollLeft()) + "px");
popup_wrap.on( 'click', function(){
$( this ).fadeOut( 3500 );
} );
setInterval(function(){
popup_wrap.fadeOut( 3500 );
},'6500');
$( 'body' ).append( popup_wrap );
}
})(jQuery);
</script>
<?php
}
}
add_action( 'plugins_loaded', function(){
$GLOBALS['WPMUDEV_Custom_Page_Autoreload'] = WPMUDEV_Custom_Page_Autoreload::get_instance();
});
}
/*
add_action( 'rest_api_init', function() {
register_rest_route( 'api/v2', '/post/(?<id>\d+)', array (
'methods' => 'GET',
'callback' => 'get_post_content',
) );
} );
function get_post_content( WP_REST_Request $request ) {
$post = get_post( absint( $request->get_param( 'id' ) ) );
if ( ! $post ) {
return 'Invalid ID';
}
return apply_filters( 'the_content', $post->post_content );
}
*/
@wpmudev-sls
Copy link
Author

You'll need to change line
private static $_content_wrap_element = '.entry-content';
so it contains the class or id of the element your theme uses to wrap post content

You may also like to change how often to check for updates by changing line
private static $_time_frame = 7; //seconds

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment