Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
0b177f92 by Jeff Balicki
Options

learning-opportunities done 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a2bd643b
Expand all
Inline Side-by-side
Showing 12 changed files with 278 additions and 166 deletions
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.
......@@ -4,8 +4,8 @@
add_shortcode( 'promos', 'promos' );
function promos()
{
function promos(){
$custom_args = array(
'post_type' => 'promo',
'posts_per_page' => 3,
......@@ -13,10 +13,11 @@ function promos()
);
$custom_query = new \WP_Query($custom_args);
ob_start();
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()):?>
<div class="carousel">
if ($custom_query->have_posts()):?>
<div class="carousel">
<div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items">
<div class='swiper-wrapper'>
<?php while ($custom_query->have_posts()): $custom_query->the_post();
......@@ -28,15 +29,15 @@ function promos()
<div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $output = ob_get_clean();
return $output;
<?php endif;
wp_reset_query();
$output = ob_get_clean();
return $output;
}
function promos_slides($id)
{
function promos_slides($id){
ob_start();
$post = get_post($id);
$link = get_permalink($id);
......@@ -49,8 +50,8 @@ function promos_slides($id)
}
$text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
$excerpt_length = apply_filters( 'excerpt_length', 40 );
$text = wp_trim_words( $text, $excerpt_length, ' ...' );
?>
$text = wp_trim_words( $text, $excerpt_length, ' ...' );?>
<div class="swiper-slide container">
<div class="promo row align-items-center">
<div class="col-lg-4 col-md-12">
......@@ -75,8 +76,8 @@ return $output;
add_shortcode('share-this', 'share_this');
function share_this($atts)
{
function share_this($atts){
$atts = shortcode_atts(array(
'post_id' => '',
), $atts, 'current-cover-articles');
......@@ -107,8 +108,8 @@ return ob_get_clean();
add_shortcode('course-list', 'course_list');
function course_list()
{
function course_list(){
$custom_args = array(
'post_type' => 'sfwd-courses',
'posts_per_page' => -1,
......@@ -119,58 +120,68 @@ function course_list()
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()):?>
<p><input type="text" class="quicksearch" placeholder="Search" /></p>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">Clear</button>
<button class="button" data-filter=".resilience-and-well-being">Resilience and Well-Being</button>
<button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button>
<button class="button" data-filter=".clinical-skills">Clinical Skills</button>
<button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button>
<div class="course-list">
<label for="quicksearch">Search programs:</label><input type="text" id="quicksearch" placeholder="" />
<div class="filters">
<a href="#" id="filter-more">FILTERS <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></a>
<div class="filter-group">
<div class="category-filter-group">
<?php $terms = get_terms( array( 'taxonomy' => 'ld_course_category' ,'parent' => 0) );
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>
<?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>
</div>
</div>
</div>
<div class="grid">
<?php while ($custom_query->have_posts()): $custom_query->the_post();
echo course_card(get_the_ID());
endwhile; ?>
</div>
</div>
</div>
<?php endif;
wp_reset_query();
$output = ob_get_clean();
return $output;
wp_reset_query();
$output = ob_get_clean();
return $output;
}
function course_card($id)
{
function course_card($id){
ob_start();
$post = get_post($id);
$link = get_permalink($id);
$text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
$excerpt_length = apply_filters( 'excerpt_length', 40 );
$excerpt_length = apply_filters( 'excerpt_length', 20 );
$text = wp_trim_words( $text, $excerpt_length, ' ...' );
$categories = get_the_terms( $id, 'ld_course_category' );
$cat ="";
foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
$cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
<div 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="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
<div class="image">
<a href="<?php echo $link; ?>" rel="bookmark"> <?php echo get_the_post_thumbnail($id, 'full' ); ?></a>
</div>
</div>
<div class="content">
<h3 class="entry-title"><a href="<?php echo $link; ?>"><?php echo $post->post_title; ?></a></h3>
<div class="entry-content">
<p><?php echo $text; ?></p>
</div>
<div class="button">
<a role="button" href="<?php echo $link; ?>" rel="bookmark"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_button_text', true);?></a>
</div>
</div>
<div class="card">
<div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
<div class="image">
<?php echo get_the_post_thumbnail($id, 'full' ); ?>
</div>
</div>
<div class="content">
<h3 class="entry-title"><?php echo $post->post_title; ?></h3>
<div class="entry-content">
<p><?php echo $text; ?></p>
</div>
<a class="btn" role="button" href="<?php echo get_permalink($id); ?>" rel="bookmark">LEARN MORE</a>
</div>
</div>
</article>
</div>
<?php
$output = ob_get_clean();
return $output;
$output = ob_get_clean();
return $output;
}
\ No newline at end of file
......
......@@ -17634,25 +17634,21 @@
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]'
},
filter: function () {
return qsRegex ? $(this).text().match(qsRegex) : true;
var $this = $(this);
var filterText = qsRegex ? $(this).text().match(qsRegex) : true;
var buttonResult = filterValue ? $this.is(filterValue) : true;
return filterText && buttonResult;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup(debounce(function () {
var $quicksearch = $('#quicksearch').keyup(debounce(function () {
console.log($quicksearch.val());
qsRegex = new RegExp($quicksearch.val(), 'gi');
$grid.isotope();
}, 200));
......@@ -17672,24 +17668,65 @@
};
}
// bind filter button click
$('.filters-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$grid.isotope({
filter: filterValue
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
$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);
}
});
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
$('.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';
$grid.isotope({
sortBy: sortValue,
sortAscending: isAscending
});
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if (index === 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
$grid.isotope('layout');
}
//****************************
// Isotope Load more button
......@@ -17722,7 +17759,7 @@
}
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function (e) {
......@@ -17737,6 +17774,12 @@
counter = counter + initShow;
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');
});
});
// Add your custom JS here.
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -2,8 +2,6 @@ import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
......@@ -15,27 +13,23 @@ var qsRegex;
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]',
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
var $this = $(this);
var filterText = qsRegex ? $(this).text().match( qsRegex ) : true;
var buttonResult = filterValue ? $this.is( filterValue ) : true;
return filterText && buttonResult;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
console.log($quicksearch.val());
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
......@@ -56,80 +50,141 @@ function debounce( fn, threshold ) {
}
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
$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 );
}
});
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
$('.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';
$grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
}else {
$("#load-more").show();
}
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if(index === 0){
$("#load-more").hide();
}else{
$("#load-more").show();
}
$grid.isotope('layout');
}
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
$("#load-more").show();
};
}
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
//****************************
// Isotope Load more button
//****************************
var initShow = 3; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $grid.data('isotope'); // get Isotope instance
console.log('iso');
console.log(iso);
console.log(iso.elemCount);
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$grid.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
console.log('hiddenElem');
console.log(item.element);
return item.element;
});
$(hiddenElems).addClass('hidden');
$grid.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
};
}
//append load more button
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
e.preventDefault();
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
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');
});
});
......
......@@ -108,6 +108,9 @@ max-width: 100% !important;
font-size: 18px;
}
input[type=submit]:hover{
background-color: #2C2C2C;
}
}
}
......