From b9219a152498f7f52c3c3da95dc533c843db5d93 Mon Sep 17 00:00:00 2001 From: briandunnigan Date: Wed, 20 May 2015 11:34:53 -0400 Subject: [PATCH] Update to the Archive -Fixing left bar pagination -Adding 10 stories to right pane -Adding pagination to right pane -Styling new multi-story view --- js/custom.js | 79 +++++++---- page-news-archive.php | 322 +++++++++++++++++++++--------------------- style.css | 71 ++++++++-- 3 files changed, 276 insertions(+), 196 deletions(-) diff --git a/js/custom.js b/js/custom.js index 9511080..b6a4c85 100644 --- a/js/custom.js +++ b/js/custom.js @@ -100,7 +100,31 @@ jQuery(document).ready(function($) { String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }; - + + String.prototype.slugToClean = function(){ + var str = this.toString(); + str = str.toLowerCase().replace(/(-)/g, ' ').replace(/\b[a-z]/g, function(letter) { + return letter.toUpperCase(); + }); + return str; + }; + + String.prototype.decodeEntities = function(){ + var element = document.createElement('div'); //this prevents any overhead from creating the object each time + + var str = this.toString(); + if(str && typeof str === 'string') { + // strip script/html tags + str = str.replace(/]*>([\S\s]*?)<\/script>/gmi, ''); + str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); + element.innerHTML = str; + str = element.textContent; + element.textContent = ''; + } + + return str; + }; + function retrievePreviousIDs(startingElement){ var postsArray = []; var currentPost = startingElement; @@ -159,7 +183,7 @@ jQuery(document).ready(function($) { for(var post in response){ var current = response[post]; var id = current.id; - var title = current.title; + var title = (current.title).decodeEntities(); var slug = current.slug; var link = current.link; var excerpt = current.excerpt; @@ -169,6 +193,7 @@ jQuery(document).ready(function($) { if( current.date != false ){ var article = $('
',{ 'data-id': id, + 'class': 'article-block clearfix' }); var header = $('
',{ @@ -202,7 +227,7 @@ jQuery(document).ready(function($) { }).appendTo(article); if( excerpt.length > 7 ){ // by default excerpt comes with

, whose lenght is 7 - var readMore = '

Read More

'; + var readMore = '

Read More »

'; excerpt += readMore; divContent.html(excerpt); } @@ -211,17 +236,17 @@ jQuery(document).ready(function($) { } } var span = $('
',{ - 'class': 'story-navigation', + 'class': 'story-navigation clearfix', }).appendTo( $(".span8.follow-hero") ); $('',{ 'id': 'newerStories', 'data-id': firstID, - 'text': 'Newer Stories' + 'text': 'Newer Stories »' }).appendTo(span); $('',{ 'id': 'olderStories', 'data-id': lastID, - 'text': 'Older Stories' + 'text': '« Older Stories' }).appendTo(span); storyNavCheck(); }, @@ -274,9 +299,7 @@ jQuery(document).ready(function($) { var urlQuery = state.url.substring(state.url.indexOf('?division')); var divisionSlug = urlQuery.substring(10); //length of "?divison/" is 10 - var divisionTitle = divisionSlug.toLowerCase().replace(/(-)/g, ' ').replace(/\b[a-z]/g, function(letter) { - return letter.toUpperCase(); - }); + var divisionTitle = divisionSlug.slugToClean(); $.ajax({ type: "POST", @@ -292,13 +315,9 @@ jQuery(document).ready(function($) { }); } else if( (index = state.url.indexOf('?category/')) !== -1 || (index = state.url.indexOf('?tag/')) !== -1 ) { var urlQuery = state.url.substring(index+1); - var taxonomyType = urlQuery.substring(0,urlQuery.indexOf('/')); - var taxonomyName = urlQuery.substring(urlQuery.indexOf('/')+1); + var taxonomyType = urlQuery.substring( 0,urlQuery.indexOf('/') ); + var taxonomyName = urlQuery.substring( urlQuery.indexOf('/')+1 ); - var taxonomyTypeCapitalized = taxonomyType.toLowerCase().replace(/(-)/g, ' ').replace(/\b[a-z]/g, function(letter) { - return letter.toUpperCase(); - }); - var taxonomyNameCapitalized = taxonomyName.capitalize(); $.ajax({ type: "POST", url: clas_object.ajaxurl, @@ -308,6 +327,7 @@ jQuery(document).ready(function($) { taxonomyName: taxonomyName }, success: function(response){ + var taxonomyID = response; $.ajax({ type: "POST", @@ -318,13 +338,22 @@ jQuery(document).ready(function($) { value: taxonomyID }, success: function(response){ - renderStoriesList(response, taxonomyTypeCapitalized, taxonomyNameCapitalized); + var arr = taxonomyName.split('-'); + var taxonomyNameCapitalized = ""; + for (var i in arr){ + var current = arr[i].capitalize(); + if( !(i == 0) ){ + taxonomyNameCapitalized += " "; + } + taxonomyNameCapitalized += current; + } + renderStoriesList(response, taxonomyType.capitalize(), taxonomyNameCapitalized); }, dataType: "json" }); }, dataType: "json" - }); + }); } }); @@ -341,11 +370,11 @@ jQuery(document).ready(function($) { var postIDs = retrievePostIDs( $(this) ); renderPosts(postIDs); - - var postTitle = $(this).data('slug'); - var postLink = this.children[0].href; - History.pushState(postIDs, postTitle, "?post/"+postTitle); + var postSlug = $(this).data('slug'); + var postTitle = postSlug.slugToClean(); + var postLink = this.children[0].href; + History.pushState(postIDs, postTitle, "?post/"+postSlug); }); $('div.news-tags a').click(function(event){ @@ -354,7 +383,7 @@ jQuery(document).ready(function($) { window.location.href = clas_object.siteurl+'/news-archive'; return false; } - var tagTitle = this.text; + var tagTitle = this.text.slugToClean(); var tag = this.className; $.ajax({ type: "POST", @@ -382,9 +411,7 @@ jQuery(document).ready(function($) { $('select.category').find("option:eq(0)").prop("selected", true); } taxonomyName = this.options[this.selectedIndex].text; - var taxonomyTitle = taxonomyName.toLowerCase().replace(/\b[a-z]/g, function(letter) { - return letter.toUpperCase(); - }); + var taxonomyTitle = taxonomyName.slugToClean(); var taxonomySlug = taxonomyName.toLowerCase().replace(/(\s)/g, '-'); taxonomyCapitalized = taxonomy.capitalize(); @@ -474,10 +501,12 @@ jQuery(document).ready(function($) { startingElement = element.next(); postsArray = retrievePostIDs(startingElement); $('#news-next').trigger('click'); + $('html, body').animate({ scrollTop: 0 }, 'fast'); } else if( this.id == 'newerStories' ){ startingElement = element.prev(); postsArray = retrievePreviousIDs(startingElement); $('#news-back').trigger('click'); + $('html, body').animate({ scrollTop: 0 }, 'fast'); } if( postsArray != null ){ renderPosts( postsArray ); diff --git a/page-news-archive.php b/page-news-archive.php index f0baafe..ac0bf97 100644 --- a/page-news-archive.php +++ b/page-news-archive.php @@ -1,161 +1,163 @@ - - -
-
- - - -
-

Archive

-
- -
- -
- - -
- -

Sort By Division

-
- - - -

Sort By Category

-
- 'All Categories', - 'orderby' => 'NAME', - 'taxonomy' => 'category', - 'hide_empty' => 1, - 'name' => 'news-sort-cat', - 'exclude' => '149,10', - 'class' => 'news-archive-dropdown category' - ); - wp_dropdown_categories( $args ); - ?> -
- - -

Sort By Tag

-
- 'All Tags', - 'orderby' => 'NAME', - 'taxonomy' => 'post_tag', - 'hide_empty' => 1, - 'name' => 'news-sort-tag', - 'class' => 'news-archive-dropdown tag' - ); - wp_dropdown_categories( $args ); - ?> -
- - -

