From 51a61850617d7b6d4e37267879cd30131629860d Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 29 Nov 2019 19:54:55 +0100
Subject: [PATCH] wait #3227 @3

---
 js/libs/fluidbook/fluidbook.menu.js          |  24 ++-
 js/libs/fluidbook/fluidbook.resize.js        |   1 -
 js/libs/fluidbook/menu/fluidbook.chapters.js |  65 ++++++-
 style/chapters.less                          | 193 +++++++++++++++++++
 style/fluidbook.less                         | 166 +---------------
 5 files changed, 277 insertions(+), 172 deletions(-)
 create mode 100644 style/chapters.less

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 41af9555..7cbad8ce 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -587,12 +587,34 @@ FluidbookMenu.prototype = {
 
         switch (m.data('menu')) {
             case 'chapters':
-                w = this.fluidbook.datas.chaptersColMaxWidth * 1.5;
+                this.fluidbook.datas.chaptersColumns = Math.max(1, Math.min(6, this.fluidbook.datas.chaptersColumns));
+                if (this.fluidbook.datas.chaptersCascade) {
+                    this.fluidbook.datas.chaptersColumns = 1;
+                }
+
+                var w;
+                if (this.fluidbook.datas.chaptersColumns > 1) {
+                    w = this.fluidbook.datas.chaptersColMaxWidth * this.fluidbook.datas.chaptersColumns;
+                } else {
+                    w = Math.min(450, this.fluidbook.datas.chaptersColMaxWidth);
+                }
                 fullscreen = (w >= ww * 0.9);
+                if(fullscreen){
+                    w=ww;
+                }
                 if (this.fluidbook.datas.chaptersCascade) {
                     h = hh * 0.8;
                     forceHeight = true;
                 }
+
+                if(this.fluidbook.datas.chaptersColumns > 1){
+                    if(w<this.fluidbook.datas.chaptersColMaxWidth * this.fluidbook.datas.chaptersColumns){
+                        $('.mview[data-menu=chapters] ul.chapters').addClass('onecolumn');
+                    }else{
+                        $('.mview[data-menu=chapters] ul.chapters').removeClass('onecolumn');
+                    }
+                }
+
                 break;
             case 'text':
                 w = parseInt(this.fluidbook.datas.textPopupWidth);
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 26ef5c45..7b72f22d 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -181,7 +181,6 @@ FluidbookResize.prototype = {
         }
 
         var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
-        console.log('tabsScale', tabsScale);
         this.bookScale *= tabsScale;
 
         var fw = this.bookScale * fww;
diff --git a/js/libs/fluidbook/menu/fluidbook.chapters.js b/js/libs/fluidbook/menu/fluidbook.chapters.js
index edd8e3bd..a3e73135 100644
--- a/js/libs/fluidbook/menu/fluidbook.chapters.js
+++ b/js/libs/fluidbook/menu/fluidbook.chapters.js
@@ -82,13 +82,41 @@ FluidbookChapters.prototype = {
         var $this = this;
         var base;
         var baseLevel = 0;
-        if (sub == 'null') {
+
+        // Columns setup
+        var nbItems = 0;
+        var columns = parseInt(this.fluidbook.datas.chaptersColumns);
+        $.each(this.chapters, function (k, v) {
+            if (v.label === '--' || v.label === '++') {
+
+            } else {
+                nbItems++;
+            }
+        });
+        var perCol = Math.round(nbItems / columns);
+        console.log(nbItems, perCol, columns);
+        var forgetCut = false;
+        var forceCut = false;
+        var ignore = false;
+        var columnId = 0;
+        var i = 0;
+        var columnsContainers = [];
+        for (var j = 0; j < columns; j++) {
+            columnsContainers[j] = [];
+        }
+
+        if (sub === 'null') {
             base = this.chapters;
         } else {
             var base = [];
             var vu = false;
             var level;
             $.each(this.chapters, function (k, v) {
+                if (v.label === '--' || v.label === '++') {
+
+                } else {
+                    nbItems++;
+                }
                 if (!vu) {
                     if (v.page == '#' + sub) {
                         vu = true;
@@ -110,19 +138,44 @@ FluidbookChapters.prototype = {
 
         var $this = this;
         this.html[sub] = '<ul class="chapters">';
+
+
         $.each(base, function (k, v) {
-            $this.html[sub] += $this.addItem(v, baseLevel);
+            if (!forgetCut) {
+                forgetCut = v.label.indexOf('++') === 0;
+                if (forgetCut) {
+                    return;
+                }
+            }
+            forceCut = v.label.indexOf('--') === 0 || v.label.indexOf('!!!') === 0;
+            ignore = forceCut || v.label.indexOf('++') === 0;
+
+            // Next column
+            if (!forgetCut && ((columnId + 1) < columns && ((columns > 1 && v.level === 0 && i > (perCol * 0.8)) || (forceCut && i > 0)))) {
+                i = 0;
+                columnId++;
+            }
+
+            if (forgetCut) {
+                forgetCut = false;
+            }
+
+            columnsContainers[columnId].push($this.addItem(v, baseLevel));
+
+            if (!ignore) {
+                i++;
+            }
         });
+
+        for (j = 0; j < columns; j++) {
+            this.html[sub] += '<div class="column">' + columnsContainers[j].join('') + '</div>';
+        }
         this.html[sub] += '</ul>';
     },
     addItem: function (chapter, baseLevel) {
         if (baseLevel == undefined) {
             baseLevel = 0;
         }
-
-        if (chapter.label == '--' || chapter.label == '++') {
-            return "";
-        }
         if (chapter.label == '----') {
             return '<li class="separator"></li>';
         }
diff --git a/style/chapters.less b/style/chapters.less
new file mode 100644
index 00000000..e3603678
--- /dev/null
+++ b/style/chapters.less
@@ -0,0 +1,193 @@
+// Chapters
+
+ul.chapters {
+  list-style: none;
+  padding: 20px 0;
+
+  .column {
+    display: inline-block;
+    vertical-align: top;
+    width: unit(100/@menu-chapters-columns-count, %);
+  }
+
+  &.onecolumn {
+    .column {
+      width: 100%;
+    }
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  > li {
+    clear: both;
+  }
+
+  li {
+    position: relative;
+
+    &[data-level="1"] + [data-level="0"] {
+      margin-top: 15px;
+    }
+
+    &[data-level="2"] + [data-level="1"] {
+      margin-top: 10px;
+    }
+
+    &[data-level="3"] + [data-level="2"] {
+      margin-top: 5px;
+    }
+
+    &.separator {
+      height: 20px;
+
+      &:first-child {
+        height: 0;
+      }
+    }
+  }
+
+  a {
+    font-size: 16px;
+    display: block;
+    text-align: left;
+    padding: 5px 32px;
+    transition: background-color 250ms;
+
+    .rtl & {
+      text-align: right;
+    }
+
+    &.level-1 {
+      font-family: @font;
+      font-weight: 700;
+      text-align: left;
+
+      .right {
+        display: none;
+      }
+    }
+
+    &.level0 {
+      font-family: @font;
+      font-weight: 400;
+
+      .right .puce {
+        margin: 2px 0 0 0;
+      }
+
+    }
+
+    &.level1 {
+      padding-left: 50px;
+
+      .right {
+        top: 6px;
+      }
+
+      .rtl & {
+        padding-left: 0;
+        padding-right: 50px;
+      }
+
+    }
+
+    &.level2 {
+      padding-left: 80px;
+
+      .rtl & {
+        padding-left: 0;
+        padding-right: 80px;
+      }
+
+      .right {
+        top: 6px;
+      }
+
+      .right .puce {
+        margin: -2px 0 0 0;
+      }
+    }
+
+    .level3 {
+      padding-left: 110px;
+
+      .right {
+        top: 6px;
+      }
+
+      .rtl & {
+        padding-left: 0;
+        padding-right: 110px;
+      }
+    }
+
+    > nav {
+      display: none;
+    }
+  }
+
+  li > a > span {
+    display: block;
+    padding-right: 30px;
+
+    .rtl & {
+      padding-right: 0;
+      padding-left: 30px;
+    }
+
+  }
+
+  .right {
+    @size: 20px;
+
+    right: 32px;
+    top: 4px;
+    position: absolute;
+    display: inline-block;
+    vertical-align: top;
+    width: @size;
+    height: @size;
+    text-align: center;
+
+    .rtl & {
+      right: auto;
+      left: 32px;
+    }
+
+    .puce {
+      width: @size;
+      height: @size;
+      color: #fff;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .rtl & {
+        transform: rotate(180deg);
+      }
+
+      svg {
+        width: unit(@size - 8, px);
+        height: unit(@size - 8, px);
+      }
+
+      border-radius: 1px;
+
+      &.noshadow {
+        border-radius: 0px;
+
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+        -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+        -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+        -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+        -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+
+        margin: 0 0 0 15px;
+        float: right;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1c8810ce..d592d088 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2120,169 +2120,7 @@ ul.chapters.shareList a.level0 .svg-icon {
   }
 }
 
-// Chapters
-
-ul.chapters {
-  list-style: none;
-  padding: 20px 0;
-
-  ul {
-    list-style: none;
-  }
-
-  > li {
-    clear: both;
-  }
-
-  li {
-    position: relative;
-
-    &[data-level="1"] + [data-level="0"] {
-      margin-top: 15px;
-    }
-
-    &[data-level="2"] + [data-level="1"] {
-      margin-top: 10px;
-    }
-
-    &[data-level="3"] + [data-level="2"] {
-      margin-top: 5px;
-    }
-
-    &.separator {
-      height: 20px;
-    }
-  }
-
-  a {
-    font-size: 16px;
-    display: block;
-    text-align: left;
-    padding: 5px 32px;
-    transition: background-color 250ms;
-
-    .rtl & {
-      text-align: right;
-    }
-
-    &.level-1 {
-      font-family: @font;
-      font-weight: 400;
-      text-align: center;
-
-      .right {
-        display: none;
-      }
-    }
-
-    &.level0 {
-      font-family: @font;
-      font-weight: 400;
-
-      .right .puce {
-        margin: 2px 0 0 0;
-      }
-
-    }
-
-    &.level1 {
-      padding-left: 50px;
-
-      .rtl & {
-        padding-left: 0;
-        padding-right: 50px;
-      }
-
-    }
-
-    &.level2 {
-      padding-left: 80px;
-
-      .rtl & {
-        padding-left: 0;
-        padding-right: 80px;
-      }
-
-      .right .puce {
-        margin: -2px 0 0 0;
-      }
-    }
-
-    .level3 {
-      padding-left: 110px;
-
-      .rtl & {
-        padding-left: 0;
-        padding-right: 110px;
-      }
-    }
-
-    > nav {
-      display: none;
-    }
-  }
-
-  li > a > span {
-    display: block;
-    padding-right: 30px;
-
-    .rtl & {
-      padding-right: 0;
-      padding-left: 30px;
-    }
-
-  }
-
-  .right {
-    right: 32px;
-    top: 5px;
-    position: absolute;
-    display: inline-block;
-    vertical-align: top;
-    width: 25px;
-    height: 25px;
-    text-align: center;
-
-    .rtl & {
-      right: auto;
-      left: 32px;
-    }
-
-    .puce {
-      width: 25px;
-      height: 25px;
-      color: #fff;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .rtl & {
-        transform: rotate(180deg);
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      border-radius: 1px;
-
-      &.noshadow {
-        border-radius: 0px;
-
-        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-        -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-        -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-        -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-        -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-
-        margin: 0 0 0 15px;
-        float: right;
-      }
-    }
-  }
-}
+@import "chapters";
 
 /* ipad mag */
 .pad #pagesnumbers,
@@ -2676,7 +2514,7 @@ ul.chapters {
       width: auto;
       white-space: nowrap;
 
-      &:first-child{
+      &:first-child {
         margin-left: 0;
       }
 
-- 
2.39.5