Project-Timeline: Introduced timeline on projects
Limited to projects of category assets and film for now.
This commit is contained in:
1
src/scripts/js/es6/common/utils.js
Normal file
1
src/scripts/js/es6/common/utils.js
Normal file
@@ -0,0 +1 @@
|
||||
export { transformPlaceholder } from './utils/placeholder'
|
15
src/scripts/js/es6/common/utils/placeholder.js
Normal file
15
src/scripts/js/es6/common/utils/placeholder.js
Normal 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();
|
||||
})
|
||||
}
|
@@ -1 +1,7 @@
|
||||
export { Timeline } from './timeline/timeline';
|
||||
export { Timeline } from './timeline/timeline';
|
||||
|
||||
// Init timelines on document ready
|
||||
$(function() {
|
||||
$(".timeline")
|
||||
.timeline();
|
||||
})
|
@@ -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()
|
||||
);
|
||||
});
|
||||
|
Reference in New Issue
Block a user