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

Fix linting errors

Browse Source
This commit is contained in:
Tom Byers
2018-11-08 15:04:15 +00:00
parent 412b1f1117
commit c04c57b043
1 changed files with 138 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,258 +1,258 @@
;(function (global) { ;(function (global) {
'use strict' 'use strict';
var $ = global.jQuery var $ = global.jQuery;
var GOVUK = global.GOVUK || {} var GOVUK = global.GOVUK || {};
// Stick elements to top of screen when you scroll past, documentation is in the README.md // Stick elements to top of screen when you scroll past, documentation is in the README.md
var Sticky = function (selector) { var Sticky = function (selector) {
this._hasScrolled = false this._hasScrolled = false;
this._scrollTimeout = false this._scrollTimeout = false;
this._hasResized = false this._hasResized = false;
this._resizeTimeout = false this._resizeTimeout = false;
this._elsLoaded = false this._elsLoaded = false;
this._els = [] this._els = [];
this.CSS_SELECTOR = selector this.CSS_SELECTOR = selector;
} };
Sticky.prototype.getWindowDimensions = function () { Sticky.prototype.getWindowDimensions = function () {
return { return {
height: $(global).height(), height: $(global).height(),
width: $(global).width() width: $(global).width()
} };
} };
Sticky.prototype.getWindowPositions = function () { Sticky.prototype.getWindowPositions = function () {
return { return {
scrollTop: $(global).scrollTop() scrollTop: $(global).scrollTop()
} };
} };
Sticky.prototype.setFixedTop = function (el) { Sticky.prototype.setFixedTop = function (el) {
var $siblingEl = $('<div></div>') var $siblingEl = $('<div></div>');
$siblingEl.insertBefore(el.$fixedEl) $siblingEl.insertBefore(el.$fixedEl);
var fixedTop = $siblingEl.offset().top - $siblingEl.position().top var fixedTop = $siblingEl.offset().top - $siblingEl.position().top;
$siblingEl.remove() $siblingEl.remove();
el.fixedTop = fixedTop el.fixedTop = fixedTop;
} };
Sticky.prototype.setElHeight = function (el) { Sticky.prototype.setElHeight = function (el) {
var self = this var self = this;
var fixedOffset = parseInt(el.$fixedEl.css('top'), 10) var fixedOffset = parseInt(el.$fixedEl.css('top'), 10);
var $el = el.$fixedEl var $el = el.$fixedEl;
var $img = $el.find('img') var $img = $el.find('img');
fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset;
if ((!self._elsLoaded) && ($img.length > 0)) { if ((!self._elsLoaded) && ($img.length > 0)) {
var image = new global.Image() var image = new global.Image();
image.onload = function () { image.onload = function () {
el.height = $el.outerHeight() + fixedOffset el.height = $el.outerHeight() + fixedOffset;
el.scrolledTo = self.getScrollingTo(el) el.scrolledTo = self.getScrollingTo(el);
self.checkElementsLoaded() self.checkElementsLoaded();
} };
image.src = $img.attr('src') image.src = $img.attr('src');
} else { } else {
el.height = $el.outerHeight() + fixedOffset el.height = $el.outerHeight() + fixedOffset;
el.scrolledTo = self.getScrollingTo(el) el.scrolledTo = self.getScrollingTo(el);
self.checkElementsLoaded() self.checkElementsLoaded();
} }
} };
Sticky.prototype.checkElementsLoaded = function () { Sticky.prototype.checkElementsLoaded = function () {
this._elsLoaded = $.grep(this._els, function (el) { return ('height' in el) }).length === this._els.length this._elsLoaded = $.grep(this._els, function (el) { return ('height' in el); }).length === this._els.length;
} };
Sticky.prototype.init = function () { Sticky.prototype.init = function () {
var self = this var self = this;
var $els = $(self.CSS_SELECTOR) var $els = $(self.CSS_SELECTOR);
if ($els.length > 0) { if ($els.length > 0) {
$els.each(function (i, el) { $els.each(function (i, el) {
var $el = $(el) var $el = $(el);
var el = { var elObj = {
$fixedEl: $el, $fixedEl: $el,
scrolledFrom: self.getScrolledFrom($el), scrolledFrom: self.getScrolledFrom($el),
stopped: false stopped: false
} };
self.setFixedTop(el) self.setFixedTop(elObj);
self.setElHeight(el) self.setElHeight(elObj);
self._els.push(el) self._els.push(elObj);
}) });
if (self._scrollTimeout === false) { if (self._scrollTimeout === false) {
$(global).scroll(function (e) { self.onScroll() }) $(global).scroll(function (e) { self.onScroll(); });
self._scrollTimeout = global.setInterval(function (e) { self.checkScroll() }, 50) self._scrollTimeout = global.setInterval(function (e) { self.checkScroll(); }, 50);
} }
if (self._resizeTimeout === false) { if (self._resizeTimeout === false) {
$(global).resize(function (e) { self.onResize() }) $(global).resize(function (e) { self.onResize(); });
self._resizeTimeout = global.setInterval(function (e) { self.checkResize() }, 50) self._resizeTimeout = global.setInterval(function (e) { self.checkResize(); }, 50);
} }
// fake scrolling to allow us to check the position of the elements // fake scrolling to allow us to check the position of the elements
self._hasScrolled = true self._hasScrolled = true;
self.checkScroll() self.checkScroll();
} }
} };
Sticky.prototype.onScroll = function () { Sticky.prototype.onScroll = function () {
this._hasScrolled = true this._hasScrolled = true;
} };
Sticky.prototype.onResize = function () { Sticky.prototype.onResize = function () {
this._hasResized = true this._hasResized = true;
} };
Sticky.prototype.viewportIsWideEnough = function (windowWidth) { Sticky.prototype.viewportIsWideEnough = function (windowWidth) {
return windowWidth > 768 return windowWidth > 768;
} };
Sticky.prototype.checkScroll = function () { Sticky.prototype.checkScroll = function () {
var self = this var self = this;
if (self._hasScrolled === true) { if (self._hasScrolled === true) {
self._hasScrolled = false self._hasScrolled = false;
$.each(self._els, function (i, el) { $.each(self._els, function (i, el) {
var $el = el.$fixedEl var $el = el.$fixedEl;
var windowDimensions = self.getWindowDimensions() var windowDimensions = self.getWindowDimensions();
if (self.scrolledFromInsideWindow(el.scrolledFrom)) { if (self.scrolledFromInsideWindow(el.scrolledFrom)) {
self.release($el) self.release($el);
} else { } else {
if (self.scrolledToOutsideWindow(el, windowDimensions.height)) { if (self.scrolledToOutsideWindow(el, windowDimensions.height)) {
self.stop(el) self.stop(el);
} else if (self.viewportIsWideEnough(windowDimensions.width)) { } else if (self.viewportIsWideEnough(windowDimensions.width)) {
if (el.stopped) { if (el.stopped) {
self.unstop(el) self.unstop(el);
} }
self.stick($el) self.stick($el);
} }
} }
}) });
} }
} };
Sticky.prototype.checkResize = function () { Sticky.prototype.checkResize = function () {
var self = this var self = this;
if (self._hasResized === true) { if (self._hasResized === true) {
self._hasResized = false self._hasResized = false;
var windowDimensions = self.getWindowDimensions() var windowDimensions = self.getWindowDimensions();
$.each(self._els, function (i, el) { $.each(self._els, function (i, el) {
var $el = el.$fixedEl var $el = el.$fixedEl;
var elResize = $el.hasClass('js-self-resize') var elResize = $el.hasClass('js-self-resize');
if (elResize) { if (elResize) {
var $shim = $('.shim') var $shim = $('.shim');
var $elParent = $el.parent('div') var $elParent = $el.parent('div');
var elParentWidth = $elParent.width() var elParentWidth = $elParent.width();
$shim.css('width', elParentWidth) $shim.css('width', elParentWidth);
$el.css('width', elParentWidth) $el.css('width', elParentWidth);
self.setElHeight(el) self.setElHeight(el);
} }
if (!self.viewportIsWideEnough(windowDimensions.width)) { if (!self.viewportIsWideEnough(windowDimensions.width)) {
self.release($el) self.release($el);
} }
}) });
} }
} };
Sticky.prototype.stick = function ($el) { Sticky.prototype.stick = function ($el) {
if (!$el.hasClass('content-fixed')) { if (!$el.hasClass('content-fixed')) {
var height = Math.max($el.height(), 1) var height = Math.max($el.height(), 1);
var width = $el.width() var width = $el.width();
this.addShimForEl($el, width, height) this.addShimForEl($el, width, height);
$el.css('width', width + 'px').addClass('content-fixed') $el.css('width', width + 'px').addClass('content-fixed');
} }
} };
Sticky.prototype.release = function ($el) { Sticky.prototype.release = function ($el) {
if ($el.hasClass('content-fixed')) { if ($el.hasClass('content-fixed')) {
$el.removeClass('content-fixed').css('width', '') $el.removeClass('content-fixed').css('width', '');
$el.siblings('.shim').remove() $el.siblings('.shim').remove();
} }
} };
var stickAtTop = new Sticky('.js-stick-at-top-when-scrolling') var stickAtTop = new Sticky('.js-stick-at-top-when-scrolling');
stickAtTop.getScrolledFrom = function ($el) { stickAtTop.getScrolledFrom = function ($el) {
return $el.offset().top return $el.offset().top;
} };
stickAtTop.getScrollingTo = function (el) { stickAtTop.getScrollingTo = function (el) {
var footer = $('.js-footer:eq(0)') var footer = $('.js-footer:eq(0)');
if (footer.length === 0) { if (footer.length === 0) {
return 0 return 0;
} }
return (footer.offset().top - 10) - el.height return (footer.offset().top - 10) - el.height;
} };
stickAtTop.scrolledFromInsideWindow = function (scrolledFrom) { stickAtTop.scrolledFromInsideWindow = function (scrolledFrom) {
var windowTop = this.getWindowPositions().scrollTop var windowTop = this.getWindowPositions().scrollTop;
return scrolledFrom > windowTop return scrolledFrom > windowTop;
} };
stickAtTop.scrolledToOutsideWindow = function (el, windowHeight) { stickAtTop.scrolledToOutsideWindow = function (el, windowHeight) {
var windowTop = this.getWindowPositions().scrollTop var windowTop = this.getWindowPositions().scrollTop;
return windowTop > el.scrolledTo return windowTop > el.scrolledTo;
} };
stickAtTop.addShimForEl = function ($el, width, height) { stickAtTop.addShimForEl = function ($el, width, height) {
$el.before('<div class="shim" style="width: ' + width + 'px height: ' + height + 'px">&nbsp</div>') $el.before('<div class="shim" style="width: ' + width + 'px height: ' + height + 'px">&nbsp</div>');
} };
stickAtTop.stop = function (el) { stickAtTop.stop = function (el) {
if (!el.stopped) { if (!el.stopped) {
el.$fixedEl.css({ 'position': 'absolute', 'top': el.scrolledTo }) el.$fixedEl.css({ 'position': 'absolute', 'top': el.scrolledTo });
el.stopped = true el.stopped = true;
} }
} };
stickAtTop.unstop = function (el) { stickAtTop.unstop = function (el) {
if (el.stopped) { if (el.stopped) {
el.$fixedEl.css({ 'position': '', 'top': '' }) el.$fixedEl.css({ 'position': '', 'top': '' });
el.stopped = false el.stopped = false;
} }
} };
var stickAtBottom = new Sticky('.js-stick-at-bottom-when-scrolling') var stickAtBottom = new Sticky('.js-stick-at-bottom-when-scrolling');
stickAtBottom.getScrolledFrom = function ($el) { stickAtBottom.getScrolledFrom = function ($el) {
return $el.offset().top + $el.outerHeight() return $el.offset().top + $el.outerHeight();
} };
stickAtBottom.getScrollingTo = function (el) { stickAtBottom.getScrollingTo = function (el) {
var header = $('.js-header:eq(0)') var header = $('.js-header:eq(0)');
if (header.length === 0) { if (header.length === 0) {
return 0 return 0;
} }
return (header.offset().top + header.outerHeight() + 10) + el.height return (header.offset().top + header.outerHeight() + 10) + el.height;
} };
stickAtBottom.scrolledFromInsideWindow = function (scrolledFrom) { stickAtBottom.scrolledFromInsideWindow = function (scrolledFrom) {
var windowBottom = this.getWindowPositions().scrollTop + this.getWindowDimensions().height var windowBottom = this.getWindowPositions().scrollTop + this.getWindowDimensions().height;
return scrolledFrom < windowBottom return scrolledFrom < windowBottom;
} };
stickAtBottom.scrolledToOutsideWindow = function (el, windowHeight) { stickAtBottom.scrolledToOutsideWindow = function (el, windowHeight) {
var windowBottom = this.getWindowPositions().scrollTop + this.getWindowDimensions().height var windowBottom = this.getWindowPositions().scrollTop + this.getWindowDimensions().height;
return windowBottom < el.scrolledTo return windowBottom < el.scrolledTo;
} };
stickAtBottom.addShimForEl = function ($el, width, height) { stickAtBottom.addShimForEl = function ($el, width, height) {
$el.after('<div class="shim" style="width: ' + width + 'px height: ' + height + 'px">&nbsp</div>') $el.after('<div class="shim" style="width: ' + width + 'px height: ' + height + 'px">&nbsp</div>');
} };
stickAtBottom.stop = function (el) { stickAtBottom.stop = function (el) {
if (!el.stopped) { if (!el.stopped) {
el.$fixedEl.css({ el.$fixedEl.css({
'position': 'absolute', 'position': 'absolute',
'top': (el.scrolledTo - el.height), 'top': (el.scrolledTo - el.height),
'bottom': 'auto' 'bottom': 'auto'
}) });
el.stopped = true el.stopped = true;
} }
} };
stickAtBottom.unstop = function (el) { stickAtBottom.unstop = function (el) {
if (el.stopped) { if (el.stopped) {
el.$fixedEl.css({ el.$fixedEl.css({
'position': '', 'position': '',
'top': '', 'top': '',
'bottom': '' 'bottom': ''
}) });
el.stopped = false el.stopped = false;
} }
} };
GOVUK.stickAtTopWhenScrolling = stickAtTop GOVUK.stickAtTopWhenScrolling = stickAtTop;
GOVUK.stickAtBottomWhenScrolling = stickAtBottom GOVUK.stickAtBottomWhenScrolling = stickAtBottom;
global.GOVUK = GOVUK global.GOVUK = GOVUK;
})(window) })(window);