colorpanel.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.01.29#
  ---
  use list:
  > node.lib.js
  > events.lib.js
  > css.lib.js
  > browser.lib.js
  ---
  拾色面板
  ---
  包含样式：
  <link rel="stylesheet" href="css/colorpanel.lib.css" type="text/css" />
*/

function ColorPanel () {
    this.container = null;

    // text field object
    this.textField = null;

    // color perview object
    this.colorPreview = null;
    this.colorPreviewCode = null;

    this.selectedColor = '#000000';

    // css
    this.css = {
        // 容器
        colorpanel:'colorpanel',
        // 预览区
        preview:'preview',
        color_preview:'color-preview',
        code_preview:'code-preview',
        code_save:'code-save',
        code_save_ff:'ff',
        // 颜色块
        color_block:'color-block'
    };
};

ColorPanel.prototype.customColor = [
    '#000000', '#333333', '#666666',
    '#999999', '#AAAAAA', '#CCCCCC', 
    '#FFFFFF', '#FFF000', '#000000',
    '#000FFF', '#FF0000', '#00FF00',
    '#0000FF', '#FFFF00', '#00FFFF',
    '#FF00FF', '#ABCDEF', '#123456'
];

ColorPanel.prototype.Init = function () {
};

ColorPanel.prototype.Create = function () {
    var c = this.container = oNode.CreateNode('div');
    CSS.AddClass(c, this.css.colorpanel);

    var topContainer = oNode.CreateNode('div');
    oNode.AddNode(topContainer, c);
    CSS.AddClass(topContainer, this.css.preview);

    // create color preview
    var colorPreview = this.colorPreview = oNode.CreateNode('div');
    oNode.AddNode(colorPreview, topContainer);
    CSS.AddClass(colorPreview, this.css.color_preview);
    colorPreview.style.background = this.selectedColor;

    var colorPreviewCode = this.colorPreviewCode = oNode.CreateNode('div');
    oNode.AddNode(colorPreviewCode, topContainer);
    CSS.AddClass(colorPreviewCode, this.css.code_preview);
    colorPreviewCode.innerHTML = this.selectedColor;

    // create text field container outer
    var textFieldCOut = oNode.CreateNode('div');
    oNode.AddNode(textFieldCOut, topContainer);
    CSS.AddClass(textFieldCOut, this.css.code_save);
    // create text file container inner
    var textFieldCIn = oNode.CreateNode('div');
    oNode.AddNode(textFieldCIn, textFieldCOut);
    // create text field
    var textField = this.textField = oNode.CreateNode('input');
    oNode.AddNode(textField, textFieldCIn);
    CSS.AddClass(textField, Browser.IsGecko && !Browser.IsSafari ? this.css.code_save_ff : '');
    textField.type = 'text';
    textField.maxLength = '7';
    textField.autoComplete = 'off';
    textField.value = this.selectedColor;

    ///
    // create color list
    var el = oNode.CreateNode('div');
    oNode.AddNode(el, c);
    el.style.width = '216px';
    el.style.clear = 'both';

    var custom = this.customColor;
    for (var i = 0; i < custom.length; i++) {
        oNode.AddNode(this.CreateColorBlock(custom[i]), el);
    }

    var L, M, N;
    var colors = ['00', '33', '66', '99', 'CC', 'FF'];
    var H = 18;
    var V = 12;
    var hV = Math.floor(V / 2);
    for (var i = 0; i < H * V; i++) {
        var h = i % H;
        var v = Math.floor(i / H);
        if (h < hV && v < hV) {
            L = colors[0];
        }
        else if (h < hV && v >= hV) {
            L = colors[3];
        }
        else if (h < V && v < hV) {
            L = colors[1];
        }
        else if (h < V && v >= hV) {
            L = colors[4];
        }
        else if (h < H && v < V) {
            L = colors[2];
        }
        else {
            L = colors[5];
        }
        M = colors[h % hV];
        N = colors[v % hV];

        oNode.AddNode(this.CreateColorBlock('#' + L + M + N), el);
    }

    var clear = oNode.CreateNode('div');
    oNode.AddNode(clear, c);
    clear.style.clear = 'both';

    return c;
};

ColorPanel.prototype.CreateColorBlock = function (_color /* :String */) {
    var self = this;

    var c = oNode.CreateNode('div');
    CSS.AddClass(c, this.css.color_block);
    Events.AttachEvent(c, 'mouseover', function (e, th) {
        th = th || this;
        th.title = _color;
        th.style.borderColor = '#666';

        self.colorPreview.style.background = _color;
        self.colorPreviewCode.innerHTML = _color;
    });
    Events.AttachEvent(c, 'mouseout', function (e, th) {
        th = th || this;
        //th.title = '';
        th.removeAttribute('title');
        th.style.borderColor = '#fff';
    });
    Events.AttachEvent(c, 'click', function (e, th) {
        th = th || this;

        self._Change(_color);
    });

    var color = oNode.CreateNode('a');
    oNode.AddNode(color, c);
    color.href = '#';
    color.style.backgroundColor = _color;
    oNode.AddNode('\x20', color);
    Events.AttachEvent(color, 'click', function (e, th) {
        th = th || this;
        Events.CancelEvent(e);
    });

    return c;
};

// 更新显示颜色
ColorPanel.prototype.Update = function (color /* :String */, change /* :Boolean */) {
    change && (this.selectedColor = color);
    this.colorPreview.style.background = color;
    this.colorPreviewCode.innerHTML = color;
};

// 内部颜色改变调用
ColorPanel.prototype._Change = function (color /* :String */) {
    this.selectedColor = color;
    this.textField.value = color;
    this.Change(color);
};

// 颜色改变时执行(为特定定义的特定的方法)
ColorPanel.prototype.Change = function (color /* :String */) {
    // 此方法由特定对象替换
    alert(color);
};