Merge pull request 'front page redesign & post filtering' (#63) from r/lumbung.space:main into main

Reviewed-on: ruangrupa/lumbung.space#63
This commit is contained in:
2022-12-19 09:24:21 +01:00
parent b196fc363b
commit 9d4cf8d394
29 changed files with 1008 additions and 240 deletions

View File

@ -11,6 +11,8 @@
{{- partial "news-ticker.html" . -}}
{{- partial "footer.html" . -}}
</body>
<script src="{{ "js/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
<script>
function toggleDescription(id) {
document.querySelector(id).classList.toggle("collapsed");
@ -33,29 +35,84 @@
if (document.querySelector('[aria-label="Previous"]')) {
document.querySelector('[aria-label="Previous"]').parentElement.classList.add('previous-page-link')
}
// for toggling submenus in mobile navigation drawer
let submenuLinks = document.querySelectorAll('.drawer .has-submenu');
[...submenuLinks].forEach(submenuLink => {
submenuLink.addEventListener('click', function() {
submenuLink.querySelector('.submenu').classList.toggle('opened')
})
})
// add classes for styling lumbung kios and lumbung gallery cards
let cards = document.querySelectorAll('.shout.card');
[...cards].forEach(card => {
if (card.querySelector('a[href="/tags/lumbungkios"]') || card.querySelector('a[href="/tags/lumbungkiosproducts"]')) {
card.classList.add('lumbung-kios')
} else if (card.querySelector('a[href="/tags/lumbunggallery"]')) {
card.classList.add('lumbung-gallery')
}
})
// footer random color
var color = ['orange','green','blue'];
var footer = document.getElementById("footer");
var rand = Math.floor(Math.random() * color.length);
footer.classList.add(color[rand]);
// mobile menu
document.getElementById("menu-button").onclick=function(){
this.classList.toggle("active");
document.getElementById("menu").classList.toggle("active");
}
// mobile menu - submenu
submenuLinks = document.querySelectorAll(".has-submenu");
[...submenuLinks].forEach((t=>{
t.addEventListener("click",(function(){t.querySelector(".submenu").classList.toggle("active")}))
}));
// mobile mainfilter
document.getElementById("filter-link").onclick=function(){document.getElementById("filter").classList.toggle("active")};
// mobile filter
filterButtons=document.querySelectorAll(".filter-buttons");
[...filterButtons].forEach((t=>{
t.addEventListener("click",(function(){t.querySelector(".filter-buttons-dropdown").classList.toggle("active");
t.querySelector(".filter-by").classList.toggle("active")}))
}));
// load more cards
document.getElementById("load-more").onclick=function(){
document.getElementById('load-more-paginator').click();
}
// filter config
var htfConfig = {
filters: [
{
name: 'tags',
prefix: 'tag-',
buttonClass: 'tag-button',
allSelector: '#selectAllTags',
attrName: 'data-tags',
selectedPrefix: 'stags-',
},
{
name: 'section',
prefix: 'sect-',
buttonClass: 'sect-button',
allSelector: '#selectAllSections',
attrName: 'data-section',
selectedPrefix: 'ssect-',
},
{
name: 'contributors',
prefix: 'cont-',
buttonClass: 'cont-button',
allSelector: '#selectAllContributors',
attrName: 'data-contributors',
selectedPrefix: 'scont-',
},
{
name: 'sources',
prefix: 'src-',
buttonClass: 'src-button',
allSelector: '#selectAllSources',
attrName: 'data-sources',
selectedPrefix: 'ssrc-',
}
],
showItemClass: "show-item",
filterItemClass: "filter-item",
activeButtonClass: "active",
counterSelector: "selectedItemCount",
populateCount: true,
setDisabledButtonClass: "disable-button"
}
var htf = new HugoTagsFilter(htfConfig);
</script>
</html>

View File

@ -1,48 +1,48 @@
{{ define "main" }}
<main>
<section class='entries'>
<div class="h-feed">
{{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
{{ if in .Params.categories "tv"}}
<div class="h-feed">
{{ $range := where .Pages "Params.hidden" "ne" "true" }}
{{ $paginator := .Paginate $range }}
{{ $pageSize := $paginator.PageSize }}
{{ $totalPostsToShow := mul $paginator.PageNumber $pageSize }}
{{ range $index, $el := (first $totalPostsToShow $range) }}
{{- partial "video_box.html" . -}}
<div class='post {{if eq .Section "tv"}}tv{{ end }}' {{ if eq $index (sub $totalPostsToShow $pageSize) }}id="newpage"{{ end }}>
{{if eq .Section "tv"}}
{{- partial "video_box.html" . -}}
{{ else if in .Params.categories "calendar" }}
{{ else if eq .Section "events" }}
{{- partial "partials/calendar_card.html" . -}}
{{- partial "calendar_card.html" . -}}
{{ else if eq .Section "shouts" }}
{{ if in .Params.sources "pen.lumbung.space" }}
{{- partial "partials/pen_card.html" . -}}
{{ else }}
{{- partial "partials/shout_card.html" . -}}
{{ end }}
{{ else if in .Params.categories "network" }}
{{ else if eq .Section "social" }}
{{- partial "partials/social_card.html" . -}}
{{- partial "network_card.html" . -}}
{{ else if eq .Section "publications"}}
{{- partial "partials/book_card.html" . -}}
{{ else if in .Params.categories "shouts" }}
{{- partial "shout_card.html" . -}}
{{ else if in .Params.categories "pen" }}
{{- partial "pen_card.html" . -}}
{{ else if in .Params.categories "book" }}
{{- partial "book.html" . -}}
{{ else if in .Params.categories "page" }}
{{- partial "blank.html" . -}}
{{ else }}
{{- partial "card.html" . -}}
{{ end }}
{{ else if eq .Section "sounds"}}
{{- partial "sounds_card.html" . -}}
{{ else }}
{{- partial "card.html" . -}}
{{ end }}
</div>
{{ end }}
</div>
<nav class="pagination">
{{ template "_internal/pagination.html" . }}
</nav>
<div class="page-nav">
{{ if and (gt $paginator.TotalPages 1) ($paginator.HasNext) }}
<a id="load-more-paginator" class="nextpage" href="{{ $paginator.Next.URL }}#newpage">load more</a>
{{ end }}
</div>
</section>
</main>
{{ end }}
{{ end }}