forked from ruangrupa/lumbung.space
new header & menu layout by Cristoph
This commit is contained in:
rra
parent
14eb01e513
commit
a226b45bc0
|
|
@ -3,6 +3,8 @@ languageCode = "en-gb"
|
|||
title = "lumbung.space"
|
||||
theme = "lumbung-theme"
|
||||
pluralizeListTitles = "false"
|
||||
paginate = 20
|
||||
|
||||
|
||||
[params]
|
||||
logo = "/img/logo.svg"
|
||||
|
|
@ -10,6 +12,9 @@ pluralizeListTitles = "false"
|
|||
description = 'a digital living room for the lumbung ekosistem'
|
||||
images = ['/img/logo.png']
|
||||
title = 'lumbung dot space'
|
||||
bundleCss = "/bundle.css"
|
||||
bundleJs = "/bundle.js"
|
||||
mainSections = ['social', 'shouts', 'calendar', 'tv', 'pen']
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
|
@ -22,3 +27,5 @@ unsafe = true
|
|||
|
||||
[permalinks]
|
||||
timelines = "/timeline/:slug/"
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
<header id="top-menu">
|
||||
<div class="mobile-menu">
|
||||
<button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');">
|
||||
<svg width="30" fill="#3C3D3D" viewBox="0 0 50 40">
|
||||
<g>
|
||||
<path class="top" d="M0 8h50v3H0z"/>
|
||||
<path class="bottom" d="M0 28h50v3H0z"/>
|
||||
<path class="middle" d="M0 18h50v3H0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="https://members.lumbung.space" id="login">login</a>
|
||||
<div class="header-row">
|
||||
<a href="/" class="home-link">
|
||||
<img class="logo" src="/img/logo.svg" alt="{{ .Site.Title }}">
|
||||
</a>
|
||||
<a href="https://members.lumbung.space" class="login-link">Login</a>
|
||||
</div>
|
||||
|
||||
<a href="/" class="home-link">
|
||||
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
|
||||
</a>
|
||||
|
||||
</header>
|
||||
<div class="menu-row">
|
||||
<nav class="menu">
|
||||
<img class="menu-dot" src="/img/black-dot.svg" alt="black dot">
|
||||
<ul>
|
||||
<li><a href="/">home</a></li>
|
||||
<li><a href="/timeline/">harvest</a></li>
|
||||
{{/* <li><a href="/about/">about</a></li> */}}
|
||||
<li class="has-submenu">about
|
||||
|
|
@ -42,28 +33,12 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<aside class="drawer">
|
||||
<ul>
|
||||
<li><a href="/">home</a></li>
|
||||
<li><a href="/timeline/">harvest</a></li>
|
||||
<li class="has-submenu">about
|
||||
<ul class="submenu">
|
||||
<li><a href="/about/">about us</a></li>
|
||||
<li><a href="/contributors/">contributors</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/calendar/">calendar</a></li>
|
||||
<li><a href="/tv/">tv</a></li>
|
||||
<li><a href="/social/">social</a></li>
|
||||
<li><a href="/pen/">pen</a></li>
|
||||
<li><a href="/shouts/">shouts</a></li>
|
||||
<li class="has-submenu">ekonomi
|
||||
<ul class="submenu">
|
||||
<li><a href="/tags/lumbungkiosproducts/">kios</a></li>
|
||||
<li><a href="/tags/lumbunggallery/">gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://books.lumbung.space">books</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</header>
|
||||
{{- partial "filter-nav.html" . -}}
|
||||
|
||||
<div class="mobile-menu-button">
|
||||
<div class="mobile-menu-button--line"></div>
|
||||
<div class="mobile-menu-button--line"></div>
|
||||
<div class="mobile-menu-button--line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,9 +73,14 @@ body > iframe {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 2em auto;
|
||||
max-width: 80%;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -159,37 +164,128 @@ body > iframe {
|
|||
|
||||
/* base header & menu */
|
||||
|
||||
#top-menu {
|
||||
padding: 1.5rem 1rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr auto;
|
||||
align-items: flex-start;
|
||||
.header-row {
|
||||
margin: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-link {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
max-width: 700px;
|
||||
width: 70%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 283px;
|
||||
margin-top: 2rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#top-menu a {
|
||||
#top-menu .login-link {
|
||||
background: #009d9b;
|
||||
padding: 5px 30px;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
margin: 0 auto;
|
||||
max-width: 80%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 15px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.filter-link {
|
||||
background: #333;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
height: 14px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-icon path {
|
||||
fill:#fff;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: pointer;
|
||||
}
|
||||
|
||||
.mobile-menu-button--line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border: 2px solid #000;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.menu-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
margin-right: 1.5rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.menu ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.menu-nav-item {
|
||||
border-right: 2px solid var(--border-color);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#top-menu a:hover,
|
||||
#top-menu a:focus {
|
||||
.menu a:hover,
|
||||
.menu a:focus {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#top-menu #login {
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#top-menu div {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -199,7 +295,7 @@ body > iframe {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#top-menu input {
|
||||
.menu input {
|
||||
border: none;
|
||||
border-bottom: 1px solid #333;
|
||||
margin-right: 2rem;
|
||||
|
|
@ -207,8 +303,8 @@ body > iframe {
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#top-menu input:focus,
|
||||
#top-menu input:hover {
|
||||
.menu input:focus,
|
||||
.menu input:hover {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
|
@ -222,27 +318,8 @@ body > iframe {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
margin: 0 auto;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-transform: lowercase;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.menu-nav-item {
|
||||
border-right: 2px solid var(--border-color);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* styles for "tools" dropdown menu */
|
||||
#top-menu ul.submenu {
|
||||
.menu ul.submenu {
|
||||
flex-direction: column;
|
||||
margin-left: 0;
|
||||
position: absolute;
|
||||
|
|
@ -257,6 +334,7 @@ body > iframe {
|
|||
|
||||
.menu .submenu li {
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu .has-submenu {
|
||||
|
|
@ -272,49 +350,41 @@ body > iframe {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
#top-menu .menu ul.submenu {
|
||||
margin-left: 11px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid ;
|
||||
.menu ul.submenu {
|
||||
margin-left: -0.5em;
|
||||
margin-top: 8px;
|
||||
border: 2px solid ;
|
||||
gap: 0.25em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#top-menu a {
|
||||
.menu a {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#top-menu .menu .submenu a {
|
||||
.menu .menu .submenu a {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#top-menu .drawer .submenu {
|
||||
.menu .drawer .submenu {
|
||||
position: initial;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#top-menu .drawer .submenu.opened {
|
||||
.menu .drawer .submenu.opened {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#top-menu .drawer .submenu li {
|
||||
.menu .drawer .submenu li {
|
||||
padding: 0;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
#top-menu .drawer .opened .submenu {
|
||||
.menu .drawer .opened .submenu {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.drawer .has-submenu {
|
||||
padding-left: 1em;
|
||||
margin-left: 5px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
/*Article Summary Cards*/
|
||||
|
||||
|
|
@ -495,16 +565,15 @@ div.network-source {
|
|||
right: 1em;
|
||||
}
|
||||
|
||||
.network-source::before {
|
||||
content: "";
|
||||
.network-source .triangle {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid var(--shouts-dark);
|
||||
border-top: 23px solid transparent;
|
||||
border-bottom: 23px solid transparent;
|
||||
width: auto;
|
||||
height: calc(100% + 0.5px);
|
||||
top: -0.5px;
|
||||
transform: translateX(calc(100% - 0.5px));
|
||||
fill: var(--shouts-dark);
|
||||
}
|
||||
|
||||
.network-source a {
|
||||
|
|
@ -1011,6 +1080,117 @@ li.page-item:after {
|
|||
z-index: -100;
|
||||
}
|
||||
|
||||
|
||||
/* FILTER */
|
||||
|
||||
.filter-item, .card, .video-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.filter-buttons-container {
|
||||
display: none;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid;
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filter-buttons-container-header {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.load-all {
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.filter-link:hover + .filter-buttons-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter-buttons-container:hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.filter-buttons button {
|
||||
display: block;
|
||||
border: 0;
|
||||
background: unset;
|
||||
border-radius: 0;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
background: #009d9b;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
padding: 0.8rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.filter-buttons .filter-button.active {
|
||||
background: #f04b1e;
|
||||
}
|
||||
|
||||
.filter-buttons .filter-button.active:after {
|
||||
content:"\00d7";
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.disable-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px auto 50px;
|
||||
}
|
||||
|
||||
.nextpage {
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
margin: 0px 20px;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.nextpage:after {
|
||||
content: "";
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 2px solid #333;
|
||||
border-top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Landingpage */
|
||||
.welcome-text {
|
||||
text-align: center;
|
||||
|
|
@ -1566,14 +1746,66 @@ a.timeline-url {
|
|||
}
|
||||
|
||||
/* menu styles */
|
||||
|
||||
.mobile-menu-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.menu-row, #top-menu {
|
||||
position: fixed !important;
|
||||
z-index: 97;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
z-index: 98;
|
||||
width: fit-content;
|
||||
margin-top: 3vw;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.filter-buttons-container {
|
||||
position: fixed;
|
||||
top: 90px;
|
||||
z-index: 99;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.filter-buttons-container.open {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.filter-link {
|
||||
background: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-link span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
height: 20px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.filter-icon path {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
#top-menu div.mobile-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mobile-menu #login {
|
||||
display: inline-flex;
|
||||
margin: 0 0 0 auto;
|
||||
#top-menu .login-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ebene_2_00000008129498585359231740000016507919400411346327_"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14.9 14.9"
|
||||
style="enable-background:new 0 0 14.9 14.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#333333;}
|
||||
</style>
|
||||
<g id="Layer_1">
|
||||
<g>
|
||||
<path class="st0" d="M11.8,1.9C11,0.7,9.7,0.1,8,0.3C7.2,0,6.4-0.1,5.6,0.2C3.3,1,1.7,2.6,0.6,4.7c-1.4,2.6-0.5,6.8,2.4,8.1
|
||||
c0,0,0.1,0,0.1,0c0.2,0.2,0.5,0.3,0.8,0.4c0.4,0.6,0.9,1.1,1.6,1.3c1.9,0.7,4.1,0.1,5.5-1.2c0.9-0.6,1.6-1.4,2-2.4
|
||||
c1-0.9,1.6-2.2,1.8-3.5C15.1,5.2,14.1,2.7,11.8,1.9L11.8,1.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 804 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -0,0 +1,221 @@
|
|||
!(function l(r, a, o) {
|
||||
function h(e, t) {
|
||||
if (!a[e]) {
|
||||
if (!r[e]) {
|
||||
var s = "function" == typeof require && require;
|
||||
if (!t && s) return s(e, !0);
|
||||
if (u) return u(e, !0);
|
||||
var i = new Error("Cannot find module '" + e + "'");
|
||||
throw ((i.code = "MODULE_NOT_FOUND"), i);
|
||||
}
|
||||
var n = (a[e] = { exports: {} });
|
||||
r[e][0].call(
|
||||
n.exports,
|
||||
function (t) {
|
||||
return h(r[e][1][t] || t);
|
||||
},
|
||||
n,
|
||||
n.exports,
|
||||
l,
|
||||
r,
|
||||
a,
|
||||
o
|
||||
);
|
||||
}
|
||||
return a[e].exports;
|
||||
}
|
||||
for (var u = "function" == typeof require && require, t = 0; t < o.length; t++) h(o[t]);
|
||||
return h;
|
||||
})(
|
||||
{
|
||||
1: [
|
||||
function (t, e, s) {
|
||||
"use strict";
|
||||
var i = (function () {
|
||||
function i(t, e) {
|
||||
for (var s = 0; s < e.length; s++) {
|
||||
var i = e[s];
|
||||
(i.enumerable = i.enumerable || !1), (i.configurable = !0), "value" in i && (i.writable = !0), Object.defineProperty(t, i.key, i);
|
||||
}
|
||||
}
|
||||
return function (t, e, s) {
|
||||
return e && i(t.prototype, e), s && i(t, s), t;
|
||||
};
|
||||
})();
|
||||
/**
|
||||
* @name 'Hugo Tags Filter'
|
||||
* @version 1.2.2
|
||||
* @license MIT
|
||||
* @author PointyFar
|
||||
*/
|
||||
var n = (function () {
|
||||
function l(t) {
|
||||
!(function (t, e) {
|
||||
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
|
||||
})(this, l);
|
||||
(this.FILTERS =
|
||||
t && t.filters
|
||||
? t.filters
|
||||
: [
|
||||
{ name: "tag", prefix: "tft-", buttonClass: "tft-button", allSelector: "#tfSelectAllTags", attrName: "data-tags" },
|
||||
{ name: "section", prefix: "tfs-", buttonClass: "tfs-button", allSelector: "#tfSelectAllSections", attrName: "data-section" },
|
||||
]),
|
||||
(this.showItemClass = t && t.showItemClass ? t.showItemClass : "tf-show"),
|
||||
(this.activeButtonClass = t && t.activeButtonClass ? t.activeButtonClass : "active"),
|
||||
(this.filterItemClass = t && t.filterItemClass ? t.filterItemClass : "tf-filter-item"),
|
||||
(this.counterSelector = t && t.counterSelector ? t.counterSelector : "selectedItemCount"),
|
||||
(this.populateCount = !(!t || !t.populateCount) && t.populateCount),
|
||||
(this.setDisabledButtonClass = !(!t || !t.setDisabledButtonClass) && t.setDisabledButtonClass),
|
||||
(this.filterItems = document.getElementsByClassName(this.filterItemClass)),
|
||||
(this.selectedItemCount = 0),
|
||||
(this.filterValues = {});
|
||||
for (var e = 0; e < this.FILTERS.length; e++) {
|
||||
(this.FILTERS[e].buttonTotal = document.getElementsByClassName(this.FILTERS[e].buttonClass).length), (this.FILTERS[e].selected = []), (this.FILTERS[e].values = []);
|
||||
var s = document.getElementsByClassName(this.FILTERS[e].buttonClass);
|
||||
this.filterValues[this.FILTERS[e].name] = [];
|
||||
for (var i = 0; i < s.length; i++) {
|
||||
var n = s[i].id.replace(this.FILTERS[e].prefix, "");
|
||||
this.filterValues[this.FILTERS[e].name][n] = { count: 0, selected: 0 };
|
||||
}
|
||||
}
|
||||
this.showCheck(this.FILTERS[0].name, !0);
|
||||
}
|
||||
return (
|
||||
i(l, [
|
||||
{
|
||||
key: "initFilterCount",
|
||||
value: function (t, e) {
|
||||
if (e) for (var s in t) for (var i = 0; i < this.filterItems.length; i++) for (var n = this.getAttrs(s, this.filterItems[i]), l = 0; l < n.length; l++) t[s][n[l]].count++, t[s][n[l]].selected++;
|
||||
else {
|
||||
var r = document.getElementsByClassName(this.showItemClass);
|
||||
for (var s in t) for (var a in t[s]) t[s][a].selected = 0;
|
||||
for (l = 0; l < r.length; l++)
|
||||
for (s in t) {
|
||||
n = this.getAttrs(s, r[l]);
|
||||
for (var o = 0; o < n.length; o++) t[s][n[o]].selected++;
|
||||
}
|
||||
}
|
||||
return t;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "populateCounters",
|
||||
value: function (t) {
|
||||
if (this.populateCount)
|
||||
for (var e = 0; e < this.FILTERS.length; e++) {
|
||||
var s = this.FILTERS[e].name,
|
||||
i = this.FILTERS[e].countPrefix,
|
||||
n = this.FILTERS[e].selectedPrefix;
|
||||
if (i || n)
|
||||
for (var l in t[s]) {
|
||||
if (i) document.getElementById("" + i + l).textContent = t[s][l].count;
|
||||
if (n) {
|
||||
var r = document.getElementById("" + n + l);
|
||||
(r.textContent = t[s][l].selected),
|
||||
this.setDisabledButtonClass &&
|
||||
(0 == r.textContent
|
||||
? this.addClassIfMissing(document.getElementById(this.FILTERS[e].prefix + l), this.setDisabledButtonClass)
|
||||
: this.delClassIfPresent(document.getElementById(this.FILTERS[e].prefix + l), this.setDisabledButtonClass));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "getAttrs",
|
||||
value: function (t, e) {
|
||||
return e
|
||||
.getAttribute("data-" + t)
|
||||
.split(" ")
|
||||
.filter(function (t) {
|
||||
return 0 < t.length;
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "showAll",
|
||||
value: function (t) {
|
||||
for (var e = 0; e < this.FILTERS.length; e++) t ? this.FILTERS[e].name === t && (this.FILTERS[e].selected = []) : (this.FILTERS[e].selected = []);
|
||||
this.showCheck(t);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "checkFilter",
|
||||
value: function (t, e) {
|
||||
for (var s = document.querySelector("#" + e + t), i = 0; i < this.FILTERS.length; i++)
|
||||
this.FILTERS[i].prefix === e &&
|
||||
(0 <= this.FILTERS[i].selected.indexOf(t)
|
||||
? (this.FILTERS[i].selected.splice(t, 1), this.delClassIfPresent(s, this.activeButtonClass))
|
||||
: (this.FILTERS[i].selected.push(t), this.addClassIfMissing(s, this.activeButtonClass)),
|
||||
this.delClassIfPresent(document.querySelector(this.FILTERS[i].allSelector), this.activeButtonClass),
|
||||
this.showCheck(this.FILTERS[i].name));
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "showCheck",
|
||||
value: function (t, e) {
|
||||
for (var s = 0; s < this.FILTERS.length; s++)
|
||||
if (this.FILTERS[s].name === t && (0 === this.FILTERS[s].selected.length || this.FILTERS[s].selected.length === this.FILTERS[s].buttonTotal)) {
|
||||
for (var i = document.getElementsByClassName(this.FILTERS[s].buttonClass), n = 0; n < i.length; n++) this.delClassIfPresent(i[n], this.activeButtonClass);
|
||||
this.addClassIfMissing(document.querySelector(this.FILTERS[s].allSelector), this.activeButtonClass);
|
||||
}
|
||||
for (s = this.selectedItemCount = 0; s < this.filterItems.length; s++) {
|
||||
this.delClassIfPresent(this.filterItems[s], this.showItemClass);
|
||||
var l = 0;
|
||||
for (n = 0; n < this.FILTERS.length; n++) this.checkVisibility(this.FILTERS[n].selected, this.filterItems[s].getAttribute(this.FILTERS[n].attrName)) && l++;
|
||||
l === this.FILTERS.length && (this.filterItems[s].classList.contains(this.showItemClass) || (this.selectedItemCount++, this.addClassIfMissing(this.filterItems[s], this.showItemClass)));
|
||||
}
|
||||
document.getElementById(this.counterSelector) && (document.getElementById(this.counterSelector).textContent = "" + this.selectedItemCount), this.checkButtonCounts(e);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "checkButtonCounts",
|
||||
value: function (t) {
|
||||
(this.filterValues = this.initFilterCount(this.filterValues, t)), this.populateCounters(this.filterValues);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "checkVisibility",
|
||||
value: function (t, e) {
|
||||
if (0 < t.length) {
|
||||
for (var s = 0; s < t.length; s++) {
|
||||
if (
|
||||
0 <=
|
||||
e
|
||||
.split(" ")
|
||||
.filter(function (t) {
|
||||
return 0 < t.length;
|
||||
})
|
||||
.indexOf(t[s])
|
||||
)
|
||||
return !0;
|
||||
}
|
||||
return !1;
|
||||
}
|
||||
return !0;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "addClassIfMissing",
|
||||
value: function (t, e) {
|
||||
t.classList.contains(e) || t.classList.add(e);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "delClassIfPresent",
|
||||
value: function (t, e) {
|
||||
t.classList.contains(e) && t.classList.remove(e);
|
||||
},
|
||||
},
|
||||
]),
|
||||
l
|
||||
);
|
||||
})();
|
||||
window.HugoTagsFilter = n;
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{},
|
||||
[1]
|
||||
);
|
||||
Loading…
Reference in New Issue