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:
52
src/scripts/js/es6/common/templates/posts.js
Normal file
52
src/scripts/js/es6/common/templates/posts.js
Normal 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 };
|
Reference in New Issue
Block a user