6be89fb23ff2ddd694c2e6d72a5d3ccaa506bda4.svn-base 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. var me = editor,
  2. doc = me.document,
  3. bodyStyle,
  4. cp = $G("colorPicker"),
  5. bkbodyStyle = "",
  6. bkcolor = "";
  7. var popup = new UE.ui.Popup({
  8. content:new UE.ui.ColorPicker({
  9. noColorText:me.getLang("clearColor"),
  10. editor:me,
  11. onpickcolor:function (t, color) {
  12. domUtils.setStyle(cp, "background-color", color);
  13. bkcolor = color;
  14. UE.ui.Popup.postHide();
  15. },
  16. onpicknocolor:function (t, color) {
  17. domUtils.setStyle(cp, "background-color", "transparent");
  18. bkcolor = "";
  19. UE.ui.Popup.postHide();
  20. }
  21. }),
  22. editor:me,
  23. onhide:function () {
  24. setBody();
  25. }
  26. });
  27. domUtils.on(cp, "click", function () {
  28. popup.showAnchor(this);
  29. });
  30. domUtils.on(document, 'mousedown', function (evt) {
  31. var el = evt.target || evt.srcElement;
  32. UE.ui.Popup.postHide(el);
  33. });
  34. domUtils.on(window, 'scroll', function () {
  35. UE.ui.Popup.postHide();
  36. });
  37. //获得head
  38. var getHead = function () {
  39. return domUtils.getElementsByTagName($G("tabHeads"), "span");
  40. };
  41. //给head绑定事件
  42. var bindClick = function () {
  43. var heads = getHead();
  44. for (var i = 0, head; head = heads[i++];) {
  45. head.onclick = function () {
  46. var bodyid = this.getAttribute("tabsrc");
  47. toggleHead(this);
  48. toggleBody(bodyid);
  49. if (bodyid == "imgManager") {
  50. ajax.request(editor.options.imageManagerUrl, {
  51. timeout:100000,
  52. action:"get",
  53. onsuccess:function (xhr) {
  54. var tmp = utils.trim(xhr.responseText),
  55. imageUrls = !tmp ? [] : tmp.split("ue_separate_ue"),
  56. length = imageUrls.length,
  57. imgList = $G("imageList");
  58. imgList.innerHTML = !length ? "  " + lang.noUploadImage : "";
  59. for (var k = 0, ci; ci = imageUrls[k++];) {
  60. var img = document.createElement("img");
  61. var div = document.createElement("div");
  62. div.appendChild(img);
  63. div.style.display = "none";
  64. imgList.appendChild(div);
  65. img.onclick = function () {
  66. var nodes = imgList.childNodes;
  67. for (var i = 0, node; node = nodes[i++];) {
  68. node.firstChild.removeAttribute("selected");
  69. node.firstChild.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
  70. }
  71. changeSelected(this);
  72. };
  73. img.onload = function () {
  74. this.parentNode.style.display = "";
  75. var w = this.width, h = this.height;
  76. scale(this, 95, 120, 80);
  77. this.title = lang.toggleSelect + w + "X" + h;
  78. };
  79. img.setAttribute(k < 35 ? "src" : "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
  80. img.setAttribute("_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
  81. }
  82. },
  83. onerror:function () {
  84. $G("imageList").innerHTML = lang.imageLoadError;
  85. }
  86. });
  87. } else {
  88. var radios = document.getElementsByName("t");
  89. for (var i = 0, r; r = radios[i++];) {
  90. if (r.checked && r.value != "none") {
  91. $G("repeatType").style.display = "";
  92. net(r);
  93. }
  94. }
  95. }
  96. }
  97. }
  98. };
  99. /**
  100. * 改变o的选中状态
  101. * @param o
  102. */
  103. function changeSelected(o) {
  104. if (o.getAttribute("selected")) {
  105. o.removeAttribute("selected");
  106. o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
  107. } else {
  108. o.setAttribute("selected", "true");
  109. o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
  110. }
  111. $G("url").value = o.getAttribute("src")
  112. }
  113. /**
  114. * 图片缩放
  115. * @param img
  116. * @param max
  117. */
  118. function scale(img, max, oWidth, oHeight) {
  119. var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
  120. if (ow > max || oh > max) {
  121. if (ow >= oh) {
  122. if (width = ow - max) {
  123. percent = (width / ow).toFixed(2);
  124. img.height = oh - oh * percent;
  125. img.width = max;
  126. }
  127. } else {
  128. if (height = oh - max) {
  129. percent = (height / oh).toFixed(2);
  130. img.width = ow - ow * percent;
  131. img.height = max;
  132. }
  133. }
  134. }
  135. }
  136. //切换body
  137. var toggleBody = function (id) {
  138. var bodys = ["normal", "imgManager"];
  139. for (var i = 0, body; body = bodys[i++];) {
  140. $G(body).style.zIndex = body == id ? 200 : 1;
  141. }
  142. };
  143. //切换head
  144. var toggleHead = function (obj) {
  145. var heads = getHead();
  146. for (var i = 0, head; head = heads[i++];) {
  147. domUtils.removeClasses(head, ["focus"]);
  148. $G("repeatType").style.display = "none";
  149. }
  150. domUtils.addClass(obj, "focus");
  151. };
  152. //获得当前选中的tab
  153. var getCheckedTab = function () {
  154. var heads = getHead();
  155. for (var i = 0, head; head = heads[i++];) {
  156. if (domUtils.hasClass(head, "focus")) {
  157. return head;
  158. }
  159. }
  160. };
  161. var init = function () {
  162. bindClick();
  163. var el = getHead()[0],
  164. bodyid = el.getAttribute("tabsrc");
  165. toggleHead(el);
  166. toggleBody(bodyid);
  167. $G("alignment").style.display = "none";
  168. $G("custom").style.display = "none";
  169. //初始化颜色
  170. domUtils.setStyle(cp, "background-color", domUtils.getComputedStyle(doc.body, "background-color"));
  171. var color = domUtils.getComputedStyle(doc.body, "background-color");
  172. if ((color && color != "#ffffff" && color != "transparent") || domUtils.getComputedStyle(doc.body, "background-image") != "none") {
  173. setTimeout(function () {
  174. document.getElementsByName("t")[1].click();
  175. }, 200);
  176. }
  177. initImgUrl();
  178. initSelfPos();
  179. initAlign();
  180. };
  181. //初始化自定义位置
  182. function initSelfPos() {
  183. var x, y;
  184. if (browser.ie) {
  185. x = domUtils.getComputedStyle(doc.body, "background-position-x").replace(/50%|%|px|center/ig, "");
  186. y = domUtils.getComputedStyle(doc.body, "background-position-y").replace(/50%|%|px|center/ig, "");
  187. } else {
  188. var arr = domUtils.getComputedStyle(doc.body, "background-position").match(/\s?(\d*)px/ig);
  189. if (arr && arr.length) {
  190. x = arr[0].replace("px", "");
  191. y = arr[1].replace("px", "");
  192. }
  193. }
  194. $G("x").value = x || 0;
  195. $G("y").value = y || 0;
  196. }
  197. //初始化图片地址
  198. function initImgUrl() {
  199. var su = domUtils.getComputedStyle(doc.body, "background-image"),
  200. url = "";
  201. if (su.indexOf(me.options.imagePath) > 0) {
  202. url = su.match(/url\("?(.*[^\)"])"?/i);
  203. if (url && url.length) {
  204. url = url[1].substring(url[1].indexOf(me.options.imagePath), url[1].length);
  205. }
  206. } else {
  207. url = su != "none" ? su.replace(/url\("?|"?\)/ig, "") : "";
  208. }
  209. $G("url").value = url;
  210. }
  211. //初始化定位
  212. function initAlign() {
  213. var align = domUtils.getComputedStyle(doc.body, "background-repeat"),
  214. alignType = $G("repeatType");
  215. if (align == "no-repeat") {
  216. var pos = domUtils.getComputedStyle(doc.body, browser.ie ? "background-position-x" : "background-position");
  217. alignType.value = pos && pos.match(/\s?(\d*)px/ig) ? "self" : "center";
  218. if (pos == "center") {
  219. alignType.value = "center";
  220. }
  221. $G("custom").style.display = alignType.value == "self" ? "" : "none";
  222. } else {
  223. alignType.value = align;
  224. }
  225. }
  226. init();
  227. //获得选中的类型
  228. function getCheckIpt() {
  229. var ipts = document.getElementsByName("t");
  230. for (var i = 0, ipt; ipt = ipts[i++];) {
  231. if (ipt.checked) {
  232. return ipt.value;
  233. }
  234. }
  235. }
  236. var net = function (obj) {
  237. var align = $G("alignment"),
  238. url = $G("url"),
  239. custom = $G("custom");
  240. if (obj.value == "none") {
  241. align.style.display = "none";
  242. custom.style.display = "none";
  243. if (browser.ie) {
  244. url.onpropertychange = null;
  245. } else {
  246. url.removeEventListener("input", setBody);
  247. }
  248. } else {
  249. bindSelfPos();
  250. $G("repeatType").style.display = "";
  251. align.style.display = "";
  252. if (browser.ie) {
  253. url.onpropertychange = setBody;
  254. } else {
  255. url.addEventListener("input", setBody, false);
  256. }
  257. }
  258. setBody();
  259. };
  260. //给自定义位置绑定事件
  261. var bindSelfPos = function () {
  262. var x = $G("x"),
  263. y = $G("y");
  264. domUtils.on(x, ["propertychange", "input", "keydown"], function (evt) {
  265. bindkeydown(evt, this);
  266. });
  267. domUtils.on(y, ["propertychange", "input", "keydown"], function (evt) {
  268. bindkeydown(evt, this);
  269. });
  270. function bindkeydown(evt, obj) {
  271. evt = evt || event;
  272. if (evt.keyCode == 38 || evt.keyCode == 40) {
  273. obj.value = evt.keyCode == 38 ? parseInt(obj.value) + 1 : parseInt(obj.value) - 1;
  274. if (obj.value < 0) {
  275. obj.value = 0;
  276. }
  277. } else {
  278. if (evt.keyCode < 48 && evt.keyCode > 57) {
  279. domUtils.preventDefault(evt);
  280. }
  281. }
  282. setBody();
  283. }
  284. };
  285. var showAlign = function () {
  286. $G("alignment").style.display = "";
  287. };
  288. var selectAlign = function (obj) {
  289. $G("custom").style.display = obj.value == "self" ? "" : "none";
  290. setBody();
  291. };
  292. //给body增加样式和背景图片
  293. var setBody = function () {
  294. var color = domUtils.getStyle(cp, "background-color"),
  295. bgimg = $G("url").value,
  296. align = $G("repeatType").value,
  297. alignObj = {
  298. "background-repeat":"no-repeat",
  299. "background-position":"center center"
  300. },
  301. outstr = [];
  302. if (color)
  303. alignObj["background-color"] = color;
  304. if (bgimg)
  305. alignObj["background-image"] = 'url("' + bgimg + '")';
  306. switch (align) {
  307. case "repeat-x":
  308. alignObj["background-repeat"] = "repeat-x;";
  309. break;
  310. case "repeat-y":
  311. alignObj["background-repeat"] = "repeat-y;";
  312. break;
  313. case "repeat":
  314. alignObj["background-repeat"] = "repeat;";
  315. break;
  316. case "self":
  317. alignObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
  318. break;
  319. }
  320. for (var name in alignObj) {
  321. if (alignObj.hasOwnProperty(name)) {
  322. outstr.push(name + ":" + alignObj[name]);
  323. }
  324. }
  325. if (getCheckIpt() != "none") {
  326. utils.cssRule('body','body{' + outstr.join(";") + '}',doc);
  327. } else {
  328. utils.cssRule('body','',doc)
  329. }
  330. };
  331. dialog.onok = function () {
  332. setBody();
  333. };
  334. dialog.oncancel = function () {
  335. utils.cssRule('body',bkbodyStyle,doc)
  336. };
  337. bkbodyStyle = utils.cssRule('body',undefined,doc);