From 37fe235d4704969f62da9e015b19e4f8108b2cd8 Mon Sep 17 00:00:00 2001 From: Tobias Johansson Date: Mon, 12 Nov 2018 12:57:24 +0100 Subject: [PATCH] Lazy Home: Lazy load latest blog posts and assets and group by week and project. Javascript tutti.js and timeline.js is needed, and then the following to init the timeline: $('.timeline') .timeline({ url: '/api/timeline' }); # Javascript Notes: ## ES6 transpile: * Files in src/scripts/js/es6/common will be transpiled from modern es6 js to old es5 js, and then added to tutti.js * Files in src/scripts/js/es6/individual will be transpiled from modern es6 js to old es5 js to individual module files ## JS Testing * Added the Jest test framework to write javascript tests. * `npm test` will run all the javascript tests Thanks to Sybren for reviewing --- cloud/routes.py | 41 --------- src/scripts/tagged_assets.js | 165 ++++------------------------------- src/styles/_homepage.sass | 11 --- src/styles/main.sass | 2 +- src/templates/homepage.pug | 51 ++++------- src/templates/layout.pug | 1 + 6 files changed, 33 insertions(+), 238 deletions(-) delete mode 100644 src/styles/_homepage.sass diff --git a/cloud/routes.py b/cloud/routes.py index da64c5d..51073ee 100644 --- a/cloud/routes.py +++ b/cloud/routes.py @@ -42,36 +42,6 @@ def _homepage_context() -> dict: # Get latest blog posts api = system_util.pillar_api() - latest_posts = Node.all({ - 'projection': { - 'name': 1, - 'project': 1, - 'node_type': 1, - 'picture': 1, - 'properties.url': 1, - 'properties.content': 1, - 'properties.attachments': 1, - 'properties.status': 1, - }, - - 'where': {'node_type': 'post', 'properties.status': 'published'}, - 'embedded': {'project': 1}, - 'sort': '-_created', - 'max_results': '3' - }, api=api) - - # Append picture Files to last_posts - for post in latest_posts._items: - post.picture = get_file(post.picture, api=api) - post.url = url_for_node(node=post) - - # Get latest assets added to any project - latest_assets = Node.latest('assets', api=api) - - # Append picture Files to latest_assets - for asset in latest_assets._items: - asset.picture = get_file(asset.picture, api=api) - asset.url = url_for_node(node=asset) # Get latest comments to any node latest_comments = Node.latest('comments', api=api) @@ -116,20 +86,9 @@ def _homepage_context() -> dict: main_project = Project.find(current_app.config['MAIN_PROJECT_ID'], api=api) main_project.picture_header = get_file(main_project.picture_header, api=api) - # Merge latest assets and comments into one activity stream. - def sort_key(item): - return item._created - - activity_stream = sorted(latest_assets._items, key=sort_key, reverse=True) - - for node in activity_stream: - node.url = url_for_node(node=node) - return dict( main_project=main_project, - latest_posts=latest_posts._items, latest_comments=latest_comments._items, - activity_stream=activity_stream, random_featured=random_featured) diff --git a/src/scripts/tagged_assets.js b/src/scripts/tagged_assets.js index e06d80d..983b9b9 100644 --- a/src/scripts/tagged_assets.js +++ b/src/scripts/tagged_assets.js @@ -2,162 +2,27 @@ * Support for fetching & rendering assets by tags. */ (function($) { - /* How many nodes to load initially, and when clicked on the 'Load Next' link. */ - const LOAD_INITIAL_COUNT = 8; - const LOAD_NEXT_COUNT = 8; - var mark_if_public = true; - - /* Renders a node as an asset card, returns a jQuery object. */ - function renderAsset(node) { - let card = $('') - .addClass('js-tagged-asset') - .attr('href', '/nodes/' + node._id + '/redir') - .attr('title', node.name); - - let thumbnail_container = $('
'); - - function warnNoPicture() { - let card_icon = $('
'); - card_icon.html(''); - thumbnail_container.append(card_icon); - } - - if (!node.picture) { - warnNoPicture(); - } else { - $(window).trigger('pillar:workStart'); - - // TODO: show 'loading' thingy - $.get('/api/files/' + node.picture) - .fail(function(error) { - let msg = xhrErrorResponseMessage(error); - console.log(msg); - }) - .done(function(resp) { - - // Render the picture if it has the proper size. - var show_variation = null; - if (typeof resp.variations != 'undefined') { - for (variation of resp.variations) { - if (variation.size != 'm') continue; - show_variation = variation; - break; - } - } - - if (show_variation == null) { - warnNoPicture(); - return; - } - - let img = $('') - .attr('alt', node.name) - .attr('src', variation.link) - .attr('width', variation.width) - .attr('height', variation.height); - thumbnail_container.append(img); - }) - .always(function(){ - $(window).trigger('pillar:workStop'); - }); - } - - card.append(thumbnail_container); - - /* Card body for title and meta info. */ - let card_body = $('
'); - let card_title = $('
'); - card_title.text(node.name); - card_body.append(card_title); - - let card_meta = $('