Merge pull request #140 from INN/125-single-project-view

Single project view

wp-content/themes/currentorg/functions.php

@@ -409,4 +409,4 @@ function largo_excerpt( $the_post = null, $sentence_count = 5, $use_more = null,
 
 		return $output;
 	}
-}
+}

wp-content/themes/currentorg/inc/shortcode-current-ltw-projects.php

@@ -86,13 +86,58 @@ function current_ltw_projects_assets() {
 	wp_register_script(
 		'current-ltw-script',
 		get_stylesheet_directory_uri() . '/js/current-ltw-projects.js',
-		array(),
+		array( 'jquery' ),
 		filemtime( get_stylesheet_directory() . '/js/current-ltw-projects.js' ),
 		true
 	);
+	wp_localize_script( 
+		'current-ltw-script', 
+		'ajax_object',
+		array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )
+	);
 }
 add_action( 'wp_enqueue_scripts', 'current_ltw_projects_assets' );
 
+/**
+ * Load a single project when it is selected from the project list
+ */
+function current_ltw_projects_load_single_project_callback() {
+
+	// make sure post id is set and actually a valid post
+    if( isset( $_GET['post_id'] ) && get_post_status( $_GET['post_id'] ) ) {
+
+		$post_id = $_GET["post_id"];
+
+		// set up basic args for our query to grab the post
+		$single_project_args = array(
+			'post_type' => 'projects',
+			'p' => abs( intval( $post_id ) )
+		);
+
+		$single_project_query = new WP_Query( $single_project_args );
+
+		if( $single_project_query->have_posts() ){
+
+			while ( $single_project_query->have_posts() ) : $single_project_query->the_post();
+
+				// show singular project with the project single template partial
+				get_template_part( 'partials/projects', 'single-held' );
+
+			endwhile;
+
+		}
+
+	} else {
+
+		echo '<p>The project could not be found.</p>';
+
+	}
+
+	wp_die();
+
+}
+add_action( 'wp_ajax_load_more_post', 'current_ltw_projects_load_single_project_callback' );
+add_action( 'wp_ajax_nopriv_load_more_post', 'current_ltw_projects_load_single_project_callback' );
 /**
  * Filter queries for the projects post type
  */

wp-content/themes/currentorg/js/current-ltw-projects.js

@@ -1 +1,54 @@
+var $ = jQuery;
+$(document).ready(function(){
 
+    current_ltw_projects_load_param_project_if_exists();
+
+    $( ".projects-list article .entry-title a" ).click(function(e){
+        e.preventDefault();
+        var post_id = $(this).data("post-id");
+        current_ltw_projects_load_single_project(post_id);
+    });
+
+});
+
+/**
+ * Function to load the single project partial for whatever project
+ * is provided.
+ * 
+ * @param int post_id The id of the project we want to load
+ */
+function current_ltw_projects_load_single_project( post_id ) {
+
+    // give a reassuring "loading" notice
+    $(".projects-single-holder").html("Loading project...");
+
+    // actually load the single project
+    $(".projects-single-holder").load(ajax_object.ajax_url+"?action=load_more_post&post_id="+post_id);
+
+    // return and let's be happy
+    return;
+
+}
+
+/**
+ * Fires on page load to check if a post_id query param is set
+ * If it is set, attemps to load the specified project by the ID given
+ */
+function current_ltw_projects_load_param_project_if_exists() {
+
+    // find all current query params
+    var get_url_params = new URLSearchParams(window.location.search);
+
+    // if the post id query param exists, let's use it
+    if(get_url_params.get('project_id') || Number.isInteger(get_url_params.get('project_id'))) {
+
+        var post_id = get_url_params.get('project_id');
+
+        // actually try and load the project
+        current_ltw_projects_load_single_project( post_id );
+
+        return;
+
+    }
+
+}

wp-content/themes/currentorg/less/current-ltw-projects.less

@@ -23,7 +23,7 @@
 		.projects-list {
 			grid-area: list;
 		}
-		.projects-single-holder {
+		.projects-single-layout {
 			grid-area: single;
 		}
 	}
@@ -44,7 +44,25 @@
 		margin-top: @common-whitespace * 0.5;
 	}
 }
-.projects-single-holder {
+.projects-single-layout {
 	border: 1px solid @grey-d;
 	padding: @common-whitespace * 0.5;
+	.projects-single-holder {
+		.entry-content {
+			iframe,
+			img {
+				max-width: 100%;
+			}
+			.project-tags {
+				margin-left: 0;
+			}
+			label {
+				font-weight: bold;
+				display: inline;
+			}
+			.project-specific-link {
+				display: block;
+			}
+		}
+	}
 }

wp-content/themes/currentorg/partials/content-projects-list-item.php

@@ -31,6 +31,7 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix projects-list-item'); ?>>
 
 	<?php
+
 		echo '<div class="' . $entry_classes . '">';
 
 		if ( largo_has_categories_or_tags() ) {
@@ -43,15 +44,15 @@
 	?>
 
 		<h2 class="entry-title">
-			<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( array( 'before' => __( 'Permalink to', 'largo' ) . ' ' ) )?>" rel="bookmark"><?php the_title(); ?></a>
+			<a href="?project_id=<?php echo get_the_ID(); ?>" title="<?php the_title_attribute( array( 'before' => __( 'Permalink to', 'largo' ) . ' ' ) )?>" rel="bookmark" data-post-id="<?php echo get_the_ID(); ?>"><?php the_title(); ?></a>
 		</h2>
 
 		<?php
 			// we may need to redo these links as search query params instead
 			$status = get_the_terms( get_the_ID(), 'project-status' );
 			$categories = get_the_terms( get_the_ID(), 'project-category' );
 			// @todo this throws errors when no terms are found for this type of post 
-			if ( is_array( $status) && is_array( $status ) ) {
+			if ( is_array( $status) && is_array( $categories ) ) {
 				$terms = array_merge( $status, $categories );
 			} else if ( is_array( $status ) ) {
 				$terms = $status;

wp-content/themes/currentorg/partials/projects-base.php

@@ -17,5 +17,4 @@
 // so we can pass $query to these
 include( locate_template( 'partials/projects-search-form.php', false, false ) );
 include( locate_template( 'partials/projects-list.php', false, false ) );
-
-get_template_part( 'partials/projects-single-holder' );
+include( locate_template( 'partials/projects-single-holder.php', false, false ) );