mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-29 22:45:14 -04:00
Refactor view.
This commit is contained in:
Lars Jung
parent
3cf135b670
commit
58bf1a3091
4 changed files with 125 additions and 206 deletions
|
|
@ -1,61 +0,0 @@
|
||||||
modulejs.define('view/item', ['_', '$', 'core/format', 'core/location', 'core/resource', 'core/settings'], function (_, $, format, location, resource, allsettings) {
|
|
||||||
|
|
||||||
var settings = _.extend({
|
|
||||||
setParentFolderLabels: false
|
|
||||||
}, allsettings.view);
|
|
||||||
var template =
|
|
||||||
'<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>';
|
|
||||||
|
|
||||||
|
|
||||||
function render(item) {
|
|
||||||
|
|
||||||
var $html = $(template);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return {
|
|
||||||
render: render
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/settings', 'view/content', 'view/item'], function (_, $, event, format, allsettings, content, viewitem) {
|
modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/content'], function (_, $, event, format, location, resource, allsettings, content) {
|
||||||
|
|
||||||
var settings = _.extend({
|
var settings = _.extend({
|
||||||
binaryPrefix: false,
|
binaryPrefix: false,
|
||||||
hideFolders: false,
|
hideFolders: false,
|
||||||
hideParentFolder: false
|
hideParentFolder: false,
|
||||||
|
setParentFolderLabels: false
|
||||||
}, allsettings.view);
|
}, allsettings.view);
|
||||||
var template =
|
var template =
|
||||||
'<div id="view">' +
|
'<div id="view">' +
|
||||||
|
|
@ -17,11 +18,60 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/setti
|
||||||
'</ul>' +
|
'</ul>' +
|
||||||
'<div class="empty l10n-empty"/>' +
|
'<div class="empty l10n-empty"/>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
|
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 $view = $(template);
|
var $view = $(template);
|
||||||
var $items = $view.find('#items');
|
var $items = $view.find('#items');
|
||||||
var $empty = $view.find('.empty');
|
var $empty = $view.find('.empty');
|
||||||
|
|
||||||
|
|
||||||
|
function itemToHtml(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() {
|
function onMouseenter() {
|
||||||
|
|
||||||
var item = $(this).closest('.item').data('item');
|
var item = $(this).closest('.item').data('item');
|
||||||
|
|
@ -39,13 +89,13 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/setti
|
||||||
$items.find('.item').remove();
|
$items.find('.item').remove();
|
||||||
|
|
||||||
if (item.parent && !settings.hideParentFolder) {
|
if (item.parent && !settings.hideParentFolder) {
|
||||||
$items.append(viewitem.render(item.parent));
|
$items.append(itemToHtml(item.parent));
|
||||||
}
|
}
|
||||||
|
|
||||||
_.each(item.content, function (e) {
|
_.each(item.content, function (e) {
|
||||||
|
|
||||||
if (!(e.isFolder() && settings.hideFolders)) {
|
if (!(e.isFolder() && settings.hideFolders)) {
|
||||||
$items.append(viewitem.render(e));
|
$items.append(itemToHtml(e));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -63,7 +113,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/setti
|
||||||
_.each(added, function (item) {
|
_.each(added, function (item) {
|
||||||
|
|
||||||
if (!(item.isFolder() && settings.hideFolders)) {
|
if (!(item.isFolder() && settings.hideFolders)) {
|
||||||
viewitem.render(item).hide().appendTo($items).fadeIn(400);
|
itemToHtml(item).hide().appendTo($items).fadeIn(400);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var ID = 'view/item';
|
|
||||||
var DEPS = ['_', '$', 'core/format', 'core/location', 'core/resource', 'core/settings'];
|
|
||||||
|
|
||||||
describe('module \'' + ID + '\'', function () {
|
|
||||||
|
|
||||||
before(function () {
|
|
||||||
|
|
||||||
this.definition = modulejs._private.definitions[ID];
|
|
||||||
|
|
||||||
this.xFormat = {
|
|
||||||
formatDate: sinon.stub().returns(util.uniqId()),
|
|
||||||
formatSize: sinon.stub().returns(util.uniqId())
|
|
||||||
};
|
|
||||||
this.xLocation = {
|
|
||||||
setLink: sinon.stub().returns(util.uniqId())
|
|
||||||
};
|
|
||||||
this.xResource = {
|
|
||||||
icon: sinon.stub().returns(util.uniqId())
|
|
||||||
};
|
|
||||||
this.xSettings = {view: {
|
|
||||||
setParentFolderLabels: false
|
|
||||||
}};
|
|
||||||
|
|
||||||
this.applyFn = function () {
|
|
||||||
|
|
||||||
this.xFormat.formatDate.reset();
|
|
||||||
this.xFormat.formatSize.reset();
|
|
||||||
this.xLocation.setLink.reset();
|
|
||||||
this.xResource.icon.reset();
|
|
||||||
|
|
||||||
return this.definition.fn(_, $, this.xFormat, this.xLocation, this.xResource, this.xSettings);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('definition', function () {
|
|
||||||
|
|
||||||
it('is defined', function () {
|
|
||||||
|
|
||||||
assert.isPlainObject(this.definition);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has correct id', function () {
|
|
||||||
|
|
||||||
assert.strictEqual(this.definition.id, ID);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('requires correct', function () {
|
|
||||||
|
|
||||||
assert.deepEqual(this.definition.deps, DEPS);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('args for each request', function () {
|
|
||||||
|
|
||||||
assert.strictEqual(this.definition.deps.length, this.definition.fn.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has no instance', function () {
|
|
||||||
|
|
||||||
assert.notProperty(modulejs._private.instances, ID);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('inits without errors', function () {
|
|
||||||
|
|
||||||
this.applyFn();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('application', function () {
|
|
||||||
|
|
||||||
it('returns object with 1 property', function () {
|
|
||||||
|
|
||||||
var instance = this.applyFn();
|
|
||||||
assert.isPlainObject(instance);
|
|
||||||
assert.lengthOfKeys(instance, 1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('.render()', function () {
|
|
||||||
|
|
||||||
before(function () {
|
|
||||||
|
|
||||||
this.createItem = function () {
|
|
||||||
|
|
||||||
return {
|
|
||||||
isFolder: sinon.stub().returns(false),
|
|
||||||
label: util.uniqId(),
|
|
||||||
time: 0,
|
|
||||||
size: 0,
|
|
||||||
type: util.uniqId(),
|
|
||||||
isManaged: false,
|
|
||||||
icon: null,
|
|
||||||
isCurrentParentFolder: sinon.stub().returns(false)
|
|
||||||
};
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
it('is function', function () {
|
|
||||||
|
|
||||||
var instance = this.applyFn();
|
|
||||||
assert.isFunction(instance.render);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns jQuery instance of single HTML element', function () {
|
|
||||||
|
|
||||||
var item = this.createItem();
|
|
||||||
var instance = this.applyFn();
|
|
||||||
var $item = instance.render(item);
|
|
||||||
assert.isObject($item);
|
|
||||||
assert.lengthOf($item, 1);
|
|
||||||
assert.isString($item.jquery);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('$item.data(\'item\') is back reference to item', function () {
|
|
||||||
|
|
||||||
var item = this.createItem();
|
|
||||||
var instance = this.applyFn();
|
|
||||||
var $item = instance.render(item);
|
|
||||||
assert.strictEqual($item.data('item'), item);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('sets item.$view as reference to $item', function () {
|
|
||||||
|
|
||||||
var item = this.createItem();
|
|
||||||
var instance = this.applyFn();
|
|
||||||
var $item = instance.render(item);
|
|
||||||
assert.strictEqual(item.$view, $item);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var ID = 'view/view';
|
var ID = 'view/view';
|
||||||
var DEPS = ['_', '$', 'core/event', 'core/format', 'core/settings', 'view/content', 'view/item'];
|
var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/content'];
|
||||||
|
|
||||||
describe('module \'' + ID + '\'', function () {
|
describe('module \'' + ID + '\'', function () {
|
||||||
|
|
||||||
|
|
@ -15,20 +15,32 @@ describe('module \'' + ID + '\'', function () {
|
||||||
pub: sinon.stub()
|
pub: sinon.stub()
|
||||||
};
|
};
|
||||||
this.xFormat = {
|
this.xFormat = {
|
||||||
setDefaultMetric: sinon.stub()
|
setDefaultMetric: sinon.stub(),
|
||||||
|
formatDate: sinon.stub().returns(util.uniqId()),
|
||||||
|
formatSize: sinon.stub().returns(util.uniqId())
|
||||||
};
|
};
|
||||||
this.xSettings = util.uniqObj();
|
this.xLocation = {
|
||||||
|
setLink: sinon.stub().returns(util.uniqId())
|
||||||
|
};
|
||||||
|
this.xResource = {
|
||||||
|
icon: sinon.stub().returns(util.uniqId())
|
||||||
|
};
|
||||||
|
this.xSettings = {view: {
|
||||||
|
setParentFolderLabels: false
|
||||||
|
}};
|
||||||
this.xContent = {$el: null};
|
this.xContent = {$el: null};
|
||||||
this.xItem = {render: sinon.stub()};
|
|
||||||
|
|
||||||
this.applyFn = function () {
|
this.applyFn = function () {
|
||||||
|
|
||||||
this.xEvent.sub.reset();
|
this.xEvent.sub.reset();
|
||||||
this.xEvent.pub.reset();
|
this.xEvent.pub.reset();
|
||||||
this.xFormat.setDefaultMetric.reset();
|
this.xFormat.setDefaultMetric.reset();
|
||||||
this.xItem.render.reset();
|
this.xFormat.formatDate.reset();
|
||||||
|
this.xFormat.formatSize.reset();
|
||||||
|
this.xLocation.setLink.reset();
|
||||||
|
this.xResource.icon.reset();
|
||||||
|
|
||||||
return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xSettings, this.xContent, this.xItem);
|
return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings, this.xContent);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -147,6 +159,58 @@ describe('module \'' + ID + '\'', function () {
|
||||||
assert.strictEqual(instance.$items.attr('id'), 'items');
|
assert.strictEqual(instance.$items.attr('id'), 'items');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// describe('.render()', function () {
|
||||||
|
|
||||||
|
// before(function () {
|
||||||
|
|
||||||
|
// this.createItem = function () {
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// isFolder: sinon.stub().returns(false),
|
||||||
|
// label: util.uniqId(),
|
||||||
|
// time: 0,
|
||||||
|
// size: 0,
|
||||||
|
// type: util.uniqId(),
|
||||||
|
// isManaged: false,
|
||||||
|
// icon: null,
|
||||||
|
// isCurrentParentFolder: sinon.stub().returns(false)
|
||||||
|
// };
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
|
||||||
|
// it('is function', function () {
|
||||||
|
|
||||||
|
// var instance = this.applyFn();
|
||||||
|
// assert.isFunction(instance.render);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// it('returns jQuery instance of single HTML element', function () {
|
||||||
|
|
||||||
|
// var item = this.createItem();
|
||||||
|
// var instance = this.applyFn();
|
||||||
|
// var $item = instance.render(item);
|
||||||
|
// assert.isObject($item);
|
||||||
|
// assert.lengthOf($item, 1);
|
||||||
|
// assert.isString($item.jquery);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// it('$item.data(\'item\') is back reference to item', function () {
|
||||||
|
|
||||||
|
// var item = this.createItem();
|
||||||
|
// var instance = this.applyFn();
|
||||||
|
// var $item = instance.render(item);
|
||||||
|
// assert.strictEqual($item.data('item'), item);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// it('sets item.$view as reference to $item', function () {
|
||||||
|
|
||||||
|
// var item = this.createItem();
|
||||||
|
// var instance = this.applyFn();
|
||||||
|
// var $item = instance.render(item);
|
||||||
|
// assert.strictEqual(item.$view, $item);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
});
|
});
|
||||||
|
|
||||||
}());
|
}());
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue