From 68bc48573d4818877d62f5ff8e640955919b54eb Mon Sep 17 00:00:00 2001
From: "fanky.eu" <jakub.webisti@gmail.com>
Date: Sat, 15 May 2021 23:30:50 +0200
Subject: [PATCH] floating nav js and defined anchors
---
.../25-problems/problems-pirati-stan.mustache | 8 ++-
.../floating-nav-pirati-stan.mustache | 64 ++++++++++++++++++-
.../detail-program-pirati-stan.mustache | 14 ++--
.../molecules/floating-nav-pirati-stan.pcss | 28 ++++++--
4 files changed, 96 insertions(+), 18 deletions(-)
diff --git a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
index a67f4d8..e0c23fe 100644
--- a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
+++ b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
@@ -1,11 +1,13 @@
-<section class="program-detail-problem-solution mb-20">
+<section id="co-nas-stve" class="program-detail-problem-solution mb-20">
<div class="problem-cross"><i class="ico--thincross text-xs sm:text-xl text-white"></i></div>
<div class="problem-inner content-block">
<h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
<p class="text-base mb-8">{{> atoms-paragraph-with-sources }}</p>
- {{> atoms-accordeon-row-preview }}
+ <div id="proc-je-to-problem">
+ {{> atoms-accordeon-row-preview }}
+ </div>
</div>
- <div class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
+ <div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
<div class="ideal-inner bg-lemon content-block">
<h2 class="head-alt-sm md:head-alt-md mb-9">Ideál</h2>
<p class="text-base">Chceme vzdělanou a informovanou společnost, která se ubrání dezinformacím. Občané budou umět dezinformaci rozeznat a dezinformátoři budou reálně právně odpovědní.</p>
diff --git a/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache b/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
index 9787129..cba5b64 100644
--- a/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
+++ b/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
@@ -5,7 +5,7 @@
</div>
<div class="inner float-panel-inner elevation-2">
<ul>
- <li class="active"><a href="#co-nas-stve">Co nás štve?</a></li>
+ <li><a class="active" href="#co-nas-stve">Co nás štve?</a></li>
<li><a href="#proc-je-to-problem">Proč je to problém?</a></li>
<li><a href="#nase-vize">Naše vize</a></li>
<li><a href="#jak-toho-chceme-docilit">Jak toho chceme docílit?</a></li>
@@ -18,4 +18,64 @@
</ul>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
+<script>
+ window.addEventListener("load", onLoadFunction);
+ var anchorsArray=[];
+
+ function placeUponId(id, space){
+ return document.getElementById(id).getBoundingClientRect().top + window.scrollY - space;
+ }
+
+ function onLoadFunction(e){
+ var anchorElemsArray;
+ onResizeFunction();
+ for (const entry of anchorsArray) {
+ entry.menuitem.addEventListener("click", clickHandler);
+ }
+
+ function clickHandler(e) {
+ e.preventDefault();
+ var id=this.getAttribute("href").replace("#","");
+ //console.log(placeUponId(id, 20));
+ scroll({
+ top: placeUponId(id, 20),
+ behavior: "smooth"
+ });
+ }
+
+
+ window.addEventListener("resize", onResizeFunction);
+ }
+ function onResizeFunction (e){
+ var itemsProcessed=0;
+ var anchorElemsArray=document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
+ anchorsArray=[];
+ anchorElemsArray.forEach(function(entry){
+ var id=entry.getAttribute("href").replace("#","");
+ anchorsArray.push({
+ id: id,
+ top: placeUponId(id, 200),
+ menuitem: entry
+ });
+ itemsProcessed++;
+ if(itemsProcessed === anchorElemsArray.length) {
+ anchorsArray.reverse();
+ }
+ });
+ //console.log(anchorsArray);
+ }
+ window.onscroll = function() {
+ var top = window.pageYOffset || document.documentElement.scrollTop;
+ var activereached=false;
+ anchorsArray.forEach(function(entry){
+ entry.menuitem.classList.remove("active");
+ entry.menuitem.classList.remove("passed");
+ if(top >= placeUponId(entry.id, 200)){
+ if(activereached) entry.menuitem.classList.add("passed"); else entry.menuitem.classList.add("active");
+ activereached=true;
+ }
+ });
+ };
+
+</script>
\ No newline at end of file
diff --git a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
index 33b5816..3ad76e3 100644
--- a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
+++ b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
@@ -22,7 +22,7 @@
</div>
<div class="container-collapsible-content" style="height: 50vh;">
- <h3 class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
+ <h3 id="jak-toho-chceme-docilit" class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
{{> atoms-unordered-list-checks-pirati-stan(label: "Profesní vzdělávání učitelů a ředitelů:")}}
@@ -30,7 +30,7 @@
{{> atoms-unordered-list-checks-pirati-stan}}
- <div class="grid grid-cols-1 gap-8 mt-20">
+ <div id="kolik-potrebujeme-casu" class="grid grid-cols-1 gap-8 mt-20">
{{> organisms-countdown-small-pirati-stan }}
@@ -48,7 +48,7 @@
{{> atoms-figure(caption: "Popisek fotky") }}
- <h3 class="head-alt-base mb-8 mt-20">BENEFITY</h3>
+ <h3 id="co-to-prinese" class="head-alt-base mb-8 mt-20">BENEFITY</h3>
<div class="program-detail-benefity grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
{{> molecules-benefits-pirati-stan(demoDesc: "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.")}}
{{> molecules-benefits-pirati-stan}}
@@ -74,24 +74,24 @@
<h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight mt-24">V dlouhodobém horizontu přinese kriticky smýšlející společnost snížení nákladů, které jsou následkem dezinformací (soudy, veřejné zdraví).</h3>
- <h3 class="head-alt-base mb-10">Co už jsme udělali:</h3>
+ <h3 id="co-jsme-uz-odpracovali" class="head-alt-base mb-10">Co už jsme udělali:</h3>
{{> atoms-unordered-list-checks-pirati-stan}}
{{> atoms-unordered-list-checks-pirati-stan}}
- <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
+ <h3 id="casto-kladene-otazky" class="head-alt-base mb-8 mt-20">FAQ</h3>
{{> molecules-accordeon }}
- <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
+ <h3 id="souvisejici-body" class="head-alt-base mb-8 mt-20">Související body:</h3>
<div class="">
{{> molecules-carousel-card-list }}
</div>
<h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3>
<p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
- <h3 class="head-alt-base mb-8 mt-8">Zdroje:</h3>
+ <h3 id="zdroje-a-doplnujici-informace" class="head-alt-base mb-8 mt-8">Zdroje:</h3>
{{> atoms-source(sourceNumber: 1) }}
{{> atoms-source(sourceNumber: 2, showDescription: true) }}
diff --git a/source/css/molecules/floating-nav-pirati-stan.pcss b/source/css/molecules/floating-nav-pirati-stan.pcss
index 8c33754..e703054 100644
--- a/source/css/molecules/floating-nav-pirati-stan.pcss
+++ b/source/css/molecules/floating-nav-pirati-stan.pcss
@@ -7,7 +7,10 @@
.floating-nav-panel {
position: sticky;
- top: 100px;
+ top: 40px;
+ @media only screen and (min-width: 1400){
+ top: 100px;
+ }
.opener {
@apply cursor-pointer;
@@ -18,7 +21,8 @@
.inner {
@apply bg-white absolute;
width: 344px;
- padding: 30px;
+ padding-top: 30px;
+ padding-bottom: 30px;
top: 64px;
left: 5px;
@@ -26,15 +30,27 @@
@apply list-none;
li {
- @apply cursor-pointer py-4;
+ @apply cursor-pointer;
color: #4C4C4C;
font-size: 16px;
+
+ a{
+ @apply block py-4 relative border-transparent;
+ padding-left: 30px;
+ padding-right: 30px;
+ border-left-width: 5px;
+ left: -5px;
+ }
}
- li:hover, li.active{
- @apply pl-5 text-black font-bold bg-no-repeat;
+ li a:hover, li a.active{
+ @apply text-black font-bold bg-no-repeat;
+ padding-left: 50px;
background-image: url(../images/floating-nav-icon.svg);
- background-position: center left;
+ background-position: left 30px center;
+ }
+ li a.active, li a.passed{
+ @apply border-acidgreen;
}
}
--
GitLab