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
This commit is contained in:
2018-11-12 12:57:25 +01:00
parent e2432f6e9f
commit 2990738b5d
20 changed files with 1358 additions and 6 deletions

View File

@@ -0,0 +1,52 @@
import { NodesFactoryInterface } from './nodes'
import { thenLoadImage } from './utils';
class Posts extends NodesFactoryInterface {
static create$item(post) {
let content = [];
let $title = $('<div>')
.addClass('display-4 text-uppercase font-weight-bold')
.text(post.name);
content.push($title);
let $text = $('<div>')
.addClass('lead')
.text(post['pretty_created']);
content.push($text);
let $jumbotron = $('<a>')
.addClass('jumbotron text-white jumbotron-overlay')
.attr('href', '/nodes/' + post._id + '/redir')
.append(
$('<div>')
.addClass('container')
.append(
$('<div>')
.addClass('row')
.append(
$('<div>')
.addClass('col-md-9')
.append(content)
)
)
);
thenLoadImage(post.picture, 'l')
.then((img)=>{
$jumbotron.attr('style', 'background-image: url(' + img.link + ');')
})
.fail((error)=>{
let msg = xhrErrorResponseMessage(error);
console.log(msg || error);
})
let $post = $('<div>')
.addClass('expand-image-links imgs-fluid')
.append(
$jumbotron,
$('<div>')
.addClass('node-details-description mx-auto py-5')
.html(post['properties']['_content_html'])
);
return $post;
}
}
export { Posts };