From af2a1e7ec038107fbf7281d69566ee495c7a72c5 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 22 Jan 2021 11:01:04 +0100 Subject: [PATCH 1/2] pat-scroll: Modernize code --- src/pat/scroll/scroll.js | 75 ++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 42 deletions(-) diff --git a/src/pat/scroll/scroll.js b/src/pat/scroll/scroll.js index 3c2da5583..a9ed07749 100644 --- a/src/pat/scroll/scroll.js +++ b/src/pat/scroll/scroll.js @@ -27,12 +27,7 @@ export default Base.extend({ ImagesLoaded = await import("imagesloaded"); ImagesLoaded = ImagesLoaded.default; // Only calculate the offset when all images are loaded - ImagesLoaded( - $("body"), - function () { - this.smoothScroll(); - }.bind(this) - ); + ImagesLoaded($("body"), () => this.smoothScroll()); } else if (this.options.trigger == "click") { this.$el.click(this.onClick.bind(this)); } @@ -42,7 +37,7 @@ export default Base.extend({ $(window).scroll(_.debounce(this.markIfVisible.bind(this), 50)); }, - onClick: function () { + onClick() { //ev.preventDefault(); history.pushState({}, null, this.$el.attr("href")); this.smoothScroll(); @@ -51,44 +46,43 @@ export default Base.extend({ $("a.pat-scroll").trigger("hashchange"); }, - markBasedOnFragment: function () { + markBasedOnFragment() { // Get the fragment from the URL and set the corresponding this.$el as current const fragment = window.location.hash.substr(1); if (fragment) { - var $target = $("#" + fragment); + const $target = $("#" + fragment); this.$el.addClass("current"); // the element that was clicked on $target.addClass("current"); } }, - clearIfHidden: function () { - var active_target = "#" + window.location.hash.substr(1), - $active_target = $(active_target), - target = "#" + this.$el[0].href.split("#").pop(); + clearIfHidden() { + const active_target = "#" + window.location.hash.substr(1); + const $active_target = $(active_target); + const target = "#" + this.$el[0].href.split("#").pop(); if ($active_target.length > 0) { if (active_target != target) { // if the element does not match the one listed in the url #, // clear the current class from it. - var $target = $("#" + this.$el[0].href.split("#").pop()); + const $target = $("#" + this.$el[0].href.split("#").pop()); $target.removeClass("current"); this.$el.removeClass("current"); } } }, - markIfVisible: function () { - var fragment, $target, href; + markIfVisible() { if (this.$el.hasClass("pat-scroll-animated")) { // this section is triggered when the scrolling is a result of the animate function // ie. automatic scrolling as opposed to the user manually scrolling this.$el.removeClass("pat-scroll-animated"); } else if (this.$el[0].nodeName === "A") { - href = this.$el[0].href; - fragment = + const href = this.$el[0].href; + const fragment = (href.indexOf("#") !== -1 && href.split("#").pop()) || undefined; if (fragment) { - $target = $("#" + fragment); + const $target = $("#" + fragment); if ($target.length) { if ( utils.isElementInViewport( @@ -108,19 +102,18 @@ export default Base.extend({ } }, - onPatternsUpdate: function (ev, data) { - var fragment, $target, href; + onPatternsUpdate(ev, data) { if (data.pattern === "stacks") { if (data.originalEvent && data.originalEvent.type === "click") { this.smoothScroll(); } } else if (data.pattern === "scroll") { - href = this.$el[0].href; - fragment = + const href = this.$el[0].href; + const fragment = (href.indexOf("#") !== -1 && href.split("#").pop()) || undefined; if (fragment) { - $target = $("#" + fragment); + const $target = $("#" + fragment); if ($target.length) { if ( utils.isElementInViewport( @@ -138,18 +131,18 @@ export default Base.extend({ } }, - findScrollContainer: function (el) { - var direction = this.options.direction; - var scrollable = $(el) + findScrollContainer(el) { + const direction = this.options.direction; + let scrollable = $(el) .parents() - .filter(function () { + .filter((idx, el) => { return ( - ["auto", "scroll"].indexOf($(this).css("overflow")) > -1 || + ["auto", "scroll"].indexOf($(el).css("overflow")) > -1 || (direction === "top" && - ["auto", "scroll"].indexOf($(this).css("overflow-y")) > + ["auto", "scroll"].indexOf($(el).css("overflow-y")) > -1) || (direction === "left" && - ["auto", "scroll"].indexOf($(this).css("overflow-x")) > + ["auto", "scroll"].indexOf($(el).css("overflow-x")) > -1) ); }) @@ -160,12 +153,11 @@ export default Base.extend({ return scrollable; }, - smoothScroll: function () { - var href, fragment; - var scroll = - this.options.direction == "top" ? "scrollTop" : "scrollLeft", - scrollable, - options = {}; + smoothScroll() { + const scroll = + this.options.direction == "top" ? "scrollTop" : "scrollLeft"; + const options = {}; + let scrollable; if (typeof this.options.offset != "undefined") { // apply scroll options directly scrollable = this.options.selector @@ -181,16 +173,17 @@ export default Base.extend({ // starting from the *target* // The intent is to move target into view within scrollable // if the scrollable has no scrollbar, do not scroll body + let fragment; if (this.options.selector) { fragment = this.options.selector; } else { - href = this.$el.attr("href"); + const href = this.$el.attr("href"); fragment = href.indexOf("#") !== -1 ? "#" + href.split("#").pop() : undefined; } - var target = $(fragment); + const target = $(fragment); if (target.length === 0) { return; } @@ -223,9 +216,7 @@ export default Base.extend({ // execute the scroll scrollable.animate(options, { duration: 500, - start: function () { - $(".pat-scroll").addClass("pat-scroll-animated"); - }, + start: () => $(".pat-scroll").addClass("pat-scroll-animated"), }); }, }); From e9d251fc2b3c00214d5d4a4cfe42953ddaddf814 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 22 Jan 2021 13:24:42 +0100 Subject: [PATCH 2/2] pat-scroll: selector:bottom pat-scroll: Implement `selector:bottom` attribute value to scroll to the bottom of the scroll container Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1186 Refs: SCR-840 --- CHANGES.md | 1 + src/pat/scroll/documentation.md | 16 ++++++++++------ src/pat/scroll/index.html | 13 +++++++++++++ src/pat/scroll/scroll.js | 8 ++++++++ src/pat/scroll/scroll.test.js | 34 +++++++++++++++++++++++++++++++++ 5 files changed, 66 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index ee904875e..55a196d86 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -62,6 +62,7 @@ - pat inject: Rebase URLs in pattern configuration attributes. This avoids URLs in pattern configuration to point to unreachable paths in the context where the result is injected into. - 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. ### Technical diff --git a/src/pat/scroll/documentation.md b/src/pat/scroll/documentation.md index e7339b429..d86510343 100644 --- a/src/pat/scroll/documentation.md +++ b/src/pat/scroll/documentation.md @@ -47,9 +47,13 @@ Automatically scrolling once the page loads Scrolling can be configured through a `data-pat-scroll` attribute. 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. | -| `direction` | `top` | `top`, `left` | The direction in which the scrolling happens. | -| `selector` | `top`, 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. | +| 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. | +| `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. | + + +Note: Selector `top` will scroll the scroll container to the top, `bottom` to the bottom. + diff --git a/src/pat/scroll/index.html b/src/pat/scroll/index.html index 661007498..c8452621c 100644 --- a/src/pat/scroll/index.html +++ b/src/pat/scroll/index.html @@ -14,12 +14,25 @@ .current { background-color: beige; } + #scrollable { + overflow: scroll; + max-height: 80vh; + height: 40em; + border: 2px solid blue; + }

Some filler

+

+ +