From afe2f7407fd1307bb1cdfe7a6917ea640fdfc339 Mon Sep 17 00:00:00 2001 From: yyzxw <1020938856@qq.com> Date: Thu, 23 May 2024 14:15:06 +0800 Subject: [PATCH] fix: docs site version selector broken Signed-off-by: xiaowu.zhu --- docs/assets/versions.js | 80 ++++++++++++++++++++++++++--------------- 1 file changed, 52 insertions(+), 28 deletions(-) diff --git a/docs/assets/versions.js b/docs/assets/versions.js index 7a2392a392dc8..d4b9662ca2e35 100644 --- a/docs/assets/versions.js +++ b/docs/assets/versions.js @@ -1,48 +1,72 @@ -setTimeout(function() { - const callbackName = 'callback_' + new Date().getTime(); - window[callbackName] = function (response) { - const div = document.createElement('div'); - div.innerHTML = response.html; - document.querySelector(".md-header__inner > .md-header__title").appendChild(div); - const container = div.querySelector('.rst-versions'); - var caret = document.createElement('div'); - caret.innerHTML = "" - caret.classList.add('dropdown-caret') - div.querySelector('.rst-current-version').appendChild(caret); +const targetNode = document.querySelector('.md-header__inner'); +const observerOptions = { + childList: true, + subtree: true +}; + +const observerCallback = function(mutationsList, observer) { + for (let mutation of mutationsList) { + if (mutation.type === 'childList') { + const titleElement = document.querySelector('.md-header__inner > .md-header__title'); + if (titleElement) { + initializeVersionDropdown(); + observer.disconnect(); + } + } } +}; + +const observer = new MutationObserver(observerCallback); +observer.observe(targetNode, observerOptions); + +function initializeVersionDropdown() { + const callbackName = 'callback_' + new Date().getTime(); + window[callbackName] = function(response) { + const div = document.createElement('div'); + div.innerHTML = response.html; + document.querySelector(".md-header__inner > .md-header__title").appendChild(div); + const container = div.querySelector('.rst-versions'); + var caret = document.createElement('div'); + caret.innerHTML = ""; + caret.classList.add('dropdown-caret'); + div.querySelector('.rst-current-version').appendChild(caret); + + div.querySelector('.rst-current-version').addEventListener('click', function() { + container.classList.toggle('shift-up'); + }); + }; var CSSLink = document.createElement('link'); - CSSLink.rel='stylesheet'; + CSSLink.rel = 'stylesheet'; CSSLink.href = '/assets/versions.css'; document.getElementsByTagName('head')[0].appendChild(CSSLink); var script = document.createElement('script'); - script.src = 'https://argo-cd.readthedocs.io/_/api/v2/footer_html/?'+ + script.src = 'https://argo-cd.readthedocs.io/_/api/v2/footer_html/?' + 'callback=' + callbackName + '&project=argo-cd&page=&theme=mkdocs&format=jsonp&docroot=docs&source_suffix=.md&version=' + (window['READTHEDOCS_DATA'] || { version: 'latest' }).version; document.getElementsByTagName('head')[0].appendChild(script); -}, 0); +} // VERSION WARNINGS window.addEventListener("DOMContentLoaded", function() { var rtdData = window['READTHEDOCS_DATA'] || { version: 'latest' }; var margin = 30; - var headerHeight = document.getElementsByClassName("md-header")[0].offsetHeight; + var headerHeight = document.getElementsByClassName("md-header")[0].offsetHeight; if (rtdData.version === "latest") { - document.querySelector("div[data-md-component=announce]").innerHTML = "
You are viewing the docs for an unreleased version of Argo CD, click here to go to the latest stable version.
" - var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin - document.querySelector("header.md-header").style.top = bannerHeight +"px"; + document.querySelector("div[data-md-component=announce]").innerHTML = "
You are viewing the docs for an unreleased version of Argo CD, click here to go to the latest stable version.
"; + var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin; + document.querySelector("header.md-header").style.top = bannerHeight + "px"; document.querySelector('style').textContent += - "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0; top:"+ (bannerHeight+headerHeight)+"px !important; }}" + "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0; top:" + (bannerHeight + headerHeight) + "px !important; }}"; document.querySelector('style').textContent += - "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0; top:"+ (bannerHeight+headerHeight)+"px !important; }}" - } - else if (rtdData.version !== "stable") { - document.querySelector("div[data-md-component=announce]").innerHTML = "
You are viewing the docs for a previous version of Argo CD, click here to go to the latest stable version.
" - var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin - document.querySelector("header.md-header").style.top = bannerHeight +"px"; + "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0; top:" + (bannerHeight + headerHeight) + "px !important; }}"; + } else if (rtdData.version !== "stable") { + document.querySelector("div[data-md-component=announce]").innerHTML = "
You are viewing the docs for a previous version of Argo CD, click here to go to the latest stable version.
"; + var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin; + document.querySelector("header.md-header").style.top = bannerHeight + "px"; document.querySelector('style').textContent += - "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0; top:"+ (bannerHeight+headerHeight)+"px !important; }}" + "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0; top:" + (bannerHeight + headerHeight) + "px !important; }}"; document.querySelector('style').textContent += - "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0; top:"+ (bannerHeight+headerHeight)+"px !important; }}" + "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0; top:" + (bannerHeight + headerHeight) + "px !important; }}"; } -}); +}); \ No newline at end of file