From b44223eb2625a03c511b18fbb1b0b49f70cb271d Mon Sep 17 00:00:00 2001 From: "Cornelis G. A. Kolbach" Date: Thu, 14 May 2020 11:41:42 +0200 Subject: [PATCH 1/2] Demo page for #721 --- src/pat/scroll/documentation.md | 2 +- src/pat/scroll/index.html | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pat/scroll/documentation.md b/src/pat/scroll/documentation.md index 1fd0a9c79..14ac12f54 100644 --- a/src/pat/scroll/documentation.md +++ b/src/pat/scroll/documentation.md @@ -51,5 +51,5 @@ The available options are: | ----- | ------- | ----------- | ----------- | | `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` | | A CSS or jQuery selector string. | 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.| +| `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. | diff --git a/src/pat/scroll/index.html b/src/pat/scroll/index.html index 1d542ea95..13db93c8d 100644 --- a/src/pat/scroll/index.html +++ b/src/pat/scroll/index.html @@ -88,7 +88,9 @@

3

- Back to top + Back to top

From 211352c7db908e04580911bd1527b179e8a64ac8 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Tue, 19 May 2020 11:31:57 +0200 Subject: [PATCH 2/2] pat-scroll: Implement `selector:top` value. pat-scroll: Implement new special `selector:top` attribute value to scroll the scroll container just to the top of the page. Ref: #721 Fixes: #721 --- CHANGES.md | 1 + src/pat/scroll/scroll.js | 36 ++++++++++++++++++++---------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7c0279fbc..96db98284 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ Features ~~~~~~~~ +- 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. We are using the RabbitMQ message broker for push support instead of crossbar.io. diff --git a/src/pat/scroll/scroll.js b/src/pat/scroll/scroll.js index 651c93e81..1e2637ee9 100644 --- a/src/pat/scroll/scroll.js +++ b/src/pat/scroll/scroll.js @@ -120,6 +120,20 @@ define([ } }, + findScrollContainer: function(el) { + var scrollable = $(el).parents().filter(function() { + return ( + ['auto', 'scroll'].indexOf($(this).css('overflow')) > -1 || + (scroll === 'scrollTop' && ['auto', 'scroll'].indexOf($(this).css('overflow-y')) > -1) || + (scroll === 'scrollLeft' && ['auto', 'scroll'].indexOf($(this).css('overflow-x')) > -1) + ); + }).first(); + if ( typeof scrollable[0] === 'undefined' ) { + scrollable = $('html, body'); + } + return scrollable; + }, + smoothScroll: function() { var href, fragment; var scroll = this.options.direction == "top" ? 'scrollTop' : 'scrollLeft', @@ -128,6 +142,10 @@ define([ // apply scroll options directly scrollable = this.options.selector ? $(this.options.selector) : this.$el; options[scroll] = this.options.offset; + } else if (this.options.selector === "top") { + // Just scroll up, period. + scrollable = this.findScrollContainer(target); + options['scrollTop'] = 0; } else { // Get the first element with overflow (the scroll container) // starting from the *target* @@ -144,23 +162,9 @@ define([ return; } - scrollable = $(target.parents().filter(function() { - return ( - ['auto', 'scroll'].indexOf($(this).css('overflow')) > -1 || - (scroll === 'scrollTop' && ['auto', 'scroll'].indexOf($(this).css('overflow-y')) > -1) || - (scroll === 'scrollLeft' && ['auto', 'scroll'].indexOf($(this).css('overflow-x')) > -1) - ); - }).first()) + scrollable = this.findScrollContainer(target); - if ( typeof scrollable[0] === 'undefined' ) { - scrollable = $('html, body'); - // positioning context is document - if ( scroll === "scrollTop" ) { - options[scroll] = Math.floor(target.safeOffset().top); - } else { - options[scroll] = Math.floor(target.safeOffset().left); - } - } else if ( scroll === "scrollTop" ) { + if ( scroll === "scrollTop" ) { // difference between target top and scrollable top becomes 0 options[scroll] = Math.floor(scrollable.scrollTop() + target.safeOffset().top