Skip to main content

add icon to emergency notification banner based on keyword in the title/h2

In action:

Air Quality Advisory: The Air Quality Index (AQI) is primarily "good."

Instructions

  1. Swap out the icon urls below and keywords (in bold).  Images need to be uploaded to streamline, add them to a page and then copy the image address URL into the script below. 
  2. add to advanced preferences before </body>
     

<script>
(function () {
  var ICONS = {
    info: {
      src: 'https://streamline.imgix.net/0c75f948-7402-4be9-9e58-0a3bbf616bc0/08501ba8-665f-43d4-84b2-518e398c4109/info-svgrepo-com.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=a5d1f5027451fd8a6ea569dcefc2b24e',
      alt: 'Information advisory'
    },
    announcement: {
      src: 'https://streamline.imgix.net/0c75f948-7402-4be9-9e58-0a3bbf616bc0/5d09adb0-2adb-4590-b62f-51d1ca4ba0d8/megaphone-svgrepo-com.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=8d9f0331631aa236f296de374eda6dd1',
      alt: 'Announcement'
    },
    flag: {
      src: 'https://streamline.imgix.net/0c75f948-7402-4be9-9e58-0a3bbf616bc0/f89a6929-da52-4dc4-8b33-41b77382a244/flag-svgrepo-com.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=f9bd6c0a26c2d8229495c514ae73ea7e',
      alt: 'Air quality flag'
    }
  };

  function applyToBannerH2() {
    var h2 = document.querySelector('.traction-emergency-notification .inner h2');
    if (!h2) return false;

    // Prevent duplicates if Angular re-renders / script runs multiple times
    if (h2.querySelector('.sl-banner-icon')) return true;

    var text = (h2.textContent || '').trim();
    var lower = text.toLowerCase();

    // Must start with: "info ", "announcement ", or "flag "
    var key = Object.keys(ICONS).find(function (k) {
      return lower.indexOf(k + ' ') === 0;
    });

    if (!key) return true; // Banner exists, but no keyword—do nothing

    // Remove the keyword from the visible heading text
    var cleaned = text.slice(key.length).trim();
    h2.textContent = cleaned;

    // Build icon
    var wrap = document.createElement('span');
    wrap.className = 'sl-banner-icon';

    var img = document.createElement('img');
    img.src = ICONS[key].src;
    img.alt = ICONS[key].alt;

    wrap.appendChild(img);
    h2.insertBefore(wrap, h2.firstChild);

    return true;
  }

  // 1) Try immediately
  applyToBannerH2();

  // 2) Poll briefly (covers late initial render)
  var tries = 0;
  var maxTries = 60; // ~15s at 250ms
  var poll = setInterval(function () {
    tries++;
    var done = applyToBannerH2();
    if (done || tries >= maxTries) clearInterval(poll);
  }, 250);

  // 3) Observe DOM changes (covers banner re-renders)
  var root = document.querySelector('#app') || document.body;
  var mo = new MutationObserver(function () {
    applyToBannerH2();
  });

  mo.observe(root, { childList: true, subtree: true });
})();

</script>