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){ ...@@ -56,7 +56,7 @@ function course_card($id){
56 $categories = get_the_terms( $id, 'ld_course_category' ); 56 $categories = get_the_terms( $id, 'ld_course_category' );
57 $cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?> 57 $cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
58 58
59 <div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>"> 59 <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; ?>">
60 <article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses"> 60 <article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses">
61 <div class="card"> 61 <div class="card">
62 <div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div> 62 <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(){ ...@@ -25,11 +25,11 @@ function resources_list(){
25 <div class="category-filter-group"> 25 <div class="category-filter-group">
26 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 17) ); 26 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 17) );
27 foreach($terms as $term){ ?> 27 foreach($terms as $term){ ?>
28 <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> 28 <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>
29 <?php }; ?> 29 <?php }; ?>
30 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 22) ); 30 <?php $terms = get_terms( array( 'taxonomy' => 'media-category' ,'parent' => 22) );
31 foreach($terms as $term){ ?> 31 foreach($terms as $term){ ?>
32 <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> 32 <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>
33 <?php }; ?> 33 <?php }; ?>
34 </div> 34 </div>
35 <div class="btn-group sort-button-group align-self-end"> 35 <div class="btn-group sort-button-group align-self-end">
...@@ -63,8 +63,8 @@ function resources($id){ ...@@ -63,8 +63,8 @@ function resources($id){
63 foreach( $categories as $category ) { $cat .= " ".$category->slug; }; 63 foreach( $categories as $category ) { $cat .= " ".$category->slug; };
64 } ?> 64 } ?>
65 65
66 <div class="table-like__item element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>"> 66 <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; ?>">
67 <a role="button" href="<?php echo get_permalink($id); ?>"><?php echo $post->post_title; ?></a><br> 67 <a role="button" href="<?php echo get_permalink($id); ?>"><span class="name"><?php echo $post->post_title; ?></span></a><br>
68 <?php echo wp_get_attachment_caption($id) ?> 68 <?php echo wp_get_attachment_caption($id) ?>
69 </div> 69 </div>
70 <?php 70 <?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.
1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout";
4
5 jQueryBridget( 'isotope', Isotope, $ );
6
7 jQuery( document ).ready(function($) { 1 jQuery( document ).ready(function($) {
8 2
3 if(!$('.grid.course').length){
4 return false;
5 }
9 6
7 var qsRegex;
10 8
11 if($('.grid').length){
12 9
10 //course list Isotope setup
13 11
14 // quick search regex
15 var qsRegex;
16 if($('.grid.course').length){
17 // init Isotope
18 var $grid = $('.grid.course').isotope({ 12 var $grid = $('.grid.course').isotope({
19 itemSelector: '.element-item', 13 itemSelector: '.element-item',
20 layoutMode: 'fitRows', 14 layoutMode: 'fitRows',
21 getSortData: { 15 getSortData: {
22 coursename: '.name', 16 coursename: '[data-name]',
23 date: '[data-ticks]',
24 },
25 filter: function() {
26 var $this = $(this);
27 var filterText = qsRegex ? $(this).text().match( qsRegex ) : true;
28 var buttonResult = filterValue ? $this.is( filterValue ) : true;
29 return filterText && buttonResult;
30 }
31 });
32 }
33
34 if($('.grid.resources').length){
35
36 var $grid = $('.grid.resources').isotope({
37 itemSelector: '.element-item',
38 layoutMode: 'vertical',
39 getSortData: {
40 coursename: '.name',
41 date: '[data-ticks]', 17 date: '[data-ticks]',
42 }, 18 },
43 filter: function() { 19 filter: function() {
...@@ -48,105 +24,6 @@ if($('.grid.resources').length){ ...@@ -48,105 +24,6 @@ if($('.grid.resources').length){
48 } 24 }
49 }); 25 });
50 26
51 var itemsPerPageDefault = 5;
52 var itemsPerPage = defineItemsPerPage();
53 var itemSelector = '.element-item';
54 var currentNumberPages = 1;
55 var currentPage = 1;
56 var currentFilter = '*';
57 var filterAtribute = 'data-filter';
58 var pageAtribute = 'data-page';
59 var pagerClass = 'isotope-pager';
60
61 setPagination();
62 goToPage(1);
63
64 var responsiveIsotope = [
65 [480, 4],
66 [720, 6]
67 ];
68
69 }
70
71 function changeFilter(selector) {
72 $grid.isotope({
73 filter: selector
74 });
75 }
76
77 function getFilterSelector() {
78 var selector = itemSelector;
79 if (currentFilter != '*') {
80 selector += `[${filterAtribute}~="${currentFilter}"]`
81 }
82 return selector;
83 }
84
85
86 function goToPage(n) {
87 currentPage = n;
88
89 var selector = getFilterSelector();
90 selector += `[${pageAtribute}="${currentPage}"]`;
91
92 changeFilter(selector);
93 }
94
95 function defineItemsPerPage() {
96 var pages = itemsPerPageDefault;
97
98 return pages;
99 }
100
101 function setPagination() {
102
103 var SettingsPagesOnItems = function(){
104
105 var itemsLength = $grid.children(itemSelector).length;
106
107 var pages = Math.ceil(itemsLength / itemsPerPage);
108 var item = 1;
109 var page = 1;
110 var selector = getFilterSelector();
111
112 $grid.children(selector).each(function(){
113 if( item > itemsPerPage ) {
114 page++;
115 item = 1;
116 }
117 $(this).attr(pageAtribute, page);
118 item++;
119 });
120
121 currentNumberPages = page;
122
123 }();
124
125 var CreatePagers = function() {
126
127 var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
128
129 $isotopePager.html('');
130
131 for( var i = 0; i < currentNumberPages; i++ ) {
132 var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
133 $pager.html(i+1);
134
135 $pager.click(function(){
136 var page = $(this).eq(0).attr(pageAtribute);
137 goToPage(page);
138 });
139
140 $pager.appendTo($isotopePager);
141 }
142
143 $grid.after($isotopePager);
144
145 }();
146
147 }
148
149
150 27
151 28
152 // use value of search field to filter 29 // use value of search field to filter
...@@ -155,12 +32,9 @@ var $quicksearch = $('#quicksearch').keyup( debounce( function() { ...@@ -155,12 +32,9 @@ var $quicksearch = $('#quicksearch').keyup( debounce( function() {
155 qsRegex = new RegExp( $quicksearch.val(), 'gi' ); 32 qsRegex = new RegExp( $quicksearch.val(), 'gi' );
156 $grid.isotope(); 33 $grid.isotope();
157 updateFilterCounts(); 34 updateFilterCounts();
158 if($('.grid.resources').length){
159 setPagination();
160 goToPage(1);
161 }
162 }, 200 ) ); 35 }, 200 ) );
163 36
37
164 // debounce so filtering doesn't happen every millisecond 38 // debounce so filtering doesn't happen every millisecond
165 function debounce( fn, threshold ) { 39 function debounce( fn, threshold ) {
166 var timeout; 40 var timeout;
...@@ -204,12 +78,23 @@ $('.sort-button-group').on( 'click', 'button', function() { ...@@ -204,12 +78,23 @@ $('.sort-button-group').on( 'click', 'button', function() {
204 var direction = $(this).attr('data-sort-direction'); 78 var direction = $(this).attr('data-sort-direction');
205 var isAscending = (direction == 'asc'); 79 var isAscending = (direction == 'asc');
206 var newDirection = (isAscending) ? 'desc' : 'asc'; 80 var newDirection = (isAscending) ? 'desc' : 'asc';
81 console.log(sortValue);
82 console.log(isAscending);
207 $grid.isotope({ sortBy: sortValue, sortAscending: isAscending }); 83 $grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
84 updateFilterCounts();
208 $(this).attr('data-sort-direction', newDirection); 85 $(this).attr('data-sort-direction', newDirection);
209 var span = $(this).find('.glyphicon'); 86 var span = $(this).find('.glyphicon');
210 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down'); 87 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
211 }); 88 });
212 89
90 $(document).on("click", "#filter-more", function(e) {
91 e.preventDefault();
92 $('.filter-group').toggleClass('open');
93 var span = $(this).find('.glyphicon');
94 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
95 });
96
97
213 98
214 99
215 function updateFilterCounts() { 100 function updateFilterCounts() {
...@@ -249,7 +134,7 @@ function updateFilterCounts() { ...@@ -249,7 +134,7 @@ function updateFilterCounts() {
249 } 134 }
250 135
251 136
252 if($('.grid.course').length){ 137
253 138
254 //**************************** 139 //****************************
255 // Isotope Load more button 140 // Isotope Load more button
...@@ -306,14 +191,8 @@ if($('.grid.course').length){ ...@@ -306,14 +191,8 @@ if($('.grid.course').length){
306 loadMore(counter); 191 loadMore(counter);
307 }); 192 });
308 193
309 $(document).on("click", "#filter-more", function(e) {
310 e.preventDefault();
311 $('.filter-group').toggleClass('open');
312 var span = $(this).find('.glyphicon');
313 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
314 });
315 194
316 }
317 195
318 } 196
197
319 }); 198 });
......
1
2
3 jQuery( document ).ready(function($) {
4
5 if(!$('.grid.resources').length){
6 return;
7 }
8
9
10 var itemSelector = ".element-item";
11 var $checkboxes = $('.category-filter input');
12 var $container = $('.grid').isotope({ itemSelector: itemSelector,
13 getSortData: {
14 coursename: '.name',
15 date: '[data-ticks]',
16 } });
17
18 //Ascending order
19 var responsiveIsotope = [ [480, 4] , [720, 6] ];
20 var itemsPerPageDefault = 20;
21 var itemsPerPage = defineItemsPerPage();
22 var currentNumberPages = 1;
23 var currentPage = 1;
24 var currentFilter = '*';
25 var filterAttribute = 'data-filter';
26 var filterValue = "";
27 var pageAttribute = 'data-page';
28 var pagerClass = 'isotope-pager';
29 var wordPage;
30
31 // update items based on current filters
32 function changeFilter(selector) { $container.isotope({ filter: selector }); }
33
34 //grab all checked filters and goto page on fresh isotope output
35 function goToPage(n) {
36 currentPage = n;
37 var selector = itemSelector;
38 var exclusives = [];
39 // for each box checked, add its value and push to array
40 $checkboxes.each(function (i, elem) {
41 if (elem.checked) {
42 selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
43 exclusives.push(selector);
44 }
45 });
46 // smash all values back together for 'and' filtering
47 filterValue = exclusives.length ? exclusives.join('') : '*';
48
49 // add page number to the string of filters
50 var wordPage = currentPage.toString();
51 filterValue += ('.'+wordPage);
52
53 changeFilter(filterValue);
54 }
55
56 // determine page breaks based on window width and preset values
57 function defineItemsPerPage() {
58 var pages = itemsPerPageDefault;
59
60 for( var i = 0; i < responsiveIsotope.length; i++ ) {
61 if( $(window).width() <= responsiveIsotope[i][0] ) {
62 pages = responsiveIsotope[i][1];
63 break;
64 }
65 }
66 return pages;
67 }
68
69 function setPagination() {
70
71 var SettingsPagesOnItems = function(){
72 var itemsLength = $container.children(itemSelector).length;
73 var pages = Math.ceil(itemsLength / itemsPerPage);
74 var item = 1;
75 var page = 1;
76 var selector = itemSelector;
77 var exclusives = [];
78 // for each box checked, add its value and push to array
79 $checkboxes.each(function (i, elem) {
80 if (elem.checked) {
81 selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
82 exclusives.push(selector);
83 }
84 });
85 // smash all values back together for 'and' filtering
86 filterValue = exclusives.length ? exclusives.join('') : '*';
87 // find each child element with current filter values
88 $container.children(filterValue).each(function(){
89 // increment page if a new one is needed
90 if( item > itemsPerPage ) {
91 page++;
92 item = 1;
93 }
94 // add page number to element as a class
95 wordPage = page.toString();
96
97 var classes = $(this).attr('class').split(' ');
98 var lastClass = classes[classes.length-1];
99 // last class shorter than 4 will be a page number, if so, grab and replace
100 if(lastClass.length < 4){
101 $(this).removeClass();
102 classes.pop();
103 classes.push(wordPage);
104 classes = classes.join(' ');
105 $(this).addClass(classes);
106 } else {
107 // if there was no page number, add it
108 $(this).addClass(wordPage);
109 }
110 item++;
111 });
112 currentNumberPages = page;
113 }();
114
115 // create page number navigation
116 var CreatePagers = function() {
117
118 var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
119
120 $isotopePager.html('');
121 if(currentNumberPages > 1){
122 for( var i = 0; i < currentNumberPages; i++ ) {
123 var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
124 $pager.html(i+1);
125
126 $pager.click(function(){
127 var page = $(this).eq(0).attr(pageAttribute);
128 goToPage(page);
129 });
130 $pager.appendTo($isotopePager);
131 }
132 }
133 $container.after($isotopePager);
134 }();
135 }
136
137 setPagination();
138 goToPage(1);
139
140 //event handlers
141 $checkboxes.change(function(){
142 var filter = $(this).attr(filterAttribute);
143 currentFilter = filter;
144 setPagination();
145 goToPage(1);
146 });
147
148 $('#clear-filters').click(function(){clearAll()});
149
150
151 $('.sort-button-group').on( 'click', 'button', function() {
152 var sortValue = $(this).attr('data-sort-value');
153 var direction = $(this).attr('data-sort-direction');
154 var isAscending = (direction == 'asc');
155 var newDirection = (isAscending) ? 'desc' : 'asc';
156 $container.isotope({ sortBy: sortValue, sortAscending: isAscending });
157 $(this).attr('data-sort-direction', newDirection);
158 var span = $(this).find('.glyphicon');
159 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
160 setPagination();
161 goToPage(1);
162 });
163
164
165 $(document).on("click", "#filter-more", function(e) {
166 e.preventDefault();
167 $('.filter-group').toggleClass('open');
168 var span = $(this).find('.glyphicon');
169 span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
170 });
171
172
173
174 });
...\ No newline at end of file ...\ No newline at end of file
1 import jQuery from 'jquery';
2 import jQueryBridget from 'jquery-bridget';
3 import Isotope from "isotope-layout";
1 4
5 jQueryBridget( 'isotope', Isotope, $ );
2 6
3 // Add your custom JS here. 7 // Add your custom JS here.
4 import "./_carousels"; 8 import "./_carousels";
5 import "./jssocials.min"; 9 import "./jssocials.min";
6 import "./_course_list" 10 import "./_course_list";
11 import "./_resources_list";
7 12
8 var a = document.querySelector('.blur-image'); 13 var a = document.querySelector('.blur-image');
9 14
......