Project-Timeline: Introduced timeline on projects

Limited to projects of category assets and film for now.
This commit is contained in:
2018-11-20 16:29:01 +01:00
parent 1d909faf49
commit fc99713732
10 changed files with 94 additions and 17 deletions

View File

@@ -0,0 +1 @@
export { transformPlaceholder } from './utils/placeholder'

View File

@@ -0,0 +1,15 @@
/**
* Fade out placeholder, then call callback.
* Note that the placeholder will not be removed, and will not be keeped hidden. The caller decides what to do with
* the placeholder.
* @param {jQueryObject} $placeholder
* @param {callback} cb
*/
export function transformPlaceholder($placeholder, cb) {
$placeholder.addClass('placeholder replaced')
.delay(250)
.queue(()=>{
$placeholder.removeClass('placeholder replaced');
cb();
})
}

View File

@@ -1 +1,7 @@
export { Timeline } from './timeline/timeline';
export { Timeline } from './timeline/timeline';
// Init timelines on document ready
$(function() {
$(".timeline")
.timeline();
})

View File

@@ -17,30 +17,51 @@
* continue_from: 123456.2 // python timestamp
* }
*/
const DEFAULT_URL = '/api/timeline';
const transformPlaceholder = pillar.utils.transformPlaceholder;
class Timeline {
constructor(target, params, builder) {
this._$targetDom = $(target)
this._url = params['url'];
this._queryParams = params['queryParams'] || {};
constructor(target, builder) {
this._$targetDom = $(target);
this._url;
this._queryParams = {};
this._builder = builder;
this._init();
}
_init() {
this._workStart();
this._setUrl();
this._setQueryParams();
this._thenLoadMore()
.then((it)=>{
this._$targetDom.empty();
this._$targetDom.append(it);
if (this._hasMore()) {
let btn = this._create$LoadMoreBtn();
this._$targetDom.append(btn);
}
transformPlaceholder(this._$targetDom, () => {
this._$targetDom.empty()
.append(it);
if (this._hasMore()) {
let btn = this._create$LoadMoreBtn();
this._$targetDom.append(btn);
}
})
})
.always(this._workStop.bind(this));
}
_setUrl() {
let projectId = this._$targetDom.data('project-id');
this._url = DEFAULT_URL
if (projectId) {
this._url += '/p/' + projectId
}
}
_setQueryParams() {
let sortDirection = this._$targetDom.data('sort-dir');
if (sortDirection) {
this._queryParams['dir'] = sortDirection;
}
}
_loadMore(event) {
let $spinner = $('<i>').addClass('pi-spin spinner');
let $loadmoreBtn = $(event.target)
@@ -122,6 +143,7 @@ class GroupBuilder {
content = content.concat(group['groups'].map(this.build$Group.bind(this, level+1)));
}
return $('<div>')
.addClass('group')
.append(
$label,
content
@@ -167,10 +189,9 @@ class GroupBuilder {
}
$.fn.extend({
timeline: function(params) {
timeline: function() {
this.each(function(i, target) {
new Timeline(target,
params || {},
new GroupBuilder()
);
});