From feee680d1bc3bbcc1cbd7ee411926a19feb515cf Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Wed, 22 Jul 2020 15:46:26 +0200
Subject: [PATCH] restored the page breaks display in texts

---
 assets/css/app.scss               | 42 ++++++++++++++++++++-----
 src/components/Content/EdText.vue | 52 +++++++++++++++----------------
 2 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 69bfdcd..e284d5a 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -467,18 +467,46 @@ section[role="main-content"]{
     }
     // <span role=\"pageBreak\" data-num=\"15\"></span>
     span[role="pageBreak"]{
-      display:block;
+      display: inline-block;
+      border-left: 1px solid $bleuroi;
+      height:1.4em;
+      // word-spacing: 0;
+      margin: 0 0.3em;
+      line-height: 3;
       position: relative;
-      $w:3em;
+      vertical-align: bottom;
+      &:after, &:before{
+        content: '';
+        display: block;
+        width:0.5em;
+        position: absolute;
+      }
+      &:after{
+        top:0;
+        left:0;
+        border-top: 1px solid $bleuroi;
+      }
+      &:before{
+        bottom:0;
+        right:0;
+        border-bottom: 1px solid $bleuroi;
+      }
+    }
+    span[role="pageNum"]{
+      // display:inline;
+      position: relative;
+      float:right;
+      // position: sticky;
+      $w:0.5em;
       width:$w; height:0;
       margin-left:calc(100% - (#{$w} * 0.5));
       // &:before
       &:after{
-        display: block;
+        // display: block;
         position: absolute;
         font-size: 0.630em;
-        width:$w; height:$w;
-        line-height: $w *0.95;
+        width:$w; height:$w*2;
+        line-height: $w*1.7;
         padding-left: 1em;
         border-right: 1px solid $bleuroilight;
         color: $bleuroi;
@@ -490,9 +518,9 @@ section[role="main-content"]{
       //   bottom: 0.1em;
       // }
       &:after{
-        content:attr(title);
+        content:attr(data-num);
         border-top: 1px solid $bleuroilight;
-        top:0.1em;
+        // bottom:1.3em;
       }
     }
   }
diff --git a/src/components/Content/EdText.vue b/src/components/Content/EdText.vue
index 42bbdaa..cc50844 100644
--- a/src/components/Content/EdText.vue
+++ b/src/components/Content/EdText.vue
@@ -48,7 +48,7 @@ export default {
       ` data-uuid="${this.uuid}"` +
       `>${this.tei}</div>`
       this.parseLinks()
-      this.parsePageBreaks()
+      // this.parsePageBreaks()
       // console.log('EdText: builded html', this.html)
     },
     parseLinks () {
@@ -87,31 +87,31 @@ export default {
         // console.log('this.html', this.html)
       }
     },
-    parsePageBreaks () {
-      let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
-      console.log('pagebreaks', pbs)
-      // if (pbs) {
-      //   let pbparts, newpb, num
-      //   for (var i = 0; i < pbs.length; i++) {
-      //     pbparts = RegExp(/<span role="pageBreak" data-num="(.+)"><\/span>/).exec(pbs[i], 'g')
-      //     if (!pbparts) {
-      //       console.warn(`pageBreak ${i} maformed`, pbs[i])
-      //     } else {
-      //       // console.log('pbparts', pbparts)
-      //       num = pbparts[1]
-      //       this.pages.push(num)
-      //       newpb = `<span` +
-      //         // ` id="page-break-${num}"` +
-      //         ` role="pageBreak"` +
-      //         ` data-num="${num}"` +
-      //         ` data-num-prev="${num - 1}"` +
-      //         ` />`
-      //       // console.log('newpb', newpb)
-      //       this.html = this.html.replace(pbs[i], newpb)
-      //     }
-      //   }
-      // }
-    },
+    // parsePageBreaks () {
+    //   let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
+    //   console.log('pagebreaks', pbs)
+    //   if (pbs) {
+    //     let pbparts, newpb, num
+    //     for (var i = 0; i < pbs.length; i++) {
+    //       pbparts = RegExp(/<span role="pageBreak" data-num="(.+)"><\/span>/).exec(pbs[i], 'g')
+    //       if (!pbparts) {
+    //         console.warn(`pageBreak ${i} maformed`, pbs[i])
+    //       } else {
+    //         // console.log('pbparts', pbparts)
+    //         num = pbparts[1]
+    //         this.pages.push(num)
+    //         newpb = `<span` +
+    //           // ` id="page-break-${num}"` +
+    //           ` role="pageBreak"` +
+    //           ` data-num="${num}"` +
+    //           ` data-num-prev="${num - 1}"` +
+    //           ` />`
+    //         // console.log('newpb', newpb)
+    //         this.html = this.html.replace(pbs[i], newpb)
+    //       }
+    //     }
+    //   }
+    // },
     onClickRef (e) {
       console.log('onClickRef(e)', e)
       this.$router.push({