From 54cb31c8e76515b3245bf90ffb3735ae31918b9e Mon Sep 17 00:00:00 2001 From: bogdankol <68349689+bogdankol@users.noreply.github.com> Date: Mon, 19 Feb 2024 15:53:51 +0200 Subject: Styles refactoring (#1278) --- docs/_static/js/codecopier.js | 67 +++++++++++++++++ docs/_static/js/footer.js | 92 ++++++++++++++++++++++++ docs/_static/js/sidebar.js | 162 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 321 insertions(+) create mode 100644 docs/_static/js/codecopier.js create mode 100644 docs/_static/js/footer.js create mode 100644 docs/_static/js/sidebar.js (limited to 'docs/_static/js') 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 = ` + + + +` + +const innersOfCopyDiv = ` +

Copy

+ + + + +` + +function formDiv(id) { + return ` +
+ ${innersOfCopyDiv} +
+` +} + +$(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('Copied!') + + 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 = `
+ +
` 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 = ` +
+ ` + + 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 ` +
+ ${hamburgerIcon} +
+ ` +} + +function formCloseLeftSidebarButton() { + return ` +
+
+ Close +
+
+ ` +} + +function removeOverlayAndButtons(screenWidth) { + removeOverlayAndCloseSidebar() + removeButtons() +} -- cgit v1.2.3