displaying pageBreaks

assets/css/app.scss

@@ -402,6 +402,7 @@ section[role="main-content"]{
 
   #text{
     .tei{
+      width: 93%;
       h1{
         font-size: 1.512em;
       }
@@ -429,6 +430,35 @@ section[role="main-content"]{
         }
       }
     }
+    // <span role=\"pageBreak\" data-num=\"15\"></span>
+    span[role="pageBreak"]{
+      display:block;
+      position: relative;
+      $w:3em;
+      width:$w; height:0;
+      margin-left:calc(100% - (#{$w} * 0.5));
+      &:before, &:after{
+        display: block;
+        position: absolute;
+        font-size: 0.630em;
+        width:$w; height:$w;
+        line-height: $w *0.95;
+        padding-left: 1em;
+        border-right: 1px solid $bleuroilight;
+        color: $bleuroi;
+        text-indent: $w + 0.5em;
+      }
+      &:before{
+        content:attr(data-num-prev);
+        border-bottom: 1px solid $bleuroilight;
+        bottom: 0.1em;
+      }
+      &:after{
+        content:attr(data-num);
+        border-top: 1px solid $bleuroilight;
+        top:0.1em;
+      }
+    }
   }
 
 

assets/css/base/_colors.scss

@@ -1,4 +1,5 @@
 $bleuroi: rgb(61,82,102);
+$bleuroilight: lighten(rgb(61,82,102), 30%);
 $gris: rgb(200,204,204);
 $grisclair: rgb(230,234,234);
 $grisfonce: rgb(57,57,64);

src/components/Content/EdText.vue

@@ -44,6 +44,7 @@ export default {
       ` data-uuid="${this.uuid}"` +
       `>${this.tei}</div>`
       this.parseLinks()
+      this.parsePageBreaks()
       // console.log('EdText: builded html', this.html)
     },
     parseLinks () {
@@ -82,6 +83,29 @@ 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]
+            newpb = `<span` +
+              ` 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({