archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Lazy Home: Lazy load latest blog posts and assets and group by week and

Browse Source 
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:
Tobias Johansson
2018-11-12 12:57:24 +01:00
parent 1a49b24f8e
commit 37fe235d47
6 changed files with 33 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/scripts/tagged_assets.js
View File

@@ -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 = $('<a class="card asset card-image-fade pr-0 mx-0 mb-2">')
.addClass('js-tagged-asset')
.attr('href', '/nodes/' + node._id + '/redir')
.attr('title', node.name);
let thumbnail_container = $('<div class="embed-responsive embed-responsive-16by9">');
function warnNoPicture() {
let card_icon = $('<div class="card-img-top card-icon embed-responsive-item">');
card_icon.html('<i class="pi-' + node.node_type + '">');
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 = $('<img class="card-img-top embed-responsive-item">')
.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 = $('<div class="card-body py-2 d-flex flex-column">');
let card_title = $('<div class="card-title mb-1 font-weight-bold">');
card_title.text(node.name);
card_body.append(card_title);
let card_meta = $('<ul class="card-text list-unstyled d-flex text-black-50 mt-auto">');
let card_project = $('<a class="font-weight-bold pr-2">')
.attr('href', '/p/' + node.project.url)
.attr('title', node.project.name)
.text(node.project.name);
card_meta.append(card_project);
card_meta.append('<li>' + node.pretty_created + '</li>');
card_body.append(card_meta);
/* Video progress and 'watched' label. */
if (node.view_progress){
let card_progress = $('<div class="progress rounded-0">');
let card_progress_bar = $('<div class="progress-bar">');
card_progress_bar.css('width', node.view_progress.progress_in_percent + '%');
card_progress.append(card_progress_bar);
thumbnail_container.append(card_progress);
if (node.view_progress.done){
let card_progress_done = $('<div class="card-label">WATCHED</div>');
thumbnail_container.append(card_progress_done);
}
}
if (node.properties.duration){
let card_duration = $('<div class="card-label right">' + node.properties.duration + '</div>');
thumbnail_container.append(card_duration);
}
/* 'Free' ribbon for public assets. */
if (mark_if_public && node.permissions && node.permissions.world){
card.addClass('free');
}
card.append(card_body);
return card;
}
function loadNext(card_deck_element) {
let $card_deck = $(card_deck_element);
let tagged_assets = card_deck_element.tagged_assets; // Stored here by loadTaggedAssets().
let already_loaded = $card_deck.find('a.js-tagged-asset').length;
let load_next = $card_deck.find('a.js-load-next');
let nodes_to_load = tagged_assets.slice(already_loaded, already_loaded + LOAD_NEXT_COUNT);
for (node of nodes_to_load) {
let link = renderAsset(node);
load_next.before(link);
}
if (already_loaded + LOAD_NEXT_COUNT >= tagged_assets.length)
load_next.remove();
}
$.fn.loadTaggedAssets = function(LOAD_INITIAL_COUNT, LOAD_NEXT_COUNT, has_subscription) {
$.fn.loadTaggedAssets = function(load_initial_count, load_next_count, has_subscription) {
mark_if_public = !has_subscription;
this.each(function(index, card_deck_element) {
// TODO(Sybren): show a 'loading' animation.
$.get('/api/nodes/tagged/' + card_deck_element.dataset.assetTag)
this.each(function(index, each) {
let $card_deck_element = $(each)
$card_deck_element.trigger('pillar:workStart');
$.get('/api/nodes/tagged/' + $card_deck_element.data('assetTag'))
.fail(function(error) {
let msg = xhrErrorResponseMessage(error);
$('<a>').addClass('bg-danger').text(msg).appendTo(card_deck_element);
$card_deck_element
.append(
$('<p>').addClass('bg-danger').text(msg)
);
})
.done(function(resp) {
// 'resp' is a list of node documents.
// Store the response on the DOM card_deck_element so that we can later render more.
card_deck_element.tagged_assets = resp;
// Here render the first N.
for (node of resp.slice(0, LOAD_INITIAL_COUNT)) {
let li = renderAsset(node);
li.appendTo(card_deck_element);
}
// Don't bother with a 'load next' link if there is no more.
if (resp.length <= LOAD_INITIAL_COUNT) return;
if (LOAD_NEXT_COUNT > 0) {
// Construct the 'load next' link.
let link = $('<a class="btn btn-outline-primary px-5 mb-auto mx-3 btn-block">')
.addClass('js-load-next')
.attr('href', 'javascript:void(0);')
.click(function() { loadNext(card_deck_element); return false; })
.text('Load More');
link.appendTo(card_deck_element);
}
$card_deck_element.append(
pillar.templates.Nodes.createListOf$nodeItems(resp, load_initial_count, load_next_count)
);
})
.always(function() {
$card_deck_element.trigger('pillar:workStop');
});
});
};