toc scrollspy

assets/js/theme/design-system/toc.js

@@ -4,7 +4,8 @@ const CLASSES = {
   offcanvasOpened: 'has-offcanvas-opened',
   linkActive: 'active',
   isOpened: 'is-opened',
-  fullWidth: 'full-width'
+  fullWidth: 'full-width',
+  offcanvas: 'offcanvas-toc'
 };
 
 class TableOfContents {
@@ -19,7 +20,8 @@ class TableOfContents {
     this.togglers = document.querySelectorAll('.toc-cta button, .toc-container button');
     this.state = {
       opened: false,
-      currentId: null
+      currentId: null,
+      currentLink: 0
     }
     this.listen();
 
@@ -28,7 +30,7 @@ class TableOfContents {
     }
   }
   isOffcanvas() {
-    return isMobile() || document.body.classList.contains(CLASSES.fullWidth);
+    return isMobile() || document.body.classList.contains(CLASSES.fullWidth) || document.body.classList.contains(CLASSES.offcanvas);
   }
   listen() {
     window.addEventListener('scroll', this.update.bind(this), false);
@@ -82,7 +84,7 @@ class TableOfContents {
     const scroll = document.documentElement.scrollTop || document.body.scrollTop;
     let id = null;
     this.sections.forEach(section => {
-      if (this.getAbsoluteOffsetTop(section) <= scroll) {
+      if (this.getAbsoluteOffsetTop(section) <= scroll + window.innerHeight/2) {
         id = section.id;
       }
     });
@@ -93,17 +95,26 @@ class TableOfContents {
     this.updateScrollspy(scroll);
   }
   getAbsoluteOffsetTop(element) {
-    return element.getBoundingClientRect().top
+    let top = 0;
+    do {
+        top += element.offsetTop  || 0;
+        element = element.offsetParent;
+    } while(element);
+    return top
   }
   activateLink(id) {
-    console.log(id)
     const currentLink = this.element.querySelector(`[href*=${ id }]`);
-    this.state.id = id;
-    this.links.forEach(link => link.classList.remove(CLASSES.linkActive));
-    if (currentLink) {
-      currentLink.classList.add(CLASSES.linkActive);
-      this.updateCtaTitle(currentLink);
-    }
+    // console.log(currentLink.hash)
+    this.links.forEach((link, index) => {
+      if (link == currentLink) {
+        link.classList.add(CLASSES.linkActive);
+        this.updateCtaTitle(link);
+        this.state.id = id;
+        this.state.currentLink = link;
+      } else {
+        link.classList.remove(CLASSES.linkActive)
+      }
+    });
   }
   updateCtaTitle(link) {
     if (isMobile()) {
@@ -113,10 +124,14 @@ class TableOfContents {
     }
   }
   updateScrollspy(scroll) {
-    const progression = Math.max((scroll - window.innerHeight) / document.body.offsetHeight, 0);
     const container = this.isOffcanvas() ? this.nav : this.content;
-    // TODO: ne fonctionne pas avec le  behavior-scroll: smooth
-    container.scrollTop = progression * window.innerHeight/2;
+    if (this.state.currentLink) {
+      let progress = (this.getAbsoluteOffsetTop(this.state.currentLink) - container.offsetHeight/2);
+      progress = this.isOffcanvas() ? progress : progress - scroll;
+      container.scrollTo({
+        top: progress
+      })
+    }
   }
 }
 

layouts/partials/ToCamelCase

+{{ $input  := . }}
+{{ $output := $input | lower }}
+{{ $output := $output | markdownify }}
+{{ return $output }}
\ No newline at end of file

layouts/partials/diplomas/hero-single.html

@@ -24,7 +24,7 @@
       {{ end -}}
     </div>
   </div>
-  <div id="#{{ anchorize (i18n "programs.toc.essential") }}">
+  <div id="#{{ urlize (i18n "programs.toc.essential") }}">
     <div class="container">
       {{- partial "diplomas/essential" . -}}
     </div>

layouts/partials/programs/admission.html

 {{- if or (partial "GetTextFromHTML" .Params.prerequisites) (partial "GetTextFromHTML" .Params.pricing) (partial "GetTextFromHTML" .Params.registration) (partial "GetTextFromHTML" .Params.accessibility) (partial "GetTextFromHTML" .Params.other) -}}
-<section id="{{ anchorize (i18n "programs.toc.admission") }}">
+<section id="{{ urlize (i18n "programs.toc.admission") }}">
   <div class="container">
     <div class="content">
       <h2>{{ i18n "programs.toc.admission" }}</h2>
       <div>
         {{- if partial "GetTextFromHTML" .Params.prerequisites -}}
-          <section id="{{ anchorize (i18n "programs.prerequisites") }}">
+          <section id="{{ urlize (i18n "programs.prerequisites") }}">
             <h3>{{ i18n "programs.prerequisites" }}</h3>
             {{- partial "PrepareHTML" .Params.prerequisites -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.pricing -}}
-          <section id="{{ anchorize (i18n "programs.pricing") }}">
+          <section id="{{ urlize (i18n "programs.pricing") }}">
             <h3>{{ i18n "programs.pricing" }}</h3>
             {{- partial "PrepareHTML" .Params.pricing -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.registration -}}
-          <section id="{{ anchorize (i18n "programs.registration") }}">
+          <section id="{{ urlize (i18n "programs.registration") }}">
             <h3>{{ i18n "programs.registration" }}</h3>
             {{- partial "PrepareHTML" .Params.registration -}}
             {{- if partial "GetTextFromHTML" .Params.registration_url -}}
@@ -29,21 +29,21 @@
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.accessibility -}}
-          <section id="{{ anchorize (i18n "programs.accessibility") }}">
+          <section id="{{ urlize (i18n "programs.accessibility") }}">
             <h3>{{ i18n "programs.accessibility" }}</h3>
             {{- partial "PrepareHTML" .Params.accessibility -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.other -}}
-          <section id="{{ anchorize (i18n "programs._other") }}">
+          <section id="{{ urlize (i18n "programs._other") }}">
             <h3>{{ i18n "programs._other" }}</h3>
             {{- partial "PrepareHTML" .Params.other -}}
           </section>
         {{- end -}}
 
         {{- if .Params.roles -}}
-          <section id="{{ anchorize (i18n "programs.roles") }}">
+          <section id="{{ urlize (i18n "programs.roles") }}">
             <h3>{{ i18n "programs.roles" }}</h3>
             {{- with .Params.roles -}}
               {{- range . }}
@@ -74,7 +74,7 @@
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.contacts -}}
-          <section id="{{ anchorize (i18n "programs.contacts") }}">
+          <section id="{{ urlize (i18n "programs.contacts") }}">
             <h3>{{ i18n "programs.contacts" }}</h3>
             {{- if or (partial "GetTextFromHTML" .Params.contacts) -}}
               {{- partial "PrepareHTML" .Params.contacts -}}

