Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
f379d0bf by Jeff Balicki
Options

resources data tables 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 49b39e69
Inline Side-by-side
Showing 16 changed files with 237 additions and 152 deletions
......@@ -15291,6 +15291,7 @@ label[for=quicksearch] {
flex-direction: row;
}
.category-type,
.category-filter {
display: flex;
flex-direction: row;
......@@ -15300,6 +15301,7 @@ label[for=quicksearch] {
margin: 0.25rem 0;
margin-right: 1rem;
}
.category-type label,
.category-filter label {
padding-left: 30px;
padding-right: 10px;
......@@ -15307,14 +15309,17 @@ label[for=quicksearch] {
cursor: pointer;
color: #2C2C2C;
}
.category-type input[type=checkbox],
.category-filter input[type=checkbox] {
display: inline-block;
margin-left: 30px;
margin-left: 0;
}
.category-type input[type=checkbox]:focus + label,
.category-filter input[type=checkbox]:focus + label {
outline: -webkit-focus-ring-color auto 1px;
}
.category-type label:before,
.category-filter label:before {
content: "";
cursor: pointer;
......@@ -15328,6 +15333,7 @@ label[for=quicksearch] {
border: 2px solid #0081BC;
border-radius: 4px;
}
.category-type input:checked + label:before,
.category-filter input:checked + label:before {
background: #0081BC !important;
border: 2px solid #0081BC;
......@@ -15341,6 +15347,7 @@ label[for=quicksearch] {
position: absolute;
cursor: pointer;
}
.category-type input[type=checkbox],
.category-filter input[type=checkbox] {
background-color: initial;
cursor: default;
......@@ -15353,6 +15360,7 @@ label[for=quicksearch] {
border: initial;
position: relative;
}
.category-type .sr-only,
.category-filter .sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
......@@ -15577,6 +15585,19 @@ label[for=quicksearch] {
border-bottom: 22px solid #E04E39;
}
#dataTables_length,
#resources_filter,
#resources_length {
display: none !important;
visibility: hidden !important;
}
th.hidden,
td.hidden {
display: none !important;
visibility: hidden !important;
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
......
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.
......@@ -29,21 +29,23 @@ function resources_list(){
<?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-type"> <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">
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="1" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="3" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
</div>
</div>
</div>
<div class="grid resources">
<table id="resources">
<thead><tr><th class="hidden"></th><th class="hidden"></th><th></th><th class="hidden"></th></tr></thead>
<tbody>
<?php while ($custom_query->have_posts()): $custom_query->the_post();
echo resources(get_the_ID());
echo resources(get_the_ID());
endwhile; ?>
</div>
</tbody>
</table>
</div>
<?php endif;
wp_reset_query();
......@@ -58,15 +60,27 @@ function resources($id){
ob_start();
$post = get_post($id);
$categories = get_the_terms( $id, 'media-category' );
$cat ="";
$cat ="";
$type ="";
if(is_array( $categories)){
foreach( $categories as $category ) { $cat .= " ".$category->slug; };
foreach( $categories as $category ) {
if($category->parent == 17){
$cat .= " ".$category->slug;
}
if($category->parent == 22){
$type .= " ".$category->slug;
}
};
} ?>
<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>
<tr class="table-like__item">
<td class="hidden"> <?php echo $type; ?></td>
<td><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>
</td>
<td class="hidden"> <?php echo $cat; ?></td>
<td class="hidden"><?php echo get_post_time('U',false, $id ); ?></td>
</tr>
<?php
$output = ob_get_clean();
return $output;
......
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.
......@@ -1989,6 +1989,118 @@
"css-tree": "^1.1.2"
}
},
"datatables.net": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.2.tgz",
"integrity": "sha512-u5nOU+C9SBp1SyPmd6G+niozZtrBwo1E8xzdOk3JJaAkFYgX/KxF3Gd79R8YLbUfmIs2OLnLe5gaz/qs5U8UDA==",
"requires": {
"jquery": ">=1.7"
}
},
"datatables.net-bs5": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/datatables.net-bs5/-/datatables.net-bs5-1.13.2.tgz",
"integrity": "sha512-p1JOXFi+VD4wS0AxRmJPHBylJ8AC4xGJ3j0TZ+8hMspuZ+QvAhEqEPt8OEAGVzlN1ElfQimZjBeAoES/9nsuig==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-buttons": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/datatables.net-buttons/-/datatables.net-buttons-2.3.4.tgz",
"integrity": "sha512-1fe/aiKBdKbwJ5j0OobP2dzhbg/alGOphnTfLFGaqlP5yVxDCfcZ9EsuglYeHRJ/KnU7DZ8BgsPFiTE0tOFx8Q==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-buttons-bs5": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/datatables.net-buttons-bs5/-/datatables.net-buttons-bs5-2.3.4.tgz",
"integrity": "sha512-3pCmzcHwoow0kYH967cymeHT+IPn6+RzK+3XqUsDykIWRcjUaZR6fj+TSL7E8LCkgEI0KhwBIK1Uqa4v8YH0jg==",
"requires": {
"datatables.net-bs5": ">=1.12.1",
"datatables.net-buttons": ">=2.2.3",
"jquery": ">=1.7"
}
},
"datatables.net-responsive": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-2.4.0.tgz",
"integrity": "sha512-Acws4aEPJZX/+CQsXpuDBHfrwgl3XxWEc/zlsnJCXE/GGbqjVAtQt7SM6EBcdReMv1FbyWUlF/Uw+de11NT46A==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-responsive-bs5": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/datatables.net-responsive-bs5/-/datatables.net-responsive-bs5-2.4.0.tgz",
"integrity": "sha512-2kxigvftgVgdyH+BZ17jbR+BcWYZsacnlTt4PeOH/P98bMuqJKrziss7CLz/6qud/ehHdLEQTjMDoJddN9NfxA==",
"requires": {
"datatables.net-bs5": ">=1.12.1",
"datatables.net-responsive": ">=2.3.0",
"jquery": ">=1.7"
}
},
"datatables.net-searchbuilder": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/datatables.net-searchbuilder/-/datatables.net-searchbuilder-1.4.0.tgz",
"integrity": "sha512-I6+a5EebX6uYFlWmc7TAk1oQvlfoGZqyLgdN4H9Rm6fL5VZv6SvWQ7y2+W9ebshMD0smKdtp8pedYc8PIh80kg==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-searchbuilder-bs5": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/datatables.net-searchbuilder-bs5/-/datatables.net-searchbuilder-bs5-1.4.0.tgz",
"integrity": "sha512-wi2jT8JYwuNNaHRTKARG8x/3R3WsUNvde6avAj+r/it9py7vb1tZNNwbDge0VYtg6nzgaSk6sUWk6WsqTkZGiA==",
"requires": {
"datatables.net-bs5": ">=1.12.1",
"datatables.net-searchbuilder": ">=1.3.4",
"jquery": ">=1.7"
}
},
"datatables.net-searchpanes": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/datatables.net-searchpanes/-/datatables.net-searchpanes-2.1.1.tgz",
"integrity": "sha512-WsgnK8C/jCco9oRcpsVaImgTCiD7hk28dLHBmlpbvbIHMHCAhLPn0zVnCB3yInoNC/7kOGKpkeItpIpFHDMnhA==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-searchpanes-bs5": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/datatables.net-searchpanes-bs5/-/datatables.net-searchpanes-bs5-2.1.1.tgz",
"integrity": "sha512-sXn2waL7jNIWkspJeL7SXyhYSmPUC+6BSICjaCk8IK5FMEGm9s+Ot/txpSeoNeDEUtIxf67UElc3qI2r1OKrLQ==",
"requires": {
"datatables.net-bs5": ">=1.12.1",
"datatables.net-searchpanes": ">=2.0.2",
"jquery": ">=1.7"
}
},
"datatables.net-select": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-1.6.0.tgz",
"integrity": "sha512-1kj32GOXs/dSpjBL5iDV3pwRwHU0hhJLPnTW/NOUH8Vhv1rGR3/X3PMSCc/T+Fy7J1jCJFbk8hQDsruXQKfSzw==",
"requires": {
"datatables.net": ">=1.12.1",
"jquery": ">=1.7"
}
},
"datatables.net-select-bs5": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/datatables.net-select-bs5/-/datatables.net-select-bs5-1.6.0.tgz",
"integrity": "sha512-6vOeEqe+HmU6r4jKjgQsNfSkmUd6Ei7PyaSc6XpmWFZ4oRWu/tKoVQWd1KXRv5S6gZmlNowKXeafQYjpmHMLAg==",
"requires": {
"datatables.net-bs5": ">=1.12.1",
"datatables.net-select": ">=1.4.0",
"jquery": ">=1.7"
}
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
......
......@@ -42,6 +42,12 @@
},
"homepage": "https://understrap.com",
"dependencies": {
"datatables.net-bs5": "^1.13.2",
"datatables.net-buttons-bs5": "^2.3.4",
"datatables.net-responsive-bs5": "^2.4.0",
"datatables.net-searchbuilder-bs5": "^1.4.0",
"datatables.net-searchpanes-bs5": "^2.1.1",
"datatables.net-select-bs5": "^1.6.0",
"isotope": "^1.0.0-alpha.3",
"isotope-layout": "^3.0.6",
"jquery-bridget": "^3.0.1",
......
......@@ -2,166 +2,85 @@
jQuery( document ).ready(function($) {
if(!$('.grid.resources').length){
if(!$('#resources').length){
return;
}
var myTable = $('#resources').DataTable({
"pageLength": 16,
"searchable": false,
"paging": true,
"info": false,
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( function() {
console.log($quicksearch.val());
myTable.DataTable().column(1).search($quicksearch.val()).draw();
});
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);
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
$checkboxes.change( function() {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each( function( i, elem ) {
// if checkbox, use value if checked
if ( elem.checked ) {
inclusives.push( elem.value );
}
});
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '';
$('#resources').DataTable().column(2).search(filterValue).draw();
});
// filter with selects and checkboxes
var $typecheckboxes = $('.category-type input');
var typeFilterValue;
$typecheckboxes.change( function() {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$typecheckboxes.each( function( i, elem ) {
// if checkbox, use value if checked
if ( elem.checked ) {
inclusives.push( elem.value );
}
});
// combine inclusive filters
typeFilterValue = inclusives.length ? inclusives.join(', ') : '';
$('#resources').DataTable().column(0).search(typeFilterValue).draw();
});
$('#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 });
console.log(sortValue);
console.log(isAscending);
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
setPagination();
goToPage(1);
myTable.order([sortValue, newDirection]).draw();
});
$(document).on("click", "#filter-more", function(e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
......@@ -169,6 +88,4 @@ jQuery( document ).ready(function($) {
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";
import DataTable from 'datatables.net-bs5';
jQueryBridget( 'isotope', Isotope, $ );
......
......@@ -16,6 +16,7 @@
@import "theme/sharethis";
@import "theme/course_list";
@import "theme/course";
@import "theme/resources_list";
@import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
......
......@@ -48,6 +48,7 @@ label[for=quicksearch]{
display:flex;
flex-direction: row ;
}
.category-type,
.category-filter{
display:flex;
flex-direction: row ;
......
#dataTables_length,
#resources_filter,
#resources_length{
display: none !important;
visibility: hidden !important;
}
th.hidden,
td.hidden{
display: none !important;
visibility: hidden !important;
}
\ No newline at end of file