tijian_tieying/web/Web/UEditor/dialogs/table/table.js

/**
 * Created by JetBrains PhpStorm.
 * User: taoqili
 * Date: 12-2-23
 * Time: <EFBFBD><EFBFBD><EFBFBD><EFBFBD>11:32
 * To change this template use File | Settings | File Templates.
 */

    var init = function(){
        addColorPickListener();
        addPxChangeListener();
        addFloatListener();
        addBorderTypeChangeListener();

    };

    function addBorderTypeChangeListener(){
        domUtils.on($G("borderType"),"change",createTable);
    }

    function addFloatListener(){
        domUtils.on($G("align"),"change",function(){
            setTablePosition(this.value);
        })

    }

    /**
     * <EFBFBD><EFBFBD><EFBFBD>ݴ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>valueֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>table<EFBFBD><EFBFBD>λ<EFBFBD><EFBFBD>
     * @param value
     */
    function setTablePosition(value){
        var table = $G("preview").children[0],
            margin = (table.parentNode.offsetWidth - table.offsetWidth)/2;
        if(value=="center"){
            table.style.marginLeft = margin +"px";
        }else if(value=="right"){
            table.style.marginLeft = 2*margin +"px";
        }else{
            table.style.marginLeft = "5px";
        }
    }

    /**
     * <EFBFBD><EFBFBD><EFBFBD><EFBFBD>border<EFBFBD><EFBFBD>spaceing<EFBFBD>ȸ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>¼<EFBFBD>
     */
    function addPxChangeListener(){
        var ids = ["border","cellPadding","cellSpacing"];
        for(var i=0,ci;ci=$G(ids[i++]);){
            domUtils.on(ci,"keyup",function(){
                $G("message").style.display="none";
                switch(this.id){
                    case "border":
                        $G("border").value = filter(this.value,"border","<22>߿<EFBFBD>");
                        break;
                    case "cellPadding":
                        $G("cellPadding").value = filter(this.value,"cellPadding","<22>߾<EFBFBD>");
                        break;
                    case "cellSpacing":
                        $G("cellSpacing").value = filter(this.value,"cellSpacing","<22><><EFBFBD><EFBFBD>");
                        break;
                    default:

                }
                createTable();
                //setTablePosition($G("align").value);
            });
        }
    }

    function isNum(str){
        return /^(0|[1-9][0-9]*)$/.test( str );
    }

    /**
     * <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Կ<EFBFBD><EFBFBD>е<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>table<EFBFBD><EFBFBD><EFBFBD><EFBFBD>
     */
    function createTable(){
        var border=$G("border").value || 1,
            borderColor=$G("borderColor").value || "#000000",
            cellPadding=$G("cellPadding").value || 0,
            cellSpacing=$G("cellSpacing").value || 0,
            bgColor=$G("bgColor").value || "#FFFFFF",
            align=$G("align").value || "",
            borderType=$G("borderType").value || 0;

        border = setMax(border,5);
        cellPadding = setMax(cellPadding,5);
        cellSpacing = setMax(cellSpacing,5);

        var html = ["<table "];
        if(cellSpacing>0){
            html.push(' style="border-collapse:separate;" ')
        }else{
            html.push(' style="border-collapse:collapse;" ')
        }
        cellSpacing>0 && html.push(' cellSpacing="' + cellSpacing + '" ');
        html.push(' border="' + (border||1) +'" borderColor="' + (borderColor||'#000000') +'"');
        bgColor && html.push(' bgColor="' + bgColor + '"');
        html.push(' ><tr><td><3E><></td><td><3E><></td><td><3E><></td></tr><tr><td><3E><></td><td>Ԥ</td><td><3E><></td></tr><tr><td><3E><></td><td></td><td></td></tr></table>');
        var preview = $G("preview");
        preview.innerHTML = html.join("");
        //<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ÿ<EFBFBD><C3BF><EFBFBD><EFBFBD>Ԫ<EFBFBD><D4AA>
        var table = preview.firstChild;
        if(borderType=="1"){
            for(var i =0,td,tds = domUtils.getElementsByTagName(table,"td");td = tds[i++];){
                td.style.border = border + "px solid " + borderColor;
            }
        }
        for(var i =0,td,tds = domUtils.getElementsByTagName(table,"td");td = tds[i++];){
            td.style.padding = cellPadding + "px";
        }
    }
    function setMax(value,max){
        return value>max? max:value;
    }
    function filter(value,property,des){
        var maxPreviewValue = 5,
                maxValue = 10;
        if(!isNum(value) && value!=""){
            $G(property).value = "";
            $G("message").style.display ="";
            $G("messageContent").innerHTML= "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ȷ<EFBFBD><C8B7><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5>";
            return property=="border"?1:0;
        }
        if(value > maxPreviewValue){
            $G("message").style.display ="";
            $G("messageContent").innerHTML= des+"<22><><EFBFBD><EFBFBD>" + maxPreviewValue+"pxʱ<78><CAB1><EFBFBD><EFBFBD><EFBFBD>ṩʵʱԤ<CAB1><D4A4><EFBFBD><EFBFBD>";
            if(value>maxValue){
                $G("messageContent").innerHTML = des+"<22><><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD>ܳ<EFBFBD><DCB3><EFBFBD>"+maxValue+"px!";
                $G(property).value = maxValue;
                return maxValue;
            }
        }
        return value;
    }
    /**
     * <EFBFBD><EFBFBD><EFBFBD><EFBFBD>ȡɫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>¼<EFBFBD>
     */
    function addColorPickListener(){
        var colorPicker = getColorPicker(),
            ids = ["bgColor","borderColor"];
        for(var i=0,ci;ci = $G(ids[i++]); ){
            domUtils.on(ci,"click",function(){
                var me = this;
                showColorPicker(colorPicker,me);
                colorPicker.content.onpickcolor = function(t, color){
                    me.value = color.toUpperCase();
                    colorPicker.hide();
                    createTable();
                };
                colorPicker.content.onpicknocolor = function(){
                    me.value = '';
                    colorPicker.hide();
                    createTable();
                };
            });
            domUtils.on(ci,"keyup",function(){
                colorPicker.hide();
                createTable();
            });
        }
        domUtils.on(document, 'mousedown', function (){
            UE.ui.Popup.postHide(this);
        });
    }

    /**
     * ʵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD><EFBFBD>colorpicker<EFBFBD><EFBFBD><EFBFBD><EFBFBD>
     */
    function getColorPicker(){
        return new UE.ui.Popup({
            content: new UE.ui.ColorPicker({
                noColorText: '<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɫ'
            })
        });
    }

    /**
     * <EFBFBD><EFBFBD>anchorObj<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʾcolorpicker
     * @param anchorObj
     */
    function showColorPicker(colorPicker,anchorObj){
        colorPicker.showAnchor(anchorObj);
    }