58 lines
2.7 KiB
HTML
58 lines
2.7 KiB
HTML
{{/*
|
|
Customer paths — one row per customer type, each with its layer fit.
|
|
`strip: true` adds a four-layer strip pinned above the list: hovering or
|
|
focusing a path lights the layers it uses there, and in any `layers`
|
|
section on the page (rows carry data-layer). Mouse devices only.
|
|
*/}}
|
|
{{ $s := . }}
|
|
{{ partial "sections/head.html" $s }}
|
|
{{ if $s.strip }}
|
|
<div class="layer-strip" aria-hidden="true">
|
|
<span class="layer-strip-label"><span class="strip-idle">Point at a path to see the layers it uses</span><span class="strip-on">Layers this path uses</span></span>
|
|
<ol class="layer-strip-list">
|
|
{{ range hugo.Data.layers }}<li class="strip-layer" data-layer="{{ .key }}"><i></i><em>{{ .name }}</em></li>{{ end }}
|
|
</ol>
|
|
</div>
|
|
{{ end }}
|
|
<ol class="entries path-list">
|
|
{{ range $i, $p := $s.items }}
|
|
<li>
|
|
<a href="{{ $p.link | relURL }}" class="path-row" data-fit="{{ $p.fit | jsonify }}">
|
|
<div class="path-body">
|
|
<span class="path-who"><span class="entry-n">{{ printf "%03d" (add $i 1) }}</span>{{ $p.who }}</span>
|
|
<h3>{{ $p.title }}</h3>
|
|
<p>{{ $p.body | markdownify }}</p>
|
|
<span class="more path-link">{{ replaceRE `\s*[→↗]\s*$` "" ($p.linktext | default "See this path") }}<span class="arrow" aria-hidden="true">→</span></span>
|
|
</div>
|
|
<div class="path-fit">{{ partial "fit.html" (dict "fit" $p.fit "compact" true) }}</div>
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ol>
|
|
{{ if $s.strip }}
|
|
<script>
|
|
(function () {
|
|
var list = document.currentScript.parentNode.querySelector('.path-list');
|
|
if (!list || !matchMedia('(hover: hover)').matches) return;
|
|
var targets = document.querySelectorAll('.strip-layer[data-layer], .layer-row[data-layer]');
|
|
function light(fit) {
|
|
targets.forEach(function (el) {
|
|
var state = fit ? (fit[el.dataset.layer] || 'no') : '';
|
|
el.classList.toggle('is-lit', state === 'yes');
|
|
el.classList.toggle('is-own', state === 'own');
|
|
el.classList.toggle('is-off', state === 'no');
|
|
});
|
|
document.querySelectorAll('.layer-strip').forEach(function (el) { el.classList.toggle('is-active', !!fit); });
|
|
}
|
|
list.querySelectorAll('.path-row').forEach(function (row) {
|
|
var fit = JSON.parse(row.dataset.fit || '{}');
|
|
row.addEventListener('mouseenter', function () { light(fit); });
|
|
row.addEventListener('focus', function () { light(fit); });
|
|
});
|
|
list.addEventListener('mouseleave', function () { light(null); });
|
|
list.addEventListener('focusout', function (e) { if (!list.contains(e.relatedTarget)) light(null); });
|
|
})();
|
|
</script>
|
|
{{ end }}
|
|
{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
|