348 lines
11 KiB
JavaScript
348 lines
11 KiB
JavaScript
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("tabHeads"), "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 = "";
|
||
net(r);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
/**
|
||
* ¸Ä±ä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();
|
||
var el = getHead()[0],
|
||
bodyid = el.getAttribute("tabsrc");
|
||
toggleHead(el);
|
||
toggleBody(bodyid);
|
||
$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 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") {
|
||
utils.cssRule('body','body{' + outstr.join(";") + '}',doc);
|
||
|
||
} else {
|
||
|
||
utils.cssRule('body','',doc)
|
||
}
|
||
};
|
||
|
||
|
||
|
||
dialog.onok = function () {
|
||
setBody();
|
||
};
|
||
dialog.oncancel = function () {
|
||
utils.cssRule('body',bkbodyStyle,doc)
|
||
};
|
||
bkbodyStyle = utils.cssRule('body',undefined,doc); |