tdf#115255 and auto-expand contents per subitem

JavaScript stuff moved from online_transform.xsl to help.js.
Simplified bookmarks markup.
Span elements with class "input" and length more than 3 characters
can be copied to clipboard by mouse click.
Bubli's feature request for auto-expanding contents per subitem
is also implemented.
Logic for adding headings to index list was reimplemented.

Change-Id: I87b6f189a040a73a1ab9dda1ec9cd790b06da202
Reviewed-on: https://gerrit.libreoffice.org/49421
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

8 files changed, 243 insertions, 137 deletions

diff --git a/CustomTarget_html.mk b/CustomTarget_html.mk
index e39c8384eb..ae56ebd07a 100644
--- a/CustomTarget_html.mk
+++ b/CustomTarget_html.mk
@@ -114,7 +114,7 @@ $(call gb_CustomTarget_get_workdir,helpcontent2/help3xsl)/%/bookmarks.js :
 	$(call gb_Output_announce,$(subst $(WORKDIR)/,,$@),$(true),CAT,2)
 	$(call gb_Helper_abbreviate_dirs,\
 		( \
-			echo 'document.getElementsByClassName( "list" )[0].innerHTML='"'"'\' \
+			echo 'document.getElementsByClassName( "index" )[0].innerHTML='"'"'\' \
 			&& cat $(filter %.part,$^) \
 			&& echo "'" \
 		) > $@ \
diff --git a/help3xsl/default.css b/help3xsl/default.css
index debcf99aa2..dc2a19972a 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -40,9 +40,49 @@ h6,
 .listitem,
 .listitemintable,
 .tablecontent,
-.tablecontentintable {
+.input {
     font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
 }
+.input {
+    transition-property: background-color;
+    transition-duration: 150ms;
+}
+[data-tooltip]{
+  position:relative;
+}
+[data-tooltip]::before {
+    content: "";
+    position: absolute;
+    top:-6px;
+    left:50%;
+    transform: translateX(-50%);
+    border-width: 4px 6px 0 6px;
+    border-style: solid;
+    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
+    z-index: 100;
+    opacity: 0;
+    pointer-events: none;
+}
+[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left:50%;
+    top:-6px;
+    transform: translateX(-50%)   translateY(-100%);
+    background: rgba(0,0,0,0.7);
+    text-align: center;
+    color: #fff;
+    padding:4px 2px;
+    font-size: 12px;
+    min-width: 80px;
+    border-radius: 5px;
+    opacity: 0;
+    pointer-events: none;
+}
+[data-tooltip]:hover:before, [data-tooltip]:hover:after {
+    opacity: 1;
+    pointer-events: auto;
+}
 body {
     margin: 0;
     line-height: normal;
@@ -108,6 +148,9 @@ h1 {
     border-bottom: 3px solid #18A303;
     padding-bottom: 6px;
 }
+h1 a {
+    text-decoration: none;
+}
 h2 {
     font-size: 1.5rem;
 }
@@ -282,41 +325,6 @@ footer {
 footer p {
     font-size: 1rem;
 }
-.breadcrumbs ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    color: #333;
-}
-.breadcrumbs li {
-    display: inline-block;
-    position: relative;
-    padding-right: 24px;
-    margin: 0;
-}
-.breadcrumbs li:after {
-    content: '>';
-    position: absolute;
-    display: inline-block;
-    right: 0;
-    width: 24px;
-    text-align: center;
-}
-.breadcrumbs li:last-child {
-    font-weight: bold;
-}
-.breadcrumbs li:last-child:after {
-    content: '';
-}
-.breadcrumbs a {
-    text-decoration: none;
-    display: inline-block;
-    color: #333;
-    white-space: nowrap;
-}
-.breadcrumbs a:hover {
-    text-decoration: underline;
-}
 .gsc-control-cse {
     border-color: transparent !important;
     background-color: transparent !important;
@@ -356,14 +364,13 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     padding-left: 20px;
     margin: 20px 0 0 0;
 }
-#Index {
+#Index, .index {
     margin-top: 10px;
 }
-.list {
+.index {
     padding-left: 15px;
 }
-.list li {
-    list-style: none;
+.index a {
     font-size: 16px;
     margin-bottom: 5px;
 }
@@ -375,63 +382,63 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     font-weight: bold;
     color: #18A303;
 }
-#writer::before {
+#WRITER::before {
     content: "WRITER";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#calc::before {
+#CALC::before {
     content: "CALC";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#impress::before {
+#IMPRESS::before {
     content: "IMPRESS";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#draw::before {
+#DRAW::before {
     content: "DRAW";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#base::before {
+#BASE::before {
     content: "BASE";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#math::before {
+#MATH::before {
     content: "MATH";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#chart::before {
+#CHART::before {
     content: "CHART";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#basic::before {
+#BASIC::before {
     content: "BASIC";
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
-#shared::before {
+#GLOBAL::before {
     content: "GLOBAL";
     display: block;
     font-size: 22px;
@@ -541,10 +548,10 @@ li.disabled a {
     -webkit-user-select: none;
     user-select: none;
 }
-.contents-treeview a, .list a {
+.contents-treeview a, .index a {
     text-decoration: none;
 }
-.contents-treeview a:hover, .list a:hover {
+.contents-treeview a:hover, .index a:hover {
     text-decoration: underline;
 }
 .contents-treeview input + label + ul {
diff --git a/help3xsl/get_bookmark.xsl b/help3xsl/get_bookmark.xsl
index 10f1e69e92..3614d4cbed 100644
--- a/help3xsl/get_bookmark.xsl
+++ b/help3xsl/get_bookmark.xsl
@@ -55,13 +55,13 @@ xsltproc get_bookmark.xsl <file.xhp>
         <xsl:variable name="hrefhtml" select="substring-before($filename,'xhp')"/>
         <xsl:variable name="href" select="concat($productversion,'/',$Language,'/',$hrefhtml,'html?DbPAR=',$app,'#',@id)"/>
         <xsl:for-each select="bookmark_value">
-        <xsl:text disable-output-escaping="yes"><![CDATA[<li class="fuseshown"><a target="_top" href="]]></xsl:text>
+        <xsl:text disable-output-escaping="yes"><![CDATA[<a target="_top" href="]]></xsl:text>
         <xsl:value-of select="$href"/>
-        <xsl:text disable-output-escaping="yes"><![CDATA[" class="]]></xsl:text>
+        <xsl:text disable-output-escaping="yes"><![CDATA[" class="fuseshown ]]></xsl:text>
         <xsl:value-of select="$app"/>
         <xsl:text disable-output-escaping="yes"><![CDATA[">]]></xsl:text>
             <xsl:call-template name="replace"><xsl:with-param name="text" select="."/></xsl:call-template>
-            <xsl:text disable-output-escaping="yes"><![CDATA[</a></li>\]]>&#xA;</xsl:text>
+            <xsl:text disable-output-escaping="yes"><![CDATA[</a>\]]>&#xA;</xsl:text>
         </xsl:for-each>
     </xsl:for-each>
 </xsl:template>
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 999af538b0..53d9cda4c3 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -9,7 +9,7 @@
 
 // Used to set Application in caseinline=APP
 function setModule(module){
-    if (module == null){module="WRITER"}
+    if (module === null){module="WRITER";}
     var itemspan = document.getElementsByTagName("span");
     var n = itemspan.length;
     for (var i = 0; i < n; i++){
@@ -22,7 +22,7 @@ function setModule(module){
 // Used to set system in caseinline=SYSTEM
 function setSystem(system){
     var itemspan = document.getElementsByTagName("span");
-    if (system == null){system="WIN"}
+    if (system=== null){system="WIN";}
     var n = itemspan.length;
     for (var i = 0; i < n; i++){
         if (itemspan[i].getAttribute("value") == system){
@@ -33,19 +33,19 @@ function setSystem(system){
 /* add &DbPAR= and &System= to the links in DisplayArea div */
 function fixURL(module, system){
     var itemlink = document.getElementById("DisplayArea").getElementsByTagName("a");
-    var pSystem = (system == null) ? "WIN" : system;
-    var pAppl = (module == null) ? "WRITER" : module;
+    var pSystem = (system=== null) ? "WIN" : system;
+    var pAppl = (module=== null) ? "WRITER" : module;
     var n = itemlink.length;
 
     for (var i = 0; i<n; i++) {
-        setURLParam(itemlink[i], pSystem, pAppl)
+        setURLParam(itemlink[i], pSystem, pAppl);
     }
 
 }
 //Set the params inside URL
 function setURLParam (itemlink, pSystem, pAppl) {
     var href = itemlink.getAttribute("href");
-    if (href != null){
+    if (href !== null){
         // skip external links
         if (!href.startsWith("http")) {
             // handle bookmark.
@@ -90,4 +90,136 @@ function getParameterByName(name, url) {
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
 
+// Pagination and fuzzy search
+var fuseshown = document.getElementsByClassName("fuseshown");
+var indexkids = document.getElementsByClassName("index")[0].children;
+var liElements = Array.prototype.slice.call(fuseshown).map(function(elm) {
+  var item = elm;
+  var linktext = item.textContent;
+  var fuseObject = { item: item, linktext: linktext };
+  return fuseObject;
+});
+
+var fuse = new Fuse(liElements, {
+  keys: ["linktext"],
+  distance: 60,
+  location: 0,
+  threshold: 0.2,
+  tokenize: true,
+  matchAllTokens: true,
+  maxPatternLength: 24,
+  minMatchCharLength: 2
+});
+
+var modules = [ 'CALC', 'WRITER', 'IMPRESS', 'DRAW', 'BASE', 'MATH', 'CHART', 'BASIC', 'SHARED' ];
+function addIds() {    
+  for (var i = 0, len = indexkids.length; i < len; i++) {
+    indexkids[i].removeAttribute("id");
+  }
+  modules.forEach(function(module) {
+    var fuseshownModule = document.getElementsByClassName("fuseshown " + module)[0];
+    if(typeof fuseshownModule !== 'undefined') { fuseshownModule.setAttribute("id", module); }
+  });
+}
+
+var search = document.getElementById('search-bar');
+var filter = function() {
+  var target = search.value.trim();
+  if (target.length < 1) {
+    liElements.forEach(function(obj) {
+        obj.item.classList.add('fuseshown');
+        obj.item.classList.remove('fusehidden');
+    });
+    Paginator(document.getElementsByClassName("index")[0]);
+    addIds();
+    return;
+  }
+  var results = fuse.search(target);
+
+  liElements.forEach(function(obj) {
+    obj.item.classList.add('fusehidden');
+    obj.item.classList.remove('fuseshown');
+  });
+  results.forEach(function(obj) {
+    obj.item.classList.add('fuseshown');
+    obj.item.classList.remove('fusehidden');
+  });
+
+  Paginator(document.getElementsByClassName("index")[0]);
+  addIds();
+};
+
+function debounce(fn, wait) {
+  var timeout;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      fn.apply(this, arguments);
+    }, (wait || 150));
+  };
+}
+
+Paginator(document.getElementsByClassName("index")[0]);
+search.addEventListener('keyup', debounce(filter, 300));
+addIds();
+
+// copy useful content to clipboard on mouse click
+var copyable = document.getElementsByClassName("input");
+
+for (var i = 0, len = copyable.length; i < len; i++) {
+    (function() {
+        var item = copyable[i];
+        function changeColor(item, color, colorToChangeBackTo) {
+        item.style.backgroundColor = color;
+        setTimeout(function() { item.style.backgroundColor = colorToChangeBackTo; }, 150);
+        }
+
+        item.onclick = function() {
+            document.execCommand("copy");
+            changeColor(item, "#18A303", "transparent");
+        };
+
+        item.addEventListener("copy", function(event) {
+            event.preventDefault();
+            if (event.clipboardData) {
+                event.clipboardData.setData("text/plain", item.textContent);
+            }
+        });
+    }());
+}
+
+// auto-expand contents per subitem
+var pathname = window.location.pathname;
+var mainRegex = /main[0-9]*\.html$/;
+var pathRegex = /text\/.*\.html$/;
+var linkIndex = 0;
+
+if(mainRegex.test(pathname) === false) {
+    var contentMatch = pathname.match(pathRegex);
+    if(contentMatch !== null) {
+        var linkMatch = new RegExp(contentMatch);
+        var links = document.getElementById("Contents").getElementsByTagName("a");
+        for (var i = 0, len = links.length; i < len; i++) {
+            if(links[i].href.match(linkMatch)) {
+                var linkIndex = i;
+            }
+        }
+
+        var cItem = document.getElementById("Contents").getElementsByTagName("a")[linkIndex].parentElement;
+        var parents = [];
+
+        while (cItem.parentElement && !cItem.parentElement.matches("#Contents") && parents.indexOf(cItem.parentElement) == -1) {
+                parents.push(cItem = cItem.parentElement);
+        }
+        var liParents = [].filter.call(parents, function(item) {
+            return item.matches("li");
+        });
+
+        for (var i = 0, len = liParents.length; i < len; i++) {
+            var input = liParents[i].querySelectorAll(':scope > input');
+            document.getElementById(input[0].id).checked = true;
+        }
+    }
+}
+
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3xsl/localized.xsl b/help3xsl/localized.xsl
index a52474b1bf..9549eb9f1a 100644
--- a/help3xsl/localized.xsl
+++ b/help3xsl/localized.xsl
@@ -290,5 +290,13 @@ Stylesheet map language-dependent parameters and translation
 </xsl:choose>
 </xsl:template>
 
+<xsl:template name="getTooltip">
+    <xsl:param name="lang"/>
+    <xsl:choose>
+        <xsl:when test="$lang='fi'"><xsl:attribute name="data-tooltip">Klikkaa kopioidaksesi leikepöydälle</xsl:attribute></xsl:when>
+        <xsl:otherwise><xsl:attribute name="data-tooltip">Click on text to copy to clipboard</xsl:attribute></xsl:otherwise>
+</xsl:choose>
+</xsl:template>
+
 </xsl:stylesheet>
 
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 2feda208ac..db296cbf6c 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -133,7 +133,6 @@
         <link rel="shortcut icon" href="{$productversion}/media/navigation/favicon.ico" />
         <link  type="text/css" href="{$productversion}/normalize.css" rel="Stylesheet" />
         <link  type="text/css" href="{$productversion}/default.css" rel="Stylesheet" />
-        <script type="text/javascript" src="{$productversion}/help.js"></script>
         <script type="text/javascript" src="{$productversion}/fuse.js"></script>
         <script type="text/javascript" src="{$productversion}/paginathing.js"></script>
         <meta name="viewport" content="width=device-width,initial-scale=1"/>
@@ -257,7 +256,7 @@
             <div class="index-label"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template> &#32;&#x1f50e;&#32;</div>
             <div id="Bookmarks">
                 <input id="search-bar" type="text" class="search" />
-                <ul class="list"></ul>
+                <nav class="index"></nav>
             </div>
         </div>
     </aside>
@@ -300,66 +299,7 @@
     </div>
     <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
     <script type="text/javascript" src="{$productversion}/{$lang}/contents.js"/>
-    <!-- for fuse.js and paginathing.js -->
-    <script type="text/javascript">
-        <![CDATA[
-        var liElements = Array.prototype.slice.call(document.getElementsByClassName("list")[0].getElementsByTagName("li")).map(function(elm) {
-        var item = elm;
-        var linktext = item.childNodes[0].textContent;
-        var fuseObject = { item: item, linktext: linktext };
-        return fuseObject;
-        });
-
-        var fuse = new Fuse(liElements, {
-        keys: ["linktext"],
-        distance: 60,
-        location: 0,
-        threshold: 0.2,
-        tokenize: true,
-        matchAllTokens: true,
-        maxPatternLength: 24,
-        minMatchCharLength: 2
-        });
-
-        var search = document.getElementById('search-bar');
-        var filter = function() {
-        var target = search.value.trim();
-        if (target.length < 1) {
-            liElements.forEach(function(obj) {
-                obj.item.classList.add('fuseshown');
-                obj.item.classList.remove('fusehidden');
-            });
-            Paginator(document.getElementsByClassName("list")[0]);
-            return;
-        }
-        var results = fuse.search(target);
-
-        liElements.forEach(function(obj) {
-            obj.item.classList.add('fusehidden');
-            obj.item.classList.remove('fuseshown');
-        });
-        results.forEach(function(obj) {
-            obj.item.classList.add('fuseshown');
-            obj.item.classList.remove('fusehidden');
-        });
-
-        Paginator(document.getElementsByClassName("list")[0]);
-        };
-
-        function debounce(fn, wait) {
-        var timeout;
-        return function () {
-            clearTimeout(timeout);
-            timeout = setTimeout(function () {
-            fn.apply(this, arguments);
-            }, (wait || 150));
-        };
-        }
-
-        Paginator(document.getElementsByClassName("list")[0]);
-        search.addEventListener('keyup', debounce(filter, 300));
-        ]]>
-    </script>
+    <script type="text/javascript" src="{$productversion}/help.js"></script>
     <xsl:choose>
         <xsl:when test="$online">
             <script type="text/javascript">
@@ -537,8 +477,27 @@
 <xsl:template match="image" mode="embedded"><xsl:call-template name="insertimage"/></xsl:template>
 
 <!-- ITEM -->
-<xsl:template match="item"><span class="{@type}"><xsl:apply-templates /></span></xsl:template>
-<xsl:template match="item" mode="embedded"><span class="{@type}"><xsl:apply-templates /></span></xsl:template>
+<xsl:template match="item">
+    <span class="{@type}">
+<!-- Insert tooltip only to input classes and only if the content is longer than 3 characters -->
+        <xsl:if test="@type='input' and string-length(.)>3">
+            <xsl:call-template name="getTooltip">
+                <xsl:with-param name="lang" select="$lang"/>
+            </xsl:call-template>
+        </xsl:if>
+        <xsl:apply-templates />
+    </span>
+</xsl:template>
+<xsl:template match="item" mode="embedded">
+    <span class="{@type}">
+        <xsl:if test="@type='input' and string-length(.)>3">
+            <xsl:call-template name="getTooltip">
+                <xsl:with-param name="lang" select="$lang"/>
+            </xsl:call-template>
+        </xsl:if>
+        <xsl:apply-templates />
+    </span>
+</xsl:template>
 
 <!-- LINK -->
 <xsl:template match="link">
diff --git a/help3xsl/paginathing.js b/help3xsl/paginathing.js
index 184a698550..8ecc4abd08 100644
--- a/help3xsl/paginathing.js
+++ b/help3xsl/paginathing.js
@@ -2,7 +2,7 @@
  * Paginathing
  * Paginate Everything
  *
- * Original @author Alfred Crosby <https://github.com/alfredcrosby>
+ * Original author Alfred Crosby <https://github.com/alfredcrosby>
  * Inspired from http://esimakin.github.io/twbs-pagination/
  * Modified to pure JavaScript and specialised to LibreOffice Help by
  * Ilmari Lauhakangas
@@ -55,7 +55,7 @@
 })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
 
 var options = {
-    perPage: 10,
+    perPage: 20,
     limitPagination: 6,
     prevNext: true,
     firstLast: true,
@@ -71,11 +71,11 @@ var options = {
 };
 
 var Paginator = function(element) {
-    el = element;
-    startPage = 1;
-    currentPage = 1;
-    pageDivision = 0;
-    totalItems = el.getElementsByClassName('fuseshown').length;
+    var el = element;
+    var startPage = 1;
+    var currentPage = 1;
+    var pageDivision = 0;
+    var totalItems = el.getElementsByClassName('fuseshown').length;
     var limitPagination = options.limitPagination;
     pageDivision = Math.ceil(totalItems / options.perPage);
     // let's not display pagination leading nowhere
@@ -87,15 +87,15 @@ var Paginator = function(element) {
         }
         return limitPagination;
     }
-    totalPages = Math.max(pageDivision, pagLimit());
-    existingContainer = document.getElementsByClassName('pagination-container')[0];
+    var totalPages = Math.max(pageDivision, pagLimit());
+    var existingContainer = document.getElementsByClassName('pagination-container')[0];
     if (existingContainer) {
         parent = existingContainer.parentNode;
         parent.removeChild(existingContainer);
     }
-    container = document.createElement('nav');
+    var container = document.createElement('nav');
     container.setAttribute('class', options.containerClass);
-    ul = document.createElement('ul');
+    var ul = document.createElement('ul');
     ul.setAttribute('class', options.ulClass);
 
     function paginationFunc(type, page) {
diff --git a/help3xsl/xhp2html.sh b/help3xsl/xhp2html.sh
index cccf73046f..fc6bf175b8 100755
--- a/help3xsl/xhp2html.sh
+++ b/help3xsl/xhp2html.sh
@@ -35,7 +35,7 @@ rm -f $bookmarkFile
 touch $bookmarkFile
 
 stub2=\'
-stub1='document.getElementsByClassName( "list" )[0].innerHTML='\'\\
+stub1='document.getElementsByClassName( "index" )[0].innerHTML='\'\\
 echo $stub1 >> $bookmarkFile
 
 xslfile=get_bookmark.xsl