Merge pull request #797 from Patternslib/pat-scroll-click

pat-scroll: Do handle click events also when trigger is set to "auto".

Author: pilz

CHANGES.md

@@ -63,6 +63,7 @@
 -   pat forward: Add `delay` option for delaying the click action forwarding for a given number of milliseconds.
 -   pat forward: Add `self` as possible value for the `selector` option to trigger the event on itself.
 -   pat-scroll: Implement `selector:bottom` attribute value to scroll to the bottom of the scroll container.
+-   pat-scroll: Do handle click events also when trigger is set to `auto`.
 
 ### Technical
 

src/pat/scroll/documentation.md

@@ -49,7 +49,7 @@ The available options are:
 
 | Field       | Default                       | Options                                   | Description                                                                                                                                                                                                                                                                                                                                            |
 | ----------- | ----------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `trigger`   | `click`                       | `click`, `auto`                           | `auto` means that the scrolling will happen as soon as the page loads. `click` means that the configured element needs to be clicked first.                                                                                                                                                                                                            |
+| `trigger`   | `click`                       | `click`, `auto`                           | `auto` means that the scrolling will happen as soon as the page loads, additional to `click` events. `click` means that the configured element needs to be clicked first.                                                                                                                                                                                                            |
 | `direction` | `top`                         | `top`, `left`                             | The direction in which the scrolling happens.                                                                                                                                                                                                                                                                                                          |
 | `selector`  | `top`, `bottom`, CSS selector | A CSS or jQuery selector string or 'top'. | A selector for the element which will be scrolled by a number of pixels equal to `offset`. By default it will be the element on which the pattern is declared. Ignored unless `offset` is specified.                                                                                                                                                   |
 | `offset`    |                               | A number                                  | `offset` can only be used with scrollable elements. (An element is "scrollable" if it has scrollbars, i.e. when the CSS property `overflow` is either `auto` or `scroll`.) The element scrolled by `offset` can be specified with the `selector` option. If `selector` is not present, the element on which `pat-scroll` is declared will be scrolled. |

src/pat/scroll/scroll.js

@@ -28,9 +28,8 @@ export default Base.extend({
             ImagesLoaded = ImagesLoaded.default;
             // Only calculate the offset when all images are loaded
             ImagesLoaded($("body"), () => this.smoothScroll());
-        } else if (this.options.trigger == "click") {
-            this.$el.click(this.onClick.bind(this));
         }
+        this.el.addEventListener("click", this.onClick.bind(this));
         this.$el.on("pat-update", this.onPatternsUpdate.bind(this));
         this.markBasedOnFragment();
         this.on("hashchange", this.clearIfHidden.bind(this));

src/pat/scroll/scroll.test.js

@@ -11,37 +11,46 @@ describe("pat-scroll", function () {
         jest.restoreAllMocks();
     });
 
-    describe("If the trigger is set to 'auto", function () {
-        it("will automatically scroll to an anchor if the trigger is set to 'auto'", async function (done) {
+    describe("pat-scroll ...", function () {
+        it("will automatically scroll to an anchor if the trigger is set to 'auto' and will also handle 'click' events", async function (done) {
             $("#lab").html(
                 [
                     '<a href="#p1" class="pat-scroll" data-pat-scroll="trigger: auto">p1</a>',
                     '<p id="p1"></p>',
                 ].join("\n")
             );
+            const el = document.querySelector(".pat-scroll");
             const spy_animate = jest.spyOn($.fn, "animate");
-            pattern.init($(".pat-scroll"));
+
+            pattern.init(el);
             await utils.timeout(10); // wait some ticks for async to settle.
-            expect(spy_animate).toHaveBeenCalled();
+
+            expect(spy_animate).toHaveBeenCalledTimes(1);
+
+            el.click();
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            expect(spy_animate).toHaveBeenCalledTimes(2);
+
             done();
         });
-    });
 
-    describe("If the trigger is set to 'click'", function () {
-        it("will scroll to an anchor on click", async function (done) {
+        it("will scroll to an anchor on click if the trigger is set to 'click'", async function (done) {
             $("#lab").html(
                 [
                     '<a href="#p1" class="pat-scroll" data-pat-scroll="trigger: click">p1</a>',
                     '<p id="p1"></p>',
                 ].join("\n")
             );
-            const $el = $(".pat-scroll");
+            const el = document.querySelector(".pat-scroll");
             const spy_animate = spyOn($.fn, "animate");
-            pattern.init($el);
+
+            pattern.init(el);
             await utils.timeout(1); // wait a tick for async to settle.
-            $el.click();
+
+            el.click();
             await utils.timeout(1); // wait a tick for async to settle.
-            // wait for scrolling via click to be done.
+
             expect(spy_animate).toHaveBeenCalled();
             done();
         });