From ef07874ea3559ec3cf75ea848aec56a0aa142f26 Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Mon, 12 Sep 2016 13:31:37 -0400 Subject: [PATCH 1/3] Adds parameters and tests --- js/mitlibnews.js | 4 +- js/src/mitlibnews.loader.js | 72 +++++++++++++++++++++++++++++- js/tests/mitlibnews.loader.spec.js | 41 +++++++++++++++++ 3 files changed, 115 insertions(+), 2 deletions(-) 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..7d4ee5f 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -1,3 +1,73 @@ function Loader(params) { "use strict"; -} \ No newline at end of file + + console.log('Loader here'); + + // Default parameters + // Container is the HTML element to which everything is added. + this.container = 'mitlibnews-container'; + // 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 +} + +Loader.prototype = { + constructor: Loader, + + // 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..795c026 100644 --- a/js/tests/mitlibnews.loader.spec.js +++ b/js/tests/mitlibnews.loader.spec.js @@ -2,4 +2,45 @@ 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'); + }); + }); \ No newline at end of file From eb0f4706a667eacb14adcb2d99b7a0d282d30ad5 Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Mon, 12 Sep 2016 15:27:54 -0400 Subject: [PATCH 2/3] Adds initialization step --- js/src/mitlibnews.loader.js | 51 +++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/js/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index 7d4ee5f..64ba4c2 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -1,11 +1,13 @@ +var document; + function Loader(params) { "use strict"; - console.log('Loader here'); - // 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 @@ -30,11 +32,56 @@ function Loader(params) { } // Connect to markup, read data attributes + this.initialize(); + } Loader.prototype = { constructor: Loader, + // Initialization + initialize : function() { + // Connect to markup + 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(); + }, + + // Load attributes + loadAttributes : function() { + // If the post container doesn't have data attributes, then leave the defaults + if ( !this.postcontainer || !this.postcontainer.dataset ) { + console.log('Container or data attributes not found - leaving defaults'); + return true; + } + + if ( this.postcontainer.dataset.pagesize ) { + console.log('Overriding page size'); + this.setPagesize( this.postcontainer.dataset.pagesize ); + } + + if ( this.postcontainer.dataset.postcontent ) { + console.log('Overriding post content'); + this.setPostcontent( this.postcontainer.dataset.postcontent ); + } + + return true; + }, + + // Load posts + loadPosts : function() { + console.log('Loading ' + this.getPagesize() + ' posts (page ' + this.getPage() + ')'); + }, + // Container getter and setter getContainer : function() { return this.container; From ad6a21febedc41024cb036b661586afefbe140c4 Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Mon, 12 Sep 2016 16:09:07 -0400 Subject: [PATCH 3/3] Applies module to author page --- author.php | 2 +- functions.php | 5 ++- js/src/mitlibnews.loader.js | 60 +++++++++++++++++++++++++++--- js/tests/mitlibnews.loader.spec.js | 10 +++++ tasks/options/uglify.js | 4 ++ 5 files changed, 72 insertions(+), 9 deletions(-) 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/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index 64ba4c2..897f431 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -1,4 +1,4 @@ -var document; +var document, jQuery; function Loader(params) { "use strict"; @@ -41,7 +41,7 @@ Loader.prototype = { // Initialization initialize : function() { - // Connect to markup + // 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. @@ -56,30 +56,78 @@ Loader.prototype = { 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 ) { - console.log('Container or data attributes not found - leaving defaults'); return true; } if ( this.postcontainer.dataset.pagesize ) { - console.log('Overriding page size'); this.setPagesize( this.postcontainer.dataset.pagesize ); } if ( this.postcontainer.dataset.postcontent ) { - console.log('Overriding post content'); this.setPostcontent( this.postcontainer.dataset.postcontent ); } + // At this point, the status of values like this.postcontent are set. + return true; }, // Load posts loadPosts : function() { - console.log('Loading ' + this.getPagesize() + ' posts (page ' + this.getPage() + ')'); + + // 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 diff --git a/js/tests/mitlibnews.loader.spec.js b/js/tests/mitlibnews.loader.spec.js index 795c026..4ad55f3 100644 --- a/js/tests/mitlibnews.loader.spec.js +++ b/js/tests/mitlibnews.loader.spec.js @@ -43,4 +43,14 @@ describe("Loader test suite", function() { 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' } }