[Libreoffice-commits] help.git: CustomTarget_html.mk help3xsl/default.css help3xsl/get_bookmark.xsl help3xsl/help.js help3xsl/localized.xsl help3xsl/online_transform.xsl help3xsl/paginathing.js help3xsl/xhp2html.sh
Ilmari Lauhakangas
ilmari.lauhakangas at libreoffice.org
Thu Feb 8 19:20:07 UTC 2018
CustomTarget_html.mk | 2
help3xsl/default.css | 109 ++++++++++++++++---------------
help3xsl/get_bookmark.xsl | 6 -
help3xsl/help.js | 144 ++++++++++++++++++++++++++++++++++++++++--
help3xsl/localized.xsl | 8 ++
help3xsl/online_transform.xsl | 87 ++++++-------------------
help3xsl/paginathing.js | 22 +++---
help3xsl/xhp2html.sh | 2
8 files changed, 243 insertions(+), 137 deletions(-)
New commits:
commit b6bc8c1cfecc55bebff8dc64fddb63e3edc109b5
Author: Ilmari Lauhakangas <ilmari.lauhakangas at libreoffice.org>
Date: Thu Feb 8 13:18:55 2018 +0200
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 at libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot at libreoffice.org>
diff --git a/CustomTarget_html.mk b/CustomTarget_html.mk
index e39c8384e..ae56ebd07 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 debcf99aa..dc2a19972 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 10f1e69e9..3614d4cbe 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,'#', at 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>\]]>
</xsl:text>
+ <xsl:text disable-output-escaping="yes"><![CDATA[</a>\]]>
</xsl:text>
</xsl:for-each>
</xsl:for-each>
</xsl:template>
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 999af538b..53d9cda4c 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 a52474b1b..9549eb9f1 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 2feda208a..db296cbf6 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> 🔎 </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 184a69855..8ecc4abd0 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 cccf73046..fc6bf175b 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
More information about the Libreoffice-commits
mailing list