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:
Thomas Mieling 2017-10-07 22:25:50 +02:00 committed by gcushen
commit e8cfcabb76
3 changed files with 24 additions and 19 deletions

View file

@ -592,7 +592,7 @@ article {
color: #9c9c9c;
}
#container-projects {
.projects-container {
display: block;
position: relative;
/*margin-top: 5rem;*/

View file

@ -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 }}

View file

@ -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;
});
});
});