summaryrefslogtreecommitdiff
path: root/docs/_static/js
diff options
context:
space:
mode:
Diffstat (limited to 'docs/_static/js')
-rw-r--r--docs/_static/js/codecopier.js67
-rw-r--r--docs/_static/js/footer.js92
-rw-r--r--docs/_static/js/sidebar.js162
3 files changed, 321 insertions, 0 deletions
diff --git a/docs/_static/js/codecopier.js b/docs/_static/js/codecopier.js
new file mode 100644
index 00000000..bf0b3b4d
--- /dev/null
+++ b/docs/_static/js/codecopier.js
@@ -0,0 +1,67 @@
+const hamburgerIcon = `
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 5.3335H24M0 12.0002H24M0 18.6668H24" stroke="#FFAE12" stroke-width="3"/>
+ </svg>
+`
+
+const innersOfCopyDiv = `
+ <p>Copy</p>
+ <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect x="4.95605" y="4.5" width="7" height="7" rx="1.5" stroke="#FD8F01"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M0.456055 2C0.456055 0.895431 1.35149 0 2.45605 0H6.45605C7.56062 0 8.45605 0.895431 8.45605 2V3H7.45605V2C7.45605 1.44772 7.00834 1 6.45605 1H2.45605C1.90377 1 1.45605 1.44772 1.45605 2V6C1.45605 6.55228 1.90377 7 2.45605 7H3.45605V8H2.45605C1.35149 8 0.456055 7.10457 0.456055 6V2Z" fill="#FD8F01"/>
+ </svg>
+`
+
+function formDiv(id) {
+ return `
+ <div class='copyDiv' data-identifier='${id}'>
+ ${innersOfCopyDiv}
+ </div>
+`
+}
+
+$(document).ready(async function () {
+ const codeSnippets = $(
+ '.rst-content div[class^=highlight] div[class^=highlight], .rst-content pre.literal-block div[class^=highlight], .rst-content pre.literal-block div[class^=highlight]'
+ )
+
+ codeSnippets.each((index, el) => {
+ el.insertAdjacentHTML('beforeend', formDiv(index))
+ })
+
+ const copyButton = $('.copyDiv')
+
+ copyButton.click(async ({
+ currentTarget
+ }) => {
+ // we obtain text and copy it
+ const id = currentTarget.dataset.identifier
+
+ try {
+ await navigator.clipboard.writeText(currentTarget.offsetParent.innerText)
+ } catch (error) {
+ console.log('Copiing text failed, please try again', {
+ error
+ })
+ }
+
+ // we edit the copyDiv connected to copied text
+ const divWithNeededId = $(`div[data-identifier='${id}']`)
+ divWithNeededId.addClass('copiedNotifier')
+ divWithNeededId.html('<span>Copied!</span>')
+
+ setTimeout(() => {
+ divWithNeededId.html(innersOfCopyDiv)
+ divWithNeededId.removeClass('copiedNotifier')
+
+ }, 2000)
+ })
+
+ // we edit the button that is added by readthedocs portal
+ const readTheDocsButton = $('div.rst-versions')
+ const navbar = $('nav[data-toggle=wy-nav-shift]')
+
+ navbar.append(readTheDocsButton)
+
+});
+
diff --git a/docs/_static/js/footer.js b/docs/_static/js/footer.js
new file mode 100644
index 00000000..5f135768
--- /dev/null
+++ b/docs/_static/js/footer.js
@@ -0,0 +1,92 @@
+$(document).ready(function() {
+ insertIframe()
+
+ const options = {
+ threshold: 0.01,
+ }
+ const divDoc = document.querySelector('.iframe-container')
+ const innerSidebar = $('.wy-side-scroll')
+
+ intersectionObserver(options, divDoc, innerSidebar)
+
+ $(window).resize(function() {
+ intersectionObserver(options, divDoc, innerSidebar)
+ })
+
+ $(window).scroll(function() {
+ intersectionObserver(options, divDoc, innerSidebar)
+ })
+});
+
+function intersectionObserver(options, divDoc, innerSidebar) {
+ // we delete any inline-styles from innerSidebar
+ if($(innerSidebar).attr('style')) {
+ innerSidebar.removeAttr('style')
+ }
+ const screenWidth = $(window).width()
+ const sidebar = $('.wy-nav-side')
+ const documentHeight = $(document).height()
+ const iframeHeight = $('.iframe-container').height()
+ const currentPosition = $(document).scrollTop()
+ const additionalPaddingFromSidebar = screenWidth > 991 ? 70 : 83
+ const heightThatIsAddedByPaddings = 36
+ const resultOfSums = documentHeight -
+ iframeHeight -
+ currentPosition -
+ additionalPaddingFromSidebar -
+ heightThatIsAddedByPaddings
+ const heightOfAdditionalButton = 50
+
+ const onEntry = (entries, observer) => {
+ entries.forEach(entry => {
+ if(entry.isIntersecting) {
+ if(resultOfSums <= 70) {
+ $(sidebar).hide()
+ return
+ }
+ $(sidebar).show()
+ $(sidebar).height(resultOfSums)
+ $(sidebar).css('margin-bottom', '20px')
+ $(innerSidebar).removeAttr('style')
+ $(innerSidebar).height(resultOfSums - heightOfAdditionalButton)
+ return
+ } else {
+ $(sidebar).removeAttr('style')
+ $(innerSidebar).removeAttr('style')
+ }
+ })
+ }
+ const observer = new IntersectionObserver(onEntry, options);
+ observer.observe(divDoc)
+
+ if($(innerSidebar).attr('style')) {
+ observer.unobserve(divDoc)
+ }
+
+ determineHeightOfFooterContainer()
+
+}
+
+function determineHeightOfFooterContainer() {
+ const iframeFooter= $('#vyos-footer-iframe');
+ const title = window.document.getElementsByTagName('title')?.[0]?.text;
+ const iframeContainer = $('.iframe-container')
+ const href = window.location.href;
+
+ window.addEventListener('message',function(message){
+ if(message.data.footerIframeHeight){
+ $(iframeFooter).css('min-height', `${message.data.footerIframeHeight + 1}px`)
+ $(iframeContainer).height(message.data.footerIframeHeight + 1)
+ iframeFooter[0].contentWindow.postMessage({title, href},'*');
+ }
+ })
+}
+
+function insertIframe() {
+ const body = $('.wy-body-for-nav')
+ body.append(divWithIframe)
+}
+
+const divWithIframe = `<div class="iframe-container">
+ <iframe src='https://vyos.io/iframes/footer' id='vyos-footer-iframe'></iframe>
+</div>`
diff --git a/docs/_static/js/sidebar.js b/docs/_static/js/sidebar.js
new file mode 100644
index 00000000..8b5c029d
--- /dev/null
+++ b/docs/_static/js/sidebar.js
@@ -0,0 +1,162 @@
+$(document).ready(function () {
+ removeOverlayAndCloseSidebar()
+ documentLoaded()
+
+ $(window).on("resize", function () {
+ const screenWidth = window.innerWidth
+
+ if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth)
+ return removeOverlayAndButtons(screenWidth)
+ })
+
+})
+
+function removeButtons() {
+ const alreadyCreatedOpenButtonCheck = $('.openLeftSidebarMenuButton')
+ const alreadyCreatedCloseButtonCheck = $('.closeButtonDivLine')
+
+ if(alreadyCreatedOpenButtonCheck[0]) alreadyCreatedOpenButtonCheck[0].remove()
+ if(alreadyCreatedCloseButtonCheck[0]) alreadyCreatedCloseButtonCheck[0].remove()
+}
+
+function documentLoaded() {
+ const screenWidth = window.innerWidth
+
+ if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth)
+ return
+}
+
+function userIsInTabletScreenWidth(screenWidth) {
+ const alreadyCreatedButtonCheck = $('.openLeftSidebarMenuButton')
+ if (alreadyCreatedButtonCheck[0]) return
+ createOpenSidebarButton(screenWidth)
+ createCloseSidebarButton(screenWidth)
+ removeOverlayAndCloseSidebar()
+}
+
+function createOverlay(screenWidth) {
+ const contentContainer = $('.wy-nav-content')
+ contentContainer.addClass('overlay')
+
+ const overlayDiv = `
+ <div class='overlayDiv' />
+ `
+
+ contentContainer.append(overlayDiv)
+
+ $('.wy-nav-content.overlay').on('click', onOverlayClickHandler)
+}
+
+function onOverlayClickHandler() {
+ removeOverlayAndCloseSidebar()
+}
+
+function removeOverlayAndCloseSidebar() {
+ const screenWidth = window.innerWidth
+
+ const contentContainer = $('.wy-nav-content')
+ contentContainer.removeClass('overlay')
+
+ const overlayDiv = $('.overlayDiv')
+ overlayDiv.remove()
+
+ const leftSidebarOpened = $('nav.wy-nav-side.shift')
+ leftSidebarOpened.removeClass('shift')
+
+ const leftSidebar = $('nav.wy-nav-side')
+
+ // that's working don't touch
+ if(screenWidth > 991) {
+ // when user is not in tablet -> we add classes on opened sidebar and remove classes on closed sidebar
+ const contentSection = $('section.wy-nav-content-wrap')
+ const contentDiv = $('div.wy-nav-content')
+ contentSection.addClass('wy-nav-content-wrap-opened-sidebar')
+ contentDiv.addClass('wy-nav-content-opened-sidebar')
+ contentSection.removeClass('wy-nav-content-wrap-closed-sidebar')
+ contentDiv.removeClass('wy-nav-content-closed-sidebar')
+ leftSidebar.removeClass('display_none')
+ return
+ }
+
+ if(screenWidth <= 991) {
+ // I add closed classes to make contentContainer 100% width
+ const contentSection = $('section.wy-nav-content-wrap')
+ const contentDiv = $('div.wy-nav-content')
+ contentSection.removeClass('wy-nav-content-wrap-opened-sidebar')
+ contentDiv.removeClass('wy-nav-content-opened-sidebar')
+ contentSection.addClass('wy-nav-content-wrap-closed-sidebar')
+ contentDiv.addClass('wy-nav-content-closed-sidebar')
+ leftSidebar.addClass('display_none')
+ }
+
+}
+
+function createOpenSidebarButton() {
+ const divToInsert = $('div[role=navigation][aria-label="Page navigation"]')
+ divToInsert[0].insertAdjacentHTML('afterbegin', formOpenSidebarButton())
+
+ const newlyCreatedButton = $('.openLeftSidebarMenuButton')
+
+ newlyCreatedButton.on('click', onOpenLeftSidebarMenuButtonClickHandler)
+}
+
+function onOpenLeftSidebarMenuButtonClickHandler(e) {
+ e.stopPropagation()
+ const leftSidebar = $('nav.wy-nav-side')
+ const leftSidebarOpened = $('nav.wy-nav-side.shift')
+ if(leftSidebarOpened[0]) {
+ // leftSidebarOpened.removeClass('shift')
+ removeOverlayAndCloseSidebar()
+ }
+
+ createOverlay()
+ if(leftSidebar.hasClass('display_none')) leftSidebar.removeClass('display_none')
+ if(leftSidebar.hasClass('.additionalStylesForShift')) leftSidebar.removeClass('.additionalStylesForShift')
+ // here I add classes to contentSection and contentDiv to make them margined left and remove closed classes if any
+ const contentSection = $('section.wy-nav-content-wrap')
+ const contentDiv = $('div.wy-nav-content')
+ // contentSection.removeClass('wy-nav-content-wrap-closed-sidebar')
+ // contentDiv.removeClass('wy-nav-content-closed-sidebar')
+ // contentSection.addClass('wy-nav-content-wrap-opened-sidebar')
+ // contentDiv.addClass('wy-nav-content-opened-sidebar')
+ return leftSidebar.addClass('shift')
+}
+
+function createCloseSidebarButton(screenWidth) {
+ const updatedLeftSidebarScrollDiv = $('nav.wy-nav-side')
+
+ const alreadyCreatedButtonCheck = $('div.closeLeftSidebarMenuButton')
+ if(alreadyCreatedButtonCheck[0]) return
+
+ updatedLeftSidebarScrollDiv[0].insertAdjacentHTML('beforeend', formCloseLeftSidebarButton())
+ updatedLeftSidebarScrollDiv.addClass('additionalStylesForShift')
+
+ const createdCloseSidebarButton = $('.closeButtonDivLine')
+
+ createdCloseSidebarButton.on('click', function () {
+ removeOverlayAndCloseSidebar()
+ })
+}
+
+function formOpenSidebarButton() {
+ return `
+ <div class='openLeftSidebarMenuButton'>
+ ${hamburgerIcon}
+ </div>
+ `
+}
+
+function formCloseLeftSidebarButton() {
+ return `
+ <div class='closeButtonDivLine'>
+ <div class='closeLeftSidebarMenuButton'>
+ Close
+ </div>
+ </div>
+ `
+}
+
+function removeOverlayAndButtons(screenWidth) {
+ removeOverlayAndCloseSidebar()
+ removeButtons()
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-15 08:34:55 +0000