Is there a way for themes to call a function when sodo search is activated?

Themes
1

I am trying to change the placeholder text in the search input with:

document.getElementById("sodo-search-root").querySelector("iframe").contentWindow.document.querySelector("input").placeholder = "New placeholder text"

… but as far as I can tell these elements don’t exist at the time of window.onload.

Is there a built-in way to call a function when search is opened that I am missing — or should I add my own event listeners for when the search button is clicked / ctrl+k is pressed?

Thanks!

2

The iframe is loaded after the seach button is pressed so the working code is:

document.querySelector(‘.gh-navigation-actions > button’).addEventListener(‘click’, function() {
setTimeout(()=>{
document.getElementById(“sodo-search-root”).querySelector(“iframe”).contentWindow.document.querySelector(“input”).placeholder = “New placeholder text”;
},1000);
});

2 Likes
3

Maurizio, thank you for your code!
I’ve found a way without setTimeout:

<script>
    document.onreadystatechange = () => {
        if (document.readyState === "complete") {
            document.querySelector('.gh-navigation-actions > button').addEventListener('click', function() {
                const iframe = document.getElementById('sodo-search-root').querySelector('iframe');
                iframe.onload = function() {
                    iframe.contentWindow.document.querySelector('input').placeholder = 'New placeholder text';
                };
            });
        }
    };
</script>
1 Like
4

Wonderful! Thank you @Maurizio_Bianchi and @joe-blocher :innocent: