diff --git a/data/config.ini b/data/config.ini index c3b3dd70..2fc95160 100644 --- a/data/config.ini +++ b/data/config.ini @@ -49,5 +49,8 @@ minUserNameLength = 1 maxUserNameLength = 32 usersPerPage = 20 +[posts] +postsPerPage = 40 + [misc] thumbnailCropStyle = outside diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css new file mode 100644 index 00000000..efa9e935 --- /dev/null +++ b/public_html/css/post-list.css @@ -0,0 +1,26 @@ +#post-list { + text-align: center; +} + +#post-list .wrapper { + display: inline-block; + margin: 0 auto; +} + +#post-list ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#post-list li a { + display: block; + margin: 0.4em; +} +#post-list li img { + display: block; + box-shadow: 0 0 0 1px #999; +} diff --git a/public_html/index.html b/public_html/index.html index 44a3766d..16bce1de 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -29,6 +29,7 @@ + diff --git a/public_html/js/Presenters/PostListPresenter.js b/public_html/js/Presenters/PostListPresenter.js index bf5ad9b0..02993c62 100644 --- a/public_html/js/Presenters/PostListPresenter.js +++ b/public_html/js/Presenters/PostListPresenter.js @@ -2,26 +2,91 @@ var App = App || {}; App.Presenters = App.Presenters || {}; App.Presenters.PostListPresenter = function( + _, jQuery, - topNavigationPresenter) { + util, + promise, + auth, + router, + pagedCollectionPresenter, + topNavigationPresenter, + messagePresenter) { var $el = jQuery('#content'); + var listTemplate; + var itemTemplate; function init(args) { topNavigationPresenter.select('posts'); topNavigationPresenter.changeTitle('Posts'); - render(); + + promise.waitAll( + util.promiseTemplate('post-list'), + util.promiseTemplate('post-list-item')).then(function(listHtml, itemHtml) { + listTemplate = _.template(listHtml); + itemTemplate = _.template(itemHtml); + + render(); + reinit(args); + }); + } + + function reinit(args) { + var searchArgs = util.parseComplexRouteArgs(args.searchArgs); + searchArgs.order = searchArgs.order; + + updateActiveOrder(searchArgs.order); + initPaginator(searchArgs); + } + + function initPaginator(searchArgs) { + pagedCollectionPresenter.init({ + page: searchArgs.page, + searchParams: {order: searchArgs.order}, + baseUri: '#/posts', + backendUri: '/posts', + updateCallback: function(data, clear) { + renderPosts(data.entities, clear); + return $el.find('.pagination-content'); + }, + failCallback: function(response) { + $el.empty(); + messagePresenter.showError($el, response.json && response.json.error || response); + }}); } function render() { - $el.html('Post list placeholder'); + $el.html(listTemplate()); + } + + function updateActiveOrder(activeOrder) { + $el.find('.order li a').removeClass('active'); + $el.find('.order [data-order="' + activeOrder + '"]').addClass('active'); + } + + function renderPosts(posts, clear) { + var $target = $el.find('.posts'); + + var all = ''; + _.each(posts, function(post) { + all += itemTemplate({ + post: post, + }); + }); + + if (clear) { + $target.html(all); + } else { + $target.append(all); + } } return { init: init, + reinit: reinit, render: render, }; }; -App.DI.register('postListPresenter', ['jQuery', 'topNavigationPresenter'], App.Presenters.PostListPresenter); +App.DI.register('postListPresenter', ['_', 'jQuery', 'util', 'promise', 'auth', 'router', 'pagedCollectionPresenter', 'topNavigationPresenter', 'messagePresenter'], App.Presenters.PostListPresenter); diff --git a/public_html/templates/post-list-item.tpl b/public_html/templates/post-list-item.tpl new file mode 100644 index 00000000..b9f6d63e --- /dev/null +++ b/public_html/templates/post-list-item.tpl @@ -0,0 +1,8 @@ +