darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 17:45:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2761 from alphagov/fix-sticky-stopping-bug

Browse Source 
Fix bug which makes the sticky controls snap to the top of its scroll area
This commit is contained in:
Tom Byers
2019-02-13 16:08:31 +00:00
committed by GitHub
parent 323c0d7ada 994c9397fe
commit a9933010dc
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -141,27 +141,28 @@
// were wrapped by a dialog component // were wrapped by a dialog component
var dialog = { var dialog = {
hasResized: false, hasResized: false,
// we add padding of 20px around each sticky to isolate it from the rest of the page spaceBetweenStickys: 40,
// it shouldn't apply between stickys when stacked // we add padding of 20px around each sticky to give some space between it and the rest of the page
// this shouldn't apply between stickys in a stack
// (the in-page CSS handles this by each subsequent sticky in a sequence having margin: -40px)
_getPaddingBetweenEls: function (els) { _getPaddingBetweenEls: function (els) {
var spaceBetween = 40; if (els.length <= 1) { return 0; }
if (els.length < 2) { return 0; } return (els.length - 1) * this.spaceBetweenStickys;
return (els.length - 1) * spaceBetween;
}, },
_getTotalHeight: function (els) { _getTotalHeight: function (els) {
var reducer = function (accumulator, currentValue) { var reducer = function (accumulator, currentValue) {
return accumulator + currentValue; return accumulator + currentValue;
}; };
return $.map(els, function (el) { return el.height; }).reduce(reducer); var combinedHeight = $.map(els, function (el) { return el.height; }).reduce(reducer);
return combinedHeight - this._getPaddingBetweenEls(els);
}, },
_elsThatCanBeStuck: function (els) { _elsThatCanBeStuck: function (els) {
return $.grep(els, function (el) { return el.canBeStuck(); }); return $.grep(els, function (el) { return el.canBeStuck(); });
}, },
getOffsetFromEdge: function (el, sticky) { getOffsetFromEdge: function (el, sticky) {
var els = this._elsThatCanBeStuck(sticky._els).slice(); var els = this._elsThatCanBeStuck(sticky._els).slice();
var elsBetween;
var elIdx; var elIdx;
// els must be arranged furtherest from window edge is stuck to first // els must be arranged furtherest from window edge is stuck to first
@@ -176,11 +177,10 @@
if (elIdx === (els.length - 1)) { return 0; } if (elIdx === (els.length - 1)) { return 0; }
// make els all those from this one to the window edge // make els all those from this one to the window edge
els = els.slice(elIdx); els = els.slice(elIdx + 1);
// get all els between this one and the window edge
elsBetween = els.slice(1);
return this._getTotalHeight(elsBetween) - this._getPaddingBetweenEls(els); // remove the space between those els and the one on the edge
return this._getTotalHeight(els) - this.spaceBetweenStickys;
}, },
getOffsetFromEnd: function (el, sticky) { getOffsetFromEnd: function (el, sticky) {
var els = this._elsThatCanBeStuck(sticky._els).slice(); var els = this._elsThatCanBeStuck(sticky._els).slice();
@@ -198,11 +198,9 @@
if (elIdx === (els.length - 1)) { return 0; } if (elIdx === (els.length - 1)) { return 0; }
// make els all those from this one to the window edge // make els all those from this one to the window edge
els = els.slice(elIdx); els = els.slice(elIdx + 1);
// get all els between this one and the window edge
elsBetween = els.slice(1);
return this._getTotalHeight(elsBetween) - this._getPaddingBetweenEls(els); return this._getTotalHeight(els) - this.spaceBetweenStickys;
}, },
// checks total height of all this._sticky elements against a height // checks total height of all this._sticky elements against a height
// unsticks each that won't fit and marks them as unstickable // unsticks each that won't fit and marks them as unstickable