Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
49b39e69 by Jeff Balicki
Options

resources 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent b83ad077
Inline Side-by-side
Showing 9 changed files with 206 additions and 148 deletions
......@@ -56,7 +56,7 @@ function course_card($id){
$categories = get_the_terms( $id, 'ld_course_category' );
$cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
<div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<div data-name="<?php echo $post->post_name; ?>" data-ticks="<?php echo get_post_time('U',false, $id ); ?>" class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses">
<div class="card">
<div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
......
......@@ -25,11 +25,11 @@ function resources_list(){
<div class="category-filter-group">
<?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 17) );
foreach($terms as $term){ ?>
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value="<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<?php }; ?>
<?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 22) );
foreach($terms as $term){ ?>
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value="<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<?php }; ?>
</div>
<div class="btn-group sort-button-group align-self-end">
......@@ -63,8 +63,8 @@ function resources($id){
foreach( $categories as $category ) { $cat .= " ".$category->slug; };
} ?>
<div class="table-like__item element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<a role="button" href="<?php echo get_permalink($id); ?>"><?php echo $post->post_title; ?></a><br>
<div data-ticks="<?php echo get_post_time('U',false, $id ); ?>" class="table-like__item element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<a role="button" href="<?php echo get_permalink($id); ?>"><span class="name"><?php echo $post->post_title; ?></span></a><br>
<?php echo wp_get_attachment_caption($id) ?>
</div>
<?php
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
if(!$('.grid.course').length){
return false;
}
var qsRegex;
if($('.grid').length){
//course list Isotope setup
// quick search regex
var qsRegex;
if($('.grid.course').length){
// init Isotope
var $grid = $('.grid.course').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
coursename: '[data-name]',
date: '[data-ticks]',
},
filter: function() {
......@@ -29,123 +23,6 @@ if($('.grid.course').length){
return filterText && buttonResult;
}
});
}
if($('.grid.resources').length){
var $grid = $('.grid.resources').isotope({
itemSelector: '.element-item',
layoutMode: 'vertical',
getSortData: {
coursename: '.name',
date: '[data-ticks]',
},
filter: function() {
var $this = $(this);
var filterText = qsRegex ? $(this).text().match( qsRegex ) : true;
var buttonResult = filterValue ? $this.is( filterValue ) : true;
return filterText && buttonResult;
}
});
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var itemSelector = '.element-item';
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAtribute = 'data-filter';
var pageAtribute = 'data-page';
var pagerClass = 'isotope-pager';
setPagination();
goToPage(1);
var responsiveIsotope = [
[480, 4],
[720, 6]
];
}
function changeFilter(selector) {
$grid.isotope({
filter: selector
});
}
function getFilterSelector() {
var selector = itemSelector;
if (currentFilter != '*') {
selector += `[${filterAtribute}~="${currentFilter}"]`
}
return selector;
}
function goToPage(n) {
currentPage = n;
var selector = getFilterSelector();
selector += `[${pageAtribute}="${currentPage}"]`;
changeFilter(selector);
}
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $grid.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = getFilterSelector();
$grid.children(selector).each(function(){
if( item > itemsPerPage ) {
page++;
item = 1;
}
$(this).attr(pageAtribute, page);
item++;
});
currentNumberPages = page;
}();
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAtribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
$grid.after($isotopePager);
}();
}
......@@ -155,12 +32,9 @@ var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
updateFilterCounts();
if($('.grid.resources').length){
setPagination();
goToPage(1);
}
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
......@@ -204,12 +78,23 @@ $('.sort-button-group').on( 'click', 'button', function() {
var direction = $(this).attr('data-sort-direction');
var isAscending = (direction == 'asc');
var newDirection = (isAscending) ? 'desc' : 'asc';
console.log(sortValue);
console.log(isAscending);
$grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
updateFilterCounts();
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
$(document).on("click", "#filter-more", function(e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
......@@ -249,7 +134,7 @@ function updateFilterCounts() {
}
if($('.grid.course').length){
//****************************
// Isotope Load more button
......@@ -306,14 +191,8 @@ if($('.grid.course').length){
loadMore(counter);
});
$(document).on("click", "#filter-more", function(e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
}
}
});
......
jQuery( document ).ready(function($) {
if(!$('.grid.resources').length){
return;
}
var itemSelector = ".element-item";
var $checkboxes = $('.category-filter input');
var $container = $('.grid').isotope({ itemSelector: itemSelector,
getSortData: {
coursename: '.name',
date: '[data-ticks]',
} });
//Ascending order
var responsiveIsotope = [ [480, 4] , [720, 6] ];
var itemsPerPageDefault = 20;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
var wordPage;
// update items based on current filters
function changeFilter(selector) { $container.isotope({ filter: selector }); }
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function (i, elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function (i, elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function(){
// increment page if a new one is needed
if( item > itemsPerPage ) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length-1];
// last class shorter than 4 will be a page number, if so, grab and replace
if(lastClass.length < 4){
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number, add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function(){clearAll()});
$('.sort-button-group').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
var direction = $(this).attr('data-sort-direction');
var isAscending = (direction == 'asc');
var newDirection = (isAscending) ? 'desc' : 'asc';
$container.isotope({ sortBy: sortValue, sortAscending: isAscending });
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
setPagination();
goToPage(1);
});
$(document).on("click", "#filter-more", function(e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
});
\ No newline at end of file
import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
jQueryBridget( 'isotope', Isotope, $ );
// Add your custom JS here.
import "./_carousels";
import "./jssocials.min";
import "./_course_list"
import "./_course_list";
import "./_resources_list";
var a = document.querySelector('.blur-image');
......