From 48bcf2672fb574ba8fdf5f4dece8cf59a9f98b7e Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 22 Jan 2021 13:48:35 +0100 Subject: [PATCH] pat-scroll: Do handle click events also when trigger is set to . --- CHANGES.md | 1 + src/pat/scroll/documentation.md | 2 +- src/pat/scroll/scroll.js | 3 +-- src/pat/scroll/scroll.test.js | 31 ++++++++++++++++++++----------- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 55a196d86..03bb28d5f 100644 --- a/CHANGES.md +++ b/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 diff --git a/src/pat/scroll/documentation.md b/src/pat/scroll/documentation.md index d86510343..26134938c 100644 --- a/src/pat/scroll/documentation.md +++ b/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. | diff --git a/src/pat/scroll/scroll.js b/src/pat/scroll/scroll.js index 3daf86ba0..079b586f0 100644 --- a/src/pat/scroll/scroll.js +++ b/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)); diff --git a/src/pat/scroll/scroll.test.js b/src/pat/scroll/scroll.test.js index 7ac9c81b3..6b76fcd1d 100644 --- a/src/pat/scroll/scroll.test.js +++ b/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( [ 'p1', '

', ].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( [ 'p1', '

', ].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(); });