OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Added some logic to turn off sticky headers when the scroll area isn't large enough to support them

pull/21833/head
wmwragg 2016-08-26 11:01:04 +01:00
parent c8c2f733e2
commit 774e24a3b4
1 changed files with 26 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/views/rooms/RoomList.js
View File

@ -64,10 +64,12 @@ module.exports = React.createClass({
componentDidMount: function() { componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
// Initilaise the stickyHeaders when the component is created
this._updateStickyHeaders(undefined, true);
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
// Reinitilaise the stickyHeaders when the component is created or updated // Reinitilaise the stickyHeaders when the component is updated
this._updateStickyHeaders(undefined, true); this._updateStickyHeaders(undefined, true);
}, },
@ -317,23 +319,18 @@ module.exports = React.createClass({
}, },
_initAndPositionStickyHeaders: function(e, initialise) { _initAndPositionStickyHeaders: function(e, initialise) {
// Do the sticky header stuf here, both the initilaisation (initialise === true) var scrollArea = this._getScrollNode();
// and the updating when scrolling (initialise === false)
// use direct DOM access as done in _repositionIncomingCallBox
var self = this;
var scrollArea = self._getScrollNode();
var scrollAreaHeight = scrollArea.getBoundingClientRect().height; var scrollAreaHeight = scrollArea.getBoundingClientRect().height;
// console.log(scrollArea);
// console.log("scrollAreaHeight: " + scrollAreaHeight);
if (initialise) { if (initialise) {
var stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer"); var stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer");
this.scrollAreaSufficient = (120 + (stickies[0].getBoundingClientRect().height * stickies.length)) < scrollAreaHeight;
if (this.scrollAreaSufficient) {
if (typeof stickies === "object" && stickies.length > 0) { if (typeof stickies === "object" && stickies.length > 0) {
// Initialise the sticky headers // Initialise the sticky headers
self.stickyWrappers = Array.prototype.map.call(stickies, function(sticky, i) { this.stickyWrappers = Array.prototype.map.call(stickies, function(sticky, i) {
sticky.dataset.originalPosition = sticky.offsetTop - scrollArea.offsetTop; sticky.dataset.originalPosition = sticky.offsetTop - scrollArea.offsetTop;
var originalHeight = sticky.getBoundingClientRect().height; var originalHeight = sticky.getBoundingClientRect().height;
sticky.dataset.originalHeight = originalHeight; sticky.dataset.originalHeight = originalHeight;
@ -343,66 +340,44 @@ module.exports = React.createClass({
}); });
} }
} }
}
Array.prototype.forEach.call(self.stickyWrappers, function(sticky, i, stickyWrappers) { var self = this;
Array.prototype.forEach.call(this.stickyWrappers, function(sticky, i, stickyWrappers) {
var stickyPosition = sticky.dataset.originalPosition; var stickyPosition = sticky.dataset.originalPosition;
var stickyHeight = sticky.dataset.originalHeight; var stickyHeight = sticky.dataset.originalHeight;
var stickyHeader = sticky.childNodes[0]; var stickyHeader = sticky.childNodes[0];
var topStuckHeight = stickyHeight * i; var topStuckHeight = stickyHeight * i;
var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i) var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i)
// console.log("i: " + i); if (self.scrollAreaSufficient && stickyPosition <= (scrollArea.scrollTop + topStuckHeight)) {
// console.log("scrollArea.scrollTop: " + scrollArea.scrollTop);
// console.log("scrollArea.offsetTop: " + scrollArea.offsetTop);
// console.log("stickyPosition: " + stickyPosition);
// console.log("stickyHeight: " + stickyHeight);
//console.log(stickyHeader);
// console.log("topStuckHeight: " + topStuckHeight);
// console.log("bottomStuckHeight: " + bottomStuckHeight);
if (stickyPosition <= (scrollArea.scrollTop + topStuckHeight)) {
// Top stickies // Top stickies
// console.log("Top stickies");
stickyHeader.classList.add("mx_RoomSubList_fixed"); stickyHeader.classList.add("mx_RoomSubList_fixed");
//sticky.style.height = stickyHeight + "px";
stickyHeader.style.top = scrollArea.offsetTop + topStuckHeight + "px"; stickyHeader.style.top = scrollArea.offsetTop + topStuckHeight + "px";
} else if (stickyPosition >= ((scrollArea.scrollTop + scrollAreaHeight) - bottomStuckHeight)) { } else if (self.scrollAreaSufficient && stickyPosition >= ((scrollArea.scrollTop + scrollAreaHeight) - bottomStuckHeight)) {
/// Bottom stickies /// Bottom stickies
//console.log("Bottom stickies");
stickyHeader.classList.add("mx_RoomSubList_fixed"); stickyHeader.classList.add("mx_RoomSubList_fixed");
//sticky.style.height = stickyHeight + "px";
stickyHeader.style.top = (scrollArea.offsetTop + scrollAreaHeight) - bottomStuckHeight + "px"; stickyHeader.style.top = (scrollArea.offsetTop + scrollAreaHeight) - bottomStuckHeight + "px";
} else { } else {
// Not sticky // Not sticky
//console.log("Not sticky");
stickyHeader.classList.remove("mx_RoomSubList_fixed"); stickyHeader.classList.remove("mx_RoomSubList_fixed");
//sticky.style.height = null;
stickyHeader.style.top = null; stickyHeader.style.top = null;
} }
}); });
}, },
_stickyWrappers: [],
_updateStickyHeaders: function(e, initialise) { _updateStickyHeaders: function(e, initialise) {
// Do the sticky header stuff here, both the initilaisation (initialise === true)
// and the updating when scrolling (initialise === false)
// use direct DOM access as done in _repositionIncomingCallBox
var self = this; var self = this;
if (initialise) { if (initialise) {
// Useing requestAnimationFrame to ensure that the code is run after the painting // Useing setTimeout to ensure that the code is run after the painting
// of the newly rendered object // of the newly rendered object as using requestAnimationFrame caused
window.requestAnimationFrame(function() { // artefacts to appear on screen briefly
//console.log("### D E B U G requestAnimationFrame S T A R T ###"); window.setTimeout(function() {
self._initAndPositionStickyHeaders(e, initialise); self._initAndPositionStickyHeaders(e, initialise);
//console.log("### D E B U G requestAnimationFrame F I N I S H ###");
}); });
} else { } else {
//console.log("### D E B U G S T A R T ###");
this._initAndPositionStickyHeaders(e, initialise); this._initAndPositionStickyHeaders(e, initialise);
//console.log("### D E B U G F I N I S H ###");
} }
}, },