nav - don't show empty categories
This commit is contained in:
isUnknown
parent
09e122af64
commit
bdb8613be4
9 changed files with 295 additions and 276 deletions
|
|
@ -1,27 +1,41 @@
|
|||
<?php
|
||||
|
||||
return function ($site) {
|
||||
$textsPage = $site->find('texts');
|
||||
$years = $textsPage->children();
|
||||
$texts = $years->children()->index();
|
||||
|
||||
function createCategories($textsPage) {
|
||||
$categories = array();
|
||||
|
||||
foreach ($textsPage->categories()->split() as $category) {
|
||||
$categories[$category] = array(
|
||||
'title' => $category,
|
||||
'texts' => array()
|
||||
);
|
||||
}
|
||||
return $categories;
|
||||
}
|
||||
|
||||
function fillCategoriesWithTexts($emptyCategories, $texts) {
|
||||
$filledCategories = $emptyCategories;
|
||||
foreach ($texts as $text) {
|
||||
try {
|
||||
$categories[$text->category()->value()]['texts'][] = $text;
|
||||
$textCategory = $text->category()->value();
|
||||
$filledCategories[$textCategory]['texts'][] = $text;
|
||||
} catch (\Throwable $th) {
|
||||
throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage()));
|
||||
}
|
||||
}
|
||||
|
||||
return $categories;
|
||||
// exclude empty categories
|
||||
return array_filter($filledCategories, function($category) {
|
||||
return count($category['texts']) > 0;
|
||||
});
|
||||
}
|
||||
|
||||
return function ($site) {
|
||||
$textsPage = $site->find('texts');
|
||||
$years = $textsPage->children();
|
||||
$texts = $years->children()->index();
|
||||
|
||||
$emptyCategories = createCategories($textsPage);
|
||||
|
||||
$filledCategories = fillCategoriesWithTexts($emptyCategories, $texts);
|
||||
|
||||
return $filledCategories;
|
||||
};
|
||||
|
|
|
|||
55
site/snippets/desktop-nav.php
Normal file
55
site/snippets/desktop-nav.php
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<?php
|
||||
$firstCol = rand(0, 8);
|
||||
$secondCol = rand(0, 8)
|
||||
?>
|
||||
|
||||
<sidebar id="desktop-nav">
|
||||
<ul>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
|
||||
années
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
|
||||
catégories
|
||||
</button>
|
||||
</li>
|
||||
<li class="empty
|
||||
"></li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<a href="#">
|
||||
s'abonner
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<a href="<?= $site->find('a-propos')->url() ?>">
|
||||
à propos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</sidebar>
|
||||
|
|
@ -25,4 +25,4 @@ $entryTopPos = $entryTopPos ?? 20;
|
|||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<?php snippet('panels') ?>
|
||||
<?php snippet('nav') ?>
|
||||
17
site/snippets/nav.php
Normal file
17
site/snippets/nav.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?php snippet('desktop-nav') ?>
|
||||
|
||||
<?php snippet('panel--years') ?>
|
||||
|
||||
<button
|
||||
onclick="togglePanel('years')"
|
||||
class="panel-close"
|
||||
>fermer</button>
|
||||
</nav>
|
||||
|
||||
<?php snippet('panel--categories') ?>
|
||||
|
||||
<button
|
||||
onclick="togglePanel('categories')"
|
||||
class="panel-close"
|
||||
>fermer</button>
|
||||
</nav>
|
||||
90
site/snippets/panel--categories.php
Normal file
90
site/snippets/panel--categories.php
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<nav
|
||||
class="panel panel--right"
|
||||
x-data="{search: ''}"
|
||||
>
|
||||
<div class="search">
|
||||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon"
|
||||
alt="Icône loupe indiquant le champ de recherche."
|
||||
>
|
||||
<button
|
||||
x-show="search.length > 0"
|
||||
@click="search = ''"
|
||||
class="search__icon"
|
||||
>
|
||||
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<ul class="panel__items">
|
||||
<?php
|
||||
$categories = $kirby->collection('categories');
|
||||
shuffle($categories);
|
||||
foreach($categories as $category):
|
||||
?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
>
|
||||
<a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
|
||||
<button
|
||||
class="panel__toggle-btn"
|
||||
:class="isOpen ? '' : 'short'"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<h3><?= $category['title'] ?></h3>
|
||||
<div
|
||||
class="panel__toggle-icon"
|
||||
x-text="isOpen || search.length > 0 ? '-' : '+'"
|
||||
></div>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
class="panel-item-content"
|
||||
x-show="isOpen || search.length > 0"
|
||||
>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article):
|
||||
?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
|
||||
author: '<?= $article->author()->toUser()->name() ?>',
|
||||
yearParent: '<?= $article->parent()->title()->value() ?>',
|
||||
category: '<?= $article->category() ?>',
|
||||
}"
|
||||
x-show="
|
||||
title.toLowerCase().includes(search.toLowerCase())
|
||||
|| author.toLowerCase().includes(search.toLowerCase())
|
||||
|| yearParent.toLowerCase().includes(search.toLowerCase())
|
||||
|| category.toLowerCase().includes(search.toLowerCase())
|
||||
"
|
||||
>
|
||||
<a href="<?= $article->url() ?>" class="text__title no-line">
|
||||
<h4><?= $article->title() ?></h4>
|
||||
</a>
|
||||
<div class="text__infos">
|
||||
<p>
|
||||
<span class="light">par</span>
|
||||
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
|
||||
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
|
||||
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
97
site/snippets/panel--years.php
Normal file
97
site/snippets/panel--years.php
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<nav
|
||||
class="panel panel--left"
|
||||
x-data="{search: ''}"
|
||||
>
|
||||
<div class="search">
|
||||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon"
|
||||
alt="Icône loupe indiquant le champ de recherche."
|
||||
>
|
||||
<button
|
||||
x-show="search.length > 0"
|
||||
@click="search = ''"
|
||||
class="search__icon"
|
||||
>
|
||||
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<ul class="panel__items">
|
||||
<?php foreach($kirby->collection('years') as $year): ?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
>
|
||||
<a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
|
||||
<button
|
||||
class="panel__toggle-btn"
|
||||
:class="isOpen ? '' : 'short'"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<h3><?= $year->title() ?></h3>
|
||||
<div
|
||||
class="panel__toggle-icon"
|
||||
x-text="isOpen || search.length > 0 ? '-' : '+'"
|
||||
></div>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
class="panel-item-content"
|
||||
x-show="isOpen || search.length > 0"
|
||||
x-data='{ edito: false }'
|
||||
>
|
||||
<div
|
||||
class="panel-item-content__edito"
|
||||
:class="edito ? '' : 'short'"
|
||||
x-show="search.length === 0"
|
||||
>
|
||||
<?= $year->edito() ?>
|
||||
</div>
|
||||
<button
|
||||
:class="edito ? 'open' : 'close'"
|
||||
x-show="search.length === 0"
|
||||
class="see-more toggle-btn toggle-btn--left"
|
||||
@click="edito = !edito"
|
||||
>Lire</button>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php foreach($year->children()->shuffle() as $article): ?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
|
||||
author: '<?= $article->author()->toUser()->name() ?>',
|
||||
yearParent: '<?= $article->parent()->title()->value() ?>',
|
||||
category: '<?= $article->category() ?>',
|
||||
}"
|
||||
x-show="
|
||||
title.toLowerCase().includes(search.toLowerCase())
|
||||
|| author.toLowerCase().includes(search.toLowerCase())
|
||||
|| yearParent.toLowerCase().includes(search.toLowerCase())
|
||||
|| category.toLowerCase().includes(search.toLowerCase())
|
||||
"
|
||||
>
|
||||
<a href="<?= $article->url() ?>" class="text__title no-line">
|
||||
<h4><?= $article->title() ?></h4>
|
||||
</a>
|
||||
<div class="text__infos">
|
||||
<p>
|
||||
<span class="light">par</span>
|
||||
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
|
||||
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
|
||||
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
|
@ -1,254 +0,0 @@
|
|||
<?php
|
||||
$firstCol = rand(0, 8);
|
||||
$secondCol = rand(0, 8)
|
||||
?>
|
||||
|
||||
<sidebar id="desktop-nav">
|
||||
<ul>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
|
||||
années
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
|
||||
catégories
|
||||
</button>
|
||||
</li>
|
||||
<li class="empty
|
||||
"></li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<a href="#">
|
||||
s'abonner
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="left top"
|
||||
style="
|
||||
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
|
||||
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
|
||||
"
|
||||
>
|
||||
<a href="<?= $site->find('a-propos')->url() ?>">
|
||||
à propos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</sidebar>
|
||||
|
||||
<nav
|
||||
class="panel panel--left"
|
||||
x-data="{search: ''}"
|
||||
>
|
||||
<div class="search">
|
||||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon"
|
||||
alt="Icône loupe indiquant le champ de recherche."
|
||||
>
|
||||
<button
|
||||
x-show="search.length > 0"
|
||||
@click="search = ''"
|
||||
class="search__icon"
|
||||
>
|
||||
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<ul class="panel__items">
|
||||
<?php foreach($kirby->collection('years') as $year): ?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
>
|
||||
<a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
|
||||
<button
|
||||
class="panel__toggle-btn"
|
||||
:class="isOpen ? '' : 'short'"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<h3><?= $year->title() ?></h3>
|
||||
<div
|
||||
class="panel__toggle-icon"
|
||||
x-text="isOpen || search.length > 0 ? '-' : '+'"
|
||||
></div>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
class="panel-item-content"
|
||||
x-show="isOpen || search.length > 0"
|
||||
x-data='{ edito: false }'
|
||||
>
|
||||
<div
|
||||
class="panel-item-content__edito"
|
||||
:class="edito ? '' : 'short'"
|
||||
x-show="search.length === 0"
|
||||
>
|
||||
<?= $year->edito() ?>
|
||||
</div>
|
||||
<button
|
||||
:class="edito ? 'open' : 'close'"
|
||||
x-show="search.length === 0"
|
||||
class="see-more toggle-btn toggle-btn--left"
|
||||
@click="edito = !edito"
|
||||
>Lire</button>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php foreach($year->children()->shuffle() as $article): ?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
|
||||
author: '<?= $article->author()->toUser()->name() ?>',
|
||||
yearParent: '<?= $article->parent()->title()->value() ?>',
|
||||
category: '<?= $article->category() ?>',
|
||||
}"
|
||||
x-show="
|
||||
title.toLowerCase().includes(search.toLowerCase())
|
||||
|| author.toLowerCase().includes(search.toLowerCase())
|
||||
|| yearParent.toLowerCase().includes(search.toLowerCase())
|
||||
|| category.toLowerCase().includes(search.toLowerCase())
|
||||
"
|
||||
>
|
||||
<a href="<?= $article->url() ?>" class="text__title no-line">
|
||||
<h4><?= $article->title() ?></h4>
|
||||
</a>
|
||||
<div class="text__infos">
|
||||
<p>
|
||||
<span class="light">par</span>
|
||||
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
|
||||
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
|
||||
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
onclick="togglePanel('left')"
|
||||
class="panel-close"
|
||||
>fermer</button>
|
||||
</nav>
|
||||
|
||||
<nav
|
||||
class="panel panel--right"
|
||||
x-data="{search: ''}"
|
||||
>
|
||||
<div class="search">
|
||||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon"
|
||||
alt="Icône loupe indiquant le champ de recherche."
|
||||
>
|
||||
<button
|
||||
x-show="search.length > 0"
|
||||
@click="search = ''"
|
||||
class="search__icon"
|
||||
>
|
||||
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<ul class="panel__items">
|
||||
<?php
|
||||
$categories = $kirby->collection('categories');
|
||||
shuffle($categories);
|
||||
foreach($categories as $category): ?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
>
|
||||
<a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
|
||||
<button
|
||||
class="panel__toggle-btn"
|
||||
:class="isOpen ? '' : 'short'"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<h3><?= $category['title'] ?></h3>
|
||||
<div
|
||||
class="panel__toggle-icon"
|
||||
x-text="isOpen || search.length > 0 ? '-' : '+'"
|
||||
></div>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
class="panel-item-content"
|
||||
x-show="isOpen || search.length > 0"
|
||||
>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article): ?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
|
||||
author: '<?= $article->author()->toUser()->name() ?>',
|
||||
yearParent: '<?= $article->parent()->title()->value() ?>',
|
||||
category: '<?= $article->category() ?>',
|
||||
}"
|
||||
x-show="
|
||||
title.toLowerCase().includes(search.toLowerCase())
|
||||
|| author.toLowerCase().includes(search.toLowerCase())
|
||||
|| yearParent.toLowerCase().includes(search.toLowerCase())
|
||||
|| category.toLowerCase().includes(search.toLowerCase())
|
||||
"
|
||||
>
|
||||
<a href="<?= $article->url() ?>" class="text__title no-line">
|
||||
<h4><?= $article->title() ?></h4>
|
||||
</a>
|
||||
<div class="text__infos">
|
||||
<p>
|
||||
<span class="light">par</span>
|
||||
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
|
||||
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
|
||||
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
onclick="togglePanel('right')"
|
||||
class="panel-close"
|
||||
>fermer</button>
|
||||
</nav>
|
||||
Loading…
Add table
Add a link
Reference in a new issue