diff --git a/_static/css/pydata-overrides.css b/_static/css/pydata-overrides.css index ee4a6a651..d9b24d3cd 100644 --- a/_static/css/pydata-overrides.css +++ b/_static/css/pydata-overrides.css @@ -121,84 +121,3 @@ sphinx search extension interface. .search-button__wrapper.show .search-button__search-container { width: 15%; } - -/* Handle actual styling of the RtD search extension's screen */ -.search__outer { - background-color: var(--pst-color-on-background); - border: var(--pst-color-border); - border-radius: 0.25em; -} - -.search__outer__input { - background-color: var(--pst-color-on-background); - color: var(--pst-color-text-base); - font-size: var(--pst-font-size-icon); -} - -.search__result__title { - color: var(--pst-color-primary); - border-bottom-color: var(--pst-color-primary) -} - -.search__result__content, -.search__result__subheading, -.search__error__box { - color: var(--pst-color-text-base); -} - -.search__result__subheading span { - border-bottom-color: var(--pst-color-text-base); -} - -/* Dark theme config */ -html[data-theme="dark"] { - - .search__outer .search__result__content span, - .search__outer .search__result__title span { - /* Dark mode background color */ - /* background-color: var(--pst-color-muted-highlight); */ - color: var(--pst-color-primary); - border-bottom-color: var(--pst-color-primary); - } - - /* Set color for the line between search text and results */ - .search__outer .bar:after, - .search__outer .bar:before { - background: var(--pst-color-primary); - } - - .rtd__search__credits { - border: 1px solid var(--pst-color-border); - border-width: 1px 0 0 0; - } -} - -.rtd__search__credits { - background-color: var(--pst-color-background); - color: var(--pst-color-text-muted); - /* So text is centered vertically */ - height: 37px; -} - -.rtd__search__credits a { - color: var(--pst-color-link); -} - -.search__outer .search__result__content span, -.search__outer .search__result__title span { - border-bottom-color: var(--pst-color-text-base); -} - -/* Make sure "X" remains visible */ -.search__cross__img { - fill: var(--pst-color-text-base); -} - -/* Prevent hover from actually changing the color by setting it to what it - already is */ -.outer_div_page_results:hover, -.search__result__box .active { - background-color: var(--pst-color-on-background); -} - -/* End of styling of the RtD search extension's screen */ diff --git a/_static/js/pydata-search-close.js b/_static/js/pydata-search-close.js index b7147eaff..6aa16fbde 100644 --- a/_static/js/pydata-search-close.js +++ b/_static/js/pydata-search-close.js @@ -1,5 +1,4 @@ -// Script to allow use of readthedocs-sphinx-search extension with the pydata -// theme +// Script to allow use of readthedocs-sphinx-search extension with the pydata theme // // Based in part on: // https://github.com/pydata/pydata-sphinx-theme/blob/v0.13.3/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js#L167-L272 @@ -28,9 +27,8 @@ var findSearchInput = () => { } }; -/** Function to hide the search field */ -var hideSearchField = () => { - +// Hide Pydata theme's search +var hidePydataSearch = () => { let input = findSearchInput(); let searchPopupWrapper = document.querySelector(".search-button__wrapper"); let hiddenInput = searchPopupWrapper.querySelector("input"); @@ -44,38 +42,65 @@ var hideSearchField = () => { } }; -/** Add an event listener for hideSearchField() for Escape*/ +// Hide the ReadTheDocs search (addon version) +function hideRtdSearch() { + // Grab the search element from the DOM + const searchElement = document.querySelector('readthedocs-search'); + searchElement.closeModal(); +} + +// Hide any open search screens +function hideSearch() { + hidePydataSearch(); + hideRtdSearch(); +} + +// Show the ReadTheDocs search (addon version) +function showRtDSearch() { + const searchElement = document.querySelector('readthedocs-search'); + searchElement.showModal(); + + // If we're displaying ReadTheDocs search, make sure to hide the Pydata theme's search + hidePydataSearch(); +} + +// Add event listeners for key strokes var addEventListenerForSearchKeyboard = () => { window.addEventListener( "keydown", (event) => { // Allow Escape key to hide the search field if (event.code == "Escape") { - hideSearchField(); + hidePydataSearch(); + } + + // Open the ReadTheDocs search modal when Ctrl+K is pressed + if (event.ctrlKey && event.key === 'k') { + event.preventDefault(); // Prevent default behavior of Ctrl+K + showRtDSearch() } }, true ); }; -/** Activate callbacks for search button popup */ +// Activate callbacks for search button popup var setupSearchButtons = () => { addEventListenerForSearchKeyboard(); + + // Add event listeners to elements with class "search-button__button" + const searchButtons = document.querySelectorAll('.search-button__button'); + searchButtons.forEach(button => { + button.addEventListener('click', showRtDSearch); + }); }; // Custom code to manage closing the RtD search dialog properly $(document).ready(function(){ - $(".search__cross").click(function(){ - hideSearchField(); - }); - $(".search__outer__wrapper.search__backdrop").click(function(){ - hideSearchField(); - }); $(".search-button__overlay").click(function(){ - // Shouldn't be necessary since it's currently hidden by CSS, but just in - // case + // Shouldn't be necessary since it's currently hidden by CSS, but just in case console.log("Close by search-button__overlay"); - hideSearchField(); + hidePydataSearch(); }); }); diff --git a/conf.py b/conf.py index 26ffc5759..8f6203122 100644 --- a/conf.py +++ b/conf.py @@ -28,7 +28,6 @@ 'sphinx.ext.autodoc', 'sphinx_copybutton', 'sphinx_design', - 'sphinx_search.extension', 'sphinx.ext.intersphinx', ] diff --git a/requirements.txt b/requirements.txt index 65653ad5c..25eb44b06 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,7 +1,6 @@ Babel==2.12.1 myst-parser==2.0.0 pydata-sphinx-theme==0.14.4 -readthedocs-sphinx-search==0.3.2 pytz==2022.7 sphinx==7.2.6 sphinx-copybutton==0.5.2