Sort By Date

-
- Newest - Oldest -
- - - -
- -
-

News Stories

-
    - -1, 'category_name' => 'archive' ); - $myposts = get_posts( $args ); - for ($i=0; $i < 9; $i++) { - next($myposts); - } - $tenthPostID = current($myposts)->ID; - $firstPostID = reset($myposts)->ID; - foreach ( $myposts as $post ) : setup_postdata( $post ); - ?> -
  • - -
  • - - - -
- -
-
- - 10, 'orderby' => 'post-date', 'category_name' => 'archive'); - $latestpost = get_posts( $args ); - - ?> - - - - - -
- - - - -
- - - + + +
+
+ + + +
+

Archive

+
+ +
+ +
+ + +
+ +

Sort By Division

+ + + + +

Sort By Category

+
+ 'All Categories', + 'orderby' => 'NAME', + 'taxonomy' => 'category', + 'hide_empty' => 1, + 'name' => 'news-sort-cat', + 'exclude' => '149,10', + 'class' => 'news-archive-dropdown category' + ); + wp_dropdown_categories( $args ); + ?> +
+ + +

Sort By Tag

+
+ 'All Tags', + 'orderby' => 'NAME', + 'taxonomy' => 'post_tag', + 'hide_empty' => 1, + 'name' => 'news-sort-tag', + 'class' => 'news-archive-dropdown tag' + ); + wp_dropdown_categories( $args ); + ?> +
+ + +

