ozymandias/templates/new.html

55 lines
2.1 KiB
HTML

<main id="markdownBody">
<h1 class="page-title">New</h1>
<div class="new-controls">
<span class="new-controls-label">Show</span>
<div class="new-controls-options" role="group" aria-label="Number of entries to show">
<button class="new-count-btn" data-count="25">25</button>
<button class="new-count-btn" data-count="50">50</button>
<button class="new-count-btn" data-count="100">100</button>
<button class="new-count-btn" data-count="all">All</button>
</div>
</div>
<ul class="new-list">
$for(recent-items)$
<li class="new-entry">
<span class="new-entry-kind">$item-kind$</span>
<div class="new-entry-main">
<div class="new-entry-header">
<a class="new-entry-title" href="$url$">$title$</a>
<time class="new-entry-date" datetime="$date-iso$">$date-created$</time>
</div>
$if(abstract)$<p class="new-entry-abstract">$abstract$</p>$endif$
</div>
</li>
$endfor$
</ul>
</main>
<script>
(function () {
var STORAGE_KEY = 'new-page-count';
var DEFAULT = 25;
function applyCount(n) {
var entries = document.querySelectorAll('.new-entry');
var limit = (n === 'all') ? Infinity : parseInt(n, 10);
entries.forEach(function (el, i) {
el.hidden = i >= limit;
});
document.querySelectorAll('.new-count-btn').forEach(function (btn) {
btn.classList.toggle('is-active', btn.dataset.count === String(n));
});
try { localStorage.setItem(STORAGE_KEY, n); } catch (e) {}
}
document.addEventListener('DOMContentLoaded', function () {
var saved;
try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
applyCount(saved || DEFAULT);
document.querySelectorAll('.new-count-btn').forEach(function (btn) {
btn.addEventListener('click', function () { applyCount(btn.dataset.count); });
});
});
}());
</script>