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

Better comments, and adjusted the top sticky logic, so that the very top header isn't allways stuck

pull/21833/head
wmwragg 2016-08-26 15:52:57 +01:00
parent 5f9c794f0c
commit 8ccb1d482a
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -323,10 +323,13 @@ module.exports = React.createClass({
var scrollAreaHeight = scrollArea.getBoundingClientRect().height; var scrollAreaHeight = scrollArea.getBoundingClientRect().height;
if (initialise) { if (initialise) {
// Get a collection of sticky header containers
var stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer"); var stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer");
// Make sure there is sufficient space to do sticky headers
this.scrollAreaSufficient = (120 + (stickies[0].getBoundingClientRect().height * stickies.length)) < scrollAreaHeight; this.scrollAreaSufficient = (120 + (stickies[0].getBoundingClientRect().height * stickies.length)) < scrollAreaHeight;
// Initialise the sticky headers
if (this.scrollAreaSufficient) { 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
@ -344,9 +347,11 @@ module.exports = React.createClass({
var self = this; var self = this;
var scrollStuckOffset = 0; var scrollStuckOffset = 0;
// Scroll to the passed in position
if (scrollToPosition !== undefined) { if (scrollToPosition !== undefined) {
scrollArea.scrollTop = scrollToPosition; scrollArea.scrollTop = scrollToPosition;
} }
// Stick headers to top and bottom, or free them
Array.prototype.forEach.call(this.stickyWrappers, function(sticky, i, stickyWrappers) { 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;
@ -354,11 +359,12 @@ module.exports = React.createClass({
var topStuckHeight = stickyHeight * i; var topStuckHeight = stickyHeight * i;
var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i) var bottomStuckHeight = stickyHeight * (stickyWrappers.length - i)
if (self.scrollAreaSufficient && stickyPosition <= (scrollArea.scrollTop + topStuckHeight)) { if (self.scrollAreaSufficient && stickyPosition < (scrollArea.scrollTop + topStuckHeight)) {
// Top stickies // Top stickies
sticky.dataset.stuck = "top"; sticky.dataset.stuck = "top";
stickyHeader.classList.add("mx_RoomSubList_fixed"); stickyHeader.classList.add("mx_RoomSubList_fixed");
stickyHeader.style.top = scrollArea.offsetTop + topStuckHeight + "px"; stickyHeader.style.top = scrollArea.offsetTop + topStuckHeight + "px";
// If stuck at top adjust the scroll back down to take account of all the stuck headers
if (scrollToPosition !== undefined && stickyPosition === scrollToPosition) { if (scrollToPosition !== undefined && stickyPosition === scrollToPosition) {
scrollStuckOffset = topStuckHeight; scrollStuckOffset = topStuckHeight;
} }
@ -374,7 +380,7 @@ module.exports = React.createClass({
stickyHeader.style.top = null; stickyHeader.style.top = null;
} }
}); });
// Adjust the scroll to take account of stuck headers // Adjust the scroll to take account of top stuck headers
if (scrollToPosition !== undefined) { if (scrollToPosition !== undefined) {
scrollArea.scrollTop -= scrollStuckOffset; scrollArea.scrollTop -= scrollStuckOffset;
} }