Refactored template loading

This commit is contained in:
Marcin Kurczewski 2014-10-05 10:41:12 +02:00
parent 688b5b1281
commit 784ff22050
18 changed files with 107 additions and 149 deletions

5
TODO
View file

@ -46,11 +46,6 @@ everything related to comments:
refactors:
- add enum validation in IValidatables (needs refactors of enums and
possible disposal of EnumHelper in favor of something more subtle)
- simplify template loading in presenters - right now template loading
requires _, util and promise:
promise.wait(util.loadTemplate('blah'))
.then(function(html) {
template = _.template(html); });
- change content spinner to nprogress:
http://ricostacruz.com/nprogress/
- reduce dependencies

View file

@ -10,9 +10,7 @@ App.Presenters.GlobalCommentListPresenter = function(
topNavigationPresenter) {
var $el;
var listTemplate;
var itemTemplate;
var postTemplate;
var templates = {};
function init(args, loaded) {
$el = jQuery('#content');
@ -22,11 +20,11 @@ App.Presenters.GlobalCommentListPresenter = function(
util.promiseTemplate('global-comment-list'),
util.promiseTemplate('global-comment-list-item'),
util.promiseTemplate('post-list-item'))
.then(function(listHtml, listItemHtml, postItemHtml)
.then(function(listTemplate, listItemTemplate, postTemplate)
{
listTemplate = _.template(listHtml);
itemTemplate = _.template(listItemHtml);
postTemplate = _.template(postItemHtml);
templates.list = listTemplate;
templates.listItem = listItemTemplate;
templates.post = postTemplate;
render();
loaded();
@ -66,7 +64,7 @@ App.Presenters.GlobalCommentListPresenter = function(
}
function render() {
$el.html(listTemplate());
$el.html(templates.list());
}
function renderPosts(data, clear) {
@ -80,9 +78,9 @@ App.Presenters.GlobalCommentListPresenter = function(
var post = data.post;
var comments = data.comments;
var $post = jQuery('<li>' + itemTemplate({
var $post = jQuery('<li>' + templates.listItem({
post: post,
postTemplate: postTemplate,
postTemplate: templates.post,
}) + '</li>');
var presenter = App.DI.get('postCommentListPresenter');

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.HomePresenter = function(
_,
jQuery,
util,
promise,
@ -12,8 +11,7 @@ App.Presenters.HomePresenter = function(
messagePresenter) {
var $el = jQuery('#content');
var homeTemplate;
var postContentTemplate;
var templates = {};
var globals;
var post;
@ -27,12 +25,12 @@ App.Presenters.HomePresenter = function(
api.get('/globals'),
api.get('/posts/featured'))
.then(function(
homeTemplateHtml,
postContentTemplateHtml,
homeTemplate,
postContentTemplate,
globalsResponse,
featuredPostResponse) {
homeTemplate = _.template(homeTemplateHtml);
postContentTemplate = _.template(postContentTemplateHtml);
templates.home = homeTemplate;
templates.postContent = postContentTemplate;
globals = globalsResponse.json;
post = featuredPostResponse.json;
@ -46,9 +44,9 @@ App.Presenters.HomePresenter = function(
}
function render() {
$el.html(homeTemplate({
$el.html(templates.home({
post: post,
postContentTemplate: postContentTemplate,
postContentTemplate: templates.postContent,
globals: globals,
title: topNavigationPresenter.getBaseTitle(),
canViewUsers: auth.hasPrivilege(auth.privileges.viewUsers),
@ -65,4 +63,4 @@ App.Presenters.HomePresenter = function(
};
App.DI.register('homePresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.HomePresenter);
App.DI.register('homePresenter', ['jQuery', 'util', 'promise', 'api', 'auth', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.HomePresenter);

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.LoginPresenter = function(
_,
jQuery,
util,
promise,
@ -13,7 +12,7 @@ App.Presenters.LoginPresenter = function(
var $el = jQuery('#content');
var $messages;
var template;
var templates = {};
var previousRoute;
function init(args, loaded) {
@ -21,8 +20,8 @@ App.Presenters.LoginPresenter = function(
topNavigationPresenter.changeTitle('Login');
previousRoute = args.previousRoute;
promise.wait(util.promiseTemplate('login-form'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.login = template;
if (auth.isLoggedIn()) {
finishLogin();
} else {
@ -34,7 +33,7 @@ App.Presenters.LoginPresenter = function(
}
function render() {
$el.html(template());
$el.html(templates.login());
$el.find('form').submit(loginFormSubmitted);
$messages = $el.find('.messages');
$messages.width($el.find('form').width());
@ -81,4 +80,4 @@ App.Presenters.LoginPresenter = function(
};
App.DI.register('loginPresenter', ['_', 'jQuery', 'util', 'promise', 'router', 'auth', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.LoginPresenter);
App.DI.register('loginPresenter', ['jQuery', 'util', 'promise', 'router', 'auth', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.LoginPresenter);

View file

@ -20,7 +20,7 @@ App.Presenters.PagerPresenter = function(
var targetContent;
var endlessScroll = browsingSettings.getSettings().endlessScroll;
var scrollInterval;
var template;
var templates = {};
var forceClear = false;
var baseUri;
@ -39,8 +39,8 @@ App.Presenters.PagerPresenter = function(
pager.setSearchParams(args.searchParams);
promise.wait(util.promiseTemplate('pager'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.pager = template;
render();
loaded();
});
@ -222,7 +222,7 @@ App.Presenters.PagerPresenter = function(
}
function render() {
$target.html(template({originalHtml: targetContent}));
$target.html(templates.pager({originalHtml: targetContent}));
$messages = $target.find('.pagination-content');
$pageList = $target.find('.page-list');
if (endlessScroll) {

View file

@ -12,10 +12,8 @@ App.Presenters.PostCommentListPresenter = function(
messagePresenter) {
var $el;
var commentListTemplate;
var commentListItemTemplate;
var commentFormTemplate;
var privileges;
var templates = {};
var post;
var comments = [];
@ -40,14 +38,14 @@ App.Presenters.PostCommentListPresenter = function(
util.promiseTemplate('comment-form'),
comments.length === 0 ? api.get('/comments/' + args.post.id) : null)
.then(function(
commentListHtml,
commentListItemHtml,
commentFormHtml,
commentListTemplate,
commentListItemTemplate,
commentFormTemplate,
commentsResponse)
{
commentListTemplate = _.template(commentListHtml);
commentListItemTemplate = _.template(commentListItemHtml);
commentFormTemplate = _.template(commentFormHtml);
templates.commentList = commentListTemplate;
templates.commentListItem = commentListItemTemplate;
templates.commentForm = commentFormTemplate;
if (commentsResponse) {
comments = commentsResponse.json.data;
}
@ -59,11 +57,11 @@ App.Presenters.PostCommentListPresenter = function(
}
function render() {
$el.html(commentListTemplate(
$el.html(templates.commentList(
_.extend(
{
commentListItemTemplate: commentListItemTemplate,
commentFormTemplate: commentFormTemplate,
commentListItemTemplate: templates.commentListItem,
commentFormTemplate: templates.commentForm,
formatRelativeTime: util.formatRelativeTime,
formatMarkdown: util.formatMarkdown,
comments: comments,
@ -95,7 +93,7 @@ App.Presenters.PostCommentListPresenter = function(
}
function renderComment($targetList, comment) {
var $item = jQuery('<li>' + commentListItemTemplate({
var $item = jQuery('<li>' + templates.commentListItem({
comment: comment,
formatRelativeTime: util.formatRelativeTime,
formatMarkdown: util.formatMarkdown,
@ -167,7 +165,7 @@ App.Presenters.PostCommentListPresenter = function(
if ($item.find('.comment-form').length > 0) {
return;
}
var $form = jQuery(commentFormTemplate({title: 'Edit comment', text: comment.text}));
var $form = jQuery(templates.commentForm({title: 'Edit comment', text: comment.text}));
$item.find('.body').append($form);
$item.find('form button[type=submit]').click(function(e) { commentFormSubmitted(e, comment); });
}

View file

@ -13,10 +13,9 @@ App.Presenters.PostListPresenter = function(
var KEY_RETURN = 13;
var templates = {};
var $el = jQuery('#content');
var $searchInput;
var listTemplate;
var itemTemplate;
var searchArgs;
@ -29,9 +28,9 @@ App.Presenters.PostListPresenter = function(
promise.wait(
util.promiseTemplate('post-list'),
util.promiseTemplate('post-list-item'))
.then(function(listHtml, itemHtml) {
listTemplate = _.template(listHtml);
itemTemplate = _.template(itemHtml);
.then(function(listTemplate, listItemTemplate) {
templates.list = listTemplate;
templates.listItem = listItemTemplate;
render();
loaded();
@ -69,7 +68,7 @@ App.Presenters.PostListPresenter = function(
}
function render() {
$el.html(listTemplate());
$el.html(templates.list());
$searchInput = $el.find('input[name=query]');
$searchInput.val(searchArgs.query);
@ -93,7 +92,7 @@ App.Presenters.PostListPresenter = function(
}
_.each(posts, function(post) {
$target.append(jQuery('<li>' + itemTemplate({
$target.append(jQuery('<li>' + templates.listItem({
searchArgs: searchArgs,
post: post,
}) + '</li>'));

View file

@ -19,18 +19,11 @@ App.Presenters.PostPresenter = function(
var $el = jQuery('#content');
var $messages = $el;
var postTemplate;
var postEditTemplate;
var postContentTemplate;
var historyTemplate;
var templates = {};
var postNameOrId;
var searchArgs;
var post;
var postScore;
var postFavorites;
var postHistory;
var privileges = {};
var editPrivileges = {};
@ -61,14 +54,14 @@ App.Presenters.PostPresenter = function(
util.promiseTemplate('post-content'),
util.promiseTemplate('history'))
.then(function(
postTemplateHtml,
postEditTemplateHtml,
postContentTemplateHtml,
historyTemplateHtml) {
postTemplate = _.template(postTemplateHtml);
postEditTemplate = _.template(postEditTemplateHtml);
postContentTemplate = _.template(postContentTemplateHtml);
historyTemplate = _.template(historyTemplateHtml);
postTemplate,
postEditTemplate,
postContentTemplate,
historyTemplate) {
templates.post = postTemplate;
templates.postEdit = postEditTemplate;
templates.postContent = postContentTemplate;
templates.history = historyTemplate;
reinit(args, loaded);
}).fail(function(response) {
@ -129,9 +122,6 @@ App.Presenters.PostPresenter = function(
promise.wait(api.get('/posts/' + postNameOrId))
.then(function(postResponse) {
post = postResponse.json;
postScore = postResponse.json.ownScore;
postFavorites = postResponse.json.favorites;
postHistory = postResponse.json.history;
resolve();
}).fail(function(response) {
showGenericError(response);
@ -178,21 +168,21 @@ App.Presenters.PostPresenter = function(
}
function renderPostTemplate() {
return postTemplate({
return templates.post({
searchArgs: searchArgs,
post: post,
ownScore: postScore,
postFavorites: postFavorites,
postHistory: postHistory,
ownScore: post.ownScore,
postFavorites: post.favorites,
postHistory: post.history,
formatRelativeTime: util.formatRelativeTime,
formatFileSize: util.formatFileSize,
postContentTemplate: postContentTemplate,
postEditTemplate: postEditTemplate,
historyTemplate: historyTemplate,
postContentTemplate: templates.postContent,
postEditTemplate: templates.postEdit,
historyTemplate: templates.history,
hasFav: _.any(postFavorites, function(favUser) { return favUser.id === auth.getCurrentUser().id; }),
hasFav: _.any(post.favorites, function(favUser) { return favUser.id === auth.getCurrentUser().id; }),
isLoggedIn: auth.isLoggedIn(),
privileges: privileges,
editPrivileges: editPrivileges,

View file

@ -17,7 +17,7 @@ App.Presenters.PostUploadPresenter = function(
var $el = jQuery('#content');
var $messages;
var template;
var templates = {};
var allPosts = [];
var tagInput;
var fileDropper;
@ -28,15 +28,15 @@ App.Presenters.PostUploadPresenter = function(
topNavigationPresenter.changeTitle('Upload');
promise.wait(util.promiseTemplate('post-upload'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.upload = template;
render();
loaded();
});
}
function render() {
$el.html(template({
$el.html(templates.upload({
canUploadPostsAnonymously: auth.hasPrivilege(auth.privileges.uploadPostsAnonymously)
}));
$messages = $el.find('.messages');

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.RegistrationPresenter = function(
_,
jQuery,
util,
promise,
@ -11,22 +10,22 @@ App.Presenters.RegistrationPresenter = function(
messagePresenter) {
var $el = jQuery('#content');
var template;
var templates = {};
var $messages;
function init(args, loaded) {
topNavigationPresenter.select('register');
topNavigationPresenter.changeTitle('Registration');
promise.wait(util.promiseTemplate('registration-form'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.registration = template;
render();
loaded();
});
}
function render() {
$el.html(template());
$el.html(templates.registration());
$el.find('form').submit(registrationFormSubmitted);
$messages = $el.find('.messages');
$messages.width($el.find('form').width());
@ -97,4 +96,4 @@ App.Presenters.RegistrationPresenter = function(
};
App.DI.register('registrationPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.RegistrationPresenter);
App.DI.register('registrationPresenter', ['jQuery', 'util', 'promise', 'api', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.RegistrationPresenter);

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.TopNavigationPresenter = function(
_,
jQuery,
util,
promise,
@ -10,13 +9,13 @@ App.Presenters.TopNavigationPresenter = function(
var selectedElement = null;
var $el = jQuery('#top-navigation');
var template;
var templates = {};
var baseTitle = document.title;
function init(args, loaded) {
promise.wait(util.promiseTemplate('top-navigation'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.topNavigation = template;
render();
loaded();
auth.startObservingLoginChanges('top-navigation', loginStateChanged);
@ -34,7 +33,7 @@ App.Presenters.TopNavigationPresenter = function(
}
function render() {
$el.html(template({
$el.html(templates.topNavigation({
loggedIn: auth.isLoggedIn(),
user: auth.getCurrentUser(),
canListUsers: auth.hasPrivilege(auth.privileges.listUsers),
@ -75,4 +74,4 @@ App.Presenters.TopNavigationPresenter = function(
};
App.DI.registerSingleton('topNavigationPresenter', ['_', 'jQuery', 'util', 'promise', 'auth'], App.Presenters.TopNavigationPresenter);
App.DI.registerSingleton('topNavigationPresenter', ['jQuery', 'util', 'promise', 'auth'], App.Presenters.TopNavigationPresenter);

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserAccountRemovalPresenter = function(
_,
jQuery,
util,
promise,
@ -12,7 +11,7 @@ App.Presenters.UserAccountRemovalPresenter = function(
messagePresenter) {
var target;
var template;
var templates = {};
var user;
var privileges = {};
@ -25,8 +24,8 @@ App.Presenters.UserAccountRemovalPresenter = function(
(auth.hasPrivilege(auth.privileges.deleteOwnAccount) && auth.isLoggedIn(user.name));
promise.wait(util.promiseTemplate('account-removal'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.accountRemoval = template;
render();
loaded();
});
@ -34,7 +33,7 @@ App.Presenters.UserAccountRemovalPresenter = function(
function render() {
var $el = jQuery(target);
$el.html(template({
$el.html(templates.accountRemoval({
user: user,
canDeleteAccount: privileges.canDeleteAccount}));
@ -77,4 +76,4 @@ App.Presenters.UserAccountRemovalPresenter = function(
};
App.DI.register('userAccountRemovalPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'router', 'messagePresenter'], App.Presenters.UserAccountRemovalPresenter);
App.DI.register('userAccountRemovalPresenter', ['jQuery', 'util', 'promise', 'api', 'auth', 'router', 'messagePresenter'], App.Presenters.UserAccountRemovalPresenter);

View file

@ -11,7 +11,7 @@ App.Presenters.UserAccountSettingsPresenter = function(
messagePresenter) {
var target;
var template;
var templates = {};
var user;
var privileges;
var avatarContent;
@ -41,8 +41,8 @@ App.Presenters.UserAccountSettingsPresenter = function(
};
promise.wait(util.promiseTemplate('account-settings'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.accountRemoval = template;
render();
loaded();
});
@ -50,7 +50,7 @@ App.Presenters.UserAccountSettingsPresenter = function(
function render() {
var $el = jQuery(target);
$el.html(template(_.extend({user: user}, privileges)));
$el.html(templates.accountRemoval(_.extend({user: user}, privileges)));
$el.find('form').submit(accountSettingsFormSubmitted);
$el.find('form [name=avatar-style]').change(avatarStyleChanged);
avatarStyleChanged();

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserActivationPresenter = function(
_,
jQuery,
promise,
util,
@ -14,7 +13,7 @@ App.Presenters.UserActivationPresenter = function(
var $el = jQuery('#content');
var $messages = $el;
var template;
var templates = {};
var formHidden = false;
var operation;
@ -27,8 +26,8 @@ App.Presenters.UserActivationPresenter = function(
function reinit(args, loaded) {
operation = args.operation;
promise.wait(util.promiseTemplate('user-query-form'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.userQuery = template;
if (args.token) {
hideForm();
confirmToken(args.token);
@ -41,7 +40,7 @@ App.Presenters.UserActivationPresenter = function(
}
function render() {
$el.html(template());
$el.html(templates.userQuery());
$messages = $el.find('.messages');
if (formHidden) {
$el.find('form').hide();
@ -114,4 +113,4 @@ App.Presenters.UserActivationPresenter = function(
};
App.DI.register('userActivationPresenter', ['_', 'jQuery', 'promise', 'util', 'auth', 'api', 'router', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.UserActivationPresenter);
App.DI.register('userActivationPresenter', ['jQuery', 'promise', 'util', 'auth', 'api', 'router', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.UserActivationPresenter);

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserBrowsingSettingsPresenter = function(
_,
jQuery,
util,
promise,
@ -11,7 +10,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
messagePresenter) {
var target;
var template;
var templates = {};
var user;
var privileges = {};
@ -22,8 +21,8 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
privileges.canChangeBrowsingSettings = auth.isLoggedIn(user.name) && user.name === auth.getCurrentUser().name;
promise.wait(util.promiseTemplate('browsing-settings'))
.then(function(html) {
template = _.template(html);
.then(function(template) {
templates.browsingSettings = template;
render();
loaded();
});
@ -31,7 +30,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
function render() {
var $el = jQuery(target);
$el.html(template({user: user, settings: browsingSettings.getSettings()}));
$el.html(templates.browsingSettings({user: user, settings: browsingSettings.getSettings()}));
$el.find('form').submit(browsingSettingsFormSubmitted);
}
@ -69,4 +68,4 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
};
App.DI.register('userBrowsingSettingsPresenter', ['_', 'jQuery', 'util', 'promise', 'auth', 'browsingSettings', 'messagePresenter'], App.Presenters.UserBrowsingSettingsPresenter);
App.DI.register('userBrowsingSettingsPresenter', ['jQuery', 'util', 'promise', 'auth', 'browsingSettings', 'messagePresenter'], App.Presenters.UserBrowsingSettingsPresenter);

View file

@ -11,8 +11,7 @@ App.Presenters.UserListPresenter = function(
topNavigationPresenter) {
var $el = jQuery('#content');
var listTemplate;
var itemTemplate;
var templates = {};
function init(args, loaded) {
topNavigationPresenter.select('users');
@ -21,9 +20,9 @@ App.Presenters.UserListPresenter = function(
promise.wait(
util.promiseTemplate('user-list'),
util.promiseTemplate('user-list-item'))
.then(function(listHtml, itemHtml) {
listTemplate = _.template(listHtml);
itemTemplate = _.template(itemHtml);
.then(function(listTemplate, listItemTemplate) {
templates.list = listTemplate;
templates.listItem = listItemTemplate;
render();
loaded();
@ -61,7 +60,7 @@ App.Presenters.UserListPresenter = function(
}
function render() {
$el.html(listTemplate());
$el.html(templates.list());
$el.find('.order a').click(orderLinkClicked);
}
@ -78,7 +77,7 @@ App.Presenters.UserListPresenter = function(
}
_.each(users, function(user) {
$target.append(jQuery('<li>' + itemTemplate({
$target.append(jQuery('<li>' + templates.listItem({
user: user,
formatRelativeTime: util.formatRelativeTime,
}) + '</li>'));

View file

@ -17,7 +17,7 @@ App.Presenters.UserPresenter = function(
var $el = jQuery('#content');
var $messages = $el;
var template;
var templates = {};
var user;
var userName;
var activeTab;
@ -30,11 +30,9 @@ App.Presenters.UserPresenter = function(
promise.wait(
util.promiseTemplate('user'),
api.get('/users/' + userName))
.then(function(
userHtml,
response) {
.then(function(template, response) {
$messages = $el.find('.messages');
template = _.template(userHtml);
templates.user = template;
user = response.json;
var extendedContext = _.extend(args, {user: user});
@ -65,7 +63,7 @@ App.Presenters.UserPresenter = function(
}
function render() {
$el.html(template({
$el.html(templates.user({
user: user,
isLoggedIn: auth.isLoggedIn(user.name),
formatRelativeTime: util.formatRelativeTime,

View file

@ -2,7 +2,6 @@ var App = App || {};
App.Util = function(_, jQuery, promise) {
var templateCache = {};
var exitConfirmationEnabled = false;
function transparentPixel() {
@ -51,25 +50,15 @@ App.Util = function(_, jQuery, promise) {
}
function promiseTemplate(templateName) {
return promiseTemplateFromCache(templateName) ||
promiseTemplateFromDOM(templateName) ||
return promiseTemplateFromDOM(templateName) ||
promiseTemplateWithAJAX(templateName);
}
function promiseTemplateFromCache(templateName) {
if (templateName in templateCache) {
return promise.make(function(resolve, reject) {
resolve(templateCache[templateName]);
});
}
return null;
}
function promiseTemplateFromDOM(templateName) {
var $template = jQuery('#' + templateName + '-template');
if ($template.length) {
return promise.make(function(resolve, reject) {
resolve($template.html());
resolve(_.template($template.html()));
});
}
return null;
@ -84,7 +73,7 @@ App.Util = function(_, jQuery, promise) {
url: templateUrl,
method: 'GET',
success: function(data, textStatus, xhr) {
resolve(data);
resolve(_.template(data));
},
error: function(xhr, textStatus, errorThrown) {
console.log(new Error('Error while loading template ' + templateName + ': ' + errorThrown));