💾 Archived View for midnight.pub › replies › 2197 captured on 2022-03-01 at 16:58:12. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

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.

Write a reply

Replies

~she12 wrote (thread):

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...