Вернуться к статье: Обзор Simple photo manager

Функции "Менеджера закачки файлов" я взял из стандартного виджета showimagetvs идущего с системой управления контентом Modx. Виджет showimagetvs подменяет стандартный тип ввода "image" и делает его более удобным. Появляется просмотр картинки. Если раньше вы видели только путь до файла картинки, то теперь видна и уменьшенная копия самой картинки, что более удобней. Только надо не забыть установить и настроить плагин ManagerManager. В версии Modx 2 и более он идет по умолчанию.

$j("#imginputtext'.$tv_id.'").bind( "change", function() {
var url = $j("#imginputtext'.$tv_id.'").val();
url = (url != "" && url.search(/http:\/\//i) == -1) ? ("'.$site_url.'" + url) : url;
if (url != "") {
maxI++;
var $imgli = \'<li class="ui-widget-content ui-corner-tr">\';
$imgli += \'<img src="\'+url+\'" alt="" width="96" height="72" id="num_\'+maxI+\'" />\';
$imgli += \'<a href="\'+url+\'" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>\';
$imgli += \'<a href="\'+url+\'" title="Edit alt" class="ui-icon ui-icon-pencil">Edit alt</a>\';
$imgli += \'<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image<
$imgli += \'</li>\';
addImage( $j($imgli) );
}
$j("#imginputtext'.$tv_id.'").val("");
//if (bImg) { alert("Attention! This is a copy of the image."); }
return false;
});
Назначает обработчик к полю ввода картинки, в случаи изменения проводим разного рода проверки на корректность и если проверки все удачные добавляем картинку. Картинка добавляется как в поле ввода, так и уменьшенная копия картинки. Атрибут "ALT" у картинки пустой и его желательно сразу изменить.

Далее функции необходимые для правильной работы Менеджера закачки картинок.

if (typeof(SetUrl) != "undefined") {
OriginalSetUrl2 = SetUrl; // Copy the existing Image browser SetUrl function
SetUrl = function(url, width, height, alt) { // Redefine it to also tell the preview to update
OriginalSetUrl2(url, width, height, alt);
$j("#imginputtext'.$tv_id.'").val(url);
$j("#imginputtext'.$tv_id.'").trigger("change");
}
}
else {
if (typeof(SetUrl) == "undefined") {
SetUrl = function(url, width, height, alt) {
if(lastImageCtrl) {
var c = document.mutate[lastImageCtrl];
if(c) c.value = url;
lastImageCtrl = "";
$j("#imginputtext'.$tv_id.'").val(url);
$j("#imginputtext'.$tv_id.'").trigger("change");
} else { return }
}
}
}

if (typeof(BrowseServer) == "undefined") {
BrowseServer = function(ctrl) {
lastImageCtrl = ctrl;
var w = screen.width * 0.7;
var h = screen.height * 0.7;
OpenServerBrowser("/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/manager/media/browser/mcpuk/connectors/php
}
}

if (typeof(OpenServerBrowser) == "undefined") {
OpenServerBrowser = function(url, width, height) {
var iLeft = (screen.width - width) / 2 ;
var iTop = (screen.height - height) / 2 ;

var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
sOptions += ",width=" + width ;
sOptions += ",height=" + height ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;

var oWindow = window.open( url, "FCKBrowseWindow", sOptions ) ;
}
}

Эти функции я скопировал из системы Modx. Для этого я создал tv-параметр image и просмотрел код который генерит система. Обратите внимания для избежания ошибок двойного подключения этих функций я сначало провожу проверку if (typeof(функция) == "undefined") и только потом подключаю.

Изменения претерпела функция SetUrl. В ней я заполняю поле ввода картинки и вызываю обработчик "change" для него. С менеджером закачки картинок пришлось немного потрудиться.

Вернуться к статье: Обзор Simple photo manager