Sort By Date

+
+ Newest + Oldest +
+ + + +
+ +
+

News Stories

+
    + -1, 'category_name' => 'archive' ); + $myposts = get_posts( $args ); + for ($i=0; $i < 9; $i++) { + next($myposts); + } + $tenthPostID = current($myposts)->ID; + $firstPostID = reset($myposts)->ID; + foreach ( $myposts as $post ) : setup_postdata( $post ); + ?> +
  • + +
  • + + + +
+ +
+
+ + 10, 'orderby' => 'post-date', 'category_name' => 'archive'); + $latestpost = get_posts( $args ); + + ?> + + + + + +
+ + + + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css index f717f6f..49cbb6e 100644 --- a/style.css +++ b/style.css @@ -1256,8 +1256,9 @@ ul.news-archive-list li { .clas-post-date { - font-style:italic; - margin-bottom:10px; + color: #888; + font-style: italic; + margin-bottom: 15px; } .clas-entry-thumbnail img { @@ -1272,7 +1273,7 @@ ul.news-archive-list li { } .clas-taxonomy-type { - background-color: #eee; + /*background-color: #eee; color: #333; font-size: 10px; margin-bottom: 5px; @@ -1280,23 +1281,71 @@ ul.news-archive-list li { padding: 5px 9px; text-decoration: none; white-space: nowrap; - text-transform:capitalize; + text-transform:capitalize;*/ + display:none; } .clas-taxonomy-name { - background-color: #ddd; - color: #333; - font-size: 10px; - margin-bottom: 5px; - margin-right: 5px; - padding: 5px 9px; + color: #888; + font-size: 40px; + display:block; + width:100%; + border-bottom:1px solid #ccc; + margin-bottom: 10px; + padding-bottom: 8px; text-decoration: none; - white-space: nowrap; + line-height:1.1em; text-transform:capitalize; + font-weight:bold; +} + +.article-block { + border-bottom: 1px solid #eee; + padding-bottom: 10px; +} + +.archive-thumbnail { + float:left; + padding-right:20px; + padding-bottom:10px; +} + +.story-navigation { + margin-bottom: 5px; + margin-top: 15px; } + #olderStories { + float:left; + } + #newerStories { + float:right; + } +.pagination ul { + box-shadow:none; +} + + .pagination-mini ul > li:first-child > a, .pagination-small ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > span { + border-radius:0; + } + .pagination-mini ul > li:last-child > a, .pagination-small ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > span { + border-radius:0; + } + +.pagination ul > li > a, .pagination ul > li > span { + border:1px solid #ccc; + padding:4px 11px; + margin:1px; +} + + +#news-archive-search { + width: 188px; +} + + .no-hero { margin-top:60px;