layouts/partials/programs/hero-single.html

@@ -9,7 +9,7 @@
     </div>
   </div>
 
-  <div id="#{{ anchorize (i18n "programs.toc.essential") }}">
+  <div id="#{{ urlize (i18n "programs.toc.essential") }}">
     <div class="container">
       {{- partial "programs/essential" . -}}
       <div class="buttons">

layouts/partials/programs/pedagogy.html

 {{- if or (partial "GetTextFromHTML" .Params.content) (partial "GetTextFromHTML" .Params.pedagogy) (partial "GetTextFromHTML" .Params.evaluation) (.Params.teachers) -}}
-<section id="{{ anchorize ( i18n "programs.toc.pedagogy" ) }}">
+<section id="{{ urlize ( i18n "programs.toc.pedagogy" ) }}">
   <div class="container">
     <div class="content">
       <h2>{{ i18n "programs.toc.pedagogy" }}</h2>
       <div>
         {{- if partial "GetTextFromHTML" .Params.content -}}
-          <section id="{{ anchorize (i18n "programs.content") }}">
+          <section id="{{ urlize (i18n "programs.content") }}">
             <h3>{{ i18n "programs.content" }}</h3>
             {{- partial "PrepareHTML" .Params.content -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.pedagogy -}}
-          <section id="{{ anchorize (i18n "programs.pedagogy") }}">
+          <section id="{{ urlize (i18n "programs.pedagogy") }}">
             <h3>{{ i18n "programs.pedagogy" }}</h3>
             {{- partial "PrepareHTML" .Params.pedagogy -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.evaluation -}}
