Last active
July 24, 2021 18:23
-
-
Save CST1229/1063d77b16593e036764b75e56788f8e to your computer and use it in GitHub Desktop.
Scratch Expanding Search Bar Bookmarklet (v4)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This bookmarklet expands the search bar when it is focused, similar to the wiki. | |
| This is inspired by a suggestion I saw. | |
| Versions | |
| v1: Initial release | |
| v2: Updated to use functions in the scratch-www events to prevent copy-pasting code | |
| v2.1: Fixed a bug that prevented the search bar from unexpanding | |
| v3: Tweaked to allow dynamic enabling and disabling (not in the bookmarklet though) | |
| v4: Updated to catch up with the SA PR (obiviously with the addon APIs removed) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:var exsearch_isWWW,exsearch_searchBar;(exsearch_isWWW=!document.getElementsByClassName("site-nav")[0])?exsearch_searchBar=document.getElementById("frc-q-1088"):(exsearch_searchBar=document.getElementById("search-input"),exsearch_siteNav=document.getElementsByClassName("site-nav")[0]);if(exsearch_isWWW){var exsearch_links;function exsearch_getLinks(){return document.querySelectorAll(".link:not(.search ~ *)")}function exsearch_clickIn(){let e;for(exsearch_links=exsearch_getLinks(),e=0;e<exsearch_links.length;e++)exsearch_links[e]&&(exsearch_links[e].style.display="none")}function exsearch_clickOut(){let e;for(exsearch_links=exsearch_getLinks(),e=0;e<exsearch_links.length;e++)exsearch_links[e]&&exsearch_links[e].style.removeProperty("display")}exsearch_searchBar.addEventListener("focusin",exsearch_clickIn),exsearch_searchBar.addEventListener("focusout",exsearch_clickOut)}else{var exsearch_siteNav;function exsearch_clickIn(){exsearch_siteNav.style.display="none"}function exsearch_clickOut(){exsearch_siteNav.style.removeProperty("display")}exsearch_siteNav=document.getElementsByClassName("site-nav")[0],exsearch_searchBar.addEventListener("focusin",exsearch_clickIn),exsearch_searchBar.addEventListener("focusout",exsearch_clickOut)}void 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ///Scratch Expanding Search Bar Bookmarklet v4 | |
| //Written by CST1229 | |
| //Supports both 2.0 (scratchr2) AND 3.0 (scratch-www) styled pages | |
| //Also supports discuss button in SA | |
| ///scratch-www checking | |
| var exsearch_isWWW; //True if scratch-www, false if not | |
| if (document.getElementsByClassName("site-nav")[0]) { | |
| exsearch_isWWW = false; | |
| } else { | |
| exsearch_isWWW = true; | |
| } | |
| ///"""Constants""" | |
| var exsearch_searchBar; //The search bar element | |
| if (exsearch_isWWW) { | |
| //scratch-www constants | |
| exsearch_searchBar = document.getElementById("frc-q-1088"); //The scratch-www search bar | |
| } else { | |
| //scratchr2 constants | |
| var exsearch_siteNav; //The site navigation buttons | |
| exsearch_searchBar = document.getElementById("search-input"); //The search bar | |
| exsearch_siteNav = document.getElementsByClassName("site-nav")[0]; //The header buttons | |
| } | |
| ///Events | |
| if (exsearch_isWWW) { //We're on scratch-www | |
| //Elements | |
| var exsearch_links; //Header links | |
| //Functions | |
| function exsearch_getLinks() { //Gets all header links | |
| return document.querySelectorAll(".link:not(.search ~ *)") //All .links before .search | |
| } | |
| function exsearch_clickIn() { //Clicking into the search bar | |
| let i; | |
| exsearch_links = exsearch_getLinks(); //Get the links | |
| for (i=0; i<exsearch_links.length; i++) { //Iterate the links | |
| if (exsearch_links[i]) {exsearch_links[i].style.display = "none";} //Hide them | |
| } | |
| } | |
| function exsearch_clickOut() { //Clicking out of the search bar | |
| let i; | |
| exsearch_links = exsearch_getLinks(); //Get the links | |
| for (i=0; i<exsearch_links.length; i++) { //Iterate the links | |
| if (exsearch_links[i]) {exsearch_links[i].style.removeProperty("display")} //Show them | |
| } | |
| } | |
| //Events | |
| exsearch_searchBar.addEventListener("focusin", exsearch_clickIn); | |
| exsearch_searchBar.addEventListener("focusout", exsearch_clickOut); | |
| } else { //We're on scratchr2 | |
| //Elements | |
| var exsearch_siteNav; //The site navigation buttons | |
| exsearch_siteNav = document.getElementsByClassName("site-nav")[0]; //The header buttons | |
| //Functions | |
| function exsearch_clickIn() { //Clicking into the search bar | |
| exsearch_siteNav.style.display = "none"; //Hide the site navigation | |
| } | |
| function exsearch_clickOut() { //Clicking out of the search bar | |
| exsearch_siteNav.style.removeProperty("display"); //Show the site nav | |
| } | |
| //Events | |
| exsearch_searchBar.addEventListener("focusin", exsearch_clickIn); | |
| exsearch_searchBar.addEventListener("focusout", exsearch_clickOut); | |
| } |
This is super cool! Is there any way to activate it each time you visit the page?
This is super cool! Is there any way to activate it each time you visit the page?
No, but this bookmarklet is also an addon in Scratch Addons which can do that.
This is super cool! Is there any way to activate it each time you visit the page?
No, but this bookmarklet is also an addon in Scratch Addons which can do that.
Great! Thanks for the help! 😄
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
cool