[#1301] - transient cache in shortcodes with unveil.js for images

akvo · Jul 6, 2018 · f35cfd2 · f35cfd2
1 parent 6235b0e
commit f35cfd2
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 31 deletions.
diff --git a/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php b/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php
@@ -38,14 +38,14 @@ function assets(){
 			wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), null);
 
 			wp_deregister_script('jquery-ui');
-			wp_enqueue_script('jquery-ui', get_template_directory_uri() . '/js/jquery-ui.min.js', array(), null, true);
-
-			wp_enqueue_script('akvo-common', get_template_directory_uri() . '/js/common-js.js', array('jquery'), null, true );
-			wp_enqueue_script('akvo-jquery', get_template_directory_uri() . '/js/akvo-jquery.js', array('jquery'), '1.0.5', true );
-			wp_enqueue_script('jquery-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), null, true );
-			wp_enqueue_script('akvo-script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
-			wp_enqueue_script('jquery-bxslider', get_template_directory_uri() . '/js/jquery.bxslider.min.js', array('jquery'), null, true );
-			wp_enqueue_script('akvo-tabs', get_template_directory_uri() . '/js/tabs.js', array('jquery-bxslider'), "1.0.0", true );
+			wp_enqueue_script('jquery-ui', 			get_template_directory_uri() . '/js/jquery-ui.min.js', array(), null, true);
+			wp_enqueue_script('akvo-common', 		get_template_directory_uri() . '/js/common-js.js', array('jquery'), null, true );
+			wp_enqueue_script('jquery-unveil', 		get_template_directory_uri() . '/js/jquery.unveil.js', array('jquery'), '1.0.0', true );
+			wp_enqueue_script('akvo-jquery', 		get_template_directory_uri() . '/js/akvo-jquery.js', array('jquery'), '1.0.7', true );
+			wp_enqueue_script('jquery-fitvids', 	get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), null, true );
+			wp_enqueue_script('akvo-script', 		get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
+			wp_enqueue_script('jquery-bxslider', 	get_template_directory_uri() . '/js/jquery.bxslider.min.js', array('jquery'), null, true );
+			wp_enqueue_script('akvo-tabs', 			get_template_directory_uri() . '/js/tabs.js', array('jquery-bxslider'), "1.0.0", true );
 			wp_enqueue_script('fontawesome', 'https://use.fontawesome.com/641b62259f.js', array('akvo-tabs'), null, true );	
 
 			if ( is_singular() ) wp_enqueue_script('comment-reply');

diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php
@@ -10,14 +10,38 @@ function __construct(){
 
 		}
 
+		function unique_atts(){
+			return array('post_type', 'showposts');
+		}
+
 		function get_default_atts(){
 			return array( 
 				'post_type'			=> 'new_staffs', 
 				'filters' 			=> '', 
-				'showposts'			=> 100	
+				'showposts'			=> 100,
+				//'cache'				=> '4'
 			);
 		}
 
+		/* GET POST TERMS FROM SELECTED TAXONOMIES */
+		function get_the_terms( $filters, $post_id ){
+
+
+			$terms = array();
+			foreach( $filters as $tax ){
+				if( $tax ){
+					$post_terms = get_the_terms( $post_id, $tax );
+					if( is_array( $post_terms ) ){
+						foreach( $post_terms as $post_term ){
+							$terms[ $tax ] = $post_term->term_id;
+						}
+					}
+				}
+			}
+
+			return $terms;
+		}
+
 
 
 	}

diff --git a/.../wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php b/.../wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php
@@ -10,13 +10,18 @@ function __construct(){
 
 		}
 
+		function unique_atts(){
+			return array('post_type', 'showposts', 'primary_filter', 'secondary_filter');
+		}
+
 		function get_default_atts(){
 			return array( 
 				'title' 			=> '', 
 				'post_type'			=> '', 
 				'primary_filter' 	=> '', 
 				'secondary_filter'	=> '',
-				'showposts'			=> 100	
+				'showposts'			=> 100,
+				//'cache'				=> '4'
 			);
 		}
 

diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode.php
@@ -7,11 +7,9 @@ class AKVO_SHORTCODE{
 		var $template;
 
 		function __construct(){
-			add_shortcode( $this->shortcode, array( $this, 'plain_shortcode' ), 100 );
+			add_shortcode( $this->shortcode, array( $this, 'main_shortcode' ), 100 );
 		}
 
-
-
 		function get_atts( $atts ){
 			$defaults_atts = apply_filters( $this->shortcode.'_atts', $this->get_default_atts() );
 			return shortcode_atts( $defaults_atts, $atts, $this->shortcode );
@@ -32,4 +30,60 @@ function plain_shortcode( $atts ){
 			return ob_get_clean();
 		}
 
+		function unique_atts(){
+			return array();
+		}
+
+		function get_cache_key( $atts ){
+			$atts = $this->get_atts( $atts );
+
+			$cache_key = $this->shortcode;
+
+			$unique_atts = $this->unique_atts();
+
+			foreach( $unique_atts as $unique_att ){
+				$cache_key .= $atts[$unique_att];	
+			}
+
+			return $cache_key;
+		}
+
+		function get_cache( $atts ){
+			$cache_key = $this->get_cache_key( $atts );
+
+			// try to get value from Wordpress cache
+			return get_transient( $cache_key );
+		}
+
+		function set_cache( $data, $atts ){
+			$cache_key = $this->get_cache_key( $atts );
+			// store value in cache for hours
+			set_transient( $cache_key, $data, 3600 * $atts['cache'] ); 
+		}
+
+		function main_shortcode( $atts ){
+
+			$atts = $this->get_atts( $atts );
+
+			$data = false;
+
+			/* CHECK IF THE DATA EXISTS IN CACHE */
+			if( isset( $atts['cache'] ) && $atts['cache'] && is_numeric( $atts['cache'] ) ){
+				$data = $this->get_cache( $atts ); 
+			}
+
+			// if no value in the cache
+			if ( $data === false ) {
+
+				$data = $this->plain_shortcode( $atts );
+
+				if( isset( $atts['cache'] ) && $atts['cache'] ){
+					$this->set_cache( $data, $atts );
+				}
+			}
+
+			return $data;
+
+		}
+
 	}
diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/custom_posts.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/custom_posts.php
@@ -10,23 +10,13 @@
 
 		while( $the_query->have_posts() ) : $the_query->the_post();
 
-			/* GET POST TERMS FROM SELECTED TAXONOMIES */
-			$terms = array();
-			foreach( $filters as $tax ){
-				if( $tax ){
-					$post_terms = get_the_terms( get_the_ID(), $tax );
-					if( is_array( $post_terms ) ){
-						foreach( $post_terms as $post_term ){
-							$terms[ $tax ] = $post_term->term_id;
-						}
-					}
-				}
-			}	
-
-
 			$data_str = "data-item='1'";
-			foreach( $terms as $slug => $id ){
-				$data_str .= " data-".$slug."='".$id."'";			/* ACCUMULATING DATA STRING FROM TERMS */
+
+			if( count( $filters ) ){
+				$terms = $this->get_the_terms( $filters, get_the_ID() );
+				foreach( $terms as $slug => $id ){
+					$data_str .= " data-".$slug."='".$id."'";			/* ACCUMULATING DATA STRING FROM TERMS */
+				}
 			}
 
 			_e( '<li id="post-'.get_the_ID().'" '.$data_str.'>' );

diff --git a/code/wp-content/themes/Akvo-responsive/js/akvo-jquery.js b/code/wp-content/themes/Akvo-responsive/js/akvo-jquery.js
@@ -414,5 +414,13 @@ $("document").ready(function() {
 	/* TEAM AND PARTNERS PAGE */
 	$('[data-behaviour~=double-filters]').double_filters();
 
+	$('[data-behaviour~=unveil]').unveil( 0, function(){
+
+		var el = $(this);
+
+		console.log( el.attr('src') );
+
+	});
+
 
 });
diff --git a/code/wp-content/themes/Akvo-responsive/js/jquery.unveil.js b/code/wp-content/themes/Akvo-responsive/js/jquery.unveil.js
@@ -0,0 +1,64 @@
+/**
+ * jQuery Unveil
+ * A very lightweight jQuery plugin to lazy load images
+ * http://luis-almeida.github.com/unveil
+ *
+ * Licensed under the MIT license.
+ * Copyright 2013 Luís Almeida
+ * https://github.com/luis-almeida
+ */
+
+;(function($) {
+
+  $.fn.unveil = function(threshold, callback) {
+
+    var $w = $(window),
+        th = threshold || 0,
+        retina = window.devicePixelRatio > 1,
+        attrib = retina? "data-src-retina" : "data-src",
+        images = this,
+        loaded;
+
+    this.one("unveil", function() {
+      var source = this.getAttribute(attrib);
+      source = source || this.getAttribute("data-src");
+      if (source) {
+      	if (this.tagName === 'IMG') {
+ 			this.setAttribute("src", source);
+ 		} 
+ 		else {
+ 			this.style.backgroundImage  = 'url('+source+')';
+		}
+
+
+        //this.setAttribute("src", source);
+        if (typeof callback === "function") callback.call(this);
+      }
+    });
+
+    function unveil() {
+      var inview = images.filter(function() {
+        var $e = $(this);
+        if ($e.is(":hidden")) return;
+
+        var wt = $w.scrollTop(),
+            wb = wt + $w.height(),
+            et = $e.offset().top,
+            eb = et + $e.height();
+
+        return eb >= wt - th && et <= wb + th;
+      });
+
+      loaded = inview.trigger("unveil");
+      images = images.not(loaded);
+    }
+
+    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
+
+    unveil();
+
+    return this;
+
+  };
+
+})(window.jQuery || window.Zepto);
diff --git a/code/wp-content/themes/Akvo-responsive/templates/microstory.php b/code/wp-content/themes/Akvo-responsive/templates/microstory.php
@@ -12,7 +12,7 @@
 ?>
 <a href='<?php the_permalink();?>'>
 <!-- Display featured image in right-aligned floating div -->
-<div class="imgWrapper" style="background-image: url('<?php echo $url;?>');">
+<div class="imgWrapper" data-behaviour='unveil' data-src='<?php echo $url;?>'>
 	<div class='excerpt'><?php the_excerpt();?></div>
 </div>
 <!-- Display Title and Name -->

diff --git a/code/wp-content/themes/Akvo-responsive/templates/new_staffs.php b/code/wp-content/themes/Akvo-responsive/templates/new_staffs.php
@@ -18,7 +18,16 @@
 
 	<!-- Display featured image in right-aligned floating div -->
 	<div class="imgWrapper">
-		<?php the_post_thumbnail(); ?>
+	<?php
+
+		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
+		if( is_array( $thumbnail ) ){
+			_e( "<img data-behaviour='unveil' src='".get_bloginfo('template_url')."/images/chruch.png' data-src='".$thumbnail[0]."' width='".$thumbnail[1]."' height='".$thumbnail[2]."' />" );
+		}
+
+	?>
+
+	<?php //the_post_thumbnail(); ?>
 	</div>
 	<!-- Display Title and Name -->
 	<div class="staffName"><?php the_title(); ?></div>