Last active
August 29, 2015 14:11
-
-
Save jer0dh/864c5e7bf1b53c9e1ef1 to your computer and use it in GitHub Desktop.
grid creation with filter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* jhGrid.js | |
by jerod hammerstein | |
jhtechservices.com | |
Used to create a grid structure out of a listing of WordPress posts using the display_posts_shortcode by Bill Erickson | |
It also will look for an element with a comma-delimited list of filters or tags in each post and using those | |
fill in a dropdown box that will filter the list based on its selection. | |
With the following Filter Hook, I was able to make this list contain an element with a comma-delimited list of the | |
tags a post has. (Modified version of Bill Erickson's https://gist.github.com/billerickson/1175575#file_display_posts_shortcode_output.php) | |
add_filter( 'display_posts_shortcode_output', 'jh_display_posts', 10, 7 ); | |
function jh_display_posts( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper ) { | |
$posttags = get_the_tags(); | |
$tagsAsString = ''; | |
if ($posttags) { | |
foreach($posttags as $tag) { | |
$tagsAsString .= $tag->name . ','; | |
} | |
} | |
// rebuild the output | |
$output = '<' . $inner_wrapper . ' class="listing-item">' . $image . $title . $date . $excerpt . '<span class="tags">' . $tagsAsString . '</span>' . '</' . $inner_wrapper . '>'; | |
// return the modified output | |
return $output; | |
} | |
*/ | |
(function( $ ) { | |
this.jhGrid = function( options ) { | |
var settings = $.extend({ | |
rootClass: 'display-posts-listing', | |
itemClass: 'listing-item', | |
numColumns: 2, | |
filter: true, | |
firstColumnClass: 'first', | |
columnClass: 'one-half', | |
filterClass: 'tags', | |
formId: 'filterForm', | |
formAllString: "All" | |
}, options) | |
$('document').ready(function () { | |
// function to add appropriate classes to items in order to be in grid | |
var addClasses = function(index, item) { | |
$item = $(item); | |
$item.removeClass(settings.columnClass+' '+settings.firstColumnClass); | |
$item.addClass(settings.columnClass); | |
if ( (index % settings.numColumns) == 0) { | |
$item.addClass(settings.firstColumnClass); | |
} | |
}; | |
// Find all items, take listed tags, add tags as data, remove tags from view, create array of unique tags to filter with | |
var $allListingItems = $('.'+settings.rootClass+' .'+settings.itemClass); //s | |
var $listContainer = $('.'+settings.rootClass); | |
var allFilters = ''; | |
$allListingItems.each(function (index) { | |
var $filters = $(this).find('.'+settings.filterClass); | |
var filters = $filters.text(); | |
allFilters += filters; | |
$(this).attr('data-filters', filters); | |
$filters.remove(); | |
} | |
); | |
//Add classes for grid | |
$allListingItems.each(addClasses); | |
// Create an array to fill dropdown with | |
allFilters = allFilters.replace(/,s*$/, ''); //remove trailing comma or whitespace | |
var allFiltersArray = allFilters.split(',').filter(onlyUnique); //split string into array and then remove duplicates | |
allFiltersArray.sort(); | |
// Find form and add filter array, bind event to filter list based on filters | |
var $form = $('#'+settings.formId); | |
$form.append('<select><option value="'+settings.formAllString+'">'+settings.formAllString+'</option></select>'); | |
for (i = 0, len = allFiltersArray.length; i < len; ++i) { | |
$form.find('select').append('<option value = "' + allFiltersArray[i] + '">' + allFiltersArray[i] + '</option>'); | |
} | |
$form.on('change', 'select', function (e) { | |
e.preventDefault(); | |
var selectedFilter = this.value; | |
if (selectedFilter == settings.formAllString) { | |
$listContainer.find('.'+settings.itemClass).detach(); | |
$allListingItems.each(addClasses); | |
$listContainer.append($allListingItems); | |
} else { | |
var filteredListingItems = $allListingItems.map(function (index, item) { | |
var filters = $(item).attr('data-filters'); | |
if (typeof filters == "string" && filters.indexOf(selectedFilter) >= 0) { | |
return item; | |
} | |
}); | |
$listContainer.find('.'+settings.itemClass).detach(); | |
filteredListingItems.each(addClasses); | |
$listContainer.append(filteredListingItems); | |
} | |
}); | |
function onlyUnique(value, index, self) { | |
return self.indexOf(value) === index; | |
} | |
}); | |
} | |
})(jQuery); | |
jhGrid({ | |
numColumns:3, columnClass:'one-third' | |
}); | |
/* This code below was used to center the titles on the grid above | |
<script> | |
.listing-item { | |
text-align: center; | |
padding-top: 0.5em; | |
} | |
.listing-item img { | |
width: 100%; | |
height: auto; | |
zoom: 1; | |
filter: alpha(opacity=50); | |
opacity: 0.5; | |
} | |
.listing-item { | |
position: relative; | |
} | |
.listing-item a.title { | |
position: absolute; | |
top: 50%; | |
left: 22px; | |
width: 229px; | |
z-index: 1; | |
text-shadow: 2px 1px 0 #ccc, | |
2px 2px 0 #c9c9c9, | |
2px 3px 0 #bbb, | |
2px 4px 0 #b9b9b9, | |
2px 5px 0 #aaa, | |
2px 6px 1px rgba(0,0,0,.1), | |
2px 0 5px rgba(0,0,0,.1), | |
2px 1px 3px rgba(0,0,0,.3), | |
2px 3px 5px rgba(0,0,0,.2), | |
2px 5px 10px rgba(0,0,0,.25); | |
font-family: Impact, Charcoal, sans-serif; | |
font-weight: 700; | |
font-size: 28px; | |
letter-spacing: 1px; | |
line-height: normal; | |
word-wrap: break-word; | |
} | |
.listing-item.first a.title { | |
width: 100%; | |
left: 0px; | |
} | |
.listing-item a.title:hover { | |
font-size: 30px; | |
text-decoration: none; | |
} | |
</script> | |
*/ | |
/** | |
* Created by jerod on 1/8/2015. | |
* | |
* $(window).load() was used after discovering Chrome and IE didn't work..parentHeight was 0.5 or -0.5 | |
* So window.load makes sure all images (sub-elements) are loaded before running. | |
* Originally the code detached the list from the DOM before manipulating but discovered that the computed | |
* heights became 0. | |
*/ | |
(function($) { | |
$(window).load(function () { | |
var settings = { | |
title: "a.title", | |
container: ".listing-item" | |
}; | |
var $items = $(settings.container + " " + settings.title); | |
$items.each(function (index) { | |
var $title = $(this); | |
var $parent = $title.parent(); | |
var parentHeight = $parent.height(); | |
var titleHeight = $title.height(); | |
var newTitleHeight = Math.floor(parentHeight / 2 - titleHeight / 2); | |
$title.css('top', newTitleHeight.toString() + "px"); | |
}); | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment