palette.js

WAPmo手机网站管理平台是一款创建与管理维护WAP网站的的软件产品

Palette = new function()
{
    var SelRGB = "#000000";
    var TmpRGB = "";
    var SelGRAY = 120;
    var hexArray = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
    var core = this;
    var box = null;
    this.returnValue = "#000000";
    this.toHex = function(n)
    {
        var h, l;
        n = Math.round(n);
        l = n % 16;
        h = Math.floor((n / 16)) % 16;
        return (hexArray[h] + hexArray[l]);
    };
    this.toColor = function(r, g, b)
    {
        return("#" + this.toHex(r) + this.toHex(g) + this.toHex(b));
    };
    this.doColor = function(c, l)
    {
        var r, g, b;
        r = "0x" + c.substr(1, 2);
        g = "0x" + c.substr(3, 2);
        b = "0x" + c.substr(5, 2);
        if (l > 120)
        {
            l = l - 120;
            r = (r * (120 - l) + 255 * l) / 120;
            g = (g * (120 - l) + 255 * l) / 120;
            b = (b * (120 - l) + 255 * l) / 120;
        }
        else
        {
            r = (r * l) / 120;
            g = (g * l) / 120;
            b = (b * l) / 120;
        }
        return(this.toColor(r, g, b));
    };
    this.endColor = function()
    {
        if (TmpRGB != SelRGB)
        {
            TmpRGB = SelRGB;
            var objTable = document.getElementById("GrayTable");
            for (var i = 0; i <= 30; i++)
            {
                objTable.rows[i].bgColor = this.doColor(SelRGB, 240 - i * 8);
            }
        }
        var objSel = document.getElementById("SelColor");
        var objRGB = document.getElementById("RGB");
        var objGRAY = document.getElementById("GRAY");
        objSel.value = this.doColor(objRGB.innerText, parseInt(objGRAY.innerText));
        var objShow = document.getElementById("ShowColor");
        objShow.style.backgroundColor = objSel.value;
        this.returnValue = objSel.value;
    };
    this.show = function()
    {
        var objTable = document.createElement("TABLE");
        objTable.border = "0";
        objTable.cellPadding = "5";
        objTable.cellSpacing = "0";
        var objTR = objTable.insertRow(0);
        var objTD = objTR.insertCell(0);
        this.makeColorTable(objTD);
        objTD = objTR.insertCell(1);
        this.makeGrayTable(objTD);
        objTR = objTable.insertRow(1);
        objTD = objTR.insertCell(0);
        objTD.colSpan = "2";
        this.makeColorControl(objTD);
        box = new xWindow("palette", "width=300,height=250,overflowX=hidden,overflowY=hidden,minButton=false,maxButton=false", true);
        box.setCaption("WAPmo 调色板");
        box.draw(objTable, 10, 10);
        box.center();
    };
    this.makeColorTable = function(objParent)
    {
        var colorNumber = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
        var objTable = document.createElement("TABLE");
        objTable.id = "ColorTable";
        objTable.border = "0";
        objTable.cellPadding = "0";
        objTable.cellSpacing = "0";
        objTable.onclick = function(ev)
        {
            var ee = window.event || ev;
            var et = ee.srcElement;
            SelRGB = et.bgColor;
            core.endColor();
        };
        objTable.onmouseover = function(ev)
        {
            var ee = window.event || ev;
            var et = ee.srcElement;
            var objRGB = document.getElementById("RGB");
            objRGB.innerText = et.bgColor;
            core.endColor();
        };
        objTable.onmouseout = function()
        {
            var objRGB = document.getElementById("RGB");
            objRGB.innerText = SelRGB;
            core.endColor();
        };
        for (var i = 0; i < 16; i++)
        {
            var objTR = objTable.insertRow(i);
            for (var j = 0; j < 30; j++)
            {
                var n1 = j % 5;
                var n2 = Math.floor(j / 5) * 3;
                var n3 = n2 + 3;
                this.makeColorTD(objTR, (colorNumber[n3] * n1 + colorNumber[n2] * (5 - n1)), (colorNumber[n3 + 1] * n1 + colorNumber[n2 + 1] * (5 - n1)), (colorNumber[n3 + 2] * n1 + colorNumber[n2 + 2] * (5 - n1)), i, j);
            }
        }
        objParent.appendChild(objTable);
    };
    this.makeColorTD = function(objParent, r, g, b, n, x)
    {
        r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
        g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
        b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
        var objTD = objParent.insertCell(x);
        objTD.bgColor = this.toColor(r, g, b);
        objTD.width = "8";
        objTD.height = "8";
    };
    this.makeGrayTable = function(objParent)
    {
        var objTable = document.createElement("TABLE");
        objTable.id = "GrayTable";
        objTable.border = "0";
        objTable.cellPadding = "0";
        objTable.cellSpacing = "0";
        objTable.onclick = function(ev)
        {
            var ee = window.event || ev;
            var et = ee.srcElement;
            SelGRAY = et.title;
            core.endColor();
        };
        objTable.onmouseover = function(ev)
        {
            var ee = window.event || ev;
            var et = ee.srcElement;
            var objGRAY = document.getElementById("GRAY");
            objGRAY.innerText = et.title;
            core.endColor();
        };
        objTable.onmouseout = function(ev)
        {
            var ee = window.event || ev;
            var et = ee.srcElement;
            var objGRAY = document.getElementById("GRAY");
            objGRAY.innerText = SelGRAY;
            core.endColor();
        };
        var j = 0;
        for (var i = 255; i >= 0; i -= 8.5)
        {
            var objTR = objTable.insertRow(j++);
            objTR.bgColor = this.toColor(i, i, i);
            var objTD = objTR.insertCell(0);
            objTD.width = "20";
            objTD.height = "4";
            objTD.title = Math.floor(i * 16 / 17);
        }
        objParent.appendChild(objTable);
    };
    this.makeColorControl = function(objParent)
    {
        var objTable = document.createElement("TABLE");
        objTable.border = "0";
        objTable.cellPadding = "5";
        objTable.cellSpacing = "0";
        var objTR = objTable.insertRow(0);
        var objTD = objTR.insertCell(0);
        objTD.align = "center";
        objTD.width = "70";
        var objDiv = document.createElement("DIV");
        objDiv.id = "ShowColor";
        objDiv.style.width = "50px";
        objDiv.style.height = "40px";
        objDiv.style.border = "1px solid #000000";
        objDiv.style.backgroundColor = "#000000";
        objTD.appendChild(objDiv);
        objTD = objTR.insertCell(1);
        objTD.style.fontSize = "12px";
        objTD.style.fontFamily = "Arial";
        objTD.innerHTML = "基色: <span id=\"RGB\">#000000</span><br/>" +
            "亮度: <span id=\"GRAY\">120</span><br/>" +
            "代码: <input type=\"text\" size=\"7\" id=\"SelColor\" class=\"txt\" value=\"#000000\" /><br/>";
        objTD = objTR.insertCell(2);
        objTD.align = "center";
        var $accept = this.accept = document.createElement("INPUT");
        $accept.type = "button";
        $accept.className = "btn";
        $accept.value = "确定";
        $accept.style.margin = "5px";
        $accept.onclick = function()
        {
            box.free();
        };
        var $cancel = document.createElement("INPUT");
        $cancel.type = "button";
        $cancel.className = "btn";
        $cancel.value = "取消";
        $cancel.style.margin = "5px";
        $cancel.onclick = function()
        {
            box.free();
        };
        objTD.appendChild($accept);
        objTD.appendChild(document.createElement("BR"));
        objTD.appendChild($cancel);
        objParent.appendChild(objTable);
    };
    this.close = function()
    {
        box.free();
    };
};