otree.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.01.31#
  ---
  use list:
  > global.lib.js
  > css.lib.js
  > events.lib.js
  > node.lib.js
  > cookie.lib.js
  ---
  树状列表
  ---
  包含样式：
  <link rel="stylesheet" href="css/tree.lib.css" type="text/css" />
*/

function oTree (el /* :HTMLElement */) {
    this.container = el;

    // container's id
    this.id = '';

    // cookie string
    this.cookies = '';
    // tree contruct
    this.tree = {};
    // enable cookie or not
    this.cookieAble = false;
    // enabel link to extend (`<li>`must be contain `<a>`)
    this.linkExtend = false;

    // current selected item
    this.selectedItem = null;

    this.css = {
        tree:'tree',
        second:'second',
        icon:'icon',
        // open status
        open:'open',
        // close status
        close:'close',
        // leaf node
        item:'item',
        /// node content
        content: 'content',
        // selected status
        selected: 'selected'
    };
}

oTree.prototype.Init = function () {
    this.Settle();
};

oTree.prototype.Settle = function () {
    var el = this.container;
    if (!oNode.IsNode(el)) el = this.container = $(this.container || this.id);
    CSS.AddClass(el, this.css.tree);
    this.id = this.container.id;

    //this.SetExtendableAll(el);
    this.Circle(el, '', true);

    if (this.cookieAble) {
        this.Retrieve();
        this.Reset();
    }
};

oTree.prototype.Circle = function (el /* :HTMLElement */, index /* :String */, first /* :Boolean */) {
    var self = this;
    var childs = el.childNodes;
    for (var i = 0, j = 0, len = childs.length; i < len; i++) {
        var child = childs[i];
        first || CSS.AddClass(child, this.css.second);
        if (oNode.IsNode(child)) {
            var _child = child.getElementsByTagName('ul');
            _child = _child && _child.length > 0 ? _child[0] : null;

            // content
            var _content = child.firstChild;
            oNode.RemoveNode(_content, child);
            var content = oNode.CreateNode('span');
            if (child.firstChild)
                oNode.InsertBefore(content, child.firstChild);
            else
                oNode.AddNode(content, child);
            CSS.AddClass(content, self.css.content);
            oNode.AddNode(_content, content);

            // icon
            var icon = oNode.CreateNode('span');
            oNode.InsertBefore(icon, child.firstChild);
            // index
            var _index = icon._index = (index != '' ? index + '_' : '') + j++;
            CSS.AddClass(icon, this.css.icon);
            CSS.AddClass(icon, _child ? this.css.close : this.css.item);

            if (_child) {
                this.Circle(_child, _index);

                CSS.SetDisplay(_child, false);
                icon.status = 'close';
                icon.list = _child;

                Events.AttachEvent(icon, 'click', function (e) {
                    extend(this, true);
                });

                if (self.linkExtend) {
                    var a = child.getElementsByTagName('a');
                    if (a.length > 0 && a[0].parentNode.parentNode == child) {
                        a = a[0];
                        a.icon = icon;
                        Events.AttachEvent(a, 'click', function (e) {
                            extend(this.icon, false);
                            if (a.href == location.href + '#')
                                Events.CancelEvent(e);
                        });
                    }
                }
            }
        }
    }

    function extend (th, icon) {
        if (self.selectedItem != th.parentNode) {
            if (self.selectedItem)
                CSS.RemoveClass(self.selectedItem, self.css.selected);
            self.selectedItem = th.nextSibling;
            CSS.AddClass(self.selectedItem, self.css.selected);
        }

        if (th.status == 'close') {
            th.status = 'open';
            CSS.ReplaceClass(th, self.css.close, self.css.open);
            CSS.SetDisplay(th.list, true);

            if (self.cookieAble) {
                // add current level
                var cookie_index = self.cookies;
                self.ReplaceIndex(cookie_index, th._index);
                if (cookie_index != '') {
                    cookie_index += ',';
                }
                self.cookies = cookie_index + th._index;

                // set cookie
                Cookie.Set(self.id, self.cookies);
            }
        }
        else {
            th.status = 'close';
            CSS.ReplaceClass(th, self.css.open, self.css.close);
            CSS.SetDisplay(th.list, false);

            if (self.cookieAble) {
                // delete current level
                var cookie_index = self.cookies;
                cookie_index = self.ReplaceIndex(cookie_index, th._index);
                self.cookies = cookie_index;

                // set cookie
                Cookie.Set(self.id, self.cookies);
            }
        }
    }
};

