132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
|
|
modulejs.define('view/extended', ['jQuery', 'core/settings', 'core/resource', 'core/format', 'core/event', 'core/entry'], function ($, allsettings, resource, format, event, entry) {
|
|
|
|
var defaults = {
|
|
modes: ['details', 'icons'],
|
|
setParentFolderLabels: false
|
|
},
|
|
|
|
settings = _.extend({}, defaults, allsettings.view),
|
|
|
|
template = '<li class="entry">' +
|
|
'<a>' +
|
|
'<span class="icon small"><img /></span>' +
|
|
'<span class="icon big"><img /></span>' +
|
|
'<span class="label" />' +
|
|
'<span class="date" />' +
|
|
'<span class="size" />' +
|
|
'</a>' +
|
|
'</li>',
|
|
hintTemplate = '<span class="hint"></span>',
|
|
listTemplate = '<ul>' +
|
|
'<li class="header">' +
|
|
'<a class="icon"></a>' +
|
|
'<a class="label" href="#"><span class="l10n-name"></span></a>' +
|
|
'<a class="date" href="#"><span class="l10n-lastModified"></span></a>' +
|
|
'<a class="size" href="#"><span class="l10n-size"></span></a>' +
|
|
'</li>' +
|
|
'</ul>',
|
|
emptyTemplate = '<div class="empty l10n-empty">empty</div>',
|
|
|
|
// updates this single entry
|
|
update = function (entry) {
|
|
|
|
if (entry.$extended && entry.status && entry.$extended.data('status') === entry.status) {
|
|
return entry.$extended;
|
|
}
|
|
|
|
var $html = $(template),
|
|
$a = $html.find('a'),
|
|
$imgSmall = $html.find('.icon.small img'),
|
|
$imgBig = $html.find('.icon.big img'),
|
|
$label = $html.find('.label'),
|
|
$date = $html.find('.date'),
|
|
$size = $html.find('.size');
|
|
// escapedHref = entry.absHref.replace(/'/g, "%27").replace(/"/g, "%22");
|
|
|
|
$html
|
|
.addClass(entry.isFolder() ? 'folder' : 'file')
|
|
.data('entry', entry)
|
|
.data('status', entry.status);
|
|
|
|
$a.attr('href', entry.absHref);
|
|
$imgSmall.attr('src', resource.icon(entry.type)).attr('alt', entry.type);
|
|
$imgBig.attr('src', resource.icon(entry.type, true)).attr('alt', entry.type);
|
|
$label.text(entry.label);
|
|
$date.data('time', entry.time).text(format.formatDate(entry.time));
|
|
$size.data('bytes', entry.size).text(format.formatSize(entry.size));
|
|
|
|
if (entry.isFolder() && _.isNumber(entry.status)) {
|
|
if (entry.status === 200) {
|
|
$html.addClass('page');
|
|
$imgSmall.attr('src', resource.icon('folder-page'));
|
|
$imgBig.attr('src', resource.icon('folder-page', true));
|
|
} else {
|
|
$html.addClass('error');
|
|
$label.append($(hintTemplate).text(' ' + entry.status + ' '));
|
|
}
|
|
}
|
|
|
|
if (entry.isParentFolder) {
|
|
$imgSmall.attr('src', resource.icon('folder-parent'));
|
|
$imgBig.attr('src', resource.icon('folder-parent', true));
|
|
if (!settings.setParentFolderLabels) {
|
|
$label.addClass('l10n-parentDirectory');
|
|
}
|
|
$html.addClass('folder-parent');
|
|
}
|
|
|
|
if (entry.$extended) {
|
|
entry.$extended.replaceWith($html);
|
|
}
|
|
entry.$extended = $html;
|
|
|
|
return $html;
|
|
},
|
|
|
|
onMouseenter = function () {
|
|
|
|
var entry = $(this).closest('.entry').data('entry');
|
|
event.pub('entry.mouseenter', entry);
|
|
},
|
|
|
|
onMouseleave = function () {
|
|
|
|
var entry = $(this).closest('.entry').data('entry');
|
|
event.pub('entry.mouseleave', entry);
|
|
},
|
|
|
|
// creates the view for entry content
|
|
init = function (entry) {
|
|
|
|
var $extended = $('#extended'),
|
|
$ul = $(listTemplate);
|
|
|
|
if (entry.parent) {
|
|
$ul.append(update(entry.parent));
|
|
}
|
|
|
|
_.each(entry.content, function (e) {
|
|
|
|
$ul.append(update(e));
|
|
|
|
e.fetchStatus(function (e) {
|
|
|
|
update(e);
|
|
});
|
|
});
|
|
|
|
$extended.append($ul);
|
|
|
|
if (entry.isEmpty()) {
|
|
$extended.append($(emptyTemplate));
|
|
}
|
|
|
|
$extended
|
|
.on('mouseenter', '.entry a', onMouseenter)
|
|
.on('mouseleave', '.entry a', onMouseleave);
|
|
};
|
|
|
|
init(entry);
|
|
});
|