Patternslib · pilz · May 27, 2020 · May 27, 2020 · May 27, 2020
diff --git a/CHANGES.md b/CHANGES.md
@@ -5,9 +5,9 @@
 Features
 ~~~~~~~~
 
+- pat-scroll-box: New pattern for scrolling detection. Replaces the previous "scroll detection" module.
 - pat-inject: Rename undocumented ``selector`` property to ``defaultSelector``.
 - pat-inject: Fix typo in docs for the ``source`` property.
-- scroll detection: Rework and optimize, set scroll classes on any scrolling event, fix problem with IE and set initial state. Fixes #701
 - pat-scroll: Implement new special `selector:top` attribute value to scroll the scroll container just to the top of the page. Ref: #721.
 - pat-scroll: To define the scrollable target search also for `overflow-x` and `overflow-y` declarations.
 - Rework push message support for the STOMP message protocoll instead of backends instead of WAMP.

diff --git a/src/core/scroll_detection.js b/src/core/scroll_detection.js
diff --git a/src/pat/scroll-box/documentation.md b/src/pat/scroll-box/documentation.md
@@ -0,0 +1,15 @@
+## Description
+
+The *scroll box* pattern adds some CSS classes to the element depending on it's scrolling position.
+
+The element where it is invoked upon has to be scrollable.
+Therefore the eleme must have set the ``overflow`` or ``overflowY`` CSS property set to ``auto`` or ``scroll``.
+Ho(horizontal scrolling is not yet supported.
+
+The classes are:
+
+- ``scroll-up``: when scrolling upwards,
+- ``scroll-down``: when scrolling downwards,
+- ``scroll-position-top``: when the scrolling container is scrolled to the top,
+- ``scroll-position-bottom``: when the scrolling container is scrolled to the bottom.
+
diff --git a/src/pat/scroll-box/index.html b/src/pat/scroll-box/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Demo for pat-scroll</title>
+    <link rel="stylesheet" href="/style/common.css" type="text/css">
+    <script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+    <style type="text/css" media="screen">
+      body {
+        height: 200vh;
+      }
+
+      body .pat-scroll-box {
+        overflow-y: auto;
+        border: 1px solid black;
+        height: 5em;
+        margin: 4em 0;
+      }
+      .pat-scroll-box--inner {
+        height: 20em;
+      }
+
+      .scroll-up::before,
+      .scroll-down::before,
+      .scroll-position-top::before,
+      .scroll-position-bottom::before {
+        position: fixed;
+        display: block;
+        font-size: 2em;
+      }
+
+      .scroll-up::before {
+        content: "↑";
+      }
+      .scroll-down::before {
+        content: "↓";
+      }
+      .scroll-position-top::before {
+        content: "↥";
+      }
+      .scroll-position-bottom::before {
+        content: "↧";
+      }
+    </style>
+  </head>
+  <body class="pat-scroll-box">
+    <div class="pat-scroll-box">
+      <div class="pat-scroll-box--inner">
+        hello.
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/pat/scroll-box/scroll-box.js b/src/pat/scroll-box/scroll-box.js
@@ -0,0 +1,87 @@
+/**
+ * Patterns scroll detection - convenience classes requested in #701
+ *
+ * Copyright 2020- Alexander Pilz, Syslab.com GmbH
+ */
+
+define(["jquery", "pat-base"], function ($, Base) {
+  return Base.extend({
+    name: "scroll-box",
+    trigger: ".pat-scroll-box",
+    timeout: 200,
+
+    init: function ($el) {
+      const el = $el[0];
+      let scroll_listener = el;
+      if (scroll_listener === document.body) {
+        scroll_listener = window;
+      }
+
+      // If scolling is not possible, exit.
+      if (
+        ! scroll_listener == window && (
+            ['auto', 'scroll'].indexOf(getComputedStyle(el).overflow) === -1 ||
+            ['auto', 'scroll'].indexOf(getComputedStyle(el).overflowY) === -1
+          )
+        ) {
+          return;
+      }
+
+      let last_known_scroll_position = 0;
+      let scroll_y = 0;
+      let timeout_id = null;
+
+
+      let set_scroll_classes = (scroll_pos) => {
+        el.classList.remove("scroll-up");
+        el.classList.remove("scroll-down");
+        el.classList.remove("scroll-position-top");
+        el.classList.remove("scroll-position-bottom");
+
+        if (scroll_pos < last_known_scroll_position) {
+          el.classList.add("scroll-up");
+        } else if (last_known_scroll_position < scroll_pos) {
+          el.classList.add("scroll-down");
+        }
+
+        if (scroll_pos === 0) {
+          el.classList.add("scroll-position-top");
+        } else if (
+          scroll_listener === window &&
+          window.innerHeight + scroll_pos >=
+          el.scrollHeight
+        ) {
+          el.classList.add("scroll-position-bottom");
+        } else if (
+          scroll_listener !== window &&
+          el.clientHeight + scroll_pos >=
+          el.scrollHeight
+        ) {
+          el.classList.add("scroll-position-bottom");
+        }
+
+      };
+
+      scroll_listener.addEventListener("scroll", (e) => {
+        if (!timeout_id) {
+          scroll_y = this.get_scroll_y(scroll_listener);
+          set_scroll_classes(scroll_y);
+          last_known_scroll_position = scroll_y;
+        }
+        timeout_id = window.setTimeout(() => { timeout_id = null; }, this.timeout);
+      });
+
+      // Set initial state
+      $().ready(() => set_scroll_classes(this.get_scroll_y(scroll_listener)));
+    },
+
+    get_scroll_y: (el) => {
+      if (el === window) {
+        // scrolling the window
+        return window.scrollY !== undefined ? window.scrollY : window.pageYOffset; // pageYOffset for IE
+      }
+      // scrolling a DOM element
+      return el.scrollTop;
+    },
+  });
+});
diff --git a/src/patterns.js b/src/patterns.js
@@ -13,7 +13,6 @@ define([
     "moment",
     "modernizr",
     "prefixfree",
-    "scroll-detection",
     "push-kit",
     "pat-ajax",
     "pat-autofocus",
@@ -54,6 +53,7 @@ define([
     "pat-masonry",
     "pat-placeholder",
     "pat-scroll",
+    "pat-scroll-box",
     "pat-selectbox",
     "pat-slides",
     "pat-slideshow-builder",
@@ -102,7 +102,7 @@ define([
     require("imports-loader?this=>window!jquery.browser");
 
     $(function () {
-        registry.init();
+      registry.init();
     });
     return registry;
 });
diff --git a/webpack/base.config.js b/webpack/base.config.js
@@ -36,7 +36,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /(bumper|patterns|calendar|display-time|equaliser|focus|masonry|push_kit|scroll|scroll_detection|tooltip-ng)\.js$/,
+                test: /(bumper|patterns|calendar|display-time|equaliser|focus|masonry|push_kit|scroll|scroll-box|tooltip-ng)\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: [["@babel/env", {
@@ -160,7 +160,6 @@ module.exports = {
             // Core
             "pat-compat": path.resolve(__dirname, "../src/core/compat.js"),
             "pat-base": path.resolve(__dirname, "../src/core/base.js"),
-            "scroll-detection": path.resolve(__dirname, "../src/core/scroll_detection.js"),
             "pat-date-picker": path.resolve(__dirname, "../src/pat/date-picker/date-picker.js"),
             "pat-datetime-picker": path.resolve(__dirname, "../src/pat/datetime-picker/datetime-picker.js"),
             "pat-depends_parse": path.resolve(__dirname, "../src/lib/depends_parse.js"),
@@ -234,6 +233,7 @@ module.exports = {
             "pat-subform": path.resolve(__dirname, "../src/pat/subform/subform.js"),
             "pat-switch": path.resolve(__dirname, "../src/pat/switch/switch.js"),
             "pat-scroll": path.resolve(__dirname, "../src/pat/scroll/scroll.js"),
+            "pat-scroll-box": path.resolve(__dirname, "../src/pat/scroll-box/scroll-box.js"),
             "pat-tabs": path.resolve(__dirname, "../src/pat/tabs/tabs.js"),
             "pat-toggle": path.resolve(__dirname, "../src/pat/toggle/toggle.js"),
             "pat-tooltip": path.resolve(__dirname, "../src/pat/tooltip/tooltip.js"),