90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
|
//portfolio
|
||
|
|
let isotope;
|
||
|
|
let selector;
|
||
|
|
$(window).load(function () {
|
||
|
|
$portfolio_selectors = $('.sort-list-filter >li>a');
|
||
|
|
$portfolio_add_selectors = $('.sort-list-filter >li > a.additional-filter');
|
||
|
|
$portfolio_sorters = $('.sort-list-sorting > li > a');
|
||
|
|
if ($portfolio_selectors != 'undefined') {
|
||
|
|
$portfolio = $('.sort-list-items');
|
||
|
|
isotope = $portfolio.isotope({
|
||
|
|
itemSelector: 'li',
|
||
|
|
layoutMode: 'masonry',
|
||
|
|
getSortData: {
|
||
|
|
name: '.name',
|
||
|
|
date: '.date parseInt'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$portfolio_selectors.on('click', function () {
|
||
|
|
if ($(this).hasClass("additional-filter")) {
|
||
|
|
$portfolio_add_selectors.removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
selector = $('.sort-list-filter > li > a.active:not(.additional-filter)').attr('data-filter') + $(this).attr('data-filter');
|
||
|
|
} else {
|
||
|
|
changeSelector($(this));
|
||
|
|
}
|
||
|
|
$portfolio.isotope({filter: selector});
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$portfolio_sorters.on('click', function () {
|
||
|
|
const prevSort = $('.sort-list-sorting > li > a.active');
|
||
|
|
$portfolio_sorters.removeClass('active');
|
||
|
|
$('.fa', $portfolio_sorters).remove();
|
||
|
|
$(this).addClass('active');
|
||
|
|
|
||
|
|
let sortBy = $(this).attr('data-sort');
|
||
|
|
let sortAsc = $(this).attr('data-asc') === 'true';
|
||
|
|
console.log(sortAsc);
|
||
|
|
if (prevSort.attr('data-sort') === sortBy) {
|
||
|
|
sortAsc = !sortAsc;
|
||
|
|
$(this).attr('data-asc', sortAsc);
|
||
|
|
console.log(sortAsc);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (sortAsc) {
|
||
|
|
$(this).append(' <i class="fa fa-arrow-up"></i>');
|
||
|
|
} else {
|
||
|
|
$(this).append(' <i class="fa fa-arrow-down"></i>');
|
||
|
|
}
|
||
|
|
|
||
|
|
$portfolio.isotope({
|
||
|
|
sortBy: sortBy,
|
||
|
|
sortAscending: sortAsc
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$('.sort-list-filter > li > a.active').click();
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('popstate', function (e) {
|
||
|
|
const filter = e.state !== '' ? '.' + e.state : '*';
|
||
|
|
const el = $('.sort-list-filter > li > a[data-filter="' + filter + '"]');
|
||
|
|
el.click();
|
||
|
|
});
|
||
|
|
|
||
|
|
function changeSelector(el) {
|
||
|
|
$portfolio_selectors = $('.sort-list-filter > li > a');
|
||
|
|
$portfolio_selectors.removeClass('active').blur();
|
||
|
|
el.addClass('active');
|
||
|
|
if (history.pushState) {
|
||
|
|
const category = el.attr('data-filter').substr(1);
|
||
|
|
history.pushState(category, category, '/projects/' + category);
|
||
|
|
}
|
||
|
|
selector = el.attr('data-filter');
|
||
|
|
$('.sort-list-items').isotope({filter: selector});
|
||
|
|
}
|
||
|
|
|
||
|
|
autoHeight();
|
||
|
|
|
||
|
|
function autoHeight() {
|
||
|
|
$('.sort-list-item').each(function () {
|
||
|
|
$(this).css('height', $(this).outerHeight() + 40);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('.vote-btn').each((el) => {
|
||
|
|
console.log(el);
|
||
|
|
});
|
||
|
|
});
|