hscc

Soure code of <https://hugo.soucy.cc>.
git clone git://soucy.cc/hscc.git
Log | Files | Refs

commit dea3d82dcc9ac71687e5f6b1a0975c5bb74c65ea
parent 229d9a4087b31432b8b13aa776b8d4aab3381ed6
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Tue,  5 Oct 2021 21:02:59 -0400

Add a little bit of JS to fold/unfold the archives by year

Diffstat:
Msrc/css/modules/archives.css | 30++++++++++++++++++++----------
Msrc/js/index.js | 41+++++++++++++++++++++++++++++++++++++++--
Asrc/js/js.sh | 14++++++++++++++
3 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/src/css/modules/archives.css b/src/css/modules/archives.css @@ -8,25 +8,35 @@ padding-left: 0; } -@supports (display: grid) { - .archives-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); - grid-gap: 2rem; +@media screen and (min-width: 24rem) { + @supports (display: grid) { + .archives-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + grid-gap: 2rem; + } } -} -.archives-list__year { - flex:1 1 0; - min-width: 20rem; + .archives-list__year { + flex:1 1 0; + min-width: 20rem; + } } -.archives-list__year h2 { +.archives-list__year > header { + align-items: center; border-bottom: 1px solid var(--base-fg); + display: flex; + flex-wrap: wrap; + justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; } +.archives-list__year h2 { + margin-right: 1rem; +} + .archives-list__month + .archives-list__month { margin-top: 1rem; } diff --git a/src/js/index.js b/src/js/index.js @@ -1,4 +1,41 @@ (function () { - 'use strict'; - // ... + 'use strict'; + + /* Archives Page */ + const archives = document.querySelector('[data-js-archives="list"]'); + + if (archives) { + const archives_headers = [].slice.call(archives.querySelectorAll('[data-js-archives="header"]')); + + archives_headers.forEach(function(header) { + const year = header.querySelector('[data-js-archives="year"]'); + const unfold = "tout déplier"; + const fold = "tout replier"; + + let checkbox = document.createElement('input'); + let label = document.createElement('label'); + + checkbox.id = year.id + '_checkbox'; + checkbox.setAttribute('type', 'checkbox'); + checkbox.addEventListener('change', function(evt) { + [].slice.call(header.parentNode.querySelectorAll('details')) + .forEach(function(details) { + let checked = evt.currentTarget.checked; + + details.open = checked; + + if (checked) { + evt.currentTarget.nextElementSibling.innerHTML = fold; + } else { + evt.currentTarget.nextElementSibling.innerHTML = unfold; + } + }); + }); + + label.innerHTML = '<span>tout déplier</span>'; + label.insertAdjacentElement('afterbegin', checkbox); + + header.insertAdjacentElement('beforeend', label); + }); + } })(); diff --git a/src/js/js.sh b/src/js/js.sh @@ -0,0 +1,14 @@ +#!/bin/sh +# You can use it with entr to rebuild on change: +# find . | entr -d ./js.sh + +dst="../../public_html/js/" + +while read line; do + [ ! -z "$line" ] && cat "./$line" +done <<-EOF > "${dst}index.min.js" + +index.js +EOF + +echo "JS builded! @ $(date +"%Y-%m-%d %T")"