BMI Helper UserScript

bmi-helper.user.js

// ==UserScript==
// @name         Beacon Environment Hilighter
// @namespace    https://beaconama.net/
// @version      0.0.3
// @description  Make it more obvious which environment you're looking at
// @match        *://beaconama.net/*
// @match        *://*.beaconama.net/*
// @copyright    2014+, You
// ==/UserScript==

/**
 * Thanks to https://gist.github.com/erikvold/437513
 * TODO:
 * - add css rules/file
 *  - can be hosted remotely?
 * - add update detection
 * - add bypass button
 */
;(function(win, doc, undefined) {
  'use strict';

  var $ = {};
  var bClass = 'bmi-';
  var hostname = window.location.hostname;
  var env = 'other';
  // var bgImage = 'http://dummyimage.com/100x52/1372a7/199cd1?text=';
  var bgImage = 'http://dummyimage.com/130x20/1372a7/199cd1?text=';
  var styles = {
    'prod': {
      '': {
        'background-image': 'url("'+bgImage+'Production+Server")'
      },
    '#background': {
      'background-image': 'linear-gradient(rgba(200,0,0,0.5), transparent)'
      },
        '#page-body': {
            'background': '#fff'
        },
        '#breadcrumbs': {
            'background': 'rgba(200,0,0,0.75)',
            'color': 'white'
        },
        '#breadcrumbs .model-link': {
            'color': 'white !important'
        }
    },
    'demo': '',
    'stage': {
      '': {
        'background-image': 'url("'+bgImage+'Stage+Server")'
      },
      '#background': {
        'background-image': 'linear-gradient(rgba(0,128,0,0.3), transparent)'
      },
        '#page-body': {
            'background': '#fff'
        },
        '#breadcrumbs': {
            'background': 'rgba(0,128,0,0.5)',
            'color': 'white'
        },
        '#breadcrumbs .model-link': {
            'color': 'white !important'
        }
    },
    'other': ''
  };
  styles.local = styles.stage;

  function log(out) { console.debug('Beacon Helper: ', out); }
  function addJQuery(callback) {
    var script = document.createElement("script");
    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js");
    script.addEventListener('load', function() {
    // var script = document.createElement("script");
    // script.textContent = "(" + callback.toString() + ")();";
    // document.body.appendChild(script);
      $ = jQuery.noConflict();
      callback();
    }, false);
    document.body.appendChild(script);
  }
  function buildCss(env) {
    var css = '#bmi-toggle { position: fixed; z-index: 1000; top: 1rem; right: 1rem; font-size: 1.3rem; padding: 0.3rem; opacity: 0.3; transition: all 0.25s ease-in; }';
    css += '#bmi-toggle:hover { opacity: 1 }';
    for (var sel in styles[env]) {
      var style = styles[env];
      if (style.hasOwnProperty(sel)) {
        css += 'body.'+bClass + ' ' + sel + ' {';
        for (var prop in style[sel]) {
          if (style[sel].hasOwnProperty(prop)) {
            css += prop+': ';
            css += style[sel][prop] + ';';
          }
        }
        css += '}';
      }
    }
    log(css);
    return css;
  }
  function toggleButton() {}

  // the guts of this userscript
  function main() {
    log('Using jQuery v'+$().jquery);

    var $body = $('body');
    var $css = $('<style id="bmi-helper"></style>');
    var css = '';
    switch (true) {
      case /^(stage)/i.test(hostname):
        env = 'stage';
        break;
      case /^(demo)/i.test(hostname):
        env = 'demo';
        break;
      case /^(www|beacon)/i.test(hostname):
        env = 'prod';
        break;
      case /^(eyeonwater)/i.test(hostname):
        env = 'eow';
        break;
      case window.location.port:
        env = 'local';
        break;
      default:
        env = 'other';
    }
    bClass += env;
    $css.text(buildCss(env));
    $body.prepend($css);
    $body.addClass(bClass);
    // Add toggle Button
    $body.append($('<button id="bmi-toggle">Toggle BMI Helper</botton>'));
    // Events
    $('#bmi-toggle').on('click', function(e) {
      e.preventDefault();
      $body.toggleClass(bClass);
    });
    console.debug('Beacon Environment Hilighter loaded.');
  }

  // load jQuery and execute the main function
  addJQuery(main);
})(this, this.document);