From b1b6f3ae35ce432e2716f3b3c2be45f3700dd2f1 Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Thu, 22 Sep 2016 12:12:41 -0400 Subject: [PATCH 1/3] Render card shells for each returned element Signed-off-by: Matt Bernhardt --- js/src/mitlibnews.loader.js | 51 ++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/js/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index c55c8af..796a21a 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -157,11 +157,25 @@ Loader.prototype = { data: query, dataType: 'json', type: 'GET', + context: this, success: function(data) { + + // Unsure of how to transfer context inside .each() properly - bind is deprecated, proxy ? + // http://stackoverflow.com/questions/28347248/change-context-in-each + var self = this; + jQuery.each(data, function( index, value ) { - console.log('\n' + value.type + '\n' + value.title.rendered ); + console.log( ( index + ' ' + value.type ).slice( '-12' ) + ': ' + value.title.rendered ); console.log(value); + + // Render + self.renderCard(index, value); + }); + + // Increment pagination + this.setPage( this.getPage() + 1 ); + console.log('Set page to ' + this.getPage() ); }, error: function() { console.log('Error'); @@ -171,9 +185,38 @@ Loader.prototype = { // Render a JSON object into HTML renderCard: function(index, post) { - console.log(index); - console.log(post); - jQuery( this.postContainer ).append( post ); + // Card components + var card, cardBody, cardContainer, cardFooter; // Structural components + + // Card outer element. + card = document.createElement( 'div' ); + jQuery( card ) + .addClass( 'no-padding-left-mobile col-xs-12 col-xs-B-6 col-sm-6 col-md-4 col-lg-4' ); + + // Card inner element. + cardBody = document.createElement( 'div' ); + jQuery( cardBody ) + .addClass( 'flex-item blueTop eventsBox' ) + .attr( 'onClick', 'location.href="' + post.link + '"' ); + + // Card container + cardContainer = document.createElement( 'div' ); + jQuery( cardContainer ) + .addClass( 'interiorCardContainer' ); + + // Card footer + cardFooter = document.createElement( 'div' ); + jQuery( cardFooter ) + .addClass( 'category-post' ); + + // Assemble pieces. + jQuery( card ).append( cardBody ); + + jQuery( cardBody ).append( cardContainer ); + jQuery( cardBody ).append( cardFooter ); + + jQuery( this.postcontainer ).append( card ); + }, // Container getter and setter From 2ec5af864fb299b1255ca02b05cb21bc0c2db1dd Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Thu, 22 Sep 2016 15:56:09 -0400 Subject: [PATCH 2/3] Add title and link to rendered cards Signed-off-by: Matt Bernhardt --- functions.php | 28 ++++++++++++++++++++++++++++ js/src/mitlibnews.loader.js | 23 +++++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/functions.php b/functions.php index abef27d..54ebb14 100644 --- a/functions.php +++ b/functions.php @@ -585,3 +585,31 @@ function mitlibnews_cardargs_metaquery_item( $key, $compare, $value, $type ) { 'type' => $type, ); } + +/** + * Register custom fields to appear in the API + */ +function mitlibnews_register_fields() { + register_rest_field( 'post', + 'external_link', + array( + 'get_callback' => 'mitlibnews_get_link', + 'update_callback' => null, + 'schema' => null, + ) + ); +} +add_action( 'rest_api_init', 'mitlibnews_register_fields' ); + +/** + * Get the value of the "external_link" field + * + * @param array $object Details of current post. + * @param string $field_name Name of field. + * @param WP_REST_Request $request Current request. + * + * @return mixed + */ +function mitlibnews_get_link( $object, $field_name, $request ) { + return get_post_meta( $object['id'], $field_name, true ); +} diff --git a/js/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index 796a21a..dd0d17f 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -187,6 +187,7 @@ Loader.prototype = { renderCard: function(index, post) { // Card components var card, cardBody, cardContainer, cardFooter; // Structural components + var cardTitle, cardLink; // Content components // Card outer element. card = document.createElement( 'div' ); @@ -209,12 +210,34 @@ Loader.prototype = { jQuery( cardFooter ) .addClass( 'category-post' ); + // Card title + cardTitle = document.createElement( 'h2' ); + jQuery( cardTitle ) + .addClass( 'entry-title title-post '); + if ( 'spotlights' === post.type ) { + jQuery( cardTitle ).addClass( 'spotlights' ); + } else { + jQuery( cardTitle ).addClass( 'classCheck' ); + } + + // Card link + cardLink = document.createElement( 'a' ); + if ( 'spotlights' === post.type ) { + jQuery( cardLink ).attr( 'href', post.external_link ); + } else { + jQuery( cardLink ).attr( 'href', post.link ); + } + jQuery( cardLink ).html( post.title.rendered ); + // Assemble pieces. jQuery( card ).append( cardBody ); jQuery( cardBody ).append( cardContainer ); jQuery( cardBody ).append( cardFooter ); + jQuery( cardContainer ).append( cardTitle ); + jQuery( cardTitle ).append( cardLink ); + jQuery( this.postcontainer ).append( card ); }, From e2ea3d6515309022af1606f5100ae88683372f8f Mon Sep 17 00:00:00 2001 From: Matt Bernhardt Date: Thu, 22 Sep 2016 17:08:30 -0400 Subject: [PATCH 3/3] Adds images to rendered cards Signed-off-by: Matt Bernhardt --- functions.php | 59 +++++++++++++++++++++++++++++++++++-- js/src/mitlibnews.loader.js | 59 ++++++++++++++++++++++++++----------- 2 files changed, 99 insertions(+), 19 deletions(-) diff --git a/functions.php b/functions.php index 54ebb14..317180b 100644 --- a/functions.php +++ b/functions.php @@ -593,7 +593,47 @@ function mitlibnews_register_fields() { register_rest_field( 'post', 'external_link', array( - 'get_callback' => 'mitlibnews_get_link', + 'get_callback' => 'mitlibnews_get_field', + 'update_callback' => null, + 'schema' => null, + ) + ); + register_rest_field( 'post', + 'is_event', + array( + 'get_callback' => 'mitlibnews_get_field', + 'update_callback' => null, + 'schema' => null, + ) + ); + register_rest_field( 'post', + 'listImg', + array( + 'get_callback' => 'mitlibnews_get_image', + 'update_callback' => null, + 'schema' => null, + ) + ); + register_rest_field( 'post', + 'event_date', + array( + 'get_callback' => 'mitlibnews_get_field', + 'update_callback' => null, + 'schema' => null, + ) + ); + register_rest_field( 'post', + 'event_start_time', + array( + 'get_callback' => 'mitlibnews_get_field', + 'update_callback' => null, + 'schema' => null, + ) + ); + register_rest_field( 'post', + 'event_end_time', + array( + 'get_callback' => 'mitlibnews_get_field', 'update_callback' => null, 'schema' => null, ) @@ -610,6 +650,21 @@ function mitlibnews_register_fields() { * * @return mixed */ -function mitlibnews_get_link( $object, $field_name, $request ) { +function mitlibnews_get_field( $object, $field_name, $request ) { return get_post_meta( $object['id'], $field_name, true ); } + +/** + * Get the value of the "external_link" field + * + * @param array $object Details of current post. + * @param string $field_name Name of field. + * @param WP_REST_Request $request Current request. + * + * @return mixed + */ +function mitlibnews_get_image( $object, $field_name, $request ) { + $image = json_decode( get_post_meta( $object['id'], $field_name, true ) ); + $link = wp_get_attachment_image_src( $image->{'cropped_image'}, 'thumbnail-size' ); + return $link; +} diff --git a/js/src/mitlibnews.loader.js b/js/src/mitlibnews.loader.js index dd0d17f..837e7c2 100644 --- a/js/src/mitlibnews.loader.js +++ b/js/src/mitlibnews.loader.js @@ -187,7 +187,7 @@ Loader.prototype = { renderCard: function(index, post) { // Card components var card, cardBody, cardContainer, cardFooter; // Structural components - var cardTitle, cardLink; // Content components + var cardTitle, cardLink, cardImage; // Content components // Card outer element. card = document.createElement( 'div' ); @@ -210,24 +210,24 @@ Loader.prototype = { jQuery( cardFooter ) .addClass( 'category-post' ); - // Card title - cardTitle = document.createElement( 'h2' ); - jQuery( cardTitle ) - .addClass( 'entry-title title-post '); - if ( 'spotlights' === post.type ) { - jQuery( cardTitle ).addClass( 'spotlights' ); + // Card image + if ( post.listImg ) { + // Image has been declared + jQuery( cardBody ).addClass( 'has-image' ); + cardImage = document.createElement( 'img' ); + jQuery( cardImage ) + .attr( 'src', post.listImg[0] ) + .attr( 'width', post.listImg[1] ) + .attr( 'height', post.listImg[2] ) + .attr( 'alt', post.title.rendered ); } else { - jQuery( cardTitle ).addClass( 'classCheck' ); - } + // No image, so use blue border + jQuery( cardBody ).addClass( 'no-image' ); - // Card link - cardLink = document.createElement( 'a' ); - if ( 'spotlights' === post.type ) { - jQuery( cardLink ).attr( 'href', post.external_link ); - } else { - jQuery( cardLink ).attr( 'href', post.link ); } - jQuery( cardLink ).html( post.title.rendered ); + + // Card title + cardTitle = this.renderCardTitle( post ); // Assemble pieces. jQuery( card ).append( cardBody ); @@ -235,13 +235,38 @@ Loader.prototype = { jQuery( cardBody ).append( cardContainer ); jQuery( cardBody ).append( cardFooter ); + if ( post.listImg ) { + jQuery( cardContainer ).append( cardImage ); + } jQuery( cardContainer ).append( cardTitle ); - jQuery( cardTitle ).append( cardLink ); jQuery( this.postcontainer ).append( card ); }, + renderCardTitle : function( post ) { + // First create the header element + var title = document.createElement( 'h2' ); + jQuery( title ) + .addClass( 'entry-title title-post' ); + if ( 'spotlights' === post.type ) { + jQuery( title ).addClass( 'spotlights' ); + } else { + jQuery( title ).addClass( 'classCheck' ); + } + // Second create link + var link = document.createElement( 'a' ); + if ( 'spotlights' === post.type ) { + jQuery( link ).attr( 'href', post.external_link ); + } else { + jQuery( link ).attr( 'href', post.link ); + } + jQuery( link ).html( post.title.rendered ); + // Finally nest the two, and return + jQuery (title ).append( link ); + return title; + }, + // Container getter and setter getContainer : function() { return this.container;