[CB] Add Colour box

[James [a_leon]]

Description: This adds a box to the right of your UBBC tags, replacing the drop-down colour selector in favor of a box with 6x6 previews of all the colours you choose to have.

Preview: Here.

Code:

Global Footers:
<script type = "text/javascript">
<!--

//Colour picker
//Create by James [a_leon]

var boxWidth = 88;
var boxBorderColor = "#000000";

var HexArr = [
   "FF4545","F0387A","FB6C3A","FEBC5E",
   "BEFD51","54EC40","47FEB7","4BBBFA",
   "6282FA","C763F5","F958EF","F85858",
   "EF6395","FB835A","FBC374","CDFA7F",
   "8FF082","75FDC8","78C9F7","7C96FA",
   "D485F8","FA8BF3","F57474","EF8AAE",
   "FB9A78","FDCD89","D8FB9B","ACEEA3",
   "A3F5D5","92D2F6","93A9FA","DAA3F3",
   "F6A1F1","FC9B9B","EFADC5","FCAB8E",
   "FFDAA5","E1F9B7","BCF0B6","C0FCE4",
   "A1D2EE","ACBBF2","D3AEE5","EDB9EA"
];

if (document.all && !navigator.userAgent.match(/Opera/i)) {
   boxWidth += 4;
}

function createElem(elem, isNew, AttObj) {
   if (isNew) {
      elem = document.createElement(elem);
   }
   if (AttObj) {
      for(key in AttObj) {
         if (key == "style") {
            for(a in AttObj[key]) {
               elem.style = AttObj[key];
            }
         } else {
            for(a in AttObj[key]) {
               elem.setAttribute(a, AttObj[key]);
            }
         }
      }
   }
   if (isNew) {
      return elem;
   }
}

function addEvent(obj, type, fn) {
   if (obj.addEventListener) {
      obj.addEventListener(type, fn, false);
   }
   else if(obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function() {
         obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
   }
}

var colSel = document.getElementsByTagName("select");
for (var s = 0; s < colSel.length; s ++) {
   if (colSel.item(s).name == "color") {
      var BBCell = colSel.item(s).parentNode;

      var cDiv = createElem("div", 1, {
         style: {
            styleFloat: "right",
            cssFloat: "right",
            width: boxWidth + "px",
            padding: "1px",
            border: "1px solid " + boxBorderColor
         }
      });

      for (var h = 0; h < HexArr.length; h ++) {
         var boxDiv = createElem("div", 1, {
            style: {
               styleFloat: "right",
               cssFloat: "right",
               width: "6px",
               height: "6px",
               margin: "1px",
               backgroundColor: "#" + HexArr[h]
            },
            set: {
               id: HexArr[h]
            }
         });
         boxDiv.appendChild(document.createTextNode(" "));
         
         addEvent(boxDiv, "mouseover", function() {
            this.style.cursor = "pointer";
         });
         addEvent(boxDiv, "mouseout", function() {
            this.style.cursor = "auto";
         });
         addEvent(boxDiv, "click", function() {
            add("[color=", "[/color]", this.id);
         });
         
         cDiv.appendChild(boxDiv);
      }
      BBCell.removeChild(colSel.item(s));
      BBCell.insertBefore(cDiv, BBCell.firstChild);
   }
}

//-->
</script>[/size]

---

Created this for SSDv6, but they decided not to use it in v7. Works in IE, Fx, Opera, Chrome and Safari.