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