+
This commit is contained in:
@@ -0,0 +1,223 @@
|
||||
/** This file is part of KCFinder project
|
||||
*
|
||||
* @desc Image viewer
|
||||
* @package KCFinder
|
||||
* @version 3.12
|
||||
* @author Pavel Tzonkov <sunhater@sunhater.com>
|
||||
* @copyright 2010-2014 KCFinder Project
|
||||
* @license http://opensource.org/licenses/GPL-3.0 GPLv3
|
||||
* @license http://opensource.org/licenses/LGPL-3.0 LGPLv3
|
||||
* @link http://kcfinder.sunhater.com
|
||||
*/
|
||||
|
||||
_.viewImage = function(data) {
|
||||
|
||||
var ts = new Date().getTime(),
|
||||
dlg = false,
|
||||
images = [],
|
||||
min_h = 100,
|
||||
w = $(window),
|
||||
min_w, dd, dv, dh,
|
||||
|
||||
showImage = function(data) {
|
||||
_.lock = true;
|
||||
|
||||
var url = $.$.escapeDirs(_.uploadURL + "/" + _.dir + "/" + data.name) + "?ts=" + ts,
|
||||
img = new Image(),
|
||||
i = $(img),
|
||||
|
||||
onImgLoad = function() {
|
||||
_.lock = false;
|
||||
|
||||
$('#files .file').each(function() {
|
||||
if ($(this).data('name') == data.name) {
|
||||
_.ssImage = this;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
i.hide().appendTo('body');
|
||||
|
||||
var w_w = w.width(),
|
||||
w_h = w.height(),
|
||||
o_w = i.width(),
|
||||
o_h = i.height(),
|
||||
i_w = o_w,
|
||||
i_h = o_h,
|
||||
openDlg = false,
|
||||
t = $('<div class="img"></div>'),
|
||||
|
||||
goTo = function(i) {
|
||||
if (!_.lock) {
|
||||
var nimg = images[i];
|
||||
_.currImg = i;
|
||||
showImage(nimg);
|
||||
}
|
||||
},
|
||||
|
||||
nextFunc = function() {
|
||||
goTo((_.currImg >= images.length - 1) ? 0 : (_.currImg + 1));
|
||||
},
|
||||
|
||||
prevFunc = function() {
|
||||
goTo((_.currImg ? _.currImg : images.length) - 1);
|
||||
},
|
||||
|
||||
selectFunc = function(e) {
|
||||
if (_.ssImage)
|
||||
_.selectFile($(_.ssImage), e);
|
||||
dlg.dialog('destroy').detach();
|
||||
};
|
||||
|
||||
i.detach().appendTo(t);
|
||||
|
||||
if (!dlg) {
|
||||
openDlg = true;
|
||||
|
||||
var closeFunc = function() {
|
||||
dlg.dialog('destroy').detach();
|
||||
},
|
||||
|
||||
focusFunc = function() {
|
||||
setTimeout(function() {
|
||||
dlg.find('input').get(0).focus();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
dlg = _.dialog(".", "", {
|
||||
draggable: false,
|
||||
nopadding: true,
|
||||
close: closeFunc,
|
||||
show: false,
|
||||
hide: false,
|
||||
buttons: [
|
||||
{
|
||||
text: _.label("Previous"),
|
||||
icons: {primary: "ui-icon-triangle-1-w"},
|
||||
click: prevFunc
|
||||
|
||||
}, {
|
||||
text: _.label("Next"),
|
||||
icons: {secondary: "ui-icon-triangle-1-e"},
|
||||
click: nextFunc
|
||||
|
||||
}, {
|
||||
text: _.label("Select"),
|
||||
icons: {primary: "ui-icon-check"},
|
||||
click: selectFunc
|
||||
|
||||
}, {
|
||||
text: _.label("Close"),
|
||||
icons: {primary: "ui-icon-closethick"},
|
||||
click: closeFunc
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
dlg.click(nextFunc).css({overflow: "hidden"}).parent().css({width: "auto", height: "auto"});
|
||||
|
||||
dd = dlg.parent().click(focusFunc).rightClick(focusFunc).disableTextSelect().addClass('kcfImageViewer');
|
||||
dv = dd.find('.ui-dialog-titlebar').outerHeight() + dd.find('.ui-dialog-buttonpane').outerHeight() + dd.outerVSpace('b');
|
||||
dh = dd.outerHSpace('b');
|
||||
min_w = dd.outerWidth() - dh;
|
||||
}
|
||||
|
||||
var max_w = w_w - dh,
|
||||
max_h = w_h - dv + 1,
|
||||
top = 0,
|
||||
left = 0,
|
||||
width = o_w,
|
||||
height = o_h;
|
||||
|
||||
// Too big
|
||||
if ((o_w > max_w) || (o_h > max_h)) {
|
||||
|
||||
if ((max_h / max_w) < (o_h / o_w)) {
|
||||
height = max_h;
|
||||
width = (o_w * height) / o_h;
|
||||
|
||||
} else {
|
||||
width = max_w;
|
||||
height = (o_h * width) / o_w;
|
||||
}
|
||||
|
||||
i_w = width;
|
||||
i_h = height;
|
||||
|
||||
// Too small
|
||||
} else if ((o_w < min_w) || (o_h < min_h)) {
|
||||
width = (o_w < min_w) ? min_w : o_w;
|
||||
height = (o_h < min_h) ? min_h : o_h;
|
||||
left = (o_w < min_w) ? (min_w - o_w) / 2 : 0;
|
||||
top = (o_h < min_h) ? (min_h - o_h) / 2 : 0;
|
||||
}
|
||||
|
||||
var show = function() {
|
||||
dlg.animate({width: width, height: height}, 150);
|
||||
dlg.parent().animate({top: (w_h - height - dv) / 2, left: (w_w - width - dh) / 2}, 150, function() {
|
||||
dlg.html(t.get(0)).append('<input style="width:1px;height:1px;position:fixed;top:-1000px;left:-1000px" type="text" />');
|
||||
dlg.find('input').keydown(function(e) {
|
||||
if (!_.lock) {
|
||||
if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey)
|
||||
return;
|
||||
var kc = e.keyCode;
|
||||
if ((kc == 37)) prevFunc();
|
||||
if ((kc == 39)) nextFunc();
|
||||
if ((kc == 13) || (kc == 32)) selectFunc(e);
|
||||
}
|
||||
}).get(0).focus();
|
||||
i.css({padding: top + "px 0 0 " + left + "px", width: i_w, height: i_h}).show();
|
||||
dlg.children().first().css({width: width, height: height, display: "none"}).fadeIn(150, function() {
|
||||
loadingStop();
|
||||
var title = data.name + " (" + o_w + " x " + o_h + ")";
|
||||
dlg.prev().find('.ui-dialog-title').css({width:width - dlg.prev().find('.ui-dialog-titlebar-close').outerWidth() - 20}).text(title).attr({title: title}).css({cursor: "default"});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (openDlg)
|
||||
show();
|
||||
else
|
||||
dlg.children().first().fadeOut(150, show);
|
||||
},
|
||||
|
||||
loadingStart = function() {
|
||||
if (dlg)
|
||||
dlg.prev().addClass("loading").find('.ui-dialog-title').text(_.label("Loading image...")).css({width: "auto"});
|
||||
else
|
||||
$('#loading').text(_.label("Loading image...")).show();
|
||||
},
|
||||
|
||||
loadingStop = function() {
|
||||
if (dlg)
|
||||
dlg.prev().removeClass("loading");
|
||||
$('#loading').hide();
|
||||
};
|
||||
|
||||
loadingStart();
|
||||
img.src = url;
|
||||
|
||||
if (img.complete)
|
||||
onImgLoad();
|
||||
else {
|
||||
img.onload = onImgLoad;
|
||||
img.onerror = function() {
|
||||
_.lock = false;
|
||||
loadingStop();
|
||||
_.alert(_.label("Unknown error."));
|
||||
_.refresh();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
$.each(_.files, function(i, file) {
|
||||
i = images.length;
|
||||
if (file.thumb || file.smallThumb)
|
||||
images[i] = file;
|
||||
if (file.name == data.name)
|
||||
_.currImg = i;
|
||||
});
|
||||
|
||||
showImage(data);
|
||||
return false;
|
||||
};
|
||||
Reference in New Issue
Block a user