diff --git a/author.php b/author.php index 2b746a8..1c87abe 100644 --- a/author.php +++ b/author.php @@ -65,7 +65,7 @@ -
+
diff --git a/functions.php b/functions.php index d1add67..f47f934 100644 --- a/functions.php +++ b/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' ); diff --git a/js/mitlibnews.js b/js/mitlibnews.js index a2ed51c..1318404 100644 --- a/js/mitlibnews.js +++ b/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); diff --git a/js/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index b6b74af..897f431 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -1,3 +1,168 @@ +var document, jQuery; + function Loader(params) { "use strict"; -} \ No newline at end of file + + // 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; + } +}; \ No newline at end of file diff --git a/js/tests/mitlibnews.loader.spec.js b/js/tests/mitlibnews.loader.spec.js index f104e78..4ad55f3 100644 --- a/js/tests/mitlibnews.loader.spec.js +++ b/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); + }); }); \ No newline at end of file diff --git a/tasks/options/uglify.js b/tasks/options/uglify.js index 133ce61..d87ea2b 100644 --- a/tasks/options/uglify.js +++ b/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' } }