mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-30 06:55:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor view/content.

Browse source
This commit is contained in:
Lars Jung 2015-04-29 23:08:38 +02:00
parent 0faf399abd
commit 8c34337136
7 changed files with 338 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

158
src/_h5ai/client/js/inc/view/content.js
View file

@ -1,160 +1,8 @@
modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/mainrow'], function (_, $, event, format, location, resource, allsettings, mainrow) {
modulejs.define('view/content', ['$', 'view/mainrow'], function ($, mainrow) {
var settings = _.extend({
binaryPrefix: false,
hideFolders: false,
hideParentFolder: false,
setParentFolderLabels: false
}, allsettings.view);
var itemTemplate =
'<li class="item">' +
'<a>' +
'<span class="icon square"><img/></span>' +
'<span class="icon landscape"><img/></span>' +
'<span class="label"/>' +
'<span class="date"/>' +
'<span class="size"/>' +
'</a>' +
'</li>';
var contentTemplate =
'<div id="content">' +
'<div id="view">' +
'<ul id="items" class="clearfix">' +
'<li class="header">' +
'<a class="icon"/>' +
'<a class="label" href="#"><span class="l10n-name"/></a>' +
'<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
'<a class="size" href="#"><span class="l10n-size"/></a>' +
'</li>' +
'</ul>' +
'<div class="empty l10n-empty"/>' +
'</div>' +
'</div>';
var $content = $(contentTemplate);
var $view = $content.find('#view');
var $items = $view.find('#items');
var $empty = $view.find('.empty');
function update(item) {
var $html = $(itemTemplate);
var $a = $html.find('a');
var $iconImg = $html.find('.icon img');
var $label = $html.find('.label');
var $date = $html.find('.date');
var $size = $html.find('.size');
$html
.addClass(item.isFolder() ? 'folder' : 'file')
.data('item', item);
location.setLink($a, item);
$label.text(item.label).attr('title', item.label);
$date.data('time', item.time).text(format.formatDate(item.time));
$size.data('bytes', item.size).text(format.formatSize(item.size));
item.icon = resource.icon(item.type);
if (item.isFolder() && !item.isManaged) {
$html.addClass('page');
item.icon = resource.icon('folder-page');
}
if (item.isCurrentParentFolder()) {
item.icon = resource.icon('folder-parent');
if (!settings.setParentFolderLabels) {
$label.addClass('l10n-parentDirectory');
}
$html.addClass('folder-parent');
}
$iconImg.attr('src', item.icon).attr('alt', item.type);
item.$view = $html;
return $html;
}
function onMouseenter() {
var item = $(this).closest('.item').data('item');
event.pub('item.mouseenter', item);
}
function onMouseleave() {
var item = $(this).closest('.item').data('item');
event.pub('item.mouseleave', item);
}
function onLocationChanged(item) {
$items.find('.item').remove();
if (item.parent && !settings.hideParentFolder) {
$items.append(update(item.parent));
}
_.each(item.content, function (e) {
if (!(e.isFolder() && settings.hideFolders)) {
$items.append(update(e));
}
});
if (item.isEmpty()) {
$empty.show();
} else {
$empty.hide();
}
$content.scrollLeft(0).scrollTop(0);
}
function onLocationRefreshed(item, added, removed) {
_.each(added, function (item) {
if (!(item.isFolder() && settings.hideFolders)) {
update(item).hide().appendTo($items).fadeIn(400);
}
});
_.each(removed, function (item) {
item.$view.fadeOut(400, function () {
item.$view.remove();
});
});
if (item.isEmpty()) {
setTimeout(function () { $empty.show(); }, 400);
} else {
$empty.hide();
}
}
function init() {
$content.appendTo(mainrow.$el);
$empty.hide();
format.setDefaultMetric(settings.binaryPrefix);
$items
.on('mouseenter', '.item a', onMouseenter)
.on('mouseleave', '.item a', onMouseleave);
event.sub('location.changed', onLocationChanged);
event.sub('location.refreshed', onLocationRefreshed);
}
init();
var $content = $('<div id="content"/>').appendTo(mainrow.$el);
return {
$el: $content,
$view: $view,
$items: $items
$el: $content
};
});