Keep partials DRY and fix nested page sequential links
* Keep partials DRY and fix nested page sequential links Utilize new partial to keep DRY (Don't Repeat Yourself) and got sequential links working for nested pages in all sections. * Keep partials DRY and fix nested page sequential links Utilize new partial to keep DRY (Don't Repeat Yourself) and got sequential links working for nested pages in all sections.
This commit is contained in:
John Haugabook
GitHub
parent
57be7fea07
commit
cbab06a1f2
|
|
@ -0,0 +1,10 @@
|
|||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
<div style="margin: {{ .verticalMargin }} 0px">
|
||||
<a id="previousLink" href="javascript:void(0)" style="font-size: {{ .fontSize }}">
|
||||
<i class="fa fa-arrow-left"></i> Page
|
||||
</a>
|
||||
<div id="pageTurnSpacer" style="display:inline; margin: 0px {{ .sideMargin }}"></div>
|
||||
<a id="nextLink" href="javascript:void(0)" style="font-size: {{ .fontSize }}">
|
||||
Page <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{ $sideMargin := "50px" }}
|
||||
{{ $verticalMargin := "30px" }}
|
||||
{{ $fontSize:= "12pt" }}
|
||||
{{ $fontSize := "12pt" }}
|
||||
|
||||
{{ $currentPage := . }}
|
||||
{{ $curWeight := -1 }}
|
||||
|
|
@ -9,142 +9,135 @@
|
|||
{{ if .HasChildren }}
|
||||
{{ $extractParent := $currentPage.Parent.Page }}
|
||||
{{ $currentParent := (replaceRE "Page\\(\\/(.*)\\)" "$1" $extractParent) }}
|
||||
<!-- Seqential Navigation for section pages. -->
|
||||
{{ range .Children }}
|
||||
{{ if eq $currentParent (.Parent) }}
|
||||
{{ if eq $currentParent (.Parent) }}
|
||||
{{ if .Weight }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
<div style="margin: {{ $verticalMargin }} 0px">
|
||||
<a id="previousLink" href="javascript:void(0)" style="font-size: {{ $fontSize }}">Previous - Page</a>
|
||||
<div id="pageTurnSpacer" style="display:inline; margin: 0px {{ $sideMargin }}"></div>
|
||||
<a id="nextLink" href="javascript:void(0)" style="font-size: {{ $fontSize }}">Next - Page</a>
|
||||
</div>
|
||||
<!-- Use (1) or do not use (0) JavaScript to correct links. -->
|
||||
<div id="useJS" style="display: none">1</div>
|
||||
{{ end }}
|
||||
{{ partial "list-seq-nav.html" (dict "fontSize" $fontSize "sideMargin" $sideMargin "verticalMargin" $verticalMargin "currentPage" $currentPage) }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<!-- Add content as structured by Hugo -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<div style="margin: {{ $verticalMargin }} 0px">
|
||||
{{ with $currentPage.NextInSection }}
|
||||
<a id="previousLink" href="{{ .RelPermalink }}" style="font-size: {{ $fontSize }}">Previous - {{ .Name }}</a>
|
||||
{{ end }}
|
||||
<div id="pageTurnSpacer" style="display:inline; margin: 0px {{ $sideMargin }}"></div>
|
||||
{{ with $currentPage.PrevInSection }}
|
||||
<a id="nextLink" href="{{ .RelPermalink }}" style="font-size: {{ $fontSize }}">Next - {{ .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Use (1) or do not use (0) JavaScript to correct links. -->
|
||||
<div id="useJS" style="display: none">0</div>
|
||||
{{ end }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
{{ partial "list-seq-nav.html" (dict "fontSize" $fontSize "sideMargin" $sideMargin "verticalMargin" $verticalMargin "currentPage" $currentPage) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .HasChildren }}
|
||||
<!-- Seqential Navigation for nested section pages. -->
|
||||
{{ range .Children }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if eq $currentPage (.Page) }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
{{ partial "list-seq-nav.html" (dict "fontSize" $fontSize "sideMargin" $sideMargin "verticalMargin" $verticalMargin "currentPage" $currentPage) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ $extractParent := $currentPage.Parent.Page }}
|
||||
{{ $currentParent := (replaceRE "Page\\(\\/(.*)\\)" "$1" $extractParent) }}
|
||||
{{ if eq $currentParent (.Parent) }}
|
||||
{{ if .Weight }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
<div style="margin: {{ $verticalMargin }} 0px">
|
||||
<a id="previousLink" href="javascript:void(0)" style="font-size: {{ $fontSize }}">Previous - Page</a>
|
||||
<div id="pageTurnSpacer" style="display:inline; margin: 0px {{ $sideMargin }}"></div>
|
||||
<a id="nextLink" href="javascript:void(0)" style="font-size: {{ $fontSize }}">Next - Page</a>
|
||||
</div>
|
||||
<!-- Use (1) or do not use (0) JavaScript to correct links. -->
|
||||
<div id="useJS" style="display: none">1</div>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add content as structured by Hugo -->
|
||||
<div style="margin: {{ $verticalMargin }} 0px">
|
||||
{{ with $currentPage.NextInSection }}
|
||||
<a id="previousLink" href="{{ .RelPermalink }}" style="font-size: {{ $fontSize }}">Previous - {{ .Name }}</a>
|
||||
{{ if .HasChildren }}
|
||||
<!-- Seqential Navigation for nested section pages. -->
|
||||
{{ range .Children.ByWeight }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
{{ partial "list-seq-nav.html" (dict "fontSize" $fontSize "sideMargin" $sideMargin "verticalMargin" $verticalMargin "currentPage" $currentPage) }}
|
||||
{{ end }}
|
||||
<div id="pageTurnSpacer" style="display:inline; margin: 0px {{ $sideMargin }}"></div>
|
||||
{{ with $currentPage.PrevInSection }}
|
||||
<a id="nextLink" href="{{ .RelPermalink }}" style="font-size: {{ $fontSize }}">Next - {{ .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Use (1) or do not use (0) JavaScript to correct links. -->
|
||||
<div id="useJS" style="display: none">0</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<!-- Add content to be modified by JavaScript. -->
|
||||
{{ if $currentPage.IsMenuCurrent "docs" . }}
|
||||
<!-- Add filler html and use JavaScript to put in correct links. -->
|
||||
{{ partial "list-seq-nav.html" (dict "fontSize" $fontSize "sideMargin" $sideMargin "verticalMargin" $verticalMargin "currentPage" $currentPage) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<script>
|
||||
// The ids used in doc page nav at bottom.
|
||||
var previousLink = document.getElementById("previousLink");
|
||||
var nextLink = document.getElementById("nextLink");
|
||||
var pageTurnSpacer = document.getElementById("pageTurnSpacer");
|
||||
var useJS = document.getElementById("useJS");
|
||||
// IMPORTANT NOTE - this depends on HTML attributes to work.
|
||||
// If error, then link href will be "javascript:void(0)"
|
||||
// and text output of links will render as:
|
||||
// <- Page Page ->
|
||||
|
||||
// Only run statement to add correct links if html id useJS innerHTLM is 1.
|
||||
if (useJS.innerHTML == "1") {
|
||||
// For adding the correct url.
|
||||
var whatIsActive = -1, prevHref, prevName, nextHref, nextName;
|
||||
// DEPENDENT VARIABLES - redefine if HTML attributes or semantics change.
|
||||
var theMenuTag = "nav"; // parent html tag for menu - tagName <<<< FIRST SET OF VARIABLES
|
||||
var theMenuSideBar = "sidebar"; // holds all sections ------- className <<<< FIRST SET OF VARIABLES
|
||||
var theMenuSubMenu = "sub-menu"; // defines one section ------ className <<<< FIRST SET OF VARIABLES
|
||||
var theMenuActivePage = "active"; // define active page ------- className <<<< FIRST SET OF VARIABLES
|
||||
|
||||
// Start process to select sidebar and ensure correct selection.
|
||||
var selectNavs = document.getElementsByTagName("nav");
|
||||
var selectSidebar;
|
||||
for (i = 0; i < selectNavs.length; i++) {
|
||||
if (selectNavs[i].className == "sidebar") {
|
||||
selectSidebar = selectNavs[i]; // got it
|
||||
}
|
||||
}
|
||||
// PULL VARIABLES - for the ids used in doc page nav at bottom.
|
||||
// NOTE - remaining variables should be fine if left as is.
|
||||
var previousLink = document.getElementById("previousLink"); // html a tag to previous page
|
||||
var nextLink = document.getElementById("nextLink"); // html a tag for next page
|
||||
var pageTurnSpacer = document.getElementById("pageTurnSpacer"); // SPACING ELEMENT - for styling - get consistent space
|
||||
|
||||
// Variables to run statement to add correct links
|
||||
// and for adding the correct url. Defined in for loops below.
|
||||
var whatIsActive = -1, prevHref, prevName, nextHref, nextName;
|
||||
|
||||
// Start process to select menu item, finding active and its position
|
||||
// relative in the side navigation.
|
||||
var selectSubMenus = selectSidebar.getElementsByClassName("sub-menu");
|
||||
// Used after loop to change/remove previous and next links.
|
||||
var indexActive, indexPrev, indexNext;
|
||||
for (i = 0; i < selectSubMenus.length; i++) {
|
||||
let curNavSection = selectSubMenus[i].getElementsByTagName("a");
|
||||
// loop li and see if any are active
|
||||
for (j = 0; j < curNavSection.length; j++) {
|
||||
if (curNavSection[j].className == "active") {
|
||||
if (j == 0) { // on first page in section
|
||||
prevHref = "remove";
|
||||
nextHref = curNavSection[j+1].href;
|
||||
nextName = curNavSection[j+1].innerText;
|
||||
whatIsActive = i;
|
||||
} else if (j == curNavSection.length - 1) { // somewhere between first and last
|
||||
prevHref = curNavSection[j-1].href;
|
||||
prevName = curNavSection[j-1].innerText;
|
||||
nextHref = "remove";
|
||||
whatIsActive = i;
|
||||
} else { // on last page in section
|
||||
prevHref = curNavSection[j-1].href;
|
||||
prevName = curNavSection[j-1].innerText;
|
||||
nextHref = curNavSection[j+1].href;
|
||||
nextName = curNavSection[j+1].innerText;
|
||||
whatIsActive = i;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (whatIsActive != -1) { break; } // found active class so end loop
|
||||
}
|
||||
// Use results from above loop
|
||||
if (prevHref == "remove") {
|
||||
previousLink.remove();
|
||||
pageTurnSpacer.remove();
|
||||
nextLink.href = nextHref;
|
||||
nextLink.innerHTML = nextLink.innerHTML.replace("Page", nextName);
|
||||
} else if (nextHref == "remove") {
|
||||
previousLink.href = prevHref;
|
||||
previousLink.innerHTML = previousLink.innerHTML.replace("Page", prevName);
|
||||
nextLink.remove();
|
||||
} else {
|
||||
previousLink.href = prevHref;
|
||||
previousLink.innerHTML = previousLink.innerHTML.replace("Page", prevName);
|
||||
nextLink.href = nextHref;
|
||||
nextLink.innerHTML = nextLink.innerHTML.replace("Page", nextName);
|
||||
// Start process to select sidebar and ensure it is correct selection.
|
||||
var selectNavs = document.getElementsByTagName(theMenuTag); // "nav" tag - SEE FIRST SET OF VARIABLES
|
||||
var selectSidebar; // definde in loop
|
||||
for (i = 0; i < selectNavs.length; i++) { // IMPORTANT - html dom and semantics assumed --- first "nav" with class "sidebar" ---
|
||||
if (selectNavs[i].className == theMenuSideBar) { // "sidebar" class - SEE FIRST SET OF VARIABLES
|
||||
selectSidebar = selectNavs[i]; // got it - first "nav" tag with "sidebar" class.
|
||||
break; /////////////////////////////////////////////////// found what we're looking for - onward
|
||||
}
|
||||
}
|
||||
|
||||
// Start process to select menu item, finding active link
|
||||
// and its position relative to the side navigation.
|
||||
var selectSubMenus = selectSidebar.getElementsByClassName(theMenuSubMenu); // html ul for all sections - SEE FIRST SET OF VARIABLES
|
||||
|
||||
// Start looping through each section of the menu.
|
||||
for (i = 0; i < selectSubMenus.length; i++) { // for each section:
|
||||
let curNavSection = selectSubMenus[i].getElementsByTagName("a"); // select links in the section - NOTE - this probable doesn't need a variable
|
||||
// start looping current section to see if html class active is found
|
||||
for (j = 0; j < curNavSection.length; j++) {
|
||||
if (curNavSection[j].className == theMenuActivePage) { // found it - "active" class value
|
||||
if (j == 0) { // on FIRST page in section
|
||||
prevHref = "remove"; // no need for prev page
|
||||
nextHref = curNavSection[j+1].href; // make next page href value of next index
|
||||
nextName = curNavSection[j+1].innerText; // make next page text value of next index
|
||||
whatIsActive = i; //////////////////////////// make note of ACTIVE page and to end loop
|
||||
} else if (j == curNavSection.length - 1) { // on LAST page in section
|
||||
prevHref = curNavSection[j-1].href; // make prev page href value of prior index
|
||||
prevName = curNavSection[j-1].innerText; // make prev page text value of prior index
|
||||
nextHref = "remove"; // no need for next page
|
||||
whatIsActive = i; //////////////////////////// make note of ACTIVE page and to end loop
|
||||
} else { // on MIDDLE page in section - will have prev and next links
|
||||
prevHref = curNavSection[j-1].href; // make prev page href value of prior index
|
||||
prevName = curNavSection[j-1].innerText; // make prev page text value of prior index
|
||||
nextHref = curNavSection[j+1].href; // make next page href value of next index
|
||||
nextName = curNavSection[j+1].innerText; // make next page text value of next index
|
||||
whatIsActive = i; //////////////////////////// make note of ACTIVE page and to end loop
|
||||
}
|
||||
// BREAK - nothing else to be done
|
||||
break;
|
||||
}
|
||||
}
|
||||
// ACTIVE page has been found - turn off loop
|
||||
if (whatIsActive != -1) { break; }
|
||||
}
|
||||
// Use results from above loop
|
||||
if (prevHref == "remove") { /////////////////////////////////////////// FIRST - no previous link
|
||||
previousLink.remove(); // no prev link
|
||||
pageTurnSpacer.remove(); // no need for SPACING ELEMENT
|
||||
nextLink.href = nextHref; // set href for next page
|
||||
nextLink.innerHTML = nextLink.innerHTML.replace("Page", nextName); // set text for next page
|
||||
} else if (nextHref == "remove") { //////////////////////////////////////////// LAST - no next link
|
||||
previousLink.href = prevHref; // set href for previous page
|
||||
previousLink.innerHTML = previousLink.innerHTML.replace("Page", prevName); // set text for previous page
|
||||
nextLink.remove(); // no need for next link
|
||||
} else { ////////////////////////////////////////////////////////////////////// MIDDLE - prev and next link
|
||||
previousLink.href = prevHref; // set href for previous page
|
||||
previousLink.innerHTML = previousLink.innerHTML.replace("Page", prevName); // set text for previous page
|
||||
nextLink.href = nextHref; // set href for next page
|
||||
nextLink.innerHTML = nextLink.innerHTML.replace("Page", nextName); // set text for next page
|
||||
} // IMPORTANT NOTE:
|
||||
// WELL - VERY IMPORTANT NOTE - this all depends on current HTML attributes to work. //
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue