change-banner-jewel.js

// ==UserScript==
// @namespace   user-apigee
// @name        Change banner jewel color Edge UI OPDK
// @description Change banner jewel color depending on environment selector
// @match       http://localhost:9000/*
// @match       http://127.0.0.1:9000/*
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       none
// @version     0.1.1
// @run-at      document-end
// @license     Apache 2.0
// ==/UserScript==

;(function (){
  var desiredBannerColors = {
        test : '#4dd292',
        prod : '#9e1200'
      };
  var wantDebug = false;
  var delayAfterPageLoad = 1800;
  var refreshCheckInterval = 1200;
  var tweakState = { };

  function checkForRefresh() {
    mylog('check page: ' + window.location.href);
    if (needRefresh()) {
      mylog('checkForRefresh fixing up');
      setTimeout(myFixup, 1);
    }
    else {
      mylog('page unchanged');
      setTimeout(checkForRefresh, refreshCheckInterval);
    }
  }

  // This kicks off the page fixup logic
  setTimeout(checkForRefresh, delayAfterPageLoad);

  function mylog() {
    if (wantDebug) {
      Function.prototype.apply.apply(console.log, [console, arguments]);
    }
  }


  function needRefresh() {
    var result = false;
    if (window.location.href !== tweakState.pageHref) {
      result = true;
    }
    else {
      var $selector = jQuery('#environmentSelector');
      if ($selector && $selector[0]) {
        mylog('needRefresh: found environment selector');
        var environmentName = $selector.find('>a').text();
        result = (environmentName && tweakState.selectedEnv !== environmentName);
      }
    }
    mylog('needRefresh: result: ' + result);
    return result;
  }


  var rulesets = [
        {
          height: '40px',
          width: '120px',
          border: '1px solid #e5feff',
          display: 'block',
          'float' : 'left',
          margin: '0 10px 0 0',
          position: 'relative'
        },
        {
          display: 'block',
          margin: '8px 12px',
          'font-size' : '36px',
        }
      ];

  function getCssRulesString(rules) {
    var result ='';
    Object.keys(rules).forEach(function(key) {
      result += key + ':' + rules[key] + '; ';
    });
    return result;
  }


  function myFixup() {
    var $selector = jQuery('#environmentSelector');
    if ($selector && $selector[0]) {
      mylog('found environment selector');
      var environmentName = $selector.find('>a').text();
      if (environmentName) {
        environmentName = environmentName.trim();
        mylog('found environment: ' + environmentName);
        if (desiredBannerColors[environmentName]) {
          if (tweakState.selectedEnv !== environmentName) {
            // drop a sibling to #mainNavBarList
            var $mainNavBarList = $( '#mainNavBarList' );
            var $candidate = $( '#mainNavBarList' ).next();
            if ( ! $candidate.is('div')) {
              // insert the div and css rules (once)
              $mainNavBarList.after( "<div class='environment-color-bar'></div>" );
              var newRule = '.environment-color-bar { ' + getCssRulesString(rulesets[0]) + '}';
              document.styleSheets[0].insertRule(newRule, 0);
              newRule = '.environment-color-bar > span { ' + getCssRulesString(rulesets[1]) + '}';
              document.styleSheets[0].insertRule(newRule, 0);
              $candidate = $mainNavBarList.next();
            }
            $candidate.css('background-color', desiredBannerColors[environmentName]);
            $candidate.html('<span>' + environmentName + '</span>');
            tweakState.selectedEnv = environmentName;
          }
          else {
            mylog('no change necessary.');
          }
        }
        else {
          mylog('no environment match: "' + environmentName + '"');
        }
      }
      else {
        mylog('no environment name found');
      }
      tweakState.pageHref = window.location.href;
    }
    else {
      mylog('no environment selector found');
    }
    mylog('setTimeout checkForRefresh');
    setTimeout(checkForRefresh, refreshCheckInterval);
  }

}());