* @class elFinder command "info".
* Display dialog with file properties.
* @author Dmitry (dio) Levashov, dio@std42.ru
(elFinder.prototype.commands.info = function() {
spclass = 'elfinder-spinner',
btnclass = 'elfinder-info-button',
unknown : fm.i18n('unknown'),
aliasfor : fm.i18n('aliasfor'),
modify : fm.i18n('modify'),
perms : fm.i18n('perms'),
locked : fm.i18n('locked'),
files : fm.i18n('files'),
folders : fm.i18n('folders'),
roots : fm.i18n('volumeRoots'),
items : fm.i18n('items'),
owner : fm.i18n('owner'),
group : fm.i18n('group'),
getlink : fm.i18n('getLink')
applyZWSP = function(str, remove) {
return str.replace(/\u200B/g, '');
return str.replace(/(\/|\\)/g, "$1\u200B");
this.items = ['size', 'aliasfor', 'path', 'link', 'dim', 'modify', 'perms', 'locked', 'owner', 'group', 'perm'];
if (this.options.custom && Object.keys(this.options.custom).length) {
$.each(this.options.custom, function(name, details) {
details.label && this.items.push(details.label);
main : '<div class="ui-helper-clearfix elfinder-info-title {dirclass}"><span class="elfinder-cwd-icon {class} ui-corner-all"{style}></span>{title}</div><table class="elfinder-info-tb">{content}</table>',
itemTitle : '<strong>{name}</strong><span class="elfinder-info-kind">{kind}</span>',
groupTitle : '<strong>{items}: {num}</strong>',
row : '<tr><td class="elfinder-info-label">{label} : </td><td class="{class}">{value}</td></tr>',
spinner : '<span>{text}</span> <span class="'+spclass+' '+spclass+'-{name}"></span>'
this.alwaysEnabled = true;
this.updateOnSelect = false;
$.each(msg, function(k, v) {
this.getstate = function() {
this.exec = function(hashes) {
var files = this.files(hashes);
files = this.files([ this.fm.cwd().hash ]);
title : fm.i18n('selectionInfo'),
$(this).elfinderdialog('destroy');
if (reqDfrd && reqDfrd.state() === 'pending') {
$.grep(reqs, function(r) {
r && r.state() === 'pending' && r.reject();
replSpinner = function(msg, name, className) {
dialog.find('.'+spclass+'-'+name).parent().html(msg).addClass(className || '');
id = fm.namespace+'-info-'+$.map(files, function(f) { return f.hash; }).join('-'),
dialog = fm.getUI().find('#'+id),
hashClass = 'elfinder-font-mono elfinder-info-hash',
size, tmb, file, title, dcnt, rdcnt, path, hideItems, hashProg;
if (ndialog.is(':hidden') && ndialog.children('.elfinder-notify').length) {
ndialog.elfinderdialog('open').height('auto');
return $.Deferred().reject();
dialog.elfinderdialog('toTop');
return $.Deferred().resolve();
hideItems = fm.storage('infohides') || fm.arrayFlip(o.hideItems, true);
style = ' '+fm.getIconStyle(file);
view = view.replace('{dirclass}', file.csscls? fm.escape(file.csscls) : '').replace('{class}', fm.mime2class(file.mime)).replace('{style}', style);
title = tpl.itemTitle.replace('{name}', fm.escape(file.i18 || file.name)).replace('{kind}', '<span title="'+fm.escape(file.mime)+'">'+fm.mime2kind(file)+'</span>');
} else if (file.mime != 'directory' || file.alias) {
size = fm.formatSize(file.size);
size = tpl.spinner.replace('{text}', msg.calc).replace('{name}', 'size');
!hideItems.size && content.push(row.replace(l, msg.size).replace(v, size));
!hideItems.aleasfor && file.alias && content.push(row.replace(l, msg.aliasfor).replace(v, file.alias));
if (path = fm.path(file.hash, true)) {
content.push(row.replace(l, msg.path).replace(v, applyZWSP(fm.escape(path))).replace('{class}', 'elfinder-info-path'));
content.push(row.replace(l, msg.path).replace(v, tpl.spinner.replace('{text}', msg.calc).replace('{name}', 'path')).replace('{class}', 'elfinder-info-path'));
reqs.push(fm.path(file.hash, true, {notify: null})
replSpinner(msg.unknown, 'path');
replSpinner(applyZWSP(path), 'path');
if (!hideItems.link && file.read) {
name_esc = fm.escape(file.name);
content.push(row.replace(l, msg.link).replace(v, '<button class="'+btnclass+' '+spclass+'-url">'+msg.getlink+'</button>'));
} else if (file.mime === 'directory') {
if (o.nullUrlDirLinkSelf && file.url === null) {
var loc = window.location;
href = loc.pathname + loc.search + '#elf_' + file.hash;
} else if (file.url !== '' && fm.option('url', (!fm.isRoot(file) && file.phash) || file.hash)) {
href = fm.url(file.hash);
href = fm.url(file.hash);
href && content.push(row.replace(l, msg.link).replace(v, '<a href="'+href+'" target="_blank">'+name_esc+'</a>'));
if (file.dim) { // old api
content.push(row.replace(l, msg.dim).replace(v, file.dim));
} else if (file.mime.indexOf('image') !== -1) {
if (file.width && file.height) {
content.push(row.replace(l, msg.dim).replace(v, file.width+'x'+file.height));
} else if (file.size && file.size !== '0') {
content.push(row.replace(l, msg.dim).replace(v, tpl.spinner.replace('{text}', msg.calc).replace('{name}', 'dim')));
data : {cmd : 'dim', target : file.hash},
replSpinner(msg.unknown, 'dim');
replSpinner(data.dim || msg.unknown, 'dim');
var dim = data.dim.split('x');
var rfile = fm.file(file.hash);
!hideItems.modify && content.push(row.replace(l, msg.modify).replace(v, fm.formatDate(file)));
!hideItems.perms && content.push(row.replace(l, msg.perms).replace(v, fm.formatPermissions(file)));
!hideItems.locked && content.push(row.replace(l, msg.locked).replace(v, file.locked ? msg.yes : msg.no));
!hideItems.owner && file.owner && content.push(row.replace(l, msg.owner).replace(v, file.owner));
!hideItems.group && file.group && content.push(row.replace(l, msg.group).replace(v, file.group));
!hideItems.perm && file.perm && content.push(row.replace(l, msg.perm).replace(v, fm.formatFileMode(file.perm)));
// Add custom info fields
$.each(o.custom, function(name, details) {
!hideItems[details.label]
(!details.mimes || $.grep(details.mimes, function(m){return (file.mime === m || file.mime.indexOf(m+'/') === 0)? true : false;}).length)
(!details.hashRegex || file.hash.match(details.hashRegex))
content.push(row.replace(l, fm.i18n(details.label)).replace(v , details.tpl.replace('{id}', id)));
if (details.action && (typeof details.action == 'function')) {
customActions.push(details.action);
view = view.replace('{class}', 'elfinder-cwd-icon-group');
title = tpl.groupTitle.replace('{items}', msg.items).replace('{num}', cnt);
dcnt = $.grep(files, function(f) { return f.mime == 'directory' ? true : false ; }).length;
$.each(files, function(h, f) {
var s = parseInt(f.size);
if (s >= 0 && size >= 0) {
content.push(row.replace(l, msg.kind).replace(v, msg.files));
!hideItems.size && content.push(row.replace(l, msg.size).replace(v, fm.formatSize(size)));
rdcnt = $.grep(files, function(f) { return f.mime === 'directory' && (! f.phash || f.isroot)? true : false ; }).length;
content.push(row.replace(l, msg.kind).replace(v, (rdcnt === cnt || dcnt === cnt)? msg[rdcnt? 'roots' : 'folders'] : $.map({roots: rdcnt, folders: dcnt, files: cnt - rdcnt - dcnt}, function(c, t) { return c? msg[t]+' '+c : null; }).join(', ')));
!hideItems.size && content.push(row.replace(l, msg.size).replace(v, tpl.spinner.replace('{text}', msg.calc).replace('{name}', 'size')));
count = $.map(files, function(f) { return f.hash; });
view = view.replace('{title}', title).replace('{content}', content.join('').replace(/{class}/g, ''));
dialog = self.fmDialog(view, opts);
dialog.attr('id', id).one('mousedown', '.elfinder-info-path', function() {
$(this).html(applyZWSP($(this).html(), true));
if (getHashAlgorisms.length) {
hashProg.appendTo(dialog.find('.'+spclass+'-'+getHashAlgorisms[0]).parent());
if (fm.UA.Mobile && $.fn.tooltip) {
dialog.children('.ui-dialog-content .elfinder-info-title').tooltip({
'ui-tooltip': 'elfinder-ui-tooltip ui-widget-shadow'
tooltipClass: 'elfinder-ui-tooltip ui-widget-shadow',
if (file && file.url == '1') {
dialog.on('click', '.'+spclass+'-url', function(){
$(this).parent().html(tpl.spinner.replace('{text}', fm.i18n('ntfurl')).replace('{name}', 'url'));
data : {cmd : 'url', target : file.hash},
replSpinner(name_esc, 'url');
replSpinner('<a href="'+data.url+'" target="_blank">'+name_esc+'</a>' || name_esc, 'url');
var rfile = fm.file(file.hash);
replSpinner(name_esc, 'url');
.on('load', function() { dialog.find('.elfinder-cwd-icon').addClass(tmb.className).css('background-image', "url('"+tmb.url+"')"); })
// send request to count total size
reqDfrd = fm.getSize(count).done(function(data) {
replSpinner(data.formated, 'size');
replSpinner(msg.unknown, 'size');
if (customActions.length) {
$.each(customActions, function(i, action) {
action(file, fm, dialog);
return $.Deferred().resolve();
}).prototype = { forceLoad : true }; // this is required command