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.
376 lines
14 KiB
376 lines
14 KiB
(function () { |
|
|
|
var onlineImage, |
|
backupStyle = editor.queryCommandValue('background'); |
|
|
|
window.onload = function () { |
|
initTabs(); |
|
initColorSelector(); |
|
}; |
|
|
|
/* 初始化tab标签 */ |
|
function initTabs(){ |
|
var tabs = $G('tabHeads').children; |
|
for (var i = 0; i < tabs.length; i++) { |
|
domUtils.on(tabs[i], "click", function (e) { |
|
var target = e.target || e.srcElement; |
|
for (var j = 0; j < tabs.length; j++) { |
|
if(tabs[j] == target){ |
|
tabs[j].className = "focus"; |
|
var contentId = tabs[j].getAttribute('data-content-id'); |
|
$G(contentId).style.display = "block"; |
|
if(contentId == 'imgManager') { |
|
initImagePanel(); |
|
} |
|
}else { |
|
tabs[j].className = ""; |
|
$G(tabs[j].getAttribute('data-content-id')).style.display = "none"; |
|
} |
|
} |
|
}); |
|
} |
|
} |
|
|
|
/* 初始化颜色设置 */ |
|
function initColorSelector () { |
|
var obj = editor.queryCommandValue('background'); |
|
if (obj) { |
|
var color = obj['background-color'], |
|
repeat = obj['background-repeat'] || 'repeat', |
|
image = obj['background-image'] || '', |
|
position = obj['background-position'] || 'center center', |
|
pos = position.split(' '), |
|
x = parseInt(pos[0]) || 0, |
|
y = parseInt(pos[1]) || 0; |
|
|
|
if(repeat == 'no-repeat' && (x || y)) repeat = 'self'; |
|
|
|
image = image.match(/url[\s]*\(([^\)]*)\)/); |
|
image = image ? image[1]:''; |
|
updateFormState('colored', color, image, repeat, x, y); |
|
} else { |
|
updateFormState(); |
|
} |
|
|
|
var updateHandler = function () { |
|
updateFormState(); |
|
updateBackground(); |
|
} |
|
domUtils.on($G('nocolorRadio'), 'click', updateBackground); |
|
domUtils.on($G('coloredRadio'), 'click', updateHandler); |
|
domUtils.on($G('url'), 'keyup', function(){ |
|
if($G('url').value && $G('alignment').style.display == "none") { |
|
utils.each($G('repeatType').children, function(item){ |
|
item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false); |
|
}); |
|
} |
|
updateHandler(); |
|
}); |
|
domUtils.on($G('repeatType'), 'change', updateHandler); |
|
domUtils.on($G('x'), 'keyup', updateBackground); |
|
domUtils.on($G('y'), 'keyup', updateBackground); |
|
|
|
initColorPicker(); |
|
} |
|
|
|
/* 初始化颜色选择器 */ |
|
function initColorPicker() { |
|
var me = editor, |
|
cp = $G("colorPicker"); |
|
|
|
/* 生成颜色选择器ui对象 */ |
|
var popup = new UE.ui.Popup({ |
|
content: new UE.ui.ColorPicker({ |
|
noColorText: me.getLang("clearColor"), |
|
editor: me, |
|
onpickcolor: function (t, color) { |
|
updateFormState('colored', color); |
|
updateBackground(); |
|
UE.ui.Popup.postHide(); |
|
}, |
|
onpicknocolor: function (t, color) { |
|
updateFormState('colored', 'transparent'); |
|
updateBackground(); |
|
UE.ui.Popup.postHide(); |
|
} |
|
}), |
|
editor: me, |
|
onhide: function () { |
|
} |
|
}); |
|
|
|
/* 设置颜色选择器 */ |
|
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(); |
|
}); |
|
} |
|
|
|
/* 初始化在线图片列表 */ |
|
function initImagePanel() { |
|
onlineImage = onlineImage || new OnlineImage('imageList'); |
|
} |
|
|
|
/* 更新背景色设置面板 */ |
|
function updateFormState (radio, color, url, align, x, y) { |
|
var nocolorRadio = $G('nocolorRadio'), |
|
coloredRadio = $G('coloredRadio'); |
|
|
|
if(radio) { |
|
nocolorRadio.checked = (radio == 'colored' ? false:'checked'); |
|
coloredRadio.checked = (radio == 'colored' ? 'checked':false); |
|
} |
|
if(color) { |
|
domUtils.setStyle($G("colorPicker"), "background-color", color); |
|
} |
|
|
|
if(url && /^\//.test(url)) { |
|
var a = document.createElement('a'); |
|
a.href = url; |
|
browser.ie && (a.href = a.href); |
|
url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash); |
|
} |
|
|
|
if(url || url === '') { |
|
$G('url').value = url; |
|
} |
|
if(align) { |
|
utils.each($G('repeatType').children, function(item){ |
|
item.selected = (align == item.getAttribute('value') ? 'selected':false); |
|
}); |
|
} |
|
if(x || y) { |
|
$G('x').value = parseInt(x) || 0; |
|
$G('y').value = parseInt(y) || 0; |
|
} |
|
|
|
$G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none'; |
|
$G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none'; |
|
} |
|
|
|
/* 更新背景颜色 */ |
|
function updateBackground () { |
|
if ($G('coloredRadio').checked) { |
|
var color = domUtils.getStyle($G("colorPicker"), "background-color"), |
|
bgimg = $G("url").value, |
|
align = $G("repeatType").value, |
|
backgroundObj = { |
|
"background-repeat": "no-repeat", |
|
"background-position": "center center" |
|
}; |
|
|
|
if (color) backgroundObj["background-color"] = color; |
|
if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')'; |
|
if (align == 'self') { |
|
backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px"; |
|
} else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') { |
|
backgroundObj["background-repeat"] = align; |
|
} |
|
|
|
editor.execCommand('background', backgroundObj); |
|
} else { |
|
editor.execCommand('background', null); |
|
} |
|
} |
|
|
|
|
|
/* 在线图片 */ |
|
function OnlineImage(target) { |
|
this.container = utils.isString(target) ? document.getElementById(target) : target; |
|
this.init(); |
|
} |
|
OnlineImage.prototype = { |
|
init: function () { |
|
this.reset(); |
|
this.initEvents(); |
|
}, |
|
/* 初始化容器 */ |
|
initContainer: function () { |
|
this.container.innerHTML = ''; |
|
this.list = document.createElement('ul'); |
|
this.clearFloat = document.createElement('li'); |
|
|
|
domUtils.addClass(this.list, 'list'); |
|
domUtils.addClass(this.clearFloat, 'clearFloat'); |
|
|
|
this.list.id = 'imageListUl'; |
|
this.list.appendChild(this.clearFloat); |
|
this.container.appendChild(this.list); |
|
}, |
|
/* 初始化滚动事件,滚动到地步自动拉取数据 */ |
|
initEvents: function () { |
|
var _this = this; |
|
|
|
/* 滚动拉取图片 */ |
|
domUtils.on($G('imageList'), 'scroll', function(e){ |
|
var panel = this; |
|
if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) { |
|
_this.getImageData(); |
|
} |
|
}); |
|
/* 选中图片 */ |
|
domUtils.on(this.container, 'click', function (e) { |
|
var target = e.target || e.srcElement, |
|
li = target.parentNode, |
|
nodes = $G('imageListUl').childNodes; |
|
|
|
if (li.tagName.toLowerCase() == 'li') { |
|
updateFormState('nocolor', null, ''); |
|
for (var i = 0, node; node = nodes[i++];) { |
|
if (node == li && !domUtils.hasClass(node, 'selected')) { |
|
domUtils.addClass(node, 'selected'); |
|
updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat'); |
|
} else { |
|
domUtils.removeClasses(node, 'selected'); |
|
} |
|
} |
|
updateBackground(); |
|
} |
|
}); |
|
}, |
|
/* 初始化第一次的数据 */ |
|
initData: function () { |
|
|
|
/* 拉取数据需要使用的值 */ |
|
this.state = 0; |
|
this.listSize = editor.getOpt('imageManagerListSize'); |
|
this.listIndex = 0; |
|
this.listEnd = false; |
|
|
|
/* 第一次拉取数据 */ |
|
this.getImageData(); |
|
}, |
|
/* 重置界面 */ |
|
reset: function() { |
|
this.initContainer(); |
|
this.initData(); |
|
}, |
|
/* 向后台拉取图片列表数据 */ |
|
getImageData: function () { |
|
var _this = this; |
|
|
|
if(!_this.listEnd && !this.isLoadingData) { |
|
this.isLoadingData = true; |
|
var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')), |
|
isJsonp = utils.isCrossDomainUrl(url); |
|
ajax.request(url, { |
|
'timeout': 100000, |
|
'dataType': isJsonp ? 'jsonp':'', |
|
'data': utils.extend({ |
|
start: this.listIndex, |
|
size: this.listSize |
|
}, editor.queryCommandValue('serverparam')), |
|
'method': 'get', |
|
'onsuccess': function (r) { |
|
try { |
|
var json = isJsonp ? r:eval('(' + r.responseText + ')'); |
|
if (json.state == 'SUCCESS') { |
|
_this.pushData(json.list); |
|
_this.listIndex = parseInt(json.start) + parseInt(json.list.length); |
|
if(_this.listIndex >= json.total) { |
|
_this.listEnd = true; |
|
} |
|
_this.isLoadingData = false; |
|
} |
|
} catch (e) { |
|
if(r.responseText.indexOf('ue_separate_ue') != -1) { |
|
var list = r.responseText.split(r.responseText); |
|
_this.pushData(list); |
|
_this.listIndex = parseInt(list.length); |
|
_this.listEnd = true; |
|
_this.isLoadingData = false; |
|
} |
|
} |
|
}, |
|
'onerror': function () { |
|
_this.isLoadingData = false; |
|
} |
|
}); |
|
} |
|
}, |
|
/* 添加图片到列表界面上 */ |
|
pushData: function (list) { |
|
var i, item, img, icon, _this = this, |
|
urlPrefix = editor.getOpt('imageManagerUrlPrefix'); |
|
for (i = 0; i < list.length; i++) { |
|
if(list[i] && list[i].url) { |
|
item = document.createElement('li'); |
|
img = document.createElement('img'); |
|
icon = document.createElement('span'); |
|
|
|
domUtils.on(img, 'load', (function(image){ |
|
return function(){ |
|
_this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight); |
|
} |
|
})(img)); |
|
img.width = 113; |
|
img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) ); |
|
img.setAttribute('_src', urlPrefix + list[i].url); |
|
domUtils.addClass(icon, 'icon'); |
|
|
|
item.appendChild(img); |
|
item.appendChild(icon); |
|
this.list.insertBefore(item, this.clearFloat); |
|
} |
|
} |
|
}, |
|
/* 改变图片大小 */ |
|
scale: function (img, w, h, type) { |
|
var ow = img.width, |
|
oh = img.height; |
|
|
|
if (type == 'justify') { |
|
if (ow >= oh) { |
|
img.width = w; |
|
img.height = h * oh / ow; |
|
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; |
|
} else { |
|
img.width = w * ow / oh; |
|
img.height = h; |
|
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; |
|
} |
|
} else { |
|
if (ow >= oh) { |
|
img.width = w * ow / oh; |
|
img.height = h; |
|
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; |
|
} else { |
|
img.width = w; |
|
img.height = h * oh / ow; |
|
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; |
|
} |
|
} |
|
}, |
|
getInsertList: function () { |
|
var i, lis = this.list.children, list = [], align = getAlign(); |
|
for (i = 0; i < lis.length; i++) { |
|
if (domUtils.hasClass(lis[i], 'selected')) { |
|
var img = lis[i].firstChild, |
|
src = img.getAttribute('_src'); |
|
list.push({ |
|
src: src, |
|
_src: src, |
|
floatStyle: align |
|
}); |
|
} |
|
|
|
} |
|
return list; |
|
} |
|
}; |
|
|
|
dialog.onok = function () { |
|
updateBackground(); |
|
editor.fireEvent('saveScene'); |
|
}; |
|
dialog.oncancel = function () { |
|
editor.execCommand('background', backupStyle); |
|
}; |
|
|
|
})(); |