colorpicker.lib.js

asp的bbs程序

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

function ColorPicker (mode /* :String */, alone /* :Boolean */) {
    this.container = null;

    // color panel display mode
    this.mode = mode != ColorPicker.Complex ? ColorPicker.Simple : ColorPicker.Complex;

    // text field hidden
    this.textfield = null;
    this.name = 'color_' + Math.random();

    // stand alone or not
    this.alone = (alone = !!alone);

    // stand alone
    if (alone) {
        // calendar object
        this.colorPanel = this.mode == ColorPicker.Simple ? new ColorPanel2() : new ColorPanel();
    }
    // not stand alone
    else {
        if (! ColorPicker[this.mode].ColorPanel)
            ColorPicker[this.mode].ColorPanel = this.mode == ColorPicker.Simple ? new ColorPanel2() : new ColorPanel();
        this.colorPanel = ColorPicker[this.mode].ColorPanel;

        if (! ColorPicker[this.mode].ColorPicker)
            ColorPicker[this.mode].ColorPicker = this;
    }
    // sign to calendar create or not
    this.isCreate = false;
    // contain the ColorPanel object
    this.panel = null;
    // panel is display or not
    this.panelDisplay = false;

    // current selected color
    this.selectedColor = '#000000';

    // css
    this.css = {
        // to float
        panel:'colorpicker-panel',
        // 容器
        colorpicker:'colorpicker'
    };
};

// 简单模式|高级模式
ColorPicker.Simple = 'simple';
ColorPicker.Complex = 'complex';

/*
// stand alone relative
{
    ColorPicker : null,
    ColorPanel : null,
    Panel : null,
    IsCreate : false,
    PanelDisplay : false
}
*/
ColorPicker[ColorPicker.Simple] = {};
ColorPicker[ColorPicker.Complex] = {};

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

ColorPicker.prototype.Create = function () {
    var self = this;

    var container = this.container = oNode.CreateNode('div');
    CSS.AddClass(container, this.css.colorpicker);
    Events.AttachEvent(container, 'click', function () {
        self._Click();
    });

    var textfield = this.textfield = oNode.CreateNode('input');
    oNode.AddNode(textfield, container);
    textfield.type = 'text';
    textfield.name = this.name;
    textfield.value = this.selectedColor;
    textfield.style.visibility = 'hidden';

    container.style.backgroundColor = this.selectedColor;
    this.colorPanel.selectedColor = this.selectedColor;

    return container;
};

// focus event to create colorpanel
ColorPicker.prototype._Click = function () {
    var self = this;
    var c = this.container;
    var panel;
    if ((!self.alone && !ColorPicker[self.mode].IsCreate) || (self.alone && !self.isCreate)) {
        if (self.alone) {
            self.isCreate = true;
        }
        else {
            ColorPicker[self.mode].IsCreate = true;
        }

        self.isCreate = true;
        var colorPanel = self.colorPanel;
        colorPanel.selectedColor = (self.alone ? self : ColorPicker[self.mode].ColorPicker).selectedColor;
        colorPanel.isControl = true;
        colorPanel.Init();
        colorPanel.Change = function (color) {
            (self.alone ? self : ColorPicker[self.mode].ColorPicker)._Change(color);
            (self.alone ? self : ColorPicker[self.mode].ColorPicker).SetVisible(false);
        };
        colorPanel.Create();

        if (self.alone) {
            panel = PopUp.Panel(colorPanel.container);
        }
        else {
            if (! ColorPicker[self.mode].Panel)
                ColorPicker[self.mode].Panel = PopUp.Panel(colorPanel.container);
            panel = ColorPicker[self.mode].Panel;
        }
        self.panel = panel;

        CSS.AddClass(panel, self.css.panel);
        PopUp.AddPopUp(panel);
        PopUp.AddMask(panel);

        Events.AttachEvent(document, 'mousedown', function (e) {
            var obj = $EO(e);
            var cp = self.alone ? self : ColorPicker[self.mode].ColorPicker;
            while (obj) {
                if (obj === cp.container || obj === cp.panel) {
                    return;
                }
                obj = obj.parentNode;
            }
            (self.alone ? self : ColorPicker[self.mode].ColorPicker).SetVisible(false);
        });
        Events.AttachEvent(window, 'resize', resize);
    }
    else {
        panel = self.alone ? self.panel : (self.panel = ColorPicker[self.mode].Panel);
    }

    function resize () {
        var x = Global.GetOffsetLeft(c);
        var y = Global.GetOffsetTop(c) + c.offsetHeight;
        PopUp.SetXY(panel, x, y);
    }
    resize();

    self.SetVisible(self.alone ? !self.panelDisplay : !ColorPicker[self.mode].PanelDisplay);
}

// 可由外部分配调用
ColorPicker.prototype.Click = function () {
    this._Click();
};

// 设置显示隐藏
ColorPicker.prototype.SetVisible = function (visible /* :Boolean */) {
    if (! this.colorPanel) return;
    if (this.alone) {
        this.panelDisplay = visible;
    }
    else {
        ColorPicker[this.mode].PanelDisplay = visible;
    }

    this.alone || (ColorPicker[this.mode].ColorPicker = this);
    this.colorPanel.Update(this.selectedColor, true);

    PopUp.SetVisible(this.panel, visible);
}

// 内部颜色改变调用
ColorPicker.prototype._Change = function (color /* :String */) {
    this.selectedColor = color;
    this.textfield.value = color;
    this.container.style.backgroundColor = color;
    this.Change(color);
};

// 颜色改变时执行(为特定定义的特定的方法)
ColorPicker.prototype.Change = function (color /* :String */) {
    //alert(color);
};