From 5da8b97b38f50676db194505145be55d4fc8eaf1 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 6 Aug 2020 14:42:21 +0200
Subject: [PATCH] Hide/show TOC in rich text

---
 customize.dist/src/less2/include/toolbar.less |  3 ++
 www/pad/inner.js                              | 37 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 3f949a255..41736d426 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -996,6 +996,9 @@
             .cp-toolbar-tools {
                 order: 7;
             }
+            .cp-toolbar-icon-pad_toc {
+                order: 8;
+            }
             .cp-toolbar-file {
                 button {
                     &.fa-plus { order: 0; }
diff --git a/www/pad/inner.js b/www/pad/inner.js
index 06aab9600..f6ed80b08 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -426,6 +426,42 @@ define([
         });
     };
 
+    var addTOCHideBtn = function(framework, $toc) {
+        // Expand / collapse the toolbar
+        var onClick = function(visible) {
+            framework._.sfCommon.setAttribute(['pad', 'showTOC'], visible);
+        };
+        framework._.sfCommon.getAttribute(['pad', 'showTOC'], function(err, data) {
+            var state = false;
+            if (($(window).height() >= 800 || $(window).width() >= 800) &&
+                (typeof(data) === "undefined" || data)) {
+                state = true;
+                $toc.show();
+            } else {
+                $toc.hide();
+            }
+            Messages.pad_tocHide = "TOC"; // XXX
+            var $tocButton = framework._.sfCommon.createButton('', true, {
+                drawer: false,
+                text: Messages.pad_tocHide,
+                name: 'pad_toc',
+                icon: 'fa-newspaper-o',
+            }, function () {
+                $tocButton.removeClass('cp-toolbar-button-active');
+                $toc.toggle();
+                state = $toc.is(':visible');
+                if (state) {
+                    $tocButton.addClass('cp-toolbar-button-active');
+                }
+                onClick(state);
+            });
+            framework._.toolbar.$bottomL.append($tocButton);
+            if (state) {
+                $tocButton.addClass('cp-toolbar-button-active');
+            }
+        });
+    };
+
     var displayMediaTags = function(framework, dom, mediaTagMap) {
         setTimeout(function() { // Just in case
             var tags = dom.querySelectorAll('media-tag:empty');
@@ -540,6 +576,7 @@ define([
         });
 
         var $toc = $('#cp-app-pad-toc');
+        addTOCHideBtn(framework, $toc);
 
         // My cursor
         var cursor = module.cursor = Cursor(inner);