[doc] Fix persisted tab state

This commit is contained in:
Andreas Dangel
2020-09-19 21:11:44 +02:00
parent 95e6df8652
commit cdfe815929
4 changed files with 64 additions and 45 deletions

View File

@ -21,6 +21,7 @@
<script src="assets/bootstrap-4.5.2-dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/Simple-Jekyll-Search-1.0.8/dest/jekyll-search.js"></script>
<script src="assets/jekyll-table-of-contents/toc.js"></script>
<script src="js/tabstate.js"></script>
<script src="{{ "js/customscripts.js" }}"></script>
<link rel="shortcut icon" href="{{ "images/favicon.ico" }}" type="image/x-icon">

View File

@ -22,36 +22,3 @@ $( document ).ready(function() {
anchors.add('h2,h3,h4,h5');
});
// needed for nav tabs on pages. See Formatting > Nav tabs for more details.
// script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
$(function() {
var json, tabsState;
$('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var href, json, parentId, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
href = $(e.target).attr('href');
json[parentId] = href;
return localStorage.setItem("tabs-state", JSON.stringify(json));
});
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
$.each(json, function(containerId, href) {
if (containerId && containerId !== "undefined") {
$("#" + containerId + " a[href=" + href + "]").tab('show');
}
});
$("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
var $this = $(this);
if (!json[$this.attr("id")]) {
return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
}
});
});

43
docs/js/tabstate.js Normal file
View File

@ -0,0 +1,43 @@
// needed for nav tabs on pages. See Formatting > Nav tabs for more details.
// script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
(function() {
var registerTabEvent = function() {
$('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var tabId, json, parentId, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
tabId = $(e.target).attr('id');
json[parentId] = tabId;
return localStorage.setItem("tabs-state", JSON.stringify(json));
});
};
document.addEventListener('DOMContentLoaded', function () {
var json, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
$.each(json, function(containerId, tabId) {
if (containerId && containerId !== "undefined" && tabId && tabId !== "undefined"
&& tabId.indexOf('#') !== 0) {
$("#" + tabId).tab('show');
}
});
$("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
var $this = $(this);
if (!json[$this.attr("id")]) {
return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
}
});
// cleanup "undefined" entries
delete json['undefined'];
localStorage.setItem("tabs-state", JSON.stringify(json));
registerTabEvent();
});
})();

View File

@ -71,13 +71,17 @@ Additionally, the following options, are specified most of the time even though
<div class="text-left">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#linux" aria-controls="linux / unix" role="tab" data-toggle="tab">Linux / Unix</a></li>
<li role="presentation"><a href="#windows" aria-controls="windows" role="tab" data-toggle="tab">Windows</a></li>
<ul class="nav nav-tabs" role="tablist" id="pmd-sample-usage-tabs">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="linux-tab" data-toggle="tab" href="#linux" role="tab" aria-controls="linux" aria-selected="true">Linux / Unix</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="windows-tab" data-toggle="tab" href="#windows" role="tab" aria-controls="windows" aria-selected="false">Windows</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="linux">
<div class="tab-content border">
<div class="tab-pane fade show active" id="linux" role="tabpanel" aria-labelledby="linux-tab">
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">~ $ </span><span class="s2">cd</span> ~/bin/pmd-bin-{{site.pmd.version}}/bin
<span class="gp">~/.../bin $ </span><span class="s2">./run.sh</span> pmd -d ../../../src/main/java/ -f text -R rulesets/java/quickstart.xml
@ -87,7 +91,7 @@ Additionally, the following options, are specified most of the time even though
.../src/main/java/com/me/RuleSet.java:357 These nested if statements could be combined
.../src/main/java/com/me/RuleSetWriter.java:66 Avoid empty catch blocks</code></pre></figure>
</div>
<div role="tabpanel" class="tab-pane" id="windows">
<div class="tab-pane fade" id="windows" role="tabpanel" aria-labelledby="windows-tab">
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">C:\ &gt; </span><span class="s2">cd</span> C:\pmd-bin-{{site.pmd.version}}\bin
<span class="gp">C:\...\bin > </span><span class="s2">.\pmd.bat</span> -d ..\..\src\main\java\ -f text -R rulesets/java/quickstart.xml
@ -124,13 +128,17 @@ There are two required parameters:
<div class="text-left">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#cpd-linux" aria-controls="linux / unix" role="tab" data-toggle="tab">Linux / Unix</a></li>
<li role="presentation"><a href="#cpd-windows" aria-controls="windows" role="tab" data-toggle="tab">Windows</a></li>
<ul class="nav nav-tabs" role="tablist" id="cpd-sample-usage-tabs">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="cpd-linux-tab" data-toggle="tab" href="#cpd-linux" role="tab" aria-controls="cpd-linux" aria-selected="true">Linux / Unix</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="cpd-windows-tab" data-toggle="tab" href="#cpd-windows" role="tab" aria-controls="windows" aria-selected="false">Windows</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="cpd-linux">
<div class="tab-content border">
<div class="tab-pane fade show active" id="cpd-linux" role="tabpanel" aria-labelledby="cpd-linux-tab">
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">~ $ </span><span class="s2">cd</span> ~/bin/pmd-bin-{{site.pmd.version}}/bin
<span class="gp">~/.../bin $ </span><span class="s2">./run.sh</span> cpd --minimum-tokens 100 --files /home/me/src
@ -146,7 +154,7 @@ There are two required parameters:
assertEquals(Boolean.TYPE, expressions.get(index++).getType());
assertEquals(Boolean.TYPE, expressions.get(index++).getType());</code></pre></figure>
</div>
<div role="tabpanel" class="tab-pane" id="cpd-windows">
<div class="tab-pane fade" id="cpd-windows" role="tabpanel" aria-labelledby="cpd-windows-tab">
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">C:\ &gt; </span><span class="s2">cd</span> C:\pmd-bin-{{site.pmd.version}}\bin
<span class="gp">C:\...\bin > </span><span class="s2">.\cpd.bat</span> --minimum-tokens 100 --files c:\temp\src