[WIP] failing tests for pat-scroll-box

src/core/registry.js

@@ -89,7 +89,7 @@ define([
             var $el = $(el);
             var pattern = registry.patterns[name];
             if (pattern.init) {
-                plog = logger.getLogger("pat." + name);
+                var plog = logger.getLogger("pat." + name);
                 if ($el.is(pattern.trigger)) {
                     plog.debug("Initialising:", $el);
                     try {

src/core/utils.js

@@ -373,7 +373,7 @@ define([
         return results;
     }
 
-    isElementInViewport = function (el, partial, offset) {
+    function isElementInViewport(el, partial, offset) {
         /* returns true if element is visible to the user ie. is in the viewport.
          * Setting partial parameter to true, will only check if a part of the element is visible
          * in the viewport, specifically that some part of that element is touching the top part
@@ -419,7 +419,7 @@ define([
                 rec.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
             );
         }
-    };
+    }
 
     function parseTime(time) {
         var m = /^(\d+(?:\.\d+)?)\s*(\w*)/.exec(time);

src/pat/scroll-box/tests.js

@@ -0,0 +1,172 @@
+define(["pat-scroll-box", "pat-registry"], function (Pattern, registry) {
+
+  describe("pat-scroll-box", function () {
+
+    it("adds scroll classes when scrolling", function (done) {
+
+      // setup
+      document.body.setAttribute('class', 'pat-scroll-box');
+      document.body.setAttribute('style', 'height: 1000px');
+      let scrollbox = document.createElement('div');
+      scrollbox.setAttribute('class', 'pat-scroll-box');
+      scrollbox.setAttribute('style', 'overflow: auto; height: 200px');
+      let scrollbox_inner = document.createElement('div');
+      scrollbox_inner.setAttribute('style', 'height: 400px');
+
+      scrollbox.appendChild(scrollbox_inner);
+      document.body.appendChild(scrollbox);
+
+      registry.init();
+      // Pattern.init($(scrollbox));
+      // Pattern.init($(document.body));
+
+      // initial
+      console.log(scrollbox.classList);
+      console.log(document.body.classList);
+      expect(scrollbox.classList.contains('scroll-down')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      scrollbox.scrolltop = 100;
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);  // 14016
+
+      scrollbox.scrolltop = 50;
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      scrollbox.scrolltop = 0;
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      scrollbox.scrolltop = 400;
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(true);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      // scrolling the body
+      // scrollbox state is retained
+      //
+      window.scrollTo(0, 100);
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(true);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(true);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      window.scrollTo(0, 50);
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(true);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      window.scrollTo(0, 0);
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(true);
+
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(false);
+      expect(document.body.classList.contains('scroll-up')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(true);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(false);
+
+      window.scrollTo(0, 400);
+      // scrollbox
+      expect(scrollbox.classList.contains('scroll-down')).toBe(true);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(true);
+      // body
+      expect(document.body.classList.contains('scroll-down')).toBe(true);
+      expect(document.body.classList.contains('scroll-up')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-top')).toBe(false);
+      expect(document.body.classList.contains('scroll-position-bottom')).toBe(true);
+
+      done();
+
+    });
+
+    it("does not set classes when not scrollable", function (done) {
+
+      // setup
+      let scrollbox = document.createElement('div');
+      scrollbox.setAttribute('class', 'pat-scroll-box');
+      scrollbox.setAttribute('style', 'height: 200px'); // overflow not set, default = 'visible'
+      let scrollbox_inner = document.createElement('div');
+      scrollbox_inner.setAttribute('style', 'height: 400px');
+
+      scrollbox.appendChild(scrollbox_inner);
+      document.body.appendChild(scrollbox);
+
+      registry.scan(document.body);
+
+      // initial
+      expect(scrollbox.classList.contains('scroll-down')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+
+      scrollbox.scrolltop = 100;
+      expect(scrollbox.scrollTop).toBe(0); // cannot be scrolled
+      expect(scrollbox.classList.contains('scroll-down')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-up')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-top')).toBe(false);
+      expect(scrollbox.classList.contains('scroll-position-bottom')).toBe(false);
+
+      done();
+
+    });
+
+  });
+});

webpack/karma.config.js

@@ -18,8 +18,9 @@ module.exports = function(config) {
 
         // list of files / patterns to load in the browser
         files: [
-            'tests/specs/*/*.js',
-            'src/pat/*/tests.js',
+          //'tests/specs/*/*.js',
+          //'src/pat/*/tests.js',
+            'src/pat/scroll-box/tests.js',
             {
                 pattern: 'src/pat/date-picker/i18n.json',
                 served: true,
@@ -56,6 +57,7 @@ module.exports = function(config) {
             // list here the files that you want transpiled by babel
             'src/pat/masonry/tests.js': ['webpack', 'sourcemap', 'babel' /*, 'coverage'*/ ],
             'src/pat/calendar/tests.js': ['webpack', 'sourcemap', 'babel' /*, 'coverage'*/ ],
+            'src/pat/scroll-box/tests.js': ['webpack', 'sourcemap', 'babel' /*, 'coverage'*/ ],
         },
         babelPreprocessor: {
             options: {