190 lines
7.0 KiB
JavaScript
190 lines
7.0 KiB
JavaScript
|
/*******************************************************************************
|
||
|
|
* KindEditor - WYSIWYG HTML Editor for Internet
|
||
|
|
* Copyright (C) 2006-2011 kindsoft.net
|
||
|
|
*
|
||
|
|
* @author Roddy <luolonghao@gmail.com>
|
||
|
|
* @site http://www.kindsoft.net/
|
||
|
|
* @licence http://www.kindsoft.net/license.php
|
||
|
|
*******************************************************************************/
|
||
|
|
|
||
|
|
KindEditor.plugin('filemanager', function(K) {
|
||
|
|
var self = this, name = 'filemanager',
|
||
|
|
fileManagerJson = K.undef(self.fileManagerJson, self.basePath + 'php/file_manager_json.php'),
|
||
|
|
imgPath = self.pluginsPath + name + '/images/',
|
||
|
|
lang = self.lang(name + '.');
|
||
|
|
function makeFileTitle(filename, filesize, datetime) {
|
||
|
|
return filename + ' (' + Math.ceil(filesize / 1024) + 'KB, ' + datetime + ')';
|
||
|
|
}
|
||
|
|
function bindTitle(el, data) {
|
||
|
|
if (data.is_dir) {
|
||
|
|
el.attr('title', data.filename);
|
||
|
|
} else {
|
||
|
|
el.attr('title', makeFileTitle(data.filename, data.filesize, data.datetime));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
self.plugin.filemanagerDialog = function(options) {
|
||
|
|
var width = K.undef(options.width, 520),
|
||
|
|
height = K.undef(options.height, 510),
|
||
|
|
dirName = K.undef(options.dirName, ''),
|
||
|
|
viewType = K.undef(options.viewType, 'VIEW').toUpperCase(), // "LIST" or "VIEW"
|
||
|
|
clickFn = options.clickFn;
|
||
|
|
var html = [
|
||
|
|
'<div style="padding:10px 20px;">',
|
||
|
|
// header start
|
||
|
|
'<div class="ke-plugin-filemanager-header">',
|
||
|
|
// left start
|
||
|
|
'<div class="ke-left">',
|
||
|
|
'<img class="ke-inline-block" name="moveupImg" src="' + imgPath + 'go-up.gif" width="16" height="16" border="0" alt="" /> ',
|
||
|
|
'<a class="ke-inline-block" name="moveupLink" href="javascript:;">' + lang.moveup + '</a>',
|
||
|
|
'</div>',
|
||
|
|
// right start
|
||
|
|
'<div class="ke-right">',
|
||
|
|
lang.viewType + ' <select class="ke-inline-block" name="viewType">',
|
||
|
|
'<option value="VIEW">' + lang.viewImage + '</option>',
|
||
|
|
'<option value="LIST">' + lang.listImage + '</option>',
|
||
|
|
'</select> ',
|
||
|
|
lang.orderType + ' <select class="ke-inline-block" name="orderType">',
|
||
|
|
'<option value="NAME">' + lang.fileName + '</option>',
|
||
|
|
'<option value="SIZE">' + lang.fileSize + '</option>',
|
||
|
|
'<option value="TYPE">' + lang.fileType + '</option>',
|
||
|
|
'</select>',
|
||
|
|
'</div>',
|
||
|
|
'<div class="ke-clearfix"></div>',
|
||
|
|
'</div>',
|
||
|
|
// body start
|
||
|
|
'<div class="ke-plugin-filemanager-body"></div>',
|
||
|
|
'</div>'
|
||
|
|
].join('');
|
||
|
|
var dialog = self.createDialog({
|
||
|
|
name : name,
|
||
|
|
width : width,
|
||
|
|
height : height,
|
||
|
|
title : self.lang(name),
|
||
|
|
body : html
|
||
|
|
}),
|
||
|
|
div = dialog.div,
|
||
|
|
bodyDiv = K('.ke-plugin-filemanager-body', div),
|
||
|
|
moveupImg = K('[name="moveupImg"]', div),
|
||
|
|
moveupLink = K('[name="moveupLink"]', div),
|
||
|
|
viewServerBtn = K('[name="viewServer"]', div),
|
||
|
|
viewTypeBox = K('[name="viewType"]', div),
|
||
|
|
orderTypeBox = K('[name="orderType"]', div);
|
||
|
|
function reloadPage(path, order, func) {
|
||
|
|
var url = fileManagerJson, param = '&path=' + path + '&order=' + order + '&dir=' + dirName;
|
||
|
|
if (!/\?/.test(url)) {
|
||
|
|
url += '?';
|
||
|
|
param = param.substr(1);
|
||
|
|
}
|
||
|
|
url += param + '&' + new Date().getTime();
|
||
|
|
K.ajax(url, func);
|
||
|
|
}
|
||
|
|
var elList = [];
|
||
|
|
function bindEvent(el, result, data, createFunc) {
|
||
|
|
var fileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'),
|
||
|
|
dirPath = encodeURIComponent(result.current_dir_path + data.filename + '/');
|
||
|
|
if (data.is_dir) {
|
||
|
|
el.click(function(e) {
|
||
|
|
reloadPage(dirPath, orderTypeBox.val(), createFunc);
|
||
|
|
});
|
||
|
|
} else if (data.is_photo) {
|
||
|
|
el.click(function(e) {
|
||
|
|
clickFn.call(this, fileUrl, data.filename);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
el.click(function(e) {
|
||
|
|
clickFn.call(this, fileUrl, data.filename);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
elList.push(el);
|
||
|
|
}
|
||
|
|
function createCommon(result, createFunc) {
|
||
|
|
// remove events
|
||
|
|
K.each(elList, function() {
|
||
|
|
this.unbind();
|
||
|
|
});
|
||
|
|
moveupLink.unbind();
|
||
|
|
viewTypeBox.unbind();
|
||
|
|
orderTypeBox.unbind();
|
||
|
|
// add events
|
||
|
|
if (result.current_dir_path) {
|
||
|
|
moveupLink.click(function(e) {
|
||
|
|
reloadPage(result.moveup_dir_path, orderTypeBox.val(), createFunc);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function changeFunc() {
|
||
|
|
if (viewTypeBox.val() == 'VIEW') {
|
||
|
|
reloadPage(result.current_dir_path, orderTypeBox.val(), createView);
|
||
|
|
} else {
|
||
|
|
reloadPage(result.current_dir_path, orderTypeBox.val(), createList);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
viewTypeBox.change(changeFunc);
|
||
|
|
orderTypeBox.change(changeFunc);
|
||
|
|
bodyDiv.html('');
|
||
|
|
}
|
||
|
|
function createList(result) {
|
||
|
|
createCommon(result, createList);
|
||
|
|
var table = document.createElement('table');
|
||
|
|
table.className = 'ke-table';
|
||
|
|
table.cellPadding = 0;
|
||
|
|
table.cellSpacing = 0;
|
||
|
|
table.border = 0;
|
||
|
|
bodyDiv.append(table);
|
||
|
|
var fileList = result.file_list;
|
||
|
|
for (var i = 0, len = fileList.length; i < len; i++) {
|
||
|
|
var data = fileList[i], row = K(table.insertRow(i));
|
||
|
|
row.mouseover(function(e) {
|
||
|
|
K(this).addClass('ke-on');
|
||
|
|
})
|
||
|
|
.mouseout(function(e) {
|
||
|
|
K(this).removeClass('ke-on');
|
||
|
|
});
|
||
|
|
var iconUrl = imgPath + (data.is_dir ? 'folder-16.gif' : 'file-16.gif'),
|
||
|
|
img = K('<img src="' + iconUrl + '" width="16" height="16" alt="' + data.filename + '" align="absmiddle" />'),
|
||
|
|
cell0 = K(row[0].insertCell(0)).addClass('ke-cell ke-name').append(img).append(document.createTextNode(' ' + data.filename));
|
||
|
|
if (!data.is_dir || data.has_file) {
|
||
|
|
row.css('cursor', 'pointer');
|
||
|
|
cell0.attr('title', data.filename);
|
||
|
|
bindEvent(cell0, result, data, createList);
|
||
|
|
} else {
|
||
|
|
cell0.attr('title', lang.emptyFolder);
|
||
|
|
}
|
||
|
|
K(row[0].insertCell(1)).addClass('ke-cell ke-size').html(data.is_dir ? '-' : Math.ceil(data.filesize / 1024) + 'KB');
|
||
|
|
K(row[0].insertCell(2)).addClass('ke-cell ke-datetime').html(data.datetime);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function createView(result) {
|
||
|
|
createCommon(result, createView);
|
||
|
|
var fileList = result.file_list;
|
||
|
|
for (var i = 0, len = fileList.length; i < len; i++) {
|
||
|
|
var data = fileList[i],
|
||
|
|
div = K('<div class="ke-inline-block ke-item"></div>');
|
||
|
|
bodyDiv.append(div);
|
||
|
|
var photoDiv = K('<div class="ke-inline-block ke-photo"></div>')
|
||
|
|
.mouseover(function(e) {
|
||
|
|
K(this).addClass('ke-on');
|
||
|
|
})
|
||
|
|
.mouseout(function(e) {
|
||
|
|
K(this).removeClass('ke-on');
|
||
|
|
});
|
||
|
|
div.append(photoDiv);
|
||
|
|
var fileUrl = result.current_url + data.filename,
|
||
|
|
iconUrl = data.is_dir ? imgPath + 'folder-64.gif' : (data.is_photo ? fileUrl : imgPath + 'file-64.gif');
|
||
|
|
var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + '" />');
|
||
|
|
if (!data.is_dir || data.has_file) {
|
||
|
|
photoDiv.css('cursor', 'pointer');
|
||
|
|
bindTitle(photoDiv, data);
|
||
|
|
bindEvent(photoDiv, result, data, createView);
|
||
|
|
} else {
|
||
|
|
photoDiv.attr('title', lang.emptyFolder);
|
||
|
|
}
|
||
|
|
photoDiv.append(img);
|
||
|
|
div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
viewTypeBox.val(viewType);
|
||
|
|
reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|