// 清理需要保存的索引
oTree.prototype.ReplaceIndex = function (indexs /* :String(index1,index2,index3) */, index /* :String */) {
    indexs = indexs.replace(',' + index + ',', ',');
    indexs = indexs.replace(new RegExp(',' + index + '$', 'gi'), '');
    indexs = indexs.replace(new RegExp('^' + index + ',', 'gi'), '');
    indexs = indexs.replace(new RegExp('^' + index + '$', 'gi'), '');
    return indexs;
};

// 重新获取cookie的内容
oTree.prototype.Retrieve = function () {
    var cookies = Cookie.cookies[this.id];
    if (!cookies || cookies == 'undefined' || typeof cookies == 'undefined') cookies = '';
    this.cookies = cookies;
};

// 重设已记录的展开的列表
oTree.prototype.Reset = function () {
    var cookies = this.cookies.split(',');

    this.Render(cookies);

    for (var i = 0, len = cookies.length; i < len; i++) {
        var extendAble = true;
        var levels = cookies[i].split('_');
        for (var j = 0, _len = levels.length; j < _len; j++) {
            levels[j] = levels[j].toString();
            if (this.tree[levels[j]] && !this.tree[levels[j]].on)
                extendAble = false;
        }
        if (extendAble) this.OpenTo(levels);
    }
};

// 呈现为树
oTree.prototype.Render = function (cookies) {
    var tree;
    for (var i = 0, len = cookies.length; i < len; i++) {
        var l = cookies[i].split('_');
        tree = this.tree;
        for (var j = 0, _len = l.length; j < _len; j++) {
            if (typeof tree[l[j]] != 'object') tree[l[j]] = {on:false};
            if (typeof tree[l[j]].childs != 'object') {
                if (j != _len - 1) tree[l[j]].childs = {};
                else tree[l[j]].on = true;
                tree = tree[l[j]].childs;
            }
            else {
                tree[l[j]].on = true;
            }
        }
    }
    //alert(Dumper(this.tree));
};

// 展开某个列表
oTree.prototype.OpenTo = function (levels /* :Array([level1, level2, level3, ...]) */) {
    var node = null;
    for (var i = 0, len = levels.length; i < len; i++) {
        if (i == 0) node = this.container;

        for (var j = 0, k = 0, _len = node.childNodes.length; j < _len; j++) {
            if (node.childNodes[j].tagName && node.childNodes[j].tagName.toLowerCase() == 'li') {
                if (k == levels[i]) {
                    node = node.childNodes[j];
                    break;
                }
                k++;
            }
        }
        if (!node) continue;

        var span = node.getElementsByTagName('span')[0];
        span.status = 'open';
        CSS.ReplaceClass(span, 'close', 'open');
        node && (node = node.getElementsByTagName('ul')[0]);
        node && CSS.SetDisplay(node, true);
    }
};

// 设置样式
oTree.prototype.SetStyle = function (style /* :String */, css /* :String */) {
    if (typeof css != 'string') return;
    this.css[style] = css;
};

// extendable all
oTree.prototype.SetExtendableAll = function () {
    var uls = this.container.getElementsByTagName('ul');

    for (var i = 0, len = uls.length; i < len; i++) {
        this.SetExtendableOne(uls[i]);
    }
};

// extendable one
oTree.prototype.SetExtendableOne = function (el /* :HTMLElement */) {
    var lis = el.childNodes;
    var ops = [];
    for (var i = 0, j = 0, len = lis.length; i < len; i++) {
        if (!oNode.IsNode(lis[i]) || lis[i].tagName.toLowerCase() != 'li')
            continue;
        ops[j] = {
            x: Global.GetOffsetLeft(lis[i]),
            y: Global.GetOffsetTop(lis[i]),
            index: i
        };

        j++;
    }

    var l = Global.GetOffsetLeft(el);
    var t = Global.GetOffsetTop(el);
    var w = el.offsetWidth + 50;
    var h = el.offsetHeight;

    el.style.position = 'relative';
    el.style.overflow = 'hidden';
    el.style.width = w + 'px';
    el.style.height = h + 'px';
    for (i = 0; i < j; i++) {
        var li = lis[ops[i].index];
        li.style.position = 'absolute';
        li.style.border = '1px solid #f00';
        li.style.bottom = h - (ops[i].y - t) - li.offsetHeight + 'px';
    }
};