mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

bug fixes for headroom

Browse source
This commit is contained in:
vitorsemeano 2019-02-27 23:26:28 +00:00
parent 4a5fc817fb
commit a03502646c
4 changed files with 56 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/emby-scroller/emby-scroller.js
View file

@ -108,8 +108,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
var headroom = new Headroom([], { var headroom = new Headroom([], {
scroller: elem scroller: elem
}); });
// initialise
headroom.init();
headroom.add(document.querySelector('.skinHeader')); headroom.add(document.querySelector('.skinHeader'));
elem.headroom = headroom; elem.headroom = headroom;
}); });

109
src/components/headroom/headroom.js
View file

@ -75,47 +75,25 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
this.pinnedClass = options.pinnedClass; this.pinnedClass = options.pinnedClass;
this.state = 'clear'; this.state = 'clear';
}
function onScroll() { this.options = {
offset: 0,
scroller: window,
initialClass: 'headroom',
unPinnedClass: 'headroom--unpinned',
pinnedClass: 'headroom--pinned'
};
if (this.paused) { this.add = function (elem) {
return;
}
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
}
Headroom.prototype = {
constructor: Headroom,
/**
* Initialises the widget
*/
init: function () {
if (browser.supportsCssAnimation()) {
for (var i = 0, length = this.elems.length; i < length; i++) {
this.elems[i].classList.add(this.initialClass);
this.elems[i].addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this));
}
this.attachEvent();
}
return this;
},
add: function (elem) {
if (browser.supportsCssAnimation()) { if (browser.supportsCssAnimation()) {
elem.classList.add(this.initialClass); elem.classList.add(this.initialClass);
elem.addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this)); elem.addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this));
this.elems.push(elem); this.elems.push(elem);
} }
}, };
remove: function (elem) { this.remove = function (elem) {
elem.classList.remove(this.unPinnedClass); elem.classList.remove(this.unPinnedClass);
elem.classList.remove(this.initialClass); elem.classList.remove(this.initialClass);
@ -125,20 +103,20 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
if (i !== -1) { if (i !== -1) {
this.elems.splice(i, 1); this.elems.splice(i, 1);
} }
}, };
pause: function () { this.pause = function () {
this.paused = true; this.paused = true;
}, };
resume: function () { this.resume = function () {
this.paused = false; this.paused = false;
}, };
/** /**
* Unattaches events and removes any classes that were added * Unattaches events and removes any classes that were added
*/ */
destroy: function () { this.destroy = function () {
this.initialised = false; this.initialised = false;
@ -157,13 +135,13 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
capture: false, capture: false,
passive: true passive: true
}); });
}, };
/** /**
* Attaches the scroll event * Attaches the scroll event
* @private * @private
*/ */
attachEvent: function () { this.attachEvent = function () {
if (!this.initialised) { if (!this.initialised) {
this.lastKnownScrollY = this.getScrollY(); this.lastKnownScrollY = this.getScrollY();
this.initialised = true; this.initialised = true;
@ -177,12 +155,12 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
this.update(); this.update();
} }
}, };
/** /**
* Unpins the header if it's currently pinned * Unpins the header if it's currently pinned
*/ */
clear: function () { this.clear = function () {
if (this.state === 'clear') { if (this.state === 'clear') {
return; return;
@ -199,12 +177,12 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
classList.remove(unpinnedClass); classList.remove(unpinnedClass);
//classList.remove(pinnedClass); //classList.remove(pinnedClass);
} }
}, };
/** /**
* Unpins the header if it's currently pinned * Unpins the header if it's currently pinned
*/ */
pin: function () { this.pin = function () {
if (this.state === 'pin') { if (this.state === 'pin') {
return; return;
@ -221,12 +199,12 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
classList.remove(unpinnedClass); classList.remove(unpinnedClass);
classList.add(pinnedClass); classList.add(pinnedClass);
} }
}, };
/** /**
* Unpins the header if it's currently pinned * Unpins the header if it's currently pinned
*/ */
unpin: function () { this.unpin = function () {
if (this.state === 'unpin') { if (this.state === 'unpin') {
return; return;
@ -243,14 +221,14 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
classList.add(unpinnedClass); classList.add(unpinnedClass);
//classList.remove(pinnedClass); //classList.remove(pinnedClass);
} }
}, };
/** /**
* Gets the Y scroll position * Gets the Y scroll position
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
* @return {Number} pixels the page has scrolled along the Y-axis * @return {Number} pixels the page has scrolled along the Y-axis
*/ */
getScrollY: function () { this.getScrollY = function () {
var scroller = this.scroller; var scroller = this.scroller;
@ -269,36 +247,36 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
} }
return (document.documentElement || document.body).scrollTop; return (document.documentElement || document.body).scrollTop;
}, };
/** /**
* determine if it is appropriate to unpin * determine if it is appropriate to unpin
* @param {int} currentScrollY the current y scroll position * @param {int} currentScrollY the current y scroll position
* @return {bool} true if should unpin, false otherwise * @return {bool} true if should unpin, false otherwise
*/ */
shouldUnpin: function (currentScrollY) { this.shouldUnpin = function (currentScrollY) {
var scrollingDown = currentScrollY > this.lastKnownScrollY, var scrollingDown = currentScrollY > this.lastKnownScrollY,
pastOffset = currentScrollY >= this.offset; pastOffset = currentScrollY >= this.offset;
return scrollingDown && pastOffset; return scrollingDown && pastOffset;
}, };
/** /**
* determine if it is appropriate to pin * determine if it is appropriate to pin
* @param {int} currentScrollY the current y scroll position * @param {int} currentScrollY the current y scroll position
* @return {bool} true if should pin, false otherwise * @return {bool} true if should pin, false otherwise
*/ */
shouldPin: function (currentScrollY) { this.shouldPin = function (currentScrollY) {
var scrollingUp = currentScrollY < this.lastKnownScrollY, var scrollingUp = currentScrollY < this.lastKnownScrollY,
pastOffset = currentScrollY <= this.offset; pastOffset = currentScrollY <= this.offset;
return scrollingUp || pastOffset; return scrollingUp || pastOffset;
}, };
/** /**
* Handles updating the state of the widget * Handles updating the state of the widget
*/ */
update: function () { this.update = function () {
if (this.paused) { if (this.paused) {
return; return;
@ -330,8 +308,28 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
} }
this.lastKnownScrollY = currentScrollY; this.lastKnownScrollY = currentScrollY;
}
}; };
if (browser.supportsCssAnimation()) {
for (var i = 0, length = this.elems.length; i < length; i++) {
this.elems[i].classList.add(this.initialClass);
this.elems[i].addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this));
}
this.attachEvent();
}
}
function onScroll() {
if (this.paused) {
return;
}
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
}
/** /**
* Default options * Default options
* @type {Object} * @type {Object}
@ -345,5 +343,4 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
}; };
return Headroom; return Headroom;
}); });

3
src/scripts/librarymenu.js
View file

@ -724,7 +724,8 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
} }
function initHeadRoom(elem) { function initHeadRoom(elem) {
require(["headroom"], function (headroom) { require(["headroom"], function (Headroom) {
var headroom = new Headroom([], {});
headroom.add(elem); headroom.add(elem);
}); });
} }

1
src/scripts/site.js
View file

@ -345,7 +345,6 @@ var AppInfo = {};
function createWindowHeadroom(Headroom) { function createWindowHeadroom(Headroom) {
var headroom = new Headroom([], {}); var headroom = new Headroom([], {});
headroom.init();
return headroom; return headroom;
} }