Merge pull request #1096 from Patternslib/pat-bumper-regressions-pre

Pat bumper regressions pre

Author: thet

src/core/utils.js

@@ -680,7 +680,6 @@ const date_diff = (date_1, date_2) => {
 };
 
 var utils = {
-    // pattern pimping - own module?
     jqueryPlugin: jqueryPlugin,
     escapeRegExp: escapeRegExp,
     isObject: isObject,

src/pat/bumper/bumper.js

@@ -1,37 +1,24 @@
-/**
- * Patterns bumper - Add bumping classes for sticky elements.
- */
-
-import Base from "../../core/base";
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
 import dom from "../../core/dom";
-import logging from "../../core/logging";
 import Parser from "../../core/parser";
+import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "../../core/utils";
 
-const logger = logging.getLogger("tabs");
-
 export const parser = new Parser("bumper");
 parser.addArgument("selector");
 parser.addArgument("bump-add", "bumped");
 parser.addArgument("bump-remove");
 parser.addArgument("unbump-add");
 parser.addArgument("unbump-remove", "bumped");
 
-export default Base.extend({
-    name: "bumper",
-    trigger: ".pat-bumper",
+class Pattern extends BasePattern {
+    static name = "bumper";
+    static trigger = ".pat-bumper";
+    static parser = parser;
 
     async init() {
         // Based on: https://davidwalsh.name/detect-sticky
 
-        if (!utils.checkCSSFeature("position", "sticky")) {
-            // IE11
-            logger.warn("No position sticky support.");
-            return;
-        }
-
-        this.options = parser.parse(this.el, this.options);
-
         this.target_element = this.options.selector
             ? document.querySelector(this.options.selector)
             : this.el;
@@ -40,7 +27,7 @@ export default Base.extend({
         // e.g. CSS applied for injected content.
         await utils.timeout(1);
         this._init();
-    },
+    }
 
     _init() {
         const scroll_container_y = dom.find_scroll_container(
@@ -85,7 +72,7 @@ export default Base.extend({
             );
             observer_x.observe(this.el);
         }
-    },
+    }
 
     _intersection_observer_callback(entries) {
         const el = this.target_element;
@@ -143,5 +130,10 @@ export default Base.extend({
                 el.classList.remove("bumped-bottom");
             }
         }
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
+export { Pattern };

src/pat/bumper/documentation.md

@@ -1,5 +1,7 @@
 ## Description
 
+Pumber Pattern - Add bumping classes for sticky elements.
+
 A bumper is an element that, when the user starts scrolling, stays within view when a viewport border touches it.
 
 ## Documentation
@@ -10,9 +12,14 @@ Below is a simple example of a bumper.
        Bumper content
     </div>
 
-When the user starts scrolling the page and the top edge of the above div reaches the top
-edge of the viewport, a `bumped` class will be added. For this to work the pattern
-will automatically set the `position` of the div to `relative`.
+When the user starts scrolling the page and the top edge of the above div
+reaches the top edge of the viewport, a `bumped` class and - depending on the
+bumping edges - `bumped-top`, `bumped-right`, `bumped-botton` or `bumped-left`
+classes will be added.
+
+It's up to you to style the element with the help of these classes. You might
+also want to set the element to `position: sticky`, so that it keeps it's
+position relative to the viewport while scrolling.
 
 ### Bumpers in scrolling containers
 
@@ -23,13 +30,10 @@ You can also put a bumper in a scrolling container. Here is an example:
       <p>...</p>
     </div>
 
-If the container has its overflow style set to `auto` or `scroll` and its
-contents do not fit in the available space the browser will automatically
-add scrollbars. The bumper pattern will detect this and _stick_ the bumped
-element so it is always visible in its container.
-
-To implement this the bumper pattern will set the `position` of both the
-bumper and its scrolling container to `relative`.
+If the container has its `overflow` style set to `auto` or `scroll` and its
+contents do not fit in the available space the browser will automatically add
+scrollbars. When the `pat-bumper` element touches any edge of the scrolling
+container the bumper classes will be added.
 
 ### Class specification
 
@@ -61,4 +65,3 @@ The available options are:
 | `bump-remove`   | _unset_       | CSS class(es) to removed when an element is bumped.                                                                       | String       |
 | `unbump-add`    | _unset_       | CSS class(es) to add when an element is no longer bumped.                                                                 | String       |
 | `unbump-remove` | `bumped`      | CSS class(es) to removed when an element is no longer bumped.                                                             | String       |
-| `side`          | `top`         | The side which should bump. A combination of `all top right bottom left`. `all` is equivalent to `top right bottom left`. | String       |

src/pat/clone-code/clone-code.js

@@ -12,7 +12,7 @@ parser.addArgument("features", null, ["format"]);
 class Pattern extends BasePattern {
     static name = "clone-code";
     static trigger = ".pat-clone-code";
-    parser = parser;
+    static parser = parser;
 
     async init() {
         // Source