Project-Timeline: Introduced timeline on projects

Limited to projects of category assets and film for now.

pillar/api/timeline.py

@@ -250,7 +250,7 @@ def global_timeline():
     return _global_timeline(continue_from, nbr_of_weeks, sort_direction)
 
 
-@blueprint.route('/p/<string(length=24):str_pid>', methods=['GET'])
+@blueprint.route('/p/<string(length=24):pid_path>', methods=['GET'])
 def project_timeline(pid_path: str):
     continue_from_str = request.args.get('from')
     continue_from = parse_continue_from(continue_from_str)

src/scripts/js/es6/common/utils.js

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

src/scripts/js/es6/common/utils/placeholder.js

@@ -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();
+        })
+}

src/scripts/js/es6/individual/timeline.js

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

src/scripts/js/es6/individual/timeline/timeline.js

@@ -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) {
+    constructor(target, builder) {
-        this._$targetDom = $(target)
+        this._$targetDom = $(target);
-        this._url = params['url'];
+        this._url;
-        this._queryParams = params['queryParams'] || {};
+        this._queryParams = {};
         this._builder = builder;
         this._init();
     }
 
     _init() {
         this._workStart();
+        this._setUrl();
+        this._setQueryParams();
         this._thenLoadMore()
             .then((it)=>{
-                this._$targetDom.empty();
+                transformPlaceholder(this._$targetDom, () => {
-                this._$targetDom.append(it);
+                    this._$targetDom.empty()
-                if (this._hasMore()) {
+                            .append(it);
-                    let btn = this._create$LoadMoreBtn();
+                        if (this._hasMore()) {
-                    this._$targetDom.append(btn);
+                            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()
             );
         });

src/styles/_utils.sass

@@ -306,6 +306,12 @@
 	100%
 		transform: scale(1.0)
 
+@keyframes fade-in
+	0%
+		opacity: 0
+	100%
+		opacity: 1
+
 @keyframes grow-bounce-out
 	0
 		transform: scale(1.0)

src/styles/components/_placeholder.sass

@@ -0,0 +1,6 @@
+.placeholder
+    +pulse-75
+
+    &.replaced // added before replaced
+        opacity: 0
+        transition: 250ms 

src/styles/components/_timeline.sass

@@ -15,10 +15,17 @@
         margin-right: -15px
         margin-left: -15px
         padding-right: 15px
-    .sticky-top
+    
-        top: 2.5rem
+    .group
+        opacity: 0
+        animation: fade-in 500ms forwards
+
+body.homepage
+    .timeline
+        .sticky-top
+            top: 2.5rem
 
 body.is-mobile
         .timeline
             .js-asset-list
-                @extend .card-deck-vertical
+                @extend .card-deck-vertical

src/templates/mixins/components.pug

@@ -73,3 +73,15 @@ mixin list-asset(name, url, image, type, date)
 	if block
 		block
 
+// used together with timeline.js
+mixin timeline(projectid, sortdirection)
+	section.timeline.placeholder(
+		data-project-id=projectid,
+		data-sort-dir=sortdirection,
+	)
+		// TODO: Make nicer reuseable placeholder
+		.h1.text-center
+			i.pi-spin.spin
+	
+
+

src/templates/projects/view_embed.pug

@@ -40,6 +40,9 @@ section.px-4
 		| {% endif %}
 		| {% endfor %}
 	| {% endif %}
+	| {% if project.category in ['film', 'assets'] %}
+	+timeline("{{ project._id }}")
+	| {% endif %}
 
 include _scripts