123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348 |
- 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("_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);
|