67e0e29c by Jeff Balicki

see more

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent da16e158
......@@ -318,6 +318,16 @@ function course_list()
margin: 0;
padding: 0;
}
#load-more{
float:right;
margin:5px;
}
.hidden{visibility:hidden;
width:0px!important;
height:0px!important;
margin:0px!important;
padding:0px!important;
}
</style>
<?php return $output;
}
......
......@@ -17690,6 +17690,53 @@
$(this).addClass('is-checked');
});
});
//****************************
// 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);
});
});
var a = document.querySelector('.blur-image');
document.addEventListener("DOMContentLoaded", function () {
......
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,15 +4,15 @@
"compress": {
"booleans": true,
"conditionals": true,
"drop_console": true,
"drop_debugger": true,
"drop_console": false,
"drop_debugger": false,
"if_return": true,
"join_vars": true,
"join_vars": false,
"keep_classnames": false,
"keep_fnames": false,
"reduce_vars": true,
"reduce_vars": false,
"sequences": true,
"warnings": false,
"warnings": true,
"ecma": 5
},
"mangle": {
......
......@@ -15,7 +15,7 @@ jQuery( document ).ready(function($) {
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
......@@ -23,6 +23,7 @@ var $grid = $('.grid').isotope({
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
......@@ -76,6 +77,64 @@ $('.button-group').each( function( i, buttonGroup ) {
});
});
//****************************
// 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);
});
});
var a = document.querySelector('.blur-image');
......