mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add passive event listener to headroom
This commit is contained in:
Luke Pulverenti
parent
85731c7453
commit
da25a9cc2a
1 changed files with 401 additions and 367 deletions
|
|
@ -4,104 +4,130 @@
|
||||||
* License: MIT
|
* License: MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function(window, document) {
|
(function (window, document) {
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
/* exported features */
|
||||||
|
|
||||||
|
var features = {
|
||||||
|
bind: !!(function () { }.bind),
|
||||||
|
classList: 'classList' in document.documentElement,
|
||||||
|
rAF: !!(window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame)
|
||||||
|
};
|
||||||
|
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
|
||||||
|
|
||||||
/* exported features */
|
|
||||||
|
|
||||||
var features = {
|
|
||||||
bind : !!(function(){}.bind),
|
|
||||||
classList : 'classList' in document.documentElement,
|
|
||||||
rAF : !!(window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame)
|
|
||||||
};
|
|
||||||
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles debouncing of events via requestAnimationFrame
|
|
||||||
* @see http://www.html5rocks.com/en/tutorials/speed/animations/
|
|
||||||
* @param {Function} callback The callback to handle whichever event
|
|
||||||
*/
|
|
||||||
function Debouncer (callback) {
|
|
||||||
this.callback = callback;
|
|
||||||
this.ticking = false;
|
|
||||||
}
|
|
||||||
Debouncer.prototype = {
|
|
||||||
constructor : Debouncer,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* dispatches the event to the supplied callback
|
* Handles debouncing of events via requestAnimationFrame
|
||||||
* @private
|
* @see http://www.html5rocks.com/en/tutorials/speed/animations/
|
||||||
|
* @param {Function} callback The callback to handle whichever event
|
||||||
*/
|
*/
|
||||||
update : function() {
|
function Debouncer(callback) {
|
||||||
this.callback && this.callback();
|
this.callback = callback;
|
||||||
this.ticking = false;
|
this.ticking = false;
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ensures events don't get stacked
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
requestTick : function() {
|
|
||||||
if(!this.ticking) {
|
|
||||||
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
|
|
||||||
this.ticking = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Attach this as the event listeners
|
|
||||||
*/
|
|
||||||
handleEvent : function() {
|
|
||||||
this.requestTick();
|
|
||||||
}
|
}
|
||||||
};
|
Debouncer.prototype = {
|
||||||
/**
|
constructor: Debouncer,
|
||||||
* Check if object is part of the DOM
|
|
||||||
* @constructor
|
/**
|
||||||
* @param {Object} obj element to check
|
* dispatches the event to the supplied callback
|
||||||
*/
|
* @private
|
||||||
function isDOMElement(obj) {
|
*/
|
||||||
return obj && typeof window !== 'undefined' && (obj === window || obj.nodeType);
|
update: function () {
|
||||||
}
|
this.callback && this.callback();
|
||||||
|
this.ticking = false;
|
||||||
/**
|
},
|
||||||
* Helper function for extending objects
|
|
||||||
*/
|
/**
|
||||||
function extend (object /*, objectN ... */) {
|
* ensures events don't get stacked
|
||||||
if(arguments.length <= 0) {
|
* @private
|
||||||
throw new Error('Missing arguments in extend function');
|
*/
|
||||||
}
|
requestTick: function () {
|
||||||
|
if (!this.ticking) {
|
||||||
var result = object || {},
|
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
|
||||||
key,
|
this.ticking = true;
|
||||||
i;
|
}
|
||||||
|
},
|
||||||
for (i = 1; i < arguments.length; i++) {
|
|
||||||
var replacement = arguments[i] || {};
|
/**
|
||||||
|
* Attach this as the event listeners
|
||||||
for (key in replacement) {
|
*/
|
||||||
// Recurse into object except if the object is a DOM element
|
handleEvent: function () {
|
||||||
if(typeof result[key] === 'object' && ! isDOMElement(result[key])) {
|
this.requestTick();
|
||||||
result[key] = extend(result[key], replacement[key]);
|
|
||||||
}
|
}
|
||||||
else {
|
};
|
||||||
result[key] = result[key] || replacement[key];
|
/**
|
||||||
}
|
* Check if object is part of the DOM
|
||||||
}
|
* @constructor
|
||||||
|
* @param {Object} obj element to check
|
||||||
|
*/
|
||||||
|
function isDOMElement(obj) {
|
||||||
|
return obj && typeof window !== 'undefined' && (obj === window || obj.nodeType);
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
/**
|
||||||
}
|
* Helper function for extending objects
|
||||||
|
*/
|
||||||
/**
|
function extend(object /*, objectN ... */) {
|
||||||
* Helper function for normalizing tolerance option to object format
|
if (arguments.length <= 0) {
|
||||||
*/
|
throw new Error('Missing arguments in extend function');
|
||||||
function normalizeTolerance (t) {
|
}
|
||||||
return t === Object(t) ? t : { down : t, up : t };
|
|
||||||
}
|
var result = object || {},
|
||||||
|
key,
|
||||||
/**
|
i;
|
||||||
|
|
||||||
|
for (i = 1; i < arguments.length; i++) {
|
||||||
|
var replacement = arguments[i] || {};
|
||||||
|
|
||||||
|
for (key in replacement) {
|
||||||
|
// Recurse into object except if the object is a DOM element
|
||||||
|
if (typeof result[key] === 'object' && !isDOMElement(result[key])) {
|
||||||
|
result[key] = extend(result[key], replacement[key]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
result[key] = result[key] || replacement[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper function for normalizing tolerance option to object format
|
||||||
|
*/
|
||||||
|
function normalizeTolerance(t) {
|
||||||
|
return t === Object(t) ? t : { down: t, up: t };
|
||||||
|
}
|
||||||
|
|
||||||
|
var supportsCaptureOption = false;
|
||||||
|
try {
|
||||||
|
var opts = Object.defineProperty({}, 'capture', {
|
||||||
|
get: function () {
|
||||||
|
supportsCaptureOption = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.addEventListener("test", null, opts);
|
||||||
|
} catch (e) { }
|
||||||
|
|
||||||
|
function addEventListenerWithOptions(target, type, handler, options) {
|
||||||
|
var optionsOrCapture = options;
|
||||||
|
if (!supportsCaptureOption) {
|
||||||
|
optionsOrCapture = options.capture;
|
||||||
|
}
|
||||||
|
target.addEventListener(type, handler, optionsOrCapture);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeEventListenerWithOptions(target, type, handler, options) {
|
||||||
|
var optionsOrCapture = options;
|
||||||
|
if (!supportsCaptureOption) {
|
||||||
|
optionsOrCapture = options.capture;
|
||||||
|
}
|
||||||
|
target.removeEventListener(type, handler, optionsOrCapture);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
* UI enhancement for fixed headers.
|
* UI enhancement for fixed headers.
|
||||||
* Hides header when scrolling down
|
* Hides header when scrolling down
|
||||||
* Shows header when scrolling up
|
* Shows header when scrolling up
|
||||||
|
|
@ -109,282 +135,290 @@
|
||||||
* @param {DOMElement} elem the header element
|
* @param {DOMElement} elem the header element
|
||||||
* @param {Object} options options for the widget
|
* @param {Object} options options for the widget
|
||||||
*/
|
*/
|
||||||
function Headroom (elem, options) {
|
function Headroom(elem, options) {
|
||||||
options = extend(options, Headroom.options);
|
options = extend(options, Headroom.options);
|
||||||
|
|
||||||
this.lastKnownScrollY = 0;
|
|
||||||
this.elem = elem;
|
|
||||||
this.debouncer = new Debouncer(this.update.bind(this));
|
|
||||||
this.tolerance = normalizeTolerance(options.tolerance);
|
|
||||||
this.classes = options.classes;
|
|
||||||
this.offset = options.offset;
|
|
||||||
this.scroller = options.scroller;
|
|
||||||
this.initialised = false;
|
|
||||||
this.onPin = options.onPin;
|
|
||||||
this.onUnpin = options.onUnpin;
|
|
||||||
this.onTop = options.onTop;
|
|
||||||
this.onNotTop = options.onNotTop;
|
|
||||||
}
|
|
||||||
Headroom.prototype = {
|
|
||||||
constructor : Headroom,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialises the widget
|
|
||||||
*/
|
|
||||||
init : function() {
|
|
||||||
if(!Headroom.cutsTheMustard) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.elem.classList.add(this.classes.initial);
|
|
||||||
|
|
||||||
// defer event registration to handle browser
|
|
||||||
// potentially restoring previous scroll position
|
|
||||||
setTimeout(this.attachEvent.bind(this), 100);
|
|
||||||
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unattaches events and removes any classes that were added
|
|
||||||
*/
|
|
||||||
destroy : function() {
|
|
||||||
var classes = this.classes;
|
|
||||||
|
|
||||||
this.initialised = false;
|
|
||||||
this.elem.classList.remove(classes.unpinned, classes.pinned, classes.top, classes.initial);
|
|
||||||
this.scroller.removeEventListener('scroll', this.debouncer, false);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Attaches the scroll event
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
attachEvent : function() {
|
|
||||||
if(!this.initialised){
|
|
||||||
this.lastKnownScrollY = this.getScrollY();
|
|
||||||
this.initialised = true;
|
|
||||||
this.scroller.addEventListener('scroll', this.debouncer, false);
|
|
||||||
|
|
||||||
this.debouncer.handleEvent();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unpins the header if it's currently pinned
|
|
||||||
*/
|
|
||||||
unpin : function() {
|
|
||||||
var classList = this.elem.classList,
|
|
||||||
classes = this.classes;
|
|
||||||
|
|
||||||
if(classList.contains(classes.pinned) || !classList.contains(classes.unpinned)) {
|
|
||||||
classList.add(classes.unpinned);
|
|
||||||
classList.remove(classes.pinned);
|
|
||||||
this.onUnpin && this.onUnpin.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Pins the header if it's currently unpinned
|
|
||||||
*/
|
|
||||||
pin : function() {
|
|
||||||
var classList = this.elem.classList,
|
|
||||||
classes = this.classes;
|
|
||||||
|
|
||||||
if(classList.contains(classes.unpinned)) {
|
|
||||||
classList.remove(classes.unpinned);
|
|
||||||
classList.add(classes.pinned);
|
|
||||||
this.onPin && this.onPin.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles the top states
|
|
||||||
*/
|
|
||||||
top : function() {
|
|
||||||
var classList = this.elem.classList,
|
|
||||||
classes = this.classes;
|
|
||||||
|
|
||||||
if(!classList.contains(classes.top)) {
|
|
||||||
classList.add(classes.top);
|
|
||||||
classList.remove(classes.notTop);
|
|
||||||
this.onTop && this.onTop.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles the not top state
|
|
||||||
*/
|
|
||||||
notTop : function() {
|
|
||||||
var classList = this.elem.classList,
|
|
||||||
classes = this.classes;
|
|
||||||
|
|
||||||
if(!classList.contains(classes.notTop)) {
|
|
||||||
classList.add(classes.notTop);
|
|
||||||
classList.remove(classes.top);
|
|
||||||
this.onNotTop && this.onNotTop.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the Y scroll position
|
|
||||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
|
|
||||||
* @return {Number} pixels the page has scrolled along the Y-axis
|
|
||||||
*/
|
|
||||||
getScrollY : function() {
|
|
||||||
return (this.scroller.pageYOffset !== undefined)
|
|
||||||
? this.scroller.pageYOffset
|
|
||||||
: (this.scroller.scrollTop !== undefined)
|
|
||||||
? this.scroller.scrollTop
|
|
||||||
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the height of the viewport
|
|
||||||
* @see http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
|
|
||||||
* @return {int} the height of the viewport in pixels
|
|
||||||
*/
|
|
||||||
getViewportHeight : function () {
|
|
||||||
return window.innerHeight
|
|
||||||
|| document.documentElement.clientHeight
|
|
||||||
|| document.body.clientHeight;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the height of the document
|
|
||||||
* @see http://james.padolsey.com/javascript/get-document-height-cross-browser/
|
|
||||||
* @return {int} the height of the document in pixels
|
|
||||||
*/
|
|
||||||
getDocumentHeight : function () {
|
|
||||||
var body = document.body,
|
|
||||||
documentElement = document.documentElement;
|
|
||||||
|
|
||||||
return Math.max(
|
|
||||||
body.scrollHeight, documentElement.scrollHeight,
|
|
||||||
body.offsetHeight, documentElement.offsetHeight,
|
|
||||||
body.clientHeight, documentElement.clientHeight
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the height of the DOM element
|
|
||||||
* @param {Object} elm the element to calculate the height of which
|
|
||||||
* @return {int} the height of the element in pixels
|
|
||||||
*/
|
|
||||||
getElementHeight : function (elm) {
|
|
||||||
return Math.max(
|
|
||||||
elm.scrollHeight,
|
|
||||||
elm.offsetHeight,
|
|
||||||
elm.clientHeight
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the height of the scroller element
|
|
||||||
* @return {int} the height of the scroller element in pixels
|
|
||||||
*/
|
|
||||||
getScrollerHeight : function () {
|
|
||||||
return (this.scroller === window || this.scroller === document.body)
|
|
||||||
? this.getDocumentHeight()
|
|
||||||
: this.getElementHeight(this.scroller);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* determines if the scroll position is outside of document boundaries
|
|
||||||
* @param {int} currentScrollY the current y scroll position
|
|
||||||
* @return {bool} true if out of bounds, false otherwise
|
|
||||||
*/
|
|
||||||
isOutOfBounds : function (currentScrollY) {
|
|
||||||
var pastTop = currentScrollY < 0,
|
|
||||||
pastBottom = currentScrollY + this.getViewportHeight() > this.getScrollerHeight();
|
|
||||||
|
|
||||||
return pastTop || pastBottom;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* determines if the tolerance has been exceeded
|
|
||||||
* @param {int} currentScrollY the current scroll y position
|
|
||||||
* @return {bool} true if tolerance exceeded, false otherwise
|
|
||||||
*/
|
|
||||||
toleranceExceeded : function (currentScrollY, direction) {
|
|
||||||
return Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance[direction];
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* determine if it is appropriate to unpin
|
|
||||||
* @param {int} currentScrollY the current y scroll position
|
|
||||||
* @param {bool} toleranceExceeded has the tolerance been exceeded?
|
|
||||||
* @return {bool} true if should unpin, false otherwise
|
|
||||||
*/
|
|
||||||
shouldUnpin : function (currentScrollY, toleranceExceeded) {
|
|
||||||
var scrollingDown = currentScrollY > this.lastKnownScrollY,
|
|
||||||
pastOffset = currentScrollY >= this.offset;
|
|
||||||
|
|
||||||
return scrollingDown && pastOffset && toleranceExceeded;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* determine if it is appropriate to pin
|
|
||||||
* @param {int} currentScrollY the current y scroll position
|
|
||||||
* @param {bool} toleranceExceeded has the tolerance been exceeded?
|
|
||||||
* @return {bool} true if should pin, false otherwise
|
|
||||||
*/
|
|
||||||
shouldPin : function (currentScrollY, toleranceExceeded) {
|
|
||||||
var scrollingUp = currentScrollY < this.lastKnownScrollY,
|
|
||||||
pastOffset = currentScrollY <= this.offset;
|
|
||||||
|
|
||||||
return (scrollingUp && toleranceExceeded) || pastOffset;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles updating the state of the widget
|
|
||||||
*/
|
|
||||||
update : function() {
|
|
||||||
var currentScrollY = this.getScrollY(),
|
|
||||||
scrollDirection = currentScrollY > this.lastKnownScrollY ? 'down' : 'up',
|
|
||||||
toleranceExceeded = this.toleranceExceeded(currentScrollY, scrollDirection);
|
|
||||||
|
|
||||||
if(this.isOutOfBounds(currentScrollY)) { // Ignore bouncy scrolling in OSX
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentScrollY <= this.offset ) {
|
|
||||||
this.top();
|
|
||||||
} else {
|
|
||||||
this.notTop();
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.shouldUnpin(currentScrollY, toleranceExceeded)) {
|
|
||||||
this.unpin();
|
|
||||||
}
|
|
||||||
else if(this.shouldPin(currentScrollY, toleranceExceeded)) {
|
|
||||||
this.pin();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.lastKnownScrollY = currentScrollY;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Default options
|
|
||||||
* @type {Object}
|
|
||||||
*/
|
|
||||||
Headroom.options = {
|
|
||||||
tolerance : {
|
|
||||||
up : 0,
|
|
||||||
down : 0
|
|
||||||
},
|
|
||||||
offset : 0,
|
|
||||||
scroller: window,
|
|
||||||
classes : {
|
|
||||||
pinned : 'headroom--pinned',
|
|
||||||
unpinned : 'headroom--unpinned',
|
|
||||||
top : 'headroom--top',
|
|
||||||
notTop : 'headroom--not-top',
|
|
||||||
initial : 'headroom'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList;
|
|
||||||
|
|
||||||
window.Headroom = Headroom;
|
this.lastKnownScrollY = 0;
|
||||||
|
this.elem = elem;
|
||||||
|
this.debouncer = new Debouncer(this.update.bind(this));
|
||||||
|
this.tolerance = normalizeTolerance(options.tolerance);
|
||||||
|
this.classes = options.classes;
|
||||||
|
this.offset = options.offset;
|
||||||
|
this.scroller = options.scroller;
|
||||||
|
this.initialised = false;
|
||||||
|
this.onPin = options.onPin;
|
||||||
|
this.onUnpin = options.onUnpin;
|
||||||
|
this.onTop = options.onTop;
|
||||||
|
this.onNotTop = options.onNotTop;
|
||||||
|
}
|
||||||
|
Headroom.prototype = {
|
||||||
|
constructor: Headroom,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialises the widget
|
||||||
|
*/
|
||||||
|
init: function () {
|
||||||
|
if (!Headroom.cutsTheMustard) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.elem.classList.add(this.classes.initial);
|
||||||
|
|
||||||
|
this.attachEvent();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unattaches events and removes any classes that were added
|
||||||
|
*/
|
||||||
|
destroy: function () {
|
||||||
|
var classes = this.classes;
|
||||||
|
|
||||||
|
this.initialised = false;
|
||||||
|
this.elem.classList.remove(classes.unpinned, classes.pinned, classes.top, classes.initial);
|
||||||
|
removeEventListenerWithOptions(this.scroller, 'scroll', this.debouncer, {
|
||||||
|
capture: false,
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Attaches the scroll event
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
attachEvent: function () {
|
||||||
|
if (!this.initialised) {
|
||||||
|
this.lastKnownScrollY = this.getScrollY();
|
||||||
|
this.initialised = true;
|
||||||
|
addEventListenerWithOptions(this.scroller, 'scroll', this.debouncer, {
|
||||||
|
capture: false,
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.debouncer.handleEvent();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unpins the header if it's currently pinned
|
||||||
|
*/
|
||||||
|
unpin: function () {
|
||||||
|
var classList = this.elem.classList,
|
||||||
|
classes = this.classes;
|
||||||
|
|
||||||
|
if (classList.contains(classes.pinned) || !classList.contains(classes.unpinned)) {
|
||||||
|
classList.add(classes.unpinned);
|
||||||
|
classList.remove(classes.pinned);
|
||||||
|
this.onUnpin && this.onUnpin.call(this);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pins the header if it's currently unpinned
|
||||||
|
*/
|
||||||
|
pin: function () {
|
||||||
|
var classList = this.elem.classList,
|
||||||
|
classes = this.classes;
|
||||||
|
|
||||||
|
if (classList.contains(classes.unpinned)) {
|
||||||
|
classList.remove(classes.unpinned);
|
||||||
|
classList.add(classes.pinned);
|
||||||
|
this.onPin && this.onPin.call(this);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the top states
|
||||||
|
*/
|
||||||
|
top: function () {
|
||||||
|
var classList = this.elem.classList,
|
||||||
|
classes = this.classes;
|
||||||
|
|
||||||
|
if (!classList.contains(classes.top)) {
|
||||||
|
classList.add(classes.top);
|
||||||
|
classList.remove(classes.notTop);
|
||||||
|
this.onTop && this.onTop.call(this);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the not top state
|
||||||
|
*/
|
||||||
|
notTop: function () {
|
||||||
|
var classList = this.elem.classList,
|
||||||
|
classes = this.classes;
|
||||||
|
|
||||||
|
if (!classList.contains(classes.notTop)) {
|
||||||
|
classList.add(classes.notTop);
|
||||||
|
classList.remove(classes.top);
|
||||||
|
this.onNotTop && this.onNotTop.call(this);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the Y scroll position
|
||||||
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
|
||||||
|
* @return {Number} pixels the page has scrolled along the Y-axis
|
||||||
|
*/
|
||||||
|
getScrollY: function () {
|
||||||
|
return (this.scroller.pageYOffset !== undefined)
|
||||||
|
? this.scroller.pageYOffset
|
||||||
|
: (this.scroller.scrollTop !== undefined)
|
||||||
|
? this.scroller.scrollTop
|
||||||
|
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the height of the viewport
|
||||||
|
* @see http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
|
||||||
|
* @return {int} the height of the viewport in pixels
|
||||||
|
*/
|
||||||
|
getViewportHeight: function () {
|
||||||
|
return window.innerHeight
|
||||||
|
|| document.documentElement.clientHeight
|
||||||
|
|| document.body.clientHeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the height of the document
|
||||||
|
* @see http://james.padolsey.com/javascript/get-document-height-cross-browser/
|
||||||
|
* @return {int} the height of the document in pixels
|
||||||
|
*/
|
||||||
|
getDocumentHeight: function () {
|
||||||
|
var body = document.body,
|
||||||
|
documentElement = document.documentElement;
|
||||||
|
|
||||||
|
return Math.max(
|
||||||
|
body.scrollHeight, documentElement.scrollHeight,
|
||||||
|
body.offsetHeight, documentElement.offsetHeight,
|
||||||
|
body.clientHeight, documentElement.clientHeight
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the height of the DOM element
|
||||||
|
* @param {Object} elm the element to calculate the height of which
|
||||||
|
* @return {int} the height of the element in pixels
|
||||||
|
*/
|
||||||
|
getElementHeight: function (elm) {
|
||||||
|
return Math.max(
|
||||||
|
elm.scrollHeight,
|
||||||
|
elm.offsetHeight,
|
||||||
|
elm.clientHeight
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the height of the scroller element
|
||||||
|
* @return {int} the height of the scroller element in pixels
|
||||||
|
*/
|
||||||
|
getScrollerHeight: function () {
|
||||||
|
return (this.scroller === window || this.scroller === document.body)
|
||||||
|
? this.getDocumentHeight()
|
||||||
|
: this.getElementHeight(this.scroller);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* determines if the scroll position is outside of document boundaries
|
||||||
|
* @param {int} currentScrollY the current y scroll position
|
||||||
|
* @return {bool} true if out of bounds, false otherwise
|
||||||
|
*/
|
||||||
|
isOutOfBounds: function (currentScrollY) {
|
||||||
|
var pastTop = currentScrollY < 0;
|
||||||
|
|
||||||
|
if (pastTop) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pastBottom = currentScrollY + this.getViewportHeight() > this.getScrollerHeight();
|
||||||
|
return pastBottom;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* determines if the tolerance has been exceeded
|
||||||
|
* @param {int} currentScrollY the current scroll y position
|
||||||
|
* @return {bool} true if tolerance exceeded, false otherwise
|
||||||
|
*/
|
||||||
|
toleranceExceeded: function (currentScrollY, direction) {
|
||||||
|
return Math.abs(currentScrollY - this.lastKnownScrollY) >= this.tolerance[direction];
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* determine if it is appropriate to unpin
|
||||||
|
* @param {int} currentScrollY the current y scroll position
|
||||||
|
* @param {bool} toleranceExceeded has the tolerance been exceeded?
|
||||||
|
* @return {bool} true if should unpin, false otherwise
|
||||||
|
*/
|
||||||
|
shouldUnpin: function (currentScrollY, toleranceExceeded) {
|
||||||
|
var scrollingDown = currentScrollY > this.lastKnownScrollY,
|
||||||
|
pastOffset = currentScrollY >= this.offset;
|
||||||
|
|
||||||
|
return scrollingDown && pastOffset && toleranceExceeded;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* determine if it is appropriate to pin
|
||||||
|
* @param {int} currentScrollY the current y scroll position
|
||||||
|
* @param {bool} toleranceExceeded has the tolerance been exceeded?
|
||||||
|
* @return {bool} true if should pin, false otherwise
|
||||||
|
*/
|
||||||
|
shouldPin: function (currentScrollY, toleranceExceeded) {
|
||||||
|
var scrollingUp = currentScrollY < this.lastKnownScrollY,
|
||||||
|
pastOffset = currentScrollY <= this.offset;
|
||||||
|
|
||||||
|
return (scrollingUp && toleranceExceeded) || pastOffset;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles updating the state of the widget
|
||||||
|
*/
|
||||||
|
update: function () {
|
||||||
|
var currentScrollY = this.getScrollY(),
|
||||||
|
scrollDirection = currentScrollY > this.lastKnownScrollY ? 'down' : 'up',
|
||||||
|
toleranceExceeded = this.toleranceExceeded(currentScrollY, scrollDirection);
|
||||||
|
|
||||||
|
if (this.isOutOfBounds(currentScrollY)) { // Ignore bouncy scrolling in OSX
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentScrollY <= this.offset) {
|
||||||
|
this.top();
|
||||||
|
} else {
|
||||||
|
this.notTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.shouldUnpin(currentScrollY, toleranceExceeded)) {
|
||||||
|
this.unpin();
|
||||||
|
}
|
||||||
|
else if (this.shouldPin(currentScrollY, toleranceExceeded)) {
|
||||||
|
this.pin();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.lastKnownScrollY = currentScrollY;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
Headroom.options = {
|
||||||
|
tolerance: {
|
||||||
|
up: 0,
|
||||||
|
down: 0
|
||||||
|
},
|
||||||
|
offset: 0,
|
||||||
|
scroller: window,
|
||||||
|
classes: {
|
||||||
|
pinned: 'headroom--pinned',
|
||||||
|
unpinned: 'headroom--unpinned',
|
||||||
|
top: 'headroom--top',
|
||||||
|
notTop: 'headroom--not-top',
|
||||||
|
initial: 'headroom'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList;
|
||||||
|
|
||||||
|
window.Headroom = Headroom;
|
||||||
|
|
||||||
}(window, document));
|
}(window, document));
|
||||||
Loading…
Add table
Add a link
Reference in a new issue