darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 05:59:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3465 from alphagov/add-scroll-to-reveal-method

Browse Source 
Add scroll to reveal element method
This commit is contained in:
Tom Byers
2020-07-24 14:21:15 +01:00
committed by GitHub
parent d75da753e6 e62fc846c7
commit 0d6ef2977d
2 changed files with 136 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/javascripts/stick-to-window-when-scrolling.js
View File

@@ -10,7 +10,10 @@
var $el = el.$fixedEl;
var $scrollArea = $el.closest('.sticky-scroll-area');
$scrollArea = $scrollArea.length ? $scrollArea : $el.parent();
if($scrollArea.length === 0) {
$scrollArea = $el.parent();
$scrollArea.addClass('sticky-scroll-area');
}
this._els = [el];
this.edge = edge;
@@ -46,11 +49,11 @@
return focused;
},
forCaret: function (evt) {
var textarea = evt.target;
forCaret: function ($textarea) {
var textarea = $textarea.get(0);
var caretCoordinates = window.getCaretCoordinates(textarea, textarea.selectionEnd);
var focused = {
'top': $(textarea).offset().top + caretCoordinates.top,
'top': $textarea.offset().top + caretCoordinates.top,
'height': caretCoordinates.height,
'type': 'caret'
};
@@ -61,21 +64,23 @@
}
};
ScrollArea.prototype.focusHandler = function (e) {
var $focusedElement = $(document.activeElement);
var nodeName = $focusedElement.get(0).nodeName.toLowerCase();
this.scrollToRevealElement($(document.activeElement));
};
ScrollArea.prototype.scrollToRevealElement = function ($el) {
var nodeName = $el.get(0).nodeName.toLowerCase();
var endOfFurthestEl = focusOverlap.endOfFurthestEl(this._els, this.edge);
var isInSticky = function () {
return $focusedElement.closest(this.selector).length > 0;
return $el.closest(this.selector).length > 0;
}.bind(this);
var focused;
var overlap;
// if textarea is focused, we care about checking the caret, not the whole element
if (nodeName === 'textarea') {
focused = this.getFocusedDetails.forCaret(e);
focused = this.getFocusedDetails.forCaret($el);
} else {
if (isInSticky()) { return; }
focused = this.getFocusedDetails.forElement($focusedElement);
focused = this.getFocusedDetails.forElement($el);
}
overlap = focusOverlap.getOverlap(focused, this.edge, endOfFurthestEl);
@@ -586,6 +591,18 @@
this.syncWithDOM(onSyncComplete);
};
// Public method to scroll so an element isn't covered by the sticky nav
Sticky.prototype.scrollToRevealElement = function (el) {
var $el = $(el);
var scrollAreaNode = $el.closest('.sticky-scroll-area').get(0);
var matches = $.grep(scrollAreas._scrollAreas, function (scrollArea) {
return scrollArea.node === scrollAreaNode;
});
if (matches.length) {
matches[0].scrollToRevealElement($el);
}
};
Sticky.prototype.setElWidth = function (el) {
var $el = el.$fixedEl;
var scrollArea = scrollAreas.getAreaByEl(el);