#2097 static toc

assets/css/app.scss

@@ -1240,6 +1240,20 @@ section[role="main-content"]{
   }
 
   #static{
+    >header{
+      h1{
+
+      }
+      nav.toc{
+        li{
+          a{
+            font-size: 1em;
+            line-height: $base-line * 0.5;
+            margin-bottom: $base-line / 2;
+          }
+        }
+      }
+    }
     figure{
       margin: 2em 0;
       img{

src/pages/Static.vue

@@ -1,8 +1,29 @@
 <template>
-  <MainContentLayout id="static" class="">
+  <MainContentLayout
+    id="static"
+    :reftoscrollto="reftoscrollto"
+  >
     <template v-slot:header>
       <span v-if="!page" class="loading">Chargement ...</span>
-      <h1 v-else>{{ page.title }}</h1>
+      <template v-else>
+        <h1>{{ page.title }}</h1>
+        <nav v-if="toc" class="toc">
+          <ul>
+            <li
+              v-for="(item,index) in toc"
+              :key="index"
+            >
+              <a
+                :href="'#' + item.hash"
+                @click.prevent="onclickTOC"
+                @keyup.enter="onclickTOC"
+              >
+                {{ item.title }}
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </template>
     </template>
 
     <div v-if="page" v-html="page.tei_parsed" />
@@ -22,7 +43,9 @@ export default {
   },
   data: () => ({
     uuid: null,
-    page: null
+    page: null,
+    toc: [],
+    reftoscrollto: null
   }),
   computed: {
     ...mapState({
@@ -67,11 +90,31 @@ export default {
         }
       }
       this.parseContentImages()
+      this.parseContentTOC()
     },
     parseContentImages () {
       console.log('parseContentImages')
       this.page.tei_parsed = this.page.tei.replace(/src="\/gdp\/static\/images\/(\w+)\.jpg"/g, `src="${window.apipath}/gdp/static/images/$1.jpg"`)
-      console.log(this.page.tei_parsed)
+      // console.log(this.page.tei_parsed)
+    },
+    parseContentTOC () {
+      let match = this.page.tei_parsed.match(/<h1[^>]*>[^<]+<\/h1>/g)
+      console.log('match', match)
+      match.forEach((element, index) => {
+        console.log(element, index)
+        // let elmt = element.replace(/<h1([^>]*)>([^<]+)<\/h1>/, `<h1 id="toc-${index}"$1>$2</h1>`)
+        let elmtmatch = element.match(/(<h1([^>]*)>)([^<]+)<\/h1>/)
+        let elmt = element.replace(elmtmatch[1], `<h1 id="toc-${index}"${elmtmatch[2]}>`)
+        this.page.tei_parsed = this.page.tei_parsed.replace(element, elmt)
+        this.toc.push({
+          title: elmtmatch[3],
+          hash: `toc-${index}`
+        })
+      })
+    },
+    onclickTOC (e) {
+      console.log('onClickTOC', e, e.target.hash)
+      this.reftoscrollto = e.target.hash
     }
   },
   metaInfo () {