-          <section id="{{ anchorize (i18n "programs.evaluation") }}">
+          <section id="{{ urlize (i18n "programs.evaluation") }}">
             <h3>{{ i18n "programs.evaluation" }}</h3>
             {{- partial "PrepareHTML" .Params.evaluation -}}
           </section>
@@ -27,7 +27,7 @@
 
         {{- if .Params.teachers -}}
           {{ $title := i18n "programs.teachers" -}}
-          <section >
+          <section id="{{ urlize $title }}">
             <h3>{{ $title }}</h3>
             {{- partial "programs/teachers.html"
                           (dict

layouts/partials/programs/presentation.html

-<section id="{{ anchorize (i18n "programs.toc.presentation") }}">
+<section id="{{ urlize (i18n "programs.toc.presentation") }}">
     <div class="container">
       <div class="content">
         <h2>{{ i18n "programs.toc.presentation" }}</h2>
@@ -9,7 +9,7 @@
             {{- partial "PrepareHTML" .Params.objectives -}}
           {{- end -}}
 
-          <section id="{{ anchorize (i18n "programs.administrative_information") }}">
+          <section id="{{ urlize (i18n "programs.administrative_information") }}">
             <h3>{{ i18n "programs.administrative_information" }}</h3>
             <table class="post-infos">
               <caption>{{ i18n "programs.administrative_information" }}</caption>

layouts/partials/programs/results.html

 {{- if or (partial "GetTextFromHTML" .Params.opportunities) (partial "GetTextFromHTML" .Params.results) -}}
-<section id="{{ anchorize ( i18n "programs.toc.results" ) }}">
+<section id="{{ urlize ( i18n "programs.toc.results" ) }}">
   <div class="container">
     <div class="content">
       <h2>{{ i18n "programs.toc.results" }}</h2>
       <div>
         {{- if partial "GetTextFromHTML" .Params.opportunities -}}
-          <section id="{{ anchorize (i18n "programs.opportunities") }}">
+          <section id="{{ urlize (i18n "programs.opportunities") }}">
             <h3>{{ i18n "programs.opportunities" }}</h3>
             {{- partial "PrepareHTML" .Params.opportunities -}}
           </section>
         {{- end -}}
 
         {{- if partial "GetTextFromHTML" .Params.results -}}
-          <section id="{{ anchorize (i18n "programs.results") }}">
+          <section id="{{ urlize (i18n "programs.results") }}">
             <h3>{{ i18n "programs.results" }}</h3>
             {{- partial "PrepareHTML" .Params.results -}}
           </section>

layouts/partials/programs/toc.html

@@ -19,12 +19,12 @@
 <nav class="toc" id="nav-toc" aria-label="{{ i18n "commons.toc" }}">
   <ol>
     <li>
-      <a href="#{{ anchorize (i18n "programs.toc.essential") }}">{{ i18n "programs.toc.essential" }}</a>
+      <a href="#{{ urlize (i18n "programs.toc.essential") }}">{{ i18n "programs.toc.essential" }}</a>
     </li>
     <li>
-      <a href="#{{ anchorize (i18n "programs.toc.presentation") }}">{{ i18n "programs.toc.presentation" }}</a>
+      <a href="#{{ urlize (i18n "programs.toc.presentation") }}">{{ i18n "programs.toc.presentation" }}</a>
        <ol>
-          <li><a href="#{{ anchorize (i18n "programs.administrative_information") }}">{{ i18n "programs.administrative_information" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.administrative_information") }}">{{ i18n "programs.administrative_information" }}</a></li>
           {{- if .context.Params.blocks -}}
             {{- partial "blocks/toc" .context.Params.blocks -}}
           {{- end -}}
@@ -35,16 +35,16 @@
       {{- if or $content $pedagogy $evaluation $teachers }}
       <ol>
         {{- if $content -}}
-          <li><a href="#{{ anchorize (i18n "programs.content") }}">{{ i18n "programs.content" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.content") }}">{{ i18n "programs.content" }}</a></li>
         {{- end -}}
         {{- if $pedagogy -}}
-          <li><a href="#{{ anchorize (i18n "programs.pedagogy") }}">{{ i18n "programs.pedagogy" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.pedagogy") }}">{{ i18n "programs.pedagogy" }}</a></li>
         {{- end -}}
         {{- if $evaluation -}}
-          <li><a href="#{{ anchorize (i18n "programs.evaluation") }}">{{ i18n "programs.evaluation" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.evaluation") }}">{{ i18n "programs.evaluation" }}</a></li>
         {{- end -}}
         {{- if $teachers -}}
-          <li><a href="#{{ anchorize (i18n "programs.teachers") }}">{{ i18n "programs.teachers" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.teachers") }}">{{ i18n "programs.teachers" }}</a></li>
         {{- end -}}
       </ol>
       {{ end -}}
@@ -54,10 +54,10 @@
       {{- if or $opportunities $results }}
       <ol>
         {{- if $opportunities -}}
-          <li><a href="#{{ anchorize (i18n "programs.opportunities") }}">{{ i18n "programs.opportunities" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.opportunities") }}">{{ i18n "programs.opportunities" }}</a></li>
         {{- end -}}
         {{- if $results -}}
-          <li><a href="#{{ anchorize (i18n "programs.results") }}">{{ i18n "programs.results" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.results") }}">{{ i18n "programs.results" }}</a></li>
         {{- end -}}
       </ol>
       {{ end -}}
@@ -67,25 +67,25 @@
       {{- if or $prerequisites $pricing $registration $accessibility $other $roles $contacts }}
       <ol>
         {{- if $prerequisites -}}
-          <li><a href="#{{ anchorize (i18n "programs.prerequisites") }}">{{ i18n "programs.prerequisites" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.prerequisites") }}">{{ i18n "programs.prerequisites" }}</a></li>
         {{- end -}}
         {{- if $pricing -}}
-          <li><a href="#{{ anchorize (i18n "programs.pricing") }}">{{ i18n "programs.pricing" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.pricing") }}">{{ i18n "programs.pricing" }}</a></li>
         {{- end -}}
         {{- if $registration -}}
-          <li><a href="#{{ anchorize (i18n "programs.registration") }}">{{ i18n "programs.registration" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.registration") }}">{{ i18n "programs.registration" }}</a></li>
         {{- end -}}
         {{- if $accessibility -}}
-          <li><a href="#{{ anchorize (i18n "programs.accessibility") }}">{{ i18n "programs.accessibility" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.accessibility") }}">{{ i18n "programs.accessibility" }}</a></li>
         {{- end -}}
         {{- if $other -}}
-          <li><a href="#{{ anchorize (i18n "programs._other") }}">{{ i18n "programs._other" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs._other") }}">{{ i18n "programs._other" }}</a></li>
         {{- end -}}
         {{- if $roles -}}
-          <li><a href="#{{ anchorize (i18n "programs.roles") }}">{{ i18n "programs.roles" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.roles") }}">{{ i18n "programs.roles" }}</a></li>
         {{- end -}}
         {{- if $contacts -}}
-          <li><a href="#{{ anchorize (i18n "programs.contacts") }}">{{ i18n "programs.contacts" }}</a></li>
+          <li><a href="#{{ urlize (i18n "programs.contacts") }}">{{ i18n "programs.contacts" }}</a></li>
         {{- end -}}
       </ol>
       {{ end -}}