DjangoUeditor3/DjangoUeditor/static/UEditor/dialogs/background/background.js

var me = editor,
    doc = me.document,
    bodyStyle,
    cp = $G( "colorPicker" ),
    bkbodyStyle = "",
    bkcolor = "";
    var popup = new UE.ui.Popup( {
        content:new UE.ui.ColorPicker( {
            noColorText:me.getLang( "clearColor" ),
            editor:me,
            onpickcolor:function ( t, color ) {
                domUtils.setStyle( cp, "background-color", color );
                bkcolor = color;
                UE.ui.Popup.postHide();
            },
            onpicknocolor:function ( t, color ) {
                domUtils.setStyle( cp, "background-color", "transparent" );
                bkcolor = "";
                UE.ui.Popup.postHide();
            }
        } ),
        editor:me,
        onhide:function(){
            setBody();
        }
    } );
    domUtils.on( cp, "click", function () {
        popup.showAnchor( this );
    } );
    domUtils.on( document, 'mousedown', function ( evt ) {
        var el = evt.target || evt.srcElement;
        UE.ui.Popup.postHide( el );
    } );
    domUtils.on( window, 'scroll', function () {
        UE.ui.Popup.postHide();
    } );
    //获得head
    var getHead = function(){
        return domUtils.getElementsByTagName($G("tabhead"),"span");
    };
    //给head绑定事件
    var bindClick = function(){
        var heads = getHead();
        for(var i=0,head;head=heads[i++];){
            head.onclick = function(){
                var bodyid = this.getAttribute("tabsrc");
                toggleHead(this);
                toggleBody(bodyid);
                if(bodyid == "imgManager"){
                    ajax.request( editor.options.imageManagerUrl, {
                        timeout:100000,
                        action:"get",
                        onsuccess:function ( xhr ) {
                            var tmp = utils.trim(xhr.responseText),
                                    imageUrls = !tmp ? [] : tmp.split( "ue_separate_ue" ),
                                    length = imageUrls.length,
                                    imgList = $G( "imageList" );
                            imgList.innerHTML = !length ? "  "+lang.noUploadImage : "";
                            for ( var k = 0, ci; ci = imageUrls[k++]; ) {
                                var img = document.createElement( "img" );
                                var div = document.createElement( "div" );
                                div.appendChild( img );
                                div.style.display = "none";
                                imgList.appendChild( div );
                                img.onclick = function () {
                                    var nodes = imgList.childNodes;
                                    for(var i=0,node;node=nodes[i++];){
                                        node.firstChild.removeAttribute( "selected" );
                                        node.firstChild.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
                                    }
                                    changeSelected( this );
                                };
                                img.onload = function () {
                                    this.parentNode.style.display = "";
                                    var w = this.width, h = this.height;
                                    scale( this, 95, 120, 80 );
                                    this.title = lang.toggleSelect + w + "X" + h;
                                };
                                img.setAttribute( k < 35 ? "src" : "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig,"") );
                                img.setAttribute( "data_ue_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig,"") );

                            }
                        },
                        onerror:function () {
                            $G( "imageList" ).innerHTML = lang.imageLoadError;
                        }
                    } );
                }else{
                    var radios = document.getElementsByName("t");
                    for(var i=0,r;r=radios[i++];){
                        if(r.checked&&r.value!="none"){
                            $G("repeatType").style.display="";
                        }
                    }
                }
            }
        }
    };
    /**
     * 改变o的选中状态
     * @param o
     */
    function changeSelected( o ) {
        if ( o.getAttribute( "selected" ) ) {
            o.removeAttribute( "selected" );
            o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
        } else {
            o.setAttribute( "selected", "true" );
            o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
        }
        $G("url").value = o.getAttribute("src")
    }
    /**
     * 图片缩放
     * @param img
     * @param max
     */
    function scale( img, max, oWidth, oHeight ) {
        var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
        if ( ow > max || oh > max ) {
            if ( ow >= oh ) {
                if ( width = ow - max ) {
                    percent = (width / ow).toFixed( 2 );
                    img.height = oh - oh * percent;
                    img.width = max;
                }
            } else {
                if ( height = oh - max ) {
                    percent = (height / oh).toFixed( 2 );
                    img.width = ow - ow * percent;
                    img.height = max;
                }
            }
        }
    }
    //切换body
    var toggleBody = function(id){
        var bodys = ["normal","imgManager"];
        for(var i=0,body;body=bodys[i++];){
            $G(body).style.zIndex = body == id?200:1;
        }
    };
    //切换head
    var toggleHead = function(obj){
        var heads = getHead();
        for(var i=0,head;head=heads[i++];){
            domUtils.removeClasses(head,["focus"]);
            $G("repeatType").style.display = "none";
        }
        domUtils.addClass(obj,"focus");
    };
    //获得当前选中的tab
    var getCheckedTab = function(){
        var heads = getHead();
        for(var i=0,head;head=heads[i++];){
            if(domUtils.hasClass(head,"focus")){
                return head;
            }
        }
    };


    var init = function(){
        bindClick();
        getHead()[0].click();
        $G("alignment").style.display = "none";
        $G("custom").style.display = "none";
        //初始化颜色
        domUtils.setStyle(cp,"background-color",domUtils.getComputedStyle(doc.body,"background-color"));
        var color = domUtils.getComputedStyle(doc.body,"background-color");
        if((color && color!="#ffffff" && color!="transparent")||domUtils.getComputedStyle(doc.body,"background-image")!="none"){
            setTimeout(function(){
                document.getElementsByName("t")[1].click();
            },200);
        }
        initImgUrl();
		initSelfPos();
        initAlign();
    };
    //初始化自定义位置
    function initSelfPos(){
		var x,y;
		if(browser.ie){
			x = domUtils.getComputedStyle(doc.body,"background-position-x").replace(/50%|%|px|center/ig,"");
			y = domUtils.getComputedStyle(doc.body,"background-position-y").replace(/50%|%|px|center/ig,"");
		}else{
		    var arr = domUtils.getComputedStyle(doc.body,"background-position").match(/\s?(\d*)px/ig);
			if(arr&&arr.length){
				x = arr[0].replace("px","");
				y = arr[1].replace("px","");
			}
		}
		$G("x").value = x || 0;
		$G("y").value = y || 0;
    }
    //初始化图片地址
    function initImgUrl(){
        var su = domUtils.getComputedStyle(doc.body,"background-image"),
            url="";
        if(su.indexOf(me.options.imagePath)>0){
            url = su.match(/url\("?(.*[^\)"])"?/i);
            if(url && url.length){
                url =  url[1].substring(url[1].indexOf(me.options.imagePath),url[1].length);
            }
        }else{
            url =  su!="none" ? su.replace(/url\("?|"?\)/ig,""):"";
        }
        $G("url").value = url;
    }
    //初始化定位
    function initAlign(){
        var align = domUtils.getComputedStyle(doc.body,"background-repeat"),
            alignType = $G("repeatType");
        if(align == "no-repeat"){
            var pos = domUtils.getComputedStyle(doc.body,browser.ie?"background-position-x":"background-position");
            alignType.value = pos&&pos.match(/\s?(\d*)px/ig) ? "self":"center";
            if(pos == "center"){
                alignType.value = "center";
            }
            $G("custom").style.display = alignType.value=="self" ? "" : "none";
        }else{
            alignType.value = align;
        }
    }
    init();
//样式表工具
function Stylesheet(ss){
    if(typeof ss == "number")
    ss = doc.styleSheets[ss];
    this.ss = ss;
}
Stylesheet.prototype.getRules = function(){
    return this.ss.cssRules?this.ss.cssRules:this.ss.rules;
};
Stylesheet.prototype.getRule = function(s){
    var rules = this.getRules();
    if(!rules)return null;
    if(typeof s == 'number')return rules[s];
    s = s.toLowerCase();
    for(var i=rules.length-1;i>=0;i--){
        if(rules[i].selectorText.toLowerCase() == s)return rules[i];
    }
    return null;
};
Stylesheet.prototype.getStyleText = function(s){
    var rule = this.getRule(s);
    if(rule&&rule.style&&rule.style.cssText) return rule.style.cssText;
    else return "";
};
Stylesheet.prototype.insertRule = function(selector,styles,n){
    if(!n){
        var rules = this.getRules();
        rules.length&&this.deleteRule(rules.length-1);
    }
    if(this.ss.insertRule)
        this.ss.insertRule(selector+"{"+styles+"}",0);
    else if(this.ss.addRule)
        this.ss.addRule(selector,styles,0);
};
Stylesheet.prototype.deleteRule = function(s){
    if(!s){
        var rules = this.getRules();
        s = rules.length-1;
    }
    if(typeof s!="number"){
        s = s.toLowerCase();
        var rules = this.getRules();
        for(var i=rules.length-1;i>=0;i--){
            if(rules[i].selectorText.toLowerCase()==s){
                s = i;
                break;
            }
        }
        if(i==-1)return;
    }
    if(this.ss.deleteRule)this.ss.deleteRule(s);
    else if(this.ss.removeRule)this.ss.removeRule(s);
};


//获得选中的类型
function getCheckIpt(){
    var ipts = document.getElementsByName("t");
    for(var i=0,ipt;ipt=ipts[i++];){
        if(ipt.checked){
            return ipt.value;
        }
    }
}
var net = function(obj){
    var align = $G("alignment"),
        url = $G("url"),
        custom = $G("custom");
    if(obj.value == "none"){
        align.style.display = "none";
        custom.style.display = "none";
        if ( browser.ie ) {
            url.onpropertychange = null;
        }else{
            url.removeEventListener("input",setBody);
        }
    }else{
        bindSelfPos();
        $G("repeatType").style.display="";
        align.style.display = "";
        if ( browser.ie ) {
            url.onpropertychange = setBody;
        } else {
            url.addEventListener( "input", setBody, false );
        }
    }
    setBody();
};
//给自定义位置绑定事件
var bindSelfPos = function(){
    var x = $G("x"),
        y = $G("y");
    domUtils.on(x,["propertychange","input","keydown"],function(evt){
        bindkeydown(evt,this);
    });
    domUtils.on(y,["propertychange","input","keydown"],function(evt){
        bindkeydown(evt,this);
    });
    function bindkeydown(evt,obj){
        evt = evt || event;
        if(evt.keyCode==38||evt.keyCode==40){
            obj.value = evt.keyCode == 38 ? parseInt(obj.value)+1 : parseInt(obj.value)-1;
            if(obj.value<0){
                obj.value = 0;
            }
        }else{
            if(evt.keyCode<48&&evt.keyCode>57){
                domUtils.preventDefault(evt);
            }
        }
        setBody();
    }
};
var showAlign = function(){
    $G("alignment").style.display = "";
};
var selectAlign = function(obj){
    $G("custom").style.display = obj.value == "self" ? "" : "none";
    setBody();
};
//给body增加样式和背景图片
var setBody=function(){
    var color = domUtils.getStyle(cp,"background-color"),
        bgimg = $G("url").value,
        align = $G("repeatType").value,
        alignObj = {
            "background-repeat":"no-repeat",
            "background-position":"center center"
        },
        outstr = [];
        if(color)
        alignObj["background-color"] = color;
        if(bgimg)
        alignObj["background-image"] = 'url("'+bgimg+'")';
        switch(align){
            case "repeat-x":
                alignObj["background-repeat"] = "repeat-x;";
                break;
            case "repeat-y":
                alignObj["background-repeat"] = "repeat-y;";
                break;
            case "repeat":
                alignObj["background-repeat"] = "repeat;";
                break;
            case "self":
                alignObj["background-position"] = $G("x").value+"px "+$G("y").value+"px";
                break;
        }
    for ( var name in alignObj ) {
        if ( alignObj.hasOwnProperty( name ) ) {
            outstr.push(name+":"+alignObj[name]);
        }
    }
    if(getCheckIpt()!="none"){
        setStyleSheet(outstr.join(";"));
    }else{
        setStyleSheet(" ");
    }
};
function getStyleSheet(){
    bodyStyle = doc.getElementsByTagName("head")[0].lastChild;
    if(/style/ig.test(bodyStyle.tagName)){
        var len = doc.styleSheets.length-1;
        var ss = new Stylesheet(len);
        bkbodyStyle = ss.getStyleText(0);
    }else{
        bodyStyle = null;
    }
}

var setStyleSheet = function(stylestr){
    if(bodyStyle){
        var len = doc.styleSheets.length-1;
        var ss = new Stylesheet(len);
        ss.insertRule("body",stylestr);
    }else{
        if(browser.ie){
            bodyStyle = doc.createStyleSheet();
            bodyStyle.cssText = stylestr;
        }else{
            bodyStyle = domUtils.creElm(doc,"style",{"type":"text/css"});
            bodyStyle.innerHTML = stylestr;
            doc.head.appendChild(bodyStyle);
        }
    }
    bkbodyStyle = bkbodyStyle||stylestr;
};
dialog.onok = function(){
    setBody();
};
dialog.oncancel = function(){
        var len = doc.styleSheets.length-1;
        var ss = new Stylesheet(len);
        ss.insertRule("body",bkbodyStyle||" ");
};
getStyleSheet();