foxycart-userscript.js

// ==UserScript==
// @name         FoxyCart
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://admin.foxycart.com*
// @grant        none
// ==/UserScript==
//
// This script changes the section header and border colors in the FoxyCart admin depending on the store name. This
// helps determine the currently active store and prevents errors when switching between lab/dev/prod environments.
// In order to enable this script, change the store names in the switch statement below.
//
// In addition, this also changes all code editors to Ace code editors and enlarges them to be a reasonable size.
//

(function() {
    'use strict';
	var script = document.createElement('script');
	script.src = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js';
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(script);

    function transformTag(tagIdOrElem, tagType){
        var elem = (tagIdOrElem instanceof HTMLElement) ? tagIdOrElem : document.getElementById(tagIdOrElem);
        if(!elem || !(elem instanceof HTMLElement))return;
        var children = elem.childNodes;
        var parent = elem.parentNode;
        var newNode = document.createElement(tagType||"span");
        for(var a=0;a<elem.attributes.length;a++){
            newNode.setAttribute(elem.attributes[a].nodeName, elem.attributes[a].value);
        }
        for(var i= 0,clen=children.length;i<clen;i++){
            newNode.appendChild(children[0]); //0...always point to the first non-moved element
        }
        newNode.style.cssText = elem.style.cssText;
        parent.replaceChild(newNode,elem);
    }

    var store = document.getElementById("StoreSelectorForm").children[0].children[0].options[document.getElementById("StoreSelectorForm").children[0].children[0].selectedIndex].text;
	var color = "";
	switch(store) {
		case "[STORE_NAME]":
			color = "red";
			break;
		case "[STORE_NAME]":
			color = "blue";
			break;
		case "[STORE_NAME]":
			color = "goldenrod";
			break;
	}

	var all = document.getElementsByTagName("fieldset");
	for (var i = 0; i < all.length; i++) {
			all[i].style.borderTopColor = color;
			all[i].style.borderLeftColor = color;
			if (all[i].children[0].tagName == "LEGEND") {
				all[i].children[0].style.background = color;
            }
	}

    function defer(method) {
        if (window.ace) {
            editor();
        } else {
            setTimeout(function() { defer(method) }, 50);
        }
    }

    function editor() {
        all = document.getElementsByTagName("textarea");
        var ids = [];
        for (i = 0; i < all.length; i++) {
            ids.push(all[i].id);
        }

        for (i = 0; i < ids.length; i++) {
            if (document.getElementById(ids[i]).className == "big") {
                transformTag(document.getElementById(ids[i]), 'div');
                var editor = ace.edit(document.getElementById(ids[i]));
                editor.session.setMode("ace/mode/twig");
                document.getElementById(ids[i]).style.width = "670px";
                document.getElementById(ids[i]).style.height = "800px";
            }
        }
    }
defer();

})();