toolbar.js

asp的bbs程序

    colorBlock : function (_color) {
        var toolbar = this;

        var color = oNode.CreateNode('a');
        color.style.margin = '';
        color.style.display = 'block';
        color.style.overflow = 'hidden';
        color.style.width = '10px';
        color.style.height = '10px';
        color.style.backgroundColor = _color;
        color.alt = _color;
        color.title = _color;
        color.href = 'javascript:void(0);';
        color.appendChild(document.createTextNode(' '));
        color.onclick = function () {
            if (cEditor.isXHTML()) return;
            if (cEditor.isWYSIWYG()) {
                cEditor.SetStyle(toolbar.colorType, this.alt);
            }
            else {
                colorType = toolbar.colorType.toLowerCase() == 'forecolor' ? 'color' : 'bgcolor';
                cEditor.SetUBBStyle('[' + colorType + '=' + this.alt + ']\x01[/' + colorType + ']');
            }
        };
        var container = oNode.CreateNode('div');
        container.style.cssFloat = 'left';
        container.style.styleFloat = 'left';
        container.style.border = '1px solid #fff';
        container.appendChild(color);
        container.onmouseover = function () {
            this.style.borderColor = '#666';
        };
        container.onmouseout = function () {
            this.style.borderColor = '#fff';
        };
        container.onclick = function () {
            toolbar.colorPanel.style.display = 'none';
        };

        return container;
    },

    // 创建链接块
    createABlock : function (str) {
        var oA = oNode.CreateNode('a');
        oA.style.display = 'block';
        oA.style.width = '100%';
        oA.style.color = '#000';
        oA.style.padding = '4px';
        oA.style.fontSize = '12px';
        oA.style.textDecoration = 'none';
        oA.href = 'javascript:void(0)';
        oA.onmouseover = function () {CSS.ReplaceClass(this, 'menu-item-out', 'menu-item-over');};
        oA.onmouseout = function () {CSS.ReplaceClass(this, 'menu-item-over', 'menu-item-out');};
        oA.appendChild(document.createTextNode(str));

        return oA;
    },

    // 用于对齐列表
    justifyBlock : function  (str, command) {
        var toolbar = this;
        var oA = toolbar.createABlock(str);
        oA.onclick = function () {
            cEditor.SetStyle(command, false);
            toolbar.justifyPanel.style.display = 'none';
        }

        return oA;
    },

    // 用于（有序，无序）列表
    listBlock : function (str, command) {
        var toolbar = this;
        var oA = toolbar.createABlock(str);
        oA.onclick = function () {
            cEditor.SetStyle(command, '');
            toolbar.listPanel.style.display = 'none';
        }

        return oA;
    },

    // 用于缩进
    indentBlock : function (str, command) {
        var toolbar = this;
        var oA = toolbar.createABlock(str);
        oA.onclick = function () {
            cEditor.SetStyle(command, false);
            toolbar.indentPanel.style.display = 'none';
        }

        return oA;
    },

    // 表情列表
    faceBlock : function (p) {
        if (this.faceNode) {
            oNode.AddNode(this.faceNode, p);
            return;
        }
        var self = this;
        var faceNode = this.faceNode = oNode.CreateNode('div');
        oNode.AddNode(faceNode, p);

        /// 分类
        var t = oNode.CreateNode('div');
        oNode.AddNode(t, faceNode);
        CSS.AddClass(t, 'face-title');
        var tS = oNode.CreateNode('div');
        oNode.AddNode(tS, t);
        tS.style.position = 'absolute';
        tS.style.left = 0;
        tS.style.top = 0;
        //tS.style.background = '#ddd';
        // 所有类别
        var tSWidth = 0;
        var typeCount = 0;
        var curBut = null;
        var curType = 'default';
        for (var item in this.faceAbout.group) {
            var n = oNode.CreateNode('div');
            oNode.AddNode(n, tS);
            if (item == 'default') {
                CSS.AddClass(n, 'focus');
                curBut = n;
            }
            n.type = item;
            n.innerHTML = '<a href="javascript:;">' + this.faceAbout.group[item] + '</a>';
            n.onclick = function () {
                if (this.type == curType) return;
                curType = this.type;
                CSS.RemoveClass(curBut, 'focus');
                CSS.AddClass(this, 'focus');
                curBut = this;
                var faceList = self.faceAbout.faceList[this.type];
                if (faceList) {
                    pageCount = Math.ceil(faceList.length/pageSize);
                }
                curPage = 1;
                show(this.type, 1);
            };
            typeCount++;
            tSWidth += n.offsetWidth;
        }
        // 控制滚动
        var scope = 365 - 40;
        var tSW = tSWidth + 1 * typeCount + 3;//5 * (typeCount + 1)
        tS.style.width = tSW + 'px';
        if (tSW > scope) {
            var tC = oNode.CreateNode('div');
            oNode.AddNode(tC, t);
            CSS.AddClass(tC, 'control');
            var tPrev = oNode.CreateNode('img');
            oNode.AddNode(tPrev, tC);
            tPrev.src = this.iconsRoot + 'emoticon_prev.gif';
            //tPrev.title = '向前';
            tPrev.onmouseover = function () {dir = 0; startMove()};
            tPrev.onmouseout = function () {stopMove()};
            var tNext = oNode.CreateNode('img');
            oNode.AddNode(tNext, tC);
            tNext.src = this.iconsRoot + 'emoticon_next.gif';
            //tNext.title = '向后';
            tNext.onmouseover = function () {dir = 1; startMove()};
            tNext.onmouseout = function () {stopMove()};

            var dir;
            var step = 5;
            var interval = 0;
            function startMove () {
                var l = parseInt(tS.style.left);
                if (dir) {
                    if (l - step + tSW < scope) l = scope - tSW ;
                    else l -= step;
                }
                else {
                    if (l + step > 0) l = 0;
                    else l += step;
                }
                tS.style.left = l + 'px';
                interval = setTimeout(startMove, 30);
            }
            function stopMove () {
                clearTimeout(interval);
            }
        }

        /// 图片内容
        var c = oNode.CreateNode('div');
        oNode.AddNode(c, faceNode);
        CSS.AddClass(c, 'face-content');

        /// 底部按钮
        var b = oNode.CreateNode('div');
        oNode.AddNode(b, faceNode);
        CSS.AddClass(b, 'face-bottom');
        // left
        var leftC = oNode.CreateNode('div');
        oNode.AddNode(leftC, b);
        CSS.AddClass(leftC, 'face-bottom-left');
        leftC.innerHTML = '<a href="' + this.faceAbout.faceManage + '" target="_blank">管理</a> <a href="' + this.faceAbout.faceImport + '" target="_blank">导入</a>';
        var rightC = oNode.CreateNode('div');
        oNode.AddNode(rightC, b);
        CSS.AddClass(rightC, 'face-bottom-right');
        var pagePrev = oNode.CreateNode('a');
        oNode.AddNode(pagePrev, rightC);
        pagePrev.href = 'javascript:void(0)';
        pagePrev.innerHTML = '上一页';
        oNode.AddNode('  ', rightC);
        pagePrev.onclick = function () {
            //alert(curPage + ' ' + pageCount + ' ' + self.faceAbout.faceList['default'].length);
            if (curPage == 1) return;
            curPage -= 1;
            show(curType, curPage);
        };
        var pageNext = oNode.CreateNode('a');
        oNode.AddNode(pageNext, rightC);
        pageNext.href = 'javascript:void(0)';
        pageNext.innerHTML = '下一页';
        pageNext.onclick = function () {
            //alert(curPage + ' ' + pageCount);
            if (curPage == pageCount) return;
            curPage += 1;
            show(curType, curPage);
        };
        var pageC = oNode.CreateNode('div');
        oNode.AddNode(pageC, b);
        CSS.AddClass(pageC, 'face-bottom-page');

        /// 图片预览
        var preview = oNode.CreateNode('div');
        oNode.AddNode(preview, faceNode);
        CSS.AddClass(preview, 'face-preview');
        preview.style.visibility = 'hidden';

        // 显示图片列表
        var pageSize = this.faceAbout.pageSize;
        var pageCount = Math.ceil((self.faceAbout.faceList['default'] || []).length/pageSize);
        var curPage = 1;
        function show (type, page) {
            //alert(type + ' ' + Dumper(self.faceAbout.faceList));
            var curList = self.faceAbout.faceList[type];
            if (pageCount <= 1) rightC.style.visibility = 'hidden';
            else rightC.style.visibility = 'visible';
            if (!curList) {
                pageC.innerHTML = '1/0';
                c.innerHTML = '';
                return;
            }
            pageC.innerHTML = page + '/' + pageCount;
            c.innerHTML = '';
            for (var i = (page - 1) * pageSize, j = 1; i < page * pageSize && i < curList.length; i++, j++) {
                var img = oNode.CreateNode('img');
                oNode.AddNode(img, c);
                img.hspace = img.vspace = 2;
                img.width = self.faceAbout.width;
                img.height = self.faceAbout.height;

                // 当前项为空图片，使自定义默认图片另起一行显示
                if (curList[i].length == 0) {
                    img.style.cursor = 'default';
                    img.src = 'images/transparent.gif';
                    continue;
                }

                img._src = curList[i][1];
                img._shortcut = curList[i][0];
                // curList索引
                img.index = i;
                // 显示索引
                img.displayIndex = j;

                if (curType == 'default' && curList[i][2] != -1) {
                    img.src = 'images/transparent.gif';
                    img.style.background = '#eee url(' + self.faceAbout.defaultImg + ') no-repeat ' + curList[i][2] + 'px 0';
                }
                else {
                    var src = curList[i][1].split('.');
                    src = src.slice(0, src.length - 1).join('.') + '.png';
                    img.src = self.faceAbout.lowpath + src;
                }
                // 插入编辑器
                img.onclick = function () {
                    if (cEditor.isXHTML()) return;
                    var url = (curType == 'default' && curList[this.index][2] != -1 ? self.faceAbout.defaultPath : self.faceAbout.path) + this._src;
                    if (cEditor.isWYSIWYG()) {
                        var el = '<img src="' + url + '" _shortcut="' + this._shortcut + '" />';
                        cEditor.InsertContent(el);
                    }
                    else {
                        cEditor.SetUBBStyle(this._shortcut);
                        //cEditor.SetUBBStyle('[img]' + url + '[/img]');
                    }
                    self.facePanel.style.display = 'none';
                };
                img.onmouseover = function () {
                    if (this.displayIndex % 14 > 6) {
                        preview.style.left = '5px';
                        preview.style.right = 'auto';
                    }
                    else  {
                        preview.style.left = 'auto';
                        preview.style.right = '5px';
                    }
                    if (curType == 'default' && curList[this.index][2] != -1) {
                        preview.style.background = '#eee url(' + self.faceAbout.defaultPath + this._src + ') no-repeat center center';
                    }
                    else {
                        var img = oNode.CreateNode('img');
                        oNode.AddNode(img, preview);
                        img.onload = function () {AvatarLoaded(this)};
                        img.width = preview.offsetWidth;
                        img.height = preview.offsetHeight;
                        img.src = self.faceAbout.path + this._src;
                    }
                    //preview.style.backgroundImage = 'url(' + self.faceAbout.path + (curType == 'default' && curList[this.index][2] != -1 ? 'default/' : '') + this._src + ')';
                    //preview.innerHTML = '<img src="' + self.faceAbout.path + (curType == 'default' && curList[this.index][2] != -1 ? 'default/' : '') + this._src + '" />';
                    preview.style.visibility = 'visible';
                };
                img.onmouseout = function () {
                    preview.innerHTML = '';
                    preview.style.visibility = 'hidden';
                };
            }
        }
        show('default', 1);
    },

    /// 注册工具栏图标
    // 指定当前自定义弹出层
    // description = {content:'', title:''}
    regIcon : function (description, src, url, width, height, routine) {
        var self = this;
        var Win = window.parent;
        var id = 'icon_' + Global.Random();