mirror of
https://github.com/openshift/openshift-docs.git
synced 2026-02-05 12:46:18 +01:00
updated template file
This commit is contained in:
Vikram Goyal
committed by
openshift-cherrypick-robot
openshift-cherrypick-robot
parent
48c9864ab7
commit
4b1ce91376
@@ -4,6 +4,7 @@
|
||||
<!--[if gt IE 9]><!-->
|
||||
<html>
|
||||
<!--<![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
||||
@@ -11,31 +12,70 @@
|
||||
<%= (distro_key == "openshift-webscale") ? '<meta name="robots" content="noindex,nofollow">' : '' %>
|
||||
<title><%= [topic_title, subgroup_title].compact.join(' - ') %> | <%= group_title %> | <%= distro %> <%= version %></title>
|
||||
<link href="https://assets.openshift.net/content/subdomain.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet" />
|
||||
<link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/search.css" rel="stylesheet" />
|
||||
<link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/autumn.css" rel="stylesheet" />
|
||||
<link href="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png">
|
||||
<link href="https://assets.openshift.net/content/subdomain/favicon32x32.png" rel="shortcut icon" type="text/css">
|
||||
<link href="https://assets.openshift.net/content/osh-nav-footer.css" rel="stylesheet" type="text/css" media="screen, print" />
|
||||
<link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet" />
|
||||
<!--[if IE]><link rel="shortcut icon" href="https://assets.openshift.net/content/subdomain/favicon.ico"><![endif]-->
|
||||
<!-- or, set /favicon.ico for IE10 win -->
|
||||
<meta content="OpenShift" name="application-name">
|
||||
<meta content="#000000" name="msapplication-TileColor">
|
||||
<meta content="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" name="msapplication-TileImage">
|
||||
<%= render("_templates/_analytics.html.erb", :distro_key => distro_key) %>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
|
||||
rel="stylesheet">
|
||||
<script>
|
||||
|
||||
function getPDF() {
|
||||
var element = document.getElementsByClassName('main');
|
||||
<%
|
||||
filepath = repo_path[0...-5]
|
||||
%>
|
||||
var opt = {
|
||||
margin: 10,
|
||||
filename: '<%= "#{filepath}.pdf" %>',
|
||||
html2canvas: { windowWidth: 650 },
|
||||
image: { type: 'jpeg', quality: 0.98 }
|
||||
};
|
||||
html2pdf().set(opt).from(element[0]).save();
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="selectVersion('<%= version %>');">
|
||||
<%= render("_templates/_topnav.html.erb", :distro_key => distro_key) %>
|
||||
<%
|
||||
unsupported_versions = ["3.0", "3.1", "3.2", "3.3", "3.4", "3.5", "3.6", "3.7", "3.9", "3.10", "4.1", "4.2", "4.3", "4.4", "4.5"];
|
||||
%>
|
||||
<div class="container">
|
||||
<p class="toggle-nav visible-xs pull-left">
|
||||
<button class="btn btn-default btn-sm" type="button" data-toggle="offcanvas">Toggle nav</button>
|
||||
</p>
|
||||
<button id="hc-open-btn" class="open-btn-sm" onclick="openNav()" aria-label="Open"><span class="fa fa-bars" /></button>
|
||||
<ol class="breadcrumb">
|
||||
<% if (version == "4.10" || distro_key == "openshift-webscale") %>
|
||||
<span>
|
||||
<div class="alert alert-danger" role="alert" id="support-alert">
|
||||
<strong>This documentation is work in progress and might not be complete or fully tested.</strong> The latest supported version of version 3 is <a href="https://docs.openshift.com/container-platform/3.11/welcome/index.html" class="link-primary" style="color: #545454 !important;">[3.11]</a>. For the most recent version 4, see <a href="https://docs.openshift.com/container-platform/latest/welcome/index.html" style="color: #545454 !important" class="link-primary">[4]</a>.
|
||||
</div>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<% if ((unsupported_versions.include? version) && (distro_key == "openshift-enterprise")) %>
|
||||
|
||||
<span>
|
||||
<div class="alert alert-danger" role="alert" id="support-alert">
|
||||
<strong>You are viewing documentation for a release that is no longer supported.</strong> The latest supported version of version 3 is <a href="https://docs.openshift.com/container-platform/3.11/welcome/index.html" class="link-primary" style="color: #545454 !important;">[3.11]</a>. For the most recent version 4, see <a href="https://docs.openshift.com/container-platform/latest/welcome/index.html" style="color: #545454 !important" class="link-primary">[4]</a>.
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<% end %>
|
||||
|
||||
<li class="sitename">
|
||||
<a href="/"><%= site_name %></a>
|
||||
<a href="/">
|
||||
<%= site_name %></a>
|
||||
</li>
|
||||
<li class="hidden-xs active">
|
||||
<% if (distro_key == "openshift-enterprise") %>
|
||||
@@ -49,9 +89,7 @@
|
||||
</a>
|
||||
<% end %>
|
||||
<select id="version-selector" onchange="versionSelector(this);">
|
||||
<% if (version == "4.9") %>
|
||||
<option value="4.9">4.9</option>
|
||||
<% end %>
|
||||
<option value="4.9">4.9</option>
|
||||
<option value="4.8">4.8</option>
|
||||
<option value="4.7">4.7</option>
|
||||
<option value="4.6">4.6</option>
|
||||
@@ -73,7 +111,7 @@
|
||||
<option value="3.0">3.0</option>
|
||||
</select>
|
||||
<% else %>
|
||||
<%= breadcrumb_root %>
|
||||
<%= breadcrumb_root %>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="hidden-xs active">
|
||||
@@ -83,20 +121,16 @@
|
||||
<li class="hidden-xs active">
|
||||
<%= breadcrumb_topic %>
|
||||
</li>
|
||||
|
||||
<% if (distro_key != "openshift-origin" && distro_key != "openshift-aro") %>
|
||||
<span text-align="right" style="float: right !important">
|
||||
<a href="https://github.com/openshift/openshift-docs/commits/enterprise-<%= (distro_key == "openshift-enterprise") ? version : ((distro_key == "openshift-dedicated") ? ((version == "4") ? "4.3" : "3.11") : "3.11") %>/<%= repo_path %>">
|
||||
Page history
|
||||
</a>
|
||||
<a href="https://github.com/openshift/openshift-docs/commits/<%= (distro_key == "openshift-enterprise") ? "enterprise-#{version}" : "dedicated-4" %>/<%= repo_path %>"><span class="material-icons-outlined" title="Page history">history</span></a>
|
||||
<%
|
||||
unless (unsupported_versions.include? version)
|
||||
%>
|
||||
/
|
||||
<a href="https://github.com/openshift/openshift-docs/issues/new?title=<%= (distro_key == "openshift-enterprise") ? "[enterprise-#{version}] Issue in file #{repo_path}" :
|
||||
((distro_key == "openshift-dedicated") ? "[dedicated] Issue in file #{repo_path}" : "[online] Issue in file #{repo_path}") %>">
|
||||
Open an issue
|
||||
<a href="https://github.com/openshift/openshift-docs/issues/new?title=<%= (distro_key == "openshift-enterprise") ? "[enterprise-#{version}] Issue in file #{repo_path}" : ((distro_key=="openshift-dedicated" ) ? "[dedicated] Issue in file #{repo_path}" : "[online] Issue in file #{repo_path}" ) %>">
|
||||
<span class="material-icons-outlined" title="Open an issue">bug_report</span>
|
||||
</a>
|
||||
<a href="javascript: void(0);" onclick="getPDF();"><span class="material-icons-outlined" title="Download PDF (may take a while for large pages)">picture_as_pdf</span></a>
|
||||
<% if (version == "4.5") %>
|
||||
/
|
||||
<select onchange="selectLang(this);">
|
||||
@@ -112,71 +146,55 @@
|
||||
<div class="row row-offcanvas row-offcanvas-left">
|
||||
<div class="col-xs-8 col-sm-3 col-md-3 sidebar sidebar-offcanvas">
|
||||
<div class="row-fluid">
|
||||
<div id="hc-search">
|
||||
<input id="hc-search-input" type="text">
|
||||
<button id="hc-search-btn">Search</button>
|
||||
<div id="btn-close">
|
||||
<button id="hc-close-btn" onclick="closeNav()" class="close-btn-sm" aria-label="close"><span class="fa fa-times" /></button>
|
||||
</div>
|
||||
|
||||
<div id="hc-search-modal">
|
||||
<div id="hc-modal-content">
|
||||
<span id="hc-modal-close">×</span>
|
||||
<div id="hc-search-results-wrapper">
|
||||
<div id="hc-search-results"></div>
|
||||
<div id="hc-search-progress-indicator" class="text-center search-progress-indicator"><i class="fa fa-circle-o-notch fa-spin" style="font-size:42px"></i></div>
|
||||
<div class="text-center">
|
||||
<button id="hc-search-more-btn">Show more results</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hc-search">
|
||||
<input id="hc-search-input" type="text" aria-label="search">
|
||||
<button id="hc-search-btn" aria-label="search"><span class="fa fa-search" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<%= render("_templates/_nav_openshift.html.erb", :distro_key => distro_key, :navigation => navigation, :group_id => group_id, :topic_id => topic_id, :subgroup_id => subgroup_id, :subtopic_shim => subtopic_shim, :subsubgroup_id => subsubgroup_id) %>
|
||||
</div>
|
||||
<div id="hc-search-modal">
|
||||
<div id="hc-modal-content">
|
||||
<span id="hc-modal-close">×</span>
|
||||
<div id="hc-search-results-wrapper">
|
||||
<div id="hc-search-results"></div>
|
||||
<div id="hc-search-progress-indicator" class="text-center search-progress-indicator"><i class="fa fa-circle-o-notch fa-spin" style="font-size:42px"></i></div>
|
||||
<div class="text-center">
|
||||
<button id="hc-search-more-btn">Show more results</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-9 main">
|
||||
<div class="page-header">
|
||||
<h1><%= article_title %></h1>
|
||||
<h1>
|
||||
<%= article_title %>
|
||||
</h1>
|
||||
</div>
|
||||
<% if (version == "4.9" || distro_key == "openshift-wescale") %>
|
||||
<font size="+1" color="red">This documentation is work in progress and might not be complete or fully tested.</font>
|
||||
<div id="annoying-box"
|
||||
style="position: fixed; top: 100px; left: 10px; width: 100px; height: 100px; color: red">
|
||||
This documentation is work in progress and might not be complete or fully tested.
|
||||
</div>
|
||||
<% end %>
|
||||
<%
|
||||
if (unsupported_versions.include? version)
|
||||
%>
|
||||
<font size="+1" color="red">You are viewing documentation for a release that is no longer supported. The latest supported version of version 3 is <a href="https://docs.openshift.com/container-platform/3.11/welcome/index.html">[3.11]</a>. For the most recent version 4, see <a href="https://docs.openshift.com/container-platform/latest/welcome/index.html">[4]</a></font>
|
||||
<div id="annoying-box"
|
||||
style="position: fixed; top: 100px; left: 10px; width: 100px; height: 100px; color: red">
|
||||
You are viewing documentation for a release that is no longer supported. The latest supported version of version 3 is <a href="https://docs.openshift.com/container-platform/3.11/welcome/index.html">[3.11]</a>. For the most recent version 4, see <a href="https://docs.openshift.com/container-platform/latest/welcome/index.html">[4]</a>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if (distro_key == "openshift-aro" && version == "3") %>
|
||||
<font size="+1" color="red">
|
||||
<hr>
|
||||
<b>Important</b>
|
||||
</font>
|
||||
|
||||
<p>Azure Red Hat OpenShift 3.11 <b>will be retired 30 June 2022</b>. Support for creation of new Azure Red Hat OpenShift 3.11 clusters continues through 30 November 2020. Following retirement, remaining Azure Red Hat OpenShift 3.11 clusters will be shut down to prevent security vulnerabilities.</p>
|
||||
|
||||
<p>Follow this guide to <a href="https://docs.microsoft.com/en-us/azure/openshift/tutorial-create-cluster">create an Azure Red Hat OpenShift 4 cluster</a>. If you have specific questions, please <a href="mailto:arofeedback@microsoft.com">contact us</a></p>
|
||||
<hr>
|
||||
<font size="+1" color="red">
|
||||
<hr>
|
||||
<b>Important</b>
|
||||
</font>
|
||||
<p>Azure Red Hat OpenShift 3.11 <b>will be retired 30 June 2022</b>. Support for creation of new Azure Red Hat OpenShift 3.11 clusters continues through 30 November 2020. Following retirement, remaining Azure Red Hat OpenShift 3.11 clusters will be shut down to prevent security vulnerabilities.</p>
|
||||
<p>Follow this guide to <a href="https://docs.microsoft.com/en-us/azure/openshift/tutorial-create-cluster">create an Azure Red Hat OpenShift 4 cluster</a>. If you have specific questions, please <a href="mailto:arofeedback@microsoft.com">contact us</a></p>
|
||||
<hr>
|
||||
<% end %>
|
||||
<% if (distro_key == "openshift-aro" && version == "4") %>
|
||||
<font size="+1" color="red">
|
||||
<hr>
|
||||
<b>Important</b>
|
||||
</font>
|
||||
<p>Azure Red Hat OpenShift is supported by Red Hat and Microsoft. As of February 2021, the documentation will be hosted by Microsoft and Red Hat as outlined below.</p>
|
||||
<hr>
|
||||
<font size="+1" color="red">
|
||||
<hr>
|
||||
<b>Important</b>
|
||||
</font>
|
||||
<p>Azure Red Hat OpenShift is supported by Red Hat and Microsoft. As of February 2021, the documentation will be hosted by Microsoft and Red Hat as outlined below.</p>
|
||||
<hr>
|
||||
<% end %>
|
||||
|
||||
<%= content %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://assets.openshift.net/content/modernizr.js" type="text/javascript"></script>
|
||||
<script src="https://assets.openshift.net/content/subdomain.js" type="text/javascript"></script>
|
||||
<script src="https://assets.openshift.net/content/nav-tertiary.js" type="text/javascript"></script>
|
||||
@@ -187,57 +205,293 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" type="text/javascript"></script>
|
||||
<script src="https://docs.openshift.com/container-platform/4.1/_javascripts/clipboard.js" type="text/javascript"></script>
|
||||
<script src="https://docs.openshift.com/container-platform/4.1/_javascripts/collapsible.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
var dk = '<%= distro_key %>';
|
||||
var version = '<%= version %>';
|
||||
|
||||
var distros = {
|
||||
'openshift-origin': ['docs_origin', version],
|
||||
'openshift-dedicated': ['docs_dedicated', version],
|
||||
// specific labels are used for OSD instead of the URL filter, due to its unusual URL structure; assume v4
|
||||
'openshift-dedicated': ['docs_dedicated_v4'],
|
||||
'openshift-online': ['docs_online', version],
|
||||
'openshift-enterprise': ['docs_cp', version],
|
||||
'openshift-aro' : ['docs_aro', version],
|
||||
'openshift-rosa' : ['docs_rosa']
|
||||
'openshift-rosa' : ['docs_rosa'],
|
||||
'openshift-acs' : ['docs_acs', version]
|
||||
};
|
||||
|
||||
// only OSD v3 docs have the version variable specified
|
||||
if (dk == "openshift-dedicated" && version == "3") {
|
||||
distros['openshift-dedicated'] = ['docs_dedicated_v3']
|
||||
}
|
||||
|
||||
distros[dk] ? hcSearchCategory.apply(null, distros[dk]) : hcSearchCategory("docs");
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/*<![CDATA[*/
|
||||
$(document).ready(function() {
|
||||
$("[id^='topicGroup']").on('show.bs.collapse', function (event) {
|
||||
if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
|
||||
$(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
|
||||
}
|
||||
});
|
||||
$("[id^='topicGroup']").on('hide.bs.collapse', function (event) {
|
||||
if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
|
||||
$(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
|
||||
}
|
||||
});
|
||||
$("[id^='topicSubGroup']").on('show.bs.collapse', function () {
|
||||
$(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubGroup']").on('hide.bs.collapse', function () {
|
||||
$(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubSubGroup']").on('show.bs.collapse', function () {
|
||||
$(this).parent().find("[id^='ssgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubSubGroup']").on('hide.bs.collapse', function () {
|
||||
$(this).parent().find("[id^='ssgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
|
||||
const collapsibleContent = document.getElementsByTagName("details");
|
||||
for (var i=0; i < collapsibleContent.length; i++) {
|
||||
collapsibleContent[i].setAttribute("open", "");
|
||||
}
|
||||
|
||||
/*<![CDATA[*/
|
||||
$(document).ready(function() {
|
||||
$("[id^='topicGroup']").on('show.bs.collapse', function(event) {
|
||||
if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
|
||||
$(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
|
||||
}
|
||||
});
|
||||
/*]]>*/
|
||||
$("[id^='topicGroup']").on('hide.bs.collapse', function(event) {
|
||||
if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
|
||||
$(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
|
||||
}
|
||||
});
|
||||
$("[id^='topicSubGroup']").on('show.bs.collapse', function() {
|
||||
$(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubGroup']").on('hide.bs.collapse', function() {
|
||||
$(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubSubGroup']").on('show.bs.collapse', function() {
|
||||
$(this).parent().find("[id^='ssgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
$("[id^='topicSubSubGroup']").on('hide.bs.collapse', function() {
|
||||
$(this).parent().find("[id^='ssgSpan']").toggleClass("fa-caret-right fa-caret-down");
|
||||
});
|
||||
|
||||
const collapsibleContent = document.getElementsByTagName("details");
|
||||
for (var i = 0; i < collapsibleContent.length; i++) {
|
||||
collapsibleContent[i].setAttribute("open", "");
|
||||
}
|
||||
|
||||
});
|
||||
/*]]>*/
|
||||
</script>
|
||||
|
||||
<%= render("_templates/_footer.html.erb", :distro_key => distro_key, :images_path => images_path) %>
|
||||
|
||||
<!-- adjust page css based on breadcrumb and/or resize -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
if (window.innerWidth >= 1425) {
|
||||
adjustSide();
|
||||
adjustToc();
|
||||
adjustMain();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 1425) {
|
||||
sidebar.style.display = 'block';
|
||||
adjustSide();
|
||||
adjustToc();
|
||||
adjustMain();
|
||||
} else if (window.innerWidth < 1425) {
|
||||
sidebar.style.display = 'none';
|
||||
document.querySelector('.main').style.paddingTop = '0px';
|
||||
}
|
||||
});
|
||||
|
||||
function adjustSide() {
|
||||
document.querySelector('.sidebar').style.top = parseInt((document.querySelector('.breadcrumb').offsetHeight + 125), 10) + "px";
|
||||
document.querySelector('#hc-search').style.top = parseInt((document.querySelector('.breadcrumb').offsetHeight + 95), 10) + "px";
|
||||
}
|
||||
|
||||
function adjustToc() {
|
||||
if (document.querySelector('#toc') !== null) {
|
||||
document.querySelector('#toc').style.top = parseInt((document.querySelector('.breadcrumb').offsetHeight + 90), 10) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function adjustMain() {
|
||||
document.querySelector('html').style.scrollPaddingTop = parseInt((document.querySelector('.breadcrumb').offsetHeight + 90), 10) + "px";
|
||||
document.querySelector('.main').style.paddingTop = parseInt((document.querySelector('.breadcrumb').offsetHeight - 70), 10) + "px";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- remove toc active class when page is loaded -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var tocItems = $("#toc a");
|
||||
|
||||
for (let i = 0; i < tocItems.length; i++) {
|
||||
tocItems[i].classList.remove("toc-active");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- maintain sidebar scroll position between page loads -->
|
||||
<script type="text/javascript">
|
||||
let sidebar = document.querySelector(".sidebar");
|
||||
let scrolltop = localStorage.getItem("sidebar-scroll");
|
||||
|
||||
if (scrolltop == null) {
|
||||
sidebar.scrollTop = parseInt(top, 10);
|
||||
}
|
||||
|
||||
window.addEventListener("beforeunload", () => {
|
||||
localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
sidebar.scrollTo(0, scrolltop)
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- open/close the nav -->
|
||||
<script type="text/javascript">
|
||||
function closeNav() {
|
||||
let sidebar = document.querySelector(".sidebar");
|
||||
sidebar.style.display = "none";
|
||||
}
|
||||
|
||||
function openNav() {
|
||||
let sidebar = document.querySelector(".sidebar");
|
||||
sidebar.style.display = "block";
|
||||
sidebar.style.top = "0px";
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- clear and add toc-active to clicked toc link -->
|
||||
<script type="text/javascript">
|
||||
$("#toc a").click(function() {
|
||||
var tocItems = $("#toc a");
|
||||
for (let i = 0; i < tocItems.length; i++) {
|
||||
tocItems[i].classList.remove("toc-active");
|
||||
}
|
||||
this.classList.add("toc-active");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- update active toc class when mouse scrolls -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
window.addEventListener("wheel", () => {
|
||||
|
||||
const ioConfiguration = {
|
||||
"rootMargin": "-120px 0px -400px 0px",
|
||||
"threshold": 0
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
|
||||
entries.forEach(entry => {
|
||||
var id = entry.target.getAttribute('id');
|
||||
//fight with js
|
||||
document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
|
||||
});
|
||||
});
|
||||
|
||||
//track all h1-4 headings that have an id
|
||||
document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
|
||||
observer.observe(h);
|
||||
});
|
||||
|
||||
//runs when the IntersectionObserver fires
|
||||
function setCurrent(e) {
|
||||
var allTocLinks = document.querySelectorAll("#toc li a");
|
||||
if (allTocLinks !== undefined) {
|
||||
e.map(i => {
|
||||
if (i.isIntersecting && i.intersectionRatio >= 1) {
|
||||
allTocLinks.forEach(link => link.classList.remove("toc-active"));
|
||||
document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active')
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
//make clicked toc item active and stop IntersectionObserver
|
||||
$("#toc a").click(function() {
|
||||
//stop tracking all h1-4 headings that have an id
|
||||
document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
|
||||
observer.unobserve(h);
|
||||
});
|
||||
var tocItems = $("#toc a");
|
||||
if (tocItems !== undefined) {
|
||||
for (let i = 0; i < tocItems.length; i++) {
|
||||
tocItems[i].classList.remove("toc-active");
|
||||
};
|
||||
this.classList.add("toc-active");
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--handle page scroll top and bottom, add toc-active -->
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('scroll', () => {
|
||||
//scroll to bottom
|
||||
if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
|
||||
var tocItems = $("#toc a");
|
||||
for (let i = 0; i < tocItems.length; i++) {
|
||||
tocItems[i].classList.remove("toc-active")
|
||||
};
|
||||
tocItems[tocItems.length - 1].classList.add("toc-active");
|
||||
};
|
||||
//scroll to top
|
||||
if(window.pageYOffset === 0) {
|
||||
var tocItems = $("#toc a");
|
||||
for (let i = 0; i < tocItems.length; i++) {
|
||||
tocItems[i].classList.remove("toc-active");
|
||||
};
|
||||
tocItems[0].classList.add("toc-active");
|
||||
};
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--adjust sidebar and toc when footer is displayed -->
|
||||
<script type="text/javascript">
|
||||
sidebar = document.querySelector('.sidebar')
|
||||
toc = document.querySelector('#toc')
|
||||
main = document.querySelector('.main')
|
||||
okd_footer = document.querySelector('.footer-origin-docs')
|
||||
document.addEventListener('scroll', () => {
|
||||
//scroll to bottom
|
||||
if (window.innerWidth >= 1425) {
|
||||
if(sidebar !== null && toc !== null) {
|
||||
if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
|
||||
sidebar.style.marginBottom = "38px";
|
||||
toc.style.bottom = "35px";
|
||||
main.style.marginBottom = "35px";
|
||||
//okd footer
|
||||
if(okd_footer !== null) {
|
||||
sidebar.style.marginBottom = "176px";
|
||||
toc.style.bottom = "175px";
|
||||
main.style.marginBottom = "135px";
|
||||
};
|
||||
};
|
||||
if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
|
||||
sidebar.style.marginBottom = "0px";
|
||||
toc.style.bottom = "0px";
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- adjust alerts on mobile -->
|
||||
<script type="text/javascript">
|
||||
alert = document.querySelector('#support-alert')
|
||||
window.addEventListener("wheel", () => {
|
||||
if (window.innerWidth < 1425) {
|
||||
//adjust alert
|
||||
if(window.pageYOffset > 0) {
|
||||
if(alert !== null) {
|
||||
document.querySelector('#support-alert').style.position = "fixed";
|
||||
document.querySelector('#support-alert').style.bottom = "0px";
|
||||
document.querySelector('#support-alert').style.margin = "5px";
|
||||
document.querySelector('#support-alert').style.zIndex = "9999999";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 1425) {
|
||||
if(alert !== null) {
|
||||
document.querySelector('#support-alert').style.removeProperty('position');
|
||||
document.querySelector('#support-alert').style.removeProperty('bottom');
|
||||
document.querySelector('#support-alert').style.removeProperty('margin');
|
||||
document.querySelector('#support-alert').style.removeProperty('zIndex');
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user