You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

375 lines
14 KiB

3 years ago
  1. (function () {
  2. var onlineImage,
  3. backupStyle = editor.queryCommandValue('background');
  4. window.onload = function () {
  5. initTabs();
  6. initColorSelector();
  7. };
  8. /* 初始化tab标签 */
  9. function initTabs(){
  10. var tabs = $G('tabHeads').children;
  11. for (var i = 0; i < tabs.length; i++) {
  12. domUtils.on(tabs[i], "click", function (e) {
  13. var target = e.target || e.srcElement;
  14. for (var j = 0; j < tabs.length; j++) {
  15. if(tabs[j] == target){
  16. tabs[j].className = "focus";
  17. var contentId = tabs[j].getAttribute('data-content-id');
  18. $G(contentId).style.display = "block";
  19. if(contentId == 'imgManager') {
  20. initImagePanel();
  21. }
  22. }else {
  23. tabs[j].className = "";
  24. $G(tabs[j].getAttribute('data-content-id')).style.display = "none";
  25. }
  26. }
  27. });
  28. }
  29. }
  30. /* 初始化颜色设置 */
  31. function initColorSelector () {
  32. var obj = editor.queryCommandValue('background');
  33. if (obj) {
  34. var color = obj['background-color'],
  35. repeat = obj['background-repeat'] || 'repeat',
  36. image = obj['background-image'] || '',
  37. position = obj['background-position'] || 'center center',
  38. pos = position.split(' '),
  39. x = parseInt(pos[0]) || 0,
  40. y = parseInt(pos[1]) || 0;
  41. if(repeat == 'no-repeat' && (x || y)) repeat = 'self';
  42. image = image.match(/url[\s]*\(([^\)]*)\)/);
  43. image = image ? image[1]:'';
  44. updateFormState('colored', color, image, repeat, x, y);
  45. } else {
  46. updateFormState();
  47. }
  48. var updateHandler = function () {
  49. updateFormState();
  50. updateBackground();
  51. }
  52. domUtils.on($G('nocolorRadio'), 'click', updateBackground);
  53. domUtils.on($G('coloredRadio'), 'click', updateHandler);
  54. domUtils.on($G('url'), 'keyup', function(){
  55. if($G('url').value && $G('alignment').style.display == "none") {
  56. utils.each($G('repeatType').children, function(item){
  57. item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false);
  58. });
  59. }
  60. updateHandler();
  61. });
  62. domUtils.on($G('repeatType'), 'change', updateHandler);
  63. domUtils.on($G('x'), 'keyup', updateBackground);
  64. domUtils.on($G('y'), 'keyup', updateBackground);
  65. initColorPicker();
  66. }
  67. /* 初始化颜色选择器 */
  68. function initColorPicker() {
  69. var me = editor,
  70. cp = $G("colorPicker");
  71. /* 生成颜色选择器ui对象 */
  72. var popup = new UE.ui.Popup({
  73. content: new UE.ui.ColorPicker({
  74. noColorText: me.getLang("clearColor"),
  75. editor: me,
  76. onpickcolor: function (t, color) {
  77. updateFormState('colored', color);
  78. updateBackground();
  79. UE.ui.Popup.postHide();
  80. },
  81. onpicknocolor: function (t, color) {
  82. updateFormState('colored', 'transparent');
  83. updateBackground();
  84. UE.ui.Popup.postHide();
  85. }
  86. }),
  87. editor: me,
  88. onhide: function () {
  89. }
  90. });
  91. /* 设置颜色选择器 */
  92. domUtils.on(cp, "click", function () {
  93. popup.showAnchor(this);
  94. });
  95. domUtils.on(document, 'mousedown', function (evt) {
  96. var el = evt.target || evt.srcElement;
  97. UE.ui.Popup.postHide(el);
  98. });
  99. domUtils.on(window, 'scroll', function () {
  100. UE.ui.Popup.postHide();
  101. });
  102. }
  103. /* 初始化在线图片列表 */
  104. function initImagePanel() {
  105. onlineImage = onlineImage || new OnlineImage('imageList');
  106. }
  107. /* 更新背景色设置面板 */
  108. function updateFormState (radio, color, url, align, x, y) {
  109. var nocolorRadio = $G('nocolorRadio'),
  110. coloredRadio = $G('coloredRadio');
  111. if(radio) {
  112. nocolorRadio.checked = (radio == 'colored' ? false:'checked');
  113. coloredRadio.checked = (radio == 'colored' ? 'checked':false);
  114. }
  115. if(color) {
  116. domUtils.setStyle($G("colorPicker"), "background-color", color);
  117. }
  118. if(url && /^\//.test(url)) {
  119. var a = document.createElement('a');
  120. a.href = url;
  121. browser.ie && (a.href = a.href);
  122. url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash);
  123. }
  124. if(url || url === '') {
  125. $G('url').value = url;
  126. }
  127. if(align) {
  128. utils.each($G('repeatType').children, function(item){
  129. item.selected = (align == item.getAttribute('value') ? 'selected':false);
  130. });
  131. }
  132. if(x || y) {
  133. $G('x').value = parseInt(x) || 0;
  134. $G('y').value = parseInt(y) || 0;
  135. }
  136. $G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
  137. $G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none';
  138. }
  139. /* 更新背景颜色 */
  140. function updateBackground () {
  141. if ($G('coloredRadio').checked) {
  142. var color = domUtils.getStyle($G("colorPicker"), "background-color"),
  143. bgimg = $G("url").value,
  144. align = $G("repeatType").value,
  145. backgroundObj = {
  146. "background-repeat": "no-repeat",
  147. "background-position": "center center"
  148. };
  149. if (color) backgroundObj["background-color"] = color;
  150. if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')';
  151. if (align == 'self') {
  152. backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
  153. } else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') {
  154. backgroundObj["background-repeat"] = align;
  155. }
  156. editor.execCommand('background', backgroundObj);
  157. } else {
  158. editor.execCommand('background', null);
  159. }
  160. }
  161. /* 在线图片 */
  162. function OnlineImage(target) {
  163. this.container = utils.isString(target) ? document.getElementById(target) : target;
  164. this.init();
  165. }
  166. OnlineImage.prototype = {
  167. init: function () {
  168. this.reset();
  169. this.initEvents();
  170. },
  171. /* 初始化容器 */
  172. initContainer: function () {
  173. this.container.innerHTML = '';
  174. this.list = document.createElement('ul');
  175. this.clearFloat = document.createElement('li');
  176. domUtils.addClass(this.list, 'list');
  177. domUtils.addClass(this.clearFloat, 'clearFloat');
  178. this.list.id = 'imageListUl';
  179. this.list.appendChild(this.clearFloat);
  180. this.container.appendChild(this.list);
  181. },
  182. /* 初始化滚动事件,滚动到地步自动拉取数据 */
  183. initEvents: function () {
  184. var _this = this;
  185. /* 滚动拉取图片 */
  186. domUtils.on($G('imageList'), 'scroll', function(e){
  187. var panel = this;
  188. if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
  189. _this.getImageData();
  190. }
  191. });
  192. /* 选中图片 */
  193. domUtils.on(this.container, 'click', function (e) {
  194. var target = e.target || e.srcElement,
  195. li = target.parentNode,
  196. nodes = $G('imageListUl').childNodes;
  197. if (li.tagName.toLowerCase() == 'li') {
  198. updateFormState('nocolor', null, '');
  199. for (var i = 0, node; node = nodes[i++];) {
  200. if (node == li && !domUtils.hasClass(node, 'selected')) {
  201. domUtils.addClass(node, 'selected');
  202. updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat');
  203. } else {
  204. domUtils.removeClasses(node, 'selected');
  205. }
  206. }
  207. updateBackground();
  208. }
  209. });
  210. },
  211. /* 初始化第一次的数据 */
  212. initData: function () {
  213. /* 拉取数据需要使用的值 */
  214. this.state = 0;
  215. this.listSize = editor.getOpt('imageManagerListSize');
  216. this.listIndex = 0;
  217. this.listEnd = false;
  218. /* 第一次拉取数据 */
  219. this.getImageData();
  220. },
  221. /* 重置界面 */
  222. reset: function() {
  223. this.initContainer();
  224. this.initData();
  225. },
  226. /* 向后台拉取图片列表数据 */
  227. getImageData: function () {
  228. var _this = this;
  229. if(!_this.listEnd && !this.isLoadingData) {
  230. this.isLoadingData = true;
  231. var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
  232. isJsonp = utils.isCrossDomainUrl(url);
  233. ajax.request(url, {
  234. 'timeout': 100000,
  235. 'dataType': isJsonp ? 'jsonp':'',
  236. 'data': utils.extend({
  237. start: this.listIndex,
  238. size: this.listSize
  239. }, editor.queryCommandValue('serverparam')),
  240. 'method': 'get',
  241. 'onsuccess': function (r) {
  242. try {
  243. var json = isJsonp ? r:eval('(' + r.responseText + ')');
  244. if (json.state == 'SUCCESS') {
  245. _this.pushData(json.list);
  246. _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
  247. if(_this.listIndex >= json.total) {
  248. _this.listEnd = true;
  249. }
  250. _this.isLoadingData = false;
  251. }
  252. } catch (e) {
  253. if(r.responseText.indexOf('ue_separate_ue') != -1) {
  254. var list = r.responseText.split(r.responseText);
  255. _this.pushData(list);
  256. _this.listIndex = parseInt(list.length);
  257. _this.listEnd = true;
  258. _this.isLoadingData = false;
  259. }
  260. }
  261. },
  262. 'onerror': function () {
  263. _this.isLoadingData = false;
  264. }
  265. });
  266. }
  267. },
  268. /* 添加图片到列表界面上 */
  269. pushData: function (list) {
  270. var i, item, img, icon, _this = this,
  271. urlPrefix = editor.getOpt('imageManagerUrlPrefix');
  272. for (i = 0; i < list.length; i++) {
  273. if(list[i] && list[i].url) {
  274. item = document.createElement('li');
  275. img = document.createElement('img');
  276. icon = document.createElement('span');
  277. domUtils.on(img, 'load', (function(image){
  278. return function(){
  279. _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
  280. }
  281. })(img));
  282. img.width = 113;
  283. img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
  284. img.setAttribute('_src', urlPrefix + list[i].url);
  285. domUtils.addClass(icon, 'icon');
  286. item.appendChild(img);
  287. item.appendChild(icon);
  288. this.list.insertBefore(item, this.clearFloat);
  289. }
  290. }
  291. },
  292. /* 改变图片大小 */
  293. scale: function (img, w, h, type) {
  294. var ow = img.width,
  295. oh = img.height;
  296. if (type == 'justify') {
  297. if (ow >= oh) {
  298. img.width = w;
  299. img.height = h * oh / ow;
  300. img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
  301. } else {
  302. img.width = w * ow / oh;
  303. img.height = h;
  304. img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
  305. }
  306. } else {
  307. if (ow >= oh) {
  308. img.width = w * ow / oh;
  309. img.height = h;
  310. img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
  311. } else {
  312. img.width = w;
  313. img.height = h * oh / ow;
  314. img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
  315. }
  316. }
  317. },
  318. getInsertList: function () {
  319. var i, lis = this.list.children, list = [], align = getAlign();
  320. for (i = 0; i < lis.length; i++) {
  321. if (domUtils.hasClass(lis[i], 'selected')) {
  322. var img = lis[i].firstChild,
  323. src = img.getAttribute('_src');
  324. list.push({
  325. src: src,
  326. _src: src,
  327. floatStyle: align
  328. });
  329. }
  330. }
  331. return list;
  332. }
  333. };
  334. dialog.onok = function () {
  335. updateBackground();
  336. editor.fireEvent('saveScene');
  337. };
  338. dialog.oncancel = function () {
  339. editor.execCommand('background', backupStyle);
  340. };
  341. })();