Improve scrolling

We now replace native scrollbar by custom ones on the list card (which
is required by the new ergonomics in the parent commit), but the
"scrolling engine", is still native, we just hide the scrollbar and
draw our own in HTML/CSS using the perfect-scrollbar package (from
bower).

This commit also implements component scrolling when certain actions
are performed, eg scroll to the bottom when the new card composer is
opened.

5 files changed, 26 insertions, 64 deletions

diff --git a/client/components/sidebar/helpers.js b/client/components/sidebar/helpers.js
index a76dad7f..15035bd4 100644
--- a/client/components/sidebar/helpers.js
+++ b/client/components/sidebar/helpers.js
@@ -3,7 +3,7 @@ var widgetTitles = {
   background: 'change-background'
 };
 
-Template.boardSidebar.helpers({
+Template.sidebar.helpers({
   currentWidget: function() {
     return Session.get('currentWidget') + 'Sidebar';
   },
diff --git a/client/components/sidebar/infiniteScrolling.js b/client/components/sidebar/infiniteScrolling.js
deleted file mode 100644
index df3b8901..00000000
--- a/client/components/sidebar/infiniteScrolling.js
+++ /dev/null
@@ -1,37 +0,0 @@
-var peakAnticipation = 200;
-
-Mixins.InfiniteScrolling = BlazeComponent.extendComponent({
-  onCreated: function() {
-    this._nextPeak = Infinity;
-  },
-
-  setNextPeak: function(v) {
-    this._nextPeak = v;
-  },
-
-  getNextPeak: function() {
-    return this._nextPeak;
-  },
-
-  resetNextPeak: function() {
-    this._nextPeak = Infinity;
-  },
-
-  // To be overwritten by consumers of this mixin
-  reachNextPeak: function() {
-
-  },
-
-  events: function() {
-    return [{
-      scroll: function(evt) {
-        var domElement = evt.currentTarget;
-        var altitude = domElement.scrollTop + domElement.offsetHeight;
-        altitude += peakAnticipation;
-        if (altitude >= this.callFirstWith(null, 'getNextPeak')) {
-          this.callFirstWith(null, 'reachNextPeak');
-        }
-      }
-    }];
-  }
-});
diff --git a/client/components/sidebar/rendered.js b/client/components/sidebar/rendered.js
deleted file mode 100644
index 36b1255c..00000000
--- a/client/components/sidebar/rendered.js
+++ /dev/null
@@ -1,21 +0,0 @@
-Template.membersWidget.onRendered(function() {
-  var self = this;
-  if (! Meteor.user().isBoardMember())
-    return;
-
-  _.each(['.js-member', '.js-label'], function(className) {
-    $(document).on('mouseover', function() {
-      self.$(className).draggable({
-        appendTo: 'body',
-        helper: 'clone',
-        revert: 'invalid',
-        revertDuration: 150,
-        snap: false,
-        snapMode: 'both',
-        start: function() {
-          Popup.close();
-        }
-      });
-    });
-  });
-});
diff --git a/client/components/sidebar/templates.jade b/client/components/sidebar/sidebar.jade
index 23a1a87e..07cd777c 100644
--- a/client/components/sidebar/templates.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -1,9 +1,9 @@
-template(name="boardSidebar")
+template(name="sidebar")
   .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}")
     a.sidebar-tongue.js-toogle-sidebar(
       class="{{#if isTongueHidden}}is-hidden{{/if}}")
       i.fa.fa-chevron-left
-    .sidebar-content.js-board-sidebar-content
+    .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
       //- XXX https://github.com/peerlibrary/meteor-blaze-components/issues/30
       if Filter.isActive
         +filterSidebar
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index af676bf2..764f16eb 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -1,10 +1,10 @@
 BlazeComponent.extendComponent({
   template: function() {
-    return 'boardSidebar';
+    return 'sidebar';
   },
 
   mixins: function() {
-    return [Mixins.InfiniteScrolling];
+    return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
   },
 
   onCreated: function() {
@@ -46,6 +46,26 @@ BlazeComponent.extendComponent({
     return this.isOpen() && Filter.isActive();
   },
 
+  onRendered: function() {
+    var self = this;
+    if (! Meteor.user().isBoardMember())
+      return;
+
+    $(document).on('mouseover', function() {
+      self.$('.js-member,.js-label').draggable({
+        appendTo: 'body',
+        helper: 'clone',
+        revert: 'invalid',
+        revertDuration: 150,
+        snap: false,
+        snapMode: 'both',
+        start: function() {
+          Popup.close();
+        }
+      });
+    });
+  },
+
   events: function() {
     // XXX Hacky, we need some kind of `super`
     var mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events();
@@ -53,4 +73,4 @@ BlazeComponent.extendComponent({
       'click .js-toogle-sidebar': this.toogle
     }]);
   }
-}).register('boardSidebar');
+}).register('sidebar');