/**
* User: Jinqn
* Date: 14-04-08
* Time: 下午16:34
* 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片
*/
(function () {
var remoteImage,
uploadImage,
onlineImage;
window.onload = function () {
initTabs();
initAlign();
initButtons();
};
/* 初始化tab标签 */
function initTabs() {
var tabs = $G('tabhead').children;
for (var i = 0; i < tabs.length; i++) {
domUtils.on(tabs[i], "click", function (e) {
var target = e.target || e.srcElement;
setTabFocus(target.getAttribute('data-content-id'));
});
}
var img = editor.selection.getRange().getClosedNode();
if (img && img.tagName && img.tagName.toLowerCase() == 'img') {
setTabFocus('remote');
} else {
setTabFocus('upload');
}
}
/* 初始化tabbody */
function setTabFocus(id) {
if(!id) return;
var i, bodyId, tabs = $G('tabhead').children;
for (i = 0; i < tabs.length; i++) {
bodyId = tabs[i].getAttribute('data-content-id');
if (bodyId == id) {
domUtils.addClass(tabs[i], 'focus');
domUtils.addClass($G(bodyId), 'focus');
} else {
domUtils.removeClasses(tabs[i], 'focus');
domUtils.removeClasses($G(bodyId), 'focus');
}
}
document.getElementById('search-container').setAttribute('class', 'none');
switch (id) {
case 'remote':
remoteImage = remoteImage || new RemoteImage();
break;
case 'upload':
uploadImage = uploadImage || new UploadImage('queueList');
break;
case 'online':
document.getElementById('search-container').setAttribute('class', '');
onlineImage = onlineImage || new OnlineImage('imageList');
onlineImage.reset();
break;
}
}
/* 初始化onok事件 */
function initButtons() {
dialog.onok = function () {
var remote = false, list = [], id, tabs = $G('tabhead').children;
for (var i = 0; i < tabs.length; i++) {
if (domUtils.hasClass(tabs[i], 'focus')) {
id = tabs[i].getAttribute('data-content-id');
break;
}
}
switch (id) {
case 'remote':
list = remoteImage.getInsertList();
break;
case 'upload':
list = uploadImage.getInsertList();
var count = uploadImage.getQueueCount();
if (count) {
$('.info', '#queueList').html('' + '还有2个未上传文件'.replace(/[\d]/, count) + '');
return false;
}
break;
case 'online':
list = onlineImage.getInsertList();
break;
}
if(list) {
editor.execCommand('insertimage', list);
remote && editor.fireEvent("catchRemoteImage");
}
};
}
/* 初始化搜索点击事件 */
function initAlign(){
domUtils.on($G("search-submit"), 'click', function(e){
onlineImage = onlineImage || new OnlineImage('imageList');
onlineImage.reset();
});
}
/* 获取对齐方式 */
function getAlign(){
return 'none';
}
/* 在线图片 */
function RemoteImage(target) {
this.container = utils.isString(target) ? document.getElementById(target) : target;
this.init();
}
RemoteImage.prototype = {
init: function () {
this.initContainer();
this.initEvents();
},
initContainer: function () {
this.dom = {
'url': $G('url'),
'width': $G('width'),
'height': $G('height'),
'border': $G('border'),
'vhSpace': $G('vhSpace'),
'title': $G('title'),
'align': 'none'
};
var img = editor.selection.getRange().getClosedNode();
if (img) {
this.setImage(img);
}
},
initEvents: function () {
var _this = this,
locker = $G('lock');
/* 改变url */
domUtils.on($G("url"), 'keyup', updatePreview);
domUtils.on($G("border"), 'keyup', updatePreview);
domUtils.on($G("title"), 'keyup', updatePreview);
domUtils.on($G("width"), 'keyup', function(){
updatePreview();
if(locker.checked) {
var proportion =locker.getAttribute('data-proportion');
$G('height').value = Math.round(this.value / proportion);
} else {
_this.updateLocker();
}
});
domUtils.on($G("height"), 'keyup', function(){
updatePreview();
if(locker.checked) {
var proportion =locker.getAttribute('data-proportion');
$G('width').value = Math.round(this.value * proportion);
} else {
_this.updateLocker();
}
});
domUtils.on($G("lock"), 'change', function(){
var proportion = parseInt($G("width").value) /parseInt($G("height").value);
locker.setAttribute('data-proportion', proportion);
});
function updatePreview(){
_this.setPreview();
}
},
updateLocker: function(){
var width = $G('width').value,
height = $G('height').value,
locker = $G('lock');
if(width && height && width == parseInt(width) && height == parseInt(height)) {
locker.disabled = false;
locker.title = '';
} else {
locker.checked = false;
locker.disabled = 'disabled';
locker.title = lang.remoteLockError;
}
},
setImage: function(img){
/* 不是正常的图片 */
if (!img.tagName || img.tagName.toLowerCase() != 'img' && !img.getAttribute("src") || !img.src) return;
var wordImgFlag = img.getAttribute("word_img"),
src = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('_src') || img.getAttribute("src", 2).replace("&", "&")),
align = editor.queryCommandValue("imageFloat");
/* 防止onchange事件循环调用 */
if (src !== $G("url").value) $G("url").value = src;
if(src) {
/* 设置表单内容 */
$G("width").value = img.width || '';
$G("height").value = img.height || '';
$G("border").value = img.getAttribute("border") || '0';
$G("vhSpace").value = img.getAttribute("vspace") || '0';
$G("title").value = img.title || img.alt || '';
this.setPreview();
this.updateLocker();
}
},
getData: function(){
var data = {};
for(var k in this.dom){
data[k] = this.dom[k].value;
}
return data;
},
setPreview: function(){
var url = $G('url').value,
ow = parseInt($G('width').value, 10) || 0,
oh = parseInt($G('height').value, 10) || 0,
border = parseInt($G('border').value, 10) || 0,
title = $G('title').value,
preview = $G('preview'),
width,
height;
url = utils.unhtmlForUrl(url);
title = utils.unhtml(title);
width = ((!ow || !oh) ? preview.offsetWidth:Math.min(ow, preview.offsetWidth));
width = width+(border*2) > preview.offsetWidth ? width:(preview.offsetWidth - (border*2));
height = (!ow || !oh) ? '':width*oh/ow;
if(url) {
preview.innerHTML = '';
}
},
getInsertList: function () {
var data = this.getData();
if(data['url']) {
return [{
src: data['url'],
_src: data['url'],
width: data['width'] || '',
height: data['height'] || '',
border: data['border'] || '',
floatStyle: data['align'] || '',
vspace: data['vhSpace'] || '',
title: data['title'] || '',
alt: data['title'] || '',
style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
}];
} else {
return [];
}
}
};
/* 上传图片 */
function UploadImage(target) {
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
this.init();
}
UploadImage.prototype = {
init: function () {
this.imageList = [];
this.initContainer();
this.initUploader();
},
initContainer: function () {
this.$queue = this.$wrap.find('.filelist');
},
/* 初始化容器 */
initUploader: function () {
var _this = this,
$ = jQuery, // just in case. Make sure it's not an other libaray.
$wrap = _this.$wrap,
// 图片容器
$queue = $wrap.find('.filelist'),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info = $statusBar.find('.info'),
// 上传按钮
$upload = $wrap.find('.uploadBtn'),
// 上传按钮
$filePickerBtn = $wrap.find('.filePickerBtn'),
// 上传按钮
$filePickerBlock = $wrap.find('.filePickerBlock'),
// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),
// 总体进度条
$progress = $statusBar.find('.progress').hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 113 * ratio,
thumbnailHeight = 113 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = '',
// 所有文件的进度信息,key为file id
percentages = {},
supportTransition = (function () {
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
uploader,
actionUrl = editor.getActionUrl(editor.getOpt('imageActionName')),
acceptExtensions = (editor.getOpt('imageAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''),
imageMaxSize = editor.getOpt('imageMaxSize'),
imageCompressBorder = editor.getOpt('imageCompressBorder');
if (!WebUploader.Uploader.support()) {
$('#filePickerReady').after($('
' + file.name + '
' + '' + '' + '