Styles refactoring (#1278)

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()
+}