mirror of
https://github.com/gcushen/hugo-academic.git
synced 2025-07-26 19:15:16 +02:00
widgets: Enable reuse of project widget (Close #100)
* Replace ids by classes * Adapt click functions for filter links to filter only in the relevant widget * Hide project filter buttons, when there is only one
This commit is contained in:
parent
143576bc99
commit
e8cfcabb76
3 changed files with 24 additions and 19 deletions
|
@ -592,7 +592,7 @@ article {
|
|||
color: #9c9c9c;
|
||||
}
|
||||
|
||||
#container-projects {
|
||||
.projects-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
/*margin-top: 5rem;*/
|
||||
|
|
|
@ -12,11 +12,12 @@
|
|||
|
||||
{{ $filter_default := default (int $page.Params.filter_default) 0 }}
|
||||
{{ with $page.Params.filter }}
|
||||
<span id="default-project-filter" class="hidden">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
|
||||
<span class="hidden default-project-filter">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
|
||||
{{ end }}
|
||||
|
||||
{{ if gt (len $page.Params.filter) 1 }}
|
||||
<div class="project-toolbar">
|
||||
<div id="filters">
|
||||
<div class="project-filters">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
{{ range $idx, $item := $page.Params.filter }}
|
||||
|
@ -26,10 +27,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if eq $page.Params.view 0 }}
|
||||
|
||||
<div id="container-projects" class="row isotope">
|
||||
<div class="row isotope projects-container">
|
||||
{{ range where $.Data.Pages "Type" "project" }}
|
||||
<div class="col-md-12 project-item isotope-item {{ delimit .Params.tags " " }}" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
<i class="fa fa-files-o pub-icon" aria-hidden="true"></i>
|
||||
|
@ -50,7 +52,7 @@
|
|||
|
||||
{{ else }}
|
||||
|
||||
<div id="container-projects" class="row isotope">
|
||||
<div class="row isotope projects-container">
|
||||
|
||||
{{ range $project := where $.Data.Pages "Type" "project" }}
|
||||
{{ $.Scratch.Set "project_url" $project.Permalink }}
|
||||
|
|
|
@ -101,21 +101,24 @@
|
|||
* Filter projects.
|
||||
* --------------------------------------------------------------------------- */
|
||||
|
||||
let $grid_projects = $('#container-projects');
|
||||
$grid_projects.imagesLoaded(function () {
|
||||
// Initialize Isotope after all images have loaded.
|
||||
$grid_projects.isotope({
|
||||
itemSelector: '.isotope-item',
|
||||
layoutMode: 'masonry',
|
||||
filter: $('#default-project-filter').text()
|
||||
});
|
||||
$('.projects-container').each(function(index, container) {
|
||||
let $container = $(container);
|
||||
let $section = $container.closest('section');
|
||||
|
||||
// Filter items when filter link is clicked.
|
||||
$('#filters a').click(function () {
|
||||
let selector = $(this).attr('data-filter');
|
||||
$grid_projects.isotope({filter: selector});
|
||||
$(this).removeClass('active').addClass('active').siblings().removeClass('active all');
|
||||
return false;
|
||||
$container.imagesLoaded(function() {
|
||||
// Initialize Isotope after all images have loaded.
|
||||
$container.isotope({
|
||||
itemSelector: '.isotope-item',
|
||||
layoutMode: 'masonry',
|
||||
filter: $section.find('.default-project-filter').text()
|
||||
});
|
||||
// Filter items when filter link is clicked.
|
||||
$section.find('.project-filters a').click(function() {
|
||||
let selector = $(this).attr('data-filter');
|
||||
$container.isotope({filter: selector});
|
||||
$(this).removeClass('active').addClass('active').siblings().removeClass('active all');
|
||||
return false;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue