💾 Archived View for midnight.pub › replies › 2197 captured on 2024-03-21 at 16:04:34. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2021-12-03)
-=-=-=-=-=-=-
That idea with misusing user styles never occured to me!
Indeed, this looks damn good! I love it.
Although there is an issue with indices: the provided script's object's keys start at 1, not 0, so sometimes we get undefined instead of a logo.
I let myself do the fix and maybe clean up the code?
</style> <script type="text/javascript" src="https://she12.midnight.pub/logos"></script> <script type="text/javascript"> function randomizeLogo() { const logo_container = document.getElementsByTagName('pre')[0]; let first_sign_set = false; let first_sign = 0; let last_sign = 0; for (logo_key in logos) { // Logo container provided by the script loaded above // actually starts from 1, not 0, so sometimes the logo // is undefined. // We do this so we get the first sign right no matter // of the starting index. // Just in case ~she12 decides to fix the issue or // if any new logos are added. last_sign = logo_key; if (!first_sign_set) { // Set the first sign exactly once. first_sign = logo_key; first_sign_set = true; } } function getRandomIntInclusive(min, max) { const min = Math.ceil(min); const max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1) + min); } function setLogo(logo_key) { logo_container.innerHTML = logos[logo_key]; } let current_sign_key = getRandomIntInclusive(first_sign, last_sign); setLogo(current_sign_key); logo_container.onclick = function() { current_sign_key++; if (current_sign_key > last_sign) { current_sign_key -= (last_sign - first_sign); } setLogo(current_sign_key); }; } if (window.location == "https://midnight.pub/") { window.onload = randomizeLogo; } </script> <style type="text/css">
That's some creative use of user styles. Now endless possibilities of scripting opened to me! I guess I have quite a space to be toying around now. Never thought about it since the one cannot install GreaseMonkey on mobile Safari.
Edit: Whoopsie, don't mind me. I missed the part about default logo and pasted the script as it is. Didn't test it much the way you intended it to be used. I guess it was throwing undefined error because of me not paying enough attention. Even though, enjoy my script! Although it won't let you set the default preferred logo.
Edit 2:
Now it does support preferred logos. I also got rid of comments since they can be seen above.
</style> <script type="text/javascript" src="https://she12.midnight.pub/logos"></script> <script type="text/javascript"> function randomizeLogo() { const logoContainer = document.getElementsByTagName('pre')[0]; const preferredLogo = null; let firstSignSet = false; let firstSign = 0; let lastSign = 0; for (const logoKey in logos) { lastSign = logoKey; if (!firstSignSet) { firstSign = logoKey; firstSignSet = true; } } function getRandomSignKey() { const min = Math.ceil(firstSign); const max = Math.floor(lastSign); return Math.floor(Math.random() * (max - min + 1) + min); } const setLogo = (logoKey) => logoContainer.innerHTML = logos[logoKey]; currentSignKey = typeof preferredLogo == 'number' ? preferredLogo : getRandomSignKey(); setLogo(currentSignKey); logoContainer.onclick = function() { currentSignKey++; if (currentSignKey > lastSign) { currentSignKey -= (lastSign - firstSign + 1); } setLogo(currentSignKey); }; } if (window.location == "https://midnight.pub/") { window.onload = randomizeLogo; } </script> <style type="text/css">
Just change the value of preferredLogo somewhere at the top from null to the index you prefer!
My favorite one is 11. It got some underground vibe.
Edit 3:
logoContainer.classList.add('logo'); .logo { overflow: hidden; }
Add these lines at appropriate places so too wide logos won't make you suffer the horizontal scroll bar on narrow clients! Had to do it on mobile Safari.
Or just
@media only screen and (max-width: 900px) { pre { overflow-x: scroll; } }
It made browsing on phone much better while not changing desktop experience.
Yeah, the math was intended for an array not a collection starting at 1. Did not think that through and had been on mobile too the whole time, so I just took the "undefined"s as another easter egg;)
I think it is fixed now. Unfortunately your version does not work in my outdated mobile browser. But thanks for the input, in firefox it works like a charm! Also: thanks for the fish!:D
My favorite one is 11.
I usually hang out by the beach hut (#9) now...