Adds API to author page

author.php

@@ -65,7 +65,7 @@
 			<?php /* Start the Loop
 			*/
 			?>
-			<div class="row">
+			<div class="row" id="mitlibnews-container" data-postcontent="author" data-postauthor="<?php the_author_id(); ?>">
 
 
 

functions.php

@@ -32,11 +32,12 @@ function add_styles() {
 add_action( 'wp_enqueue_scripts', 'add_styles' );
 
 /**
- * Add LazyLoad and main javascript for all users
+ * Add LazyLoad, loader, and main javascript for all users
  */
 function add_scripts() {
 	wp_enqueue_script( 'lazyload', get_stylesheet_directory_uri() . '/js/build/jquery.lazyload.min.js', array( 'jquery' ), '', true );
-	wp_enqueue_script( 'mitlibnews', get_stylesheet_directory_uri() . '/js/build/mitlibnews.min.js', array( 'lazyload' ), '', true );
+	wp_enqueue_script( 'loader', get_stylesheet_directory_uri() . '/js/build/mitlibnews.loader.min.js', '', '', true );
+	wp_enqueue_script( 'mitlibnews', get_stylesheet_directory_uri() . '/js/build/mitlibnews.min.js', array( 'lazyload', 'loader' ), '', true );
 }
 add_action( 'wp_enqueue_scripts', 'add_scripts' );
 

js/mitlibnews.js

@@ -1,4 +1,4 @@
-var jQuery;
+var jQuery, NewsLoader, Loader;
 
 (function($) {
 
@@ -12,4 +12,6 @@ var jQuery;
 	//category force selection of all news
 	$('input:checkbox[id=in-category-43]').attr('checked',true);
 
+	NewsLoader = new Loader();
+
 })(jQuery);

js/src/mitlibnews.loader.js

@@ -1,3 +1,168 @@
+var document, jQuery;
+
 function Loader(params) {
 	"use strict";
-}
+
+	// Default parameters
+	// Container is the HTML element to which everything is added.
+	this.container = 'mitlibnews-container';
+	// Postcontainer is DOM element corresponding to Container.
+	this.postcontainer = '';
+	// Page is the counter used for pagination.
+	this.page = 1;
+	// Pagesize sets how many articles are loaded in a page
+	this.pagesize = 9;
+	// Postcontent determines what type of content is loaded from the API
+	this.postcontent = 'all';
+
+	// Read param object, if passed, and set new values
+	if ( params ) {
+		if ( '' !== params.container ) {
+			this.setContainer( params.container );
+		}
+		if ( '' !== params.page ) {
+			this.setPage( params.page );
+		}
+		if ( '' !== params.pagesize ) {
+			this.setPagesize( params.pagesize );
+		}
+		if ( '' !== params.postcontent ) {
+			this.setPostcontent( params.postcontent );
+		}
+	}
+
+	// Connect to markup, read data attributes
+	this.initialize();
+
+}
+
+Loader.prototype = {
+	constructor: Loader,
+
+	// Initialization
+	initialize : function() {
+		// Look up specified post container in DOM
+		this.postcontainer = document.getElementById( this.getContainer() );
+
+		// If no post container is found, then we quit and do nothing further.
+		if( !this.postcontainer ) {
+			return false;
+		}
+
+		// Read data attributes
+		this.loadAttributes();
+
+		// Load posts
+		this.loadPosts();
+	},
+
+	/**
+	 * Build query
+	 *
+	 * This builds a JSON object that will be fed to the API in order to return posts
+	 */
+	buildQuery : function() {
+		var query = {
+			'page': this.getPage(),
+		};
+		var filter = {
+			'posts_per_page': this.getPagesize(),
+		};
+		// Context-specific values
+		if ( this.getPostcontent() === 'author' ) {
+			filter.author = this.postcontainer.dataset.postauthor;
+		}
+		// Assemble pieces into query object
+		query.filter = filter;
+		return query;
+	},
+
+	// Load attributes
+	loadAttributes : function() {
+		// If the post container doesn't have data attributes, then leave the defaults
+		if ( !this.postcontainer || !this.postcontainer.dataset ) {
+			return true;
+		}
+
+		if ( this.postcontainer.dataset.pagesize ) {
+			this.setPagesize( this.postcontainer.dataset.pagesize );
+		}
+
+		if ( this.postcontainer.dataset.postcontent ) {
+			this.setPostcontent( this.postcontainer.dataset.postcontent );
+		}
+
+		// At this point, the status of values like this.postcontent are set.
+
+		return true;
+	},
+
+	// Load posts
+	loadPosts : function() {
+
+		// Assemble query object
+		var query = this.buildQuery();
+
+		console.log('Query object:');
+		console.log(query);
+
+		// Query the API
+		jQuery.ajax({
+			url: '/news/wp-json/posts',
+			data: query,
+			dataType: 'json',
+			type: 'GET',
+			success: function(data) {
+				jQuery.each(data, function( index, value ) {
+					console.log(value);
+				});
+			},
+			error: function() {
+				console.log('Error');
+			}
+		});
+	},
+
+	// Render a JSON object into HTML
+	renderCard: function(index, post) {
+		console.log(index);
+		console.log(post);
+		jQuery( this.postContainer ).append( post );
+	},
+
+	// Container getter and setter
+	getContainer : function() {
+		return this.container;
+	},
+
+	setContainer : function(value) {
+		this.container = value;
+	},
+
+	// Page getter and setter
+	getPage : function() {
+		return +this.page;
+	},
+
+	setPage : function(value) {
+		this.page = +value;
+	},
+
+	// Pagesize getter and setter
+	getPagesize : function() {
+		return +this.pagesize;
+	},
+
+	setPagesize : function(value) {
+		this.pagesize = +value;
+	},
+
+	// Postcontent getter and setter
+	getPostcontent : function() {
+		return this.postcontent;
+	},
+
+	setPostcontent : function(value) {
+		this.postcontent = value;
+	}
+};

