test: 1
This commit is contained in:
193
public/UEditorPlus/dialogs/background/background.css
Normal file
193
public/UEditorPlus/dialogs/background/background.css
Normal file
@ -0,0 +1,193 @@
|
||||
.wrapper {
|
||||
width: 424px;
|
||||
margin: 10px auto;
|
||||
zoom: 1;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.tabbody {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.tabbody .panel {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabbody .focus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input, label {
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.pl {
|
||||
padding-left: 18px;
|
||||
padding-left: 23px \9;
|
||||
}
|
||||
|
||||
#imageList {
|
||||
width: 420px;
|
||||
height: 215px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#imageList div {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 95px;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
#imageList img {
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.bgarea {
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
height: 84%;
|
||||
border: 1px solid #A8A297;
|
||||
}
|
||||
|
||||
.content div {
|
||||
margin: 10px 0 10px 5px;
|
||||
}
|
||||
|
||||
.content .iptradio {
|
||||
margin: 0px 5px 5px 0px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.wrapcolor {
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
div.color {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#colorPicker {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 5px #D3D6DA;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.alignment, #custom {
|
||||
margin-left: 23px;
|
||||
margin-left: 28px \9;
|
||||
}
|
||||
|
||||
#custom input {
|
||||
height: 15px;
|
||||
min-height: 15px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#repeatType {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* 图片管理样式 */
|
||||
#imgManager {
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
#imgManager #imageList {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#imgManager ul {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#imgManager li {
|
||||
float: left;
|
||||
display: block;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 9px 0 0 19px;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#imgManager li.clearFloat {
|
||||
float: none;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#imgManager li img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#imgManager li .icon {
|
||||
cursor: pointer;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
border: 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#imgManager li .icon:hover {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094fa;
|
||||
}
|
||||
|
||||
#imgManager li.selected .icon {
|
||||
background-image: url(images/success.png);
|
||||
background-position: 75px 75px;
|
||||
}
|
||||
|
||||
#imgManager li.selected .icon:hover {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094fa;
|
||||
background-position: 72px 72px;
|
||||
}
|
||||
59
public/UEditorPlus/dialogs/background/background.html
Normal file
59
public/UEditorPlus/dialogs/background/background.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<script type="text/javascript" src="../internal.js?aea0c61c"></script>
|
||||
<link rel="stylesheet" type="text/css" href="background.css?da860c7a">
|
||||
</head>
|
||||
<body>
|
||||
<div id="bg_container" class="wrapper">
|
||||
<div id="tabHeads" class="tabhead">
|
||||
<span class="focus" data-content-id="normal"><var id="lang_background_normal"></var></span>
|
||||
</div>
|
||||
<div id="tabBodys" class="tabbody">
|
||||
<div id="normal" class="panel focus">
|
||||
<fieldset class="bgarea">
|
||||
<legend><var id="lang_background_set"></var></legend>
|
||||
<div class="content">
|
||||
<div>
|
||||
<label><input id="nocolorRadio" class="iptradio" type="radio" name="t" value="none"
|
||||
checked="checked"><var id="lang_background_none"></var></label>
|
||||
<label><input id="coloredRadio" class="iptradio" type="radio" name="t" value="color"><var
|
||||
id="lang_background_colored"></var></label>
|
||||
</div>
|
||||
<div class="wrapcolor pl">
|
||||
<div class="color">
|
||||
<var id="lang_background_color"></var>:
|
||||
</div>
|
||||
<div id="colorPicker"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="wrapcolor pl">
|
||||
<label><var id="lang_background_netimg"></var>:</label><input class="txt" type="text" id="url">
|
||||
</div>
|
||||
<div id="alignment" class="alignment">
|
||||
<var id="lang_background_align"></var>:<select id="repeatType">
|
||||
<option value="center"></option>
|
||||
<option value="repeat-x"></option>
|
||||
<option value="repeat-y"></option>
|
||||
<option value="repeat"></option>
|
||||
<option value="self"></option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="custom">
|
||||
<var id="lang_background_position"></var>:x:<input type="text" size="1" id="x" maxlength="4"
|
||||
value="0">px y:<input type="text"
|
||||
size="1"
|
||||
id="y"
|
||||
maxlength="4"
|
||||
value="0">px
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="background.js?dd36acd0"></script>
|
||||
</body>
|
||||
</html>
|
||||
370
public/UEditorPlus/dialogs/background/background.js
Normal file
370
public/UEditorPlus/dialogs/background/background.js
Normal file
@ -0,0 +1,370 @@
|
||||
(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";
|
||||
} 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 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')),
|
||||
'headers': editor.options.serverHeaders || {},
|
||||
'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);
|
||||
};
|
||||
|
||||
})();
|
||||
BIN
public/UEditorPlus/dialogs/background/images/bg.png
Normal file
BIN
public/UEditorPlus/dialogs/background/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/UEditorPlus/dialogs/background/images/success.png
Normal file
BIN
public/UEditorPlus/dialogs/background/images/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user