js/tests/mitlibnews.loader.spec.js

@@ -2,4 +2,55 @@ describe("Loader test suite", function() {
 	it("expects tautologies", function() {
 		expect(true).toBe(true);
 	});
+
+	it("should have expected defaults", function() {
+		var test = new Loader();
+		expect( test.container ).toEqual('mitlibnews-container');
+		expect( test.page ).toEqual(1);
+		expect( test.pagesize ).toEqual(9);
+		expect( test.postcontent ).toEqual('all');
+	});
+
+	it("should allow objects passed in definition", function() {
+		var test = new Loader({container: 'foo', page: 3, pagesize: 5, postcontent: 'bar'});
+		expect( test.container ).toEqual('foo');
+		expect( test.page ).toEqual(3);
+		expect( test.pagesize ).toEqual(5);
+		expect( test.postcontent ).toEqual('bar');
+	});
+
+	it("should have container getter and setter methods", function() {
+		var test = new Loader();
+		expect( test.getContainer() ).toEqual('mitlibnews-container');
+		expect( test.getContainer( test.setContainer('bar') ) ).toEqual('bar');
+	});
+
+	it("should have page getter and setter methods", function() {
+		var test = new Loader();
+		expect( test.getPage() ).toEqual(1);
+		expect( test.getPage( test.setPage(2) ) ).toEqual(2);
+	});
+
+	it("should have pagesize getter and setter methods", function() {
+		var test = new Loader();
+		expect( test.getPagesize() ).toEqual(9);
+		expect( test.getPagesize( test.setPagesize(12) ) ).toEqual(12);
+	});
+
+	it("should have postcontent getter and setter methods", function() {
+		var test = new Loader();
+		expect( test.getPostcontent() ).toEqual('all');
+		expect( test.getPostcontent( test.setPostcontent('baz') ) ).toEqual('baz');
+	});
+
+	it("should build a query object", function() {
+		var test = new Loader();
+		defaultQuery = {
+			page: 1,
+			filter: {
+				posts_per_page: 9,
+			}
+		}
+		expect( test.buildQuery() ).toEqual(defaultQuery);
+	});
 });

tasks/options/uglify.js

@@ -6,5 +6,9 @@ module.exports = {
 	lazyLoad: {
 		src: 'node_modules/jquery-lazyload/jquery.lazyload.js',
 		dest: 'js/build/jquery.lazyload.min.js'
+	},
+	loader: {
+		src: 'js/src/mitlibnews.loader.js',
+		dest: 'js/build/mitlibnews.loader.min.js'
 	}
 }