Re-calculate sticky header positions when sublist header is clicked

This commit is contained in:
wmwragg 2016-08-26 09:56:07 +01:00
parent 7fcdd0f77a
commit c8c2f733e2

View file

@ -134,6 +134,11 @@ module.exports = React.createClass({
} }
}, },
onSubListHeaderClick: function(isHidden) {
// The scroll area has expanded or contracted, so re-calculate sticky headers positions
this._updateStickyHeaders(undefined, true);
},
onRoomTimeline: function(ev, room, toStartOfTimeline) { onRoomTimeline: function(ev, room, toStartOfTimeline) {
if (toStartOfTimeline) return; if (toStartOfTimeline) return;
this._delayedRefreshRoomList(); this._delayedRefreshRoomList();
@ -311,21 +316,21 @@ module.exports = React.createClass({
} }
}, },
_initAndPositionStickyHeaders: function(e, firstTime) { _initAndPositionStickyHeaders: function(e, initialise) {
// Do the sticky header stuf here, both the initilaisation (firstTime === true) // Do the sticky header stuf here, both the initilaisation (initialise === true)
// and the updating when scrolling (firstTime === false) // and the updating when scrolling (initialise === false)
// use direct DOM access as done in _repositionIncomingCallBox // use direct DOM access as done in _repositionIncomingCallBox
var self = this; var self = this;
var stickies = document.getElementsByClassName("mx_RoomSubList_stickyContainer");
var scrollArea = self._getScrollNode(); var scrollArea = self._getScrollNode();
var scrollAreaHeight = scrollArea.getBoundingClientRect().height; var scrollAreaHeight = scrollArea.getBoundingClientRect().height;
// console.log(scrollArea); // console.log(scrollArea);
// console.log("scrollAreaHeight: " + scrollAreaHeight); // console.log("scrollAreaHeight: " + scrollAreaHeight);
if (firstTime) { if (initialise) {
var stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer");
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) { self.stickyWrappers = Array.prototype.map.call(stickies, function(sticky, i) {
@ -379,24 +384,24 @@ module.exports = React.createClass({
_stickyWrappers: [], _stickyWrappers: [],
_updateStickyHeaders: function(e, firstTime) { _updateStickyHeaders: function(e, initialise) {
// Do the sticky header stuff here, both the initilaisation (firstTime === true) // Do the sticky header stuff here, both the initilaisation (initialise === true)
// and the updating when scrolling (firstTime === false) // and the updating when scrolling (initialise === false)
// use direct DOM access as done in _repositionIncomingCallBox // use direct DOM access as done in _repositionIncomingCallBox
var self = this; var self = this;
if (firstTime) { if (initialise) {
// Useing requestAnimationFrame to ensure that the code is run after the painting // Useing requestAnimationFrame to ensure that the code is run after the painting
// of the newly rendered object // of the newly rendered object
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
//console.log("### D E B U G requestAnimationFrame S T A R T ###"); //console.log("### D E B U G requestAnimationFrame S T A R T ###");
self._initAndPositionStickyHeaders(e, firstTime); self._initAndPositionStickyHeaders(e, initialise);
//console.log("### D E B U G requestAnimationFrame F I N I S H ###"); //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 ###"); //console.log("### D E B U G S T A R T ###");
this._initAndPositionStickyHeaders(e, firstTime); this._initAndPositionStickyHeaders(e, initialise);
//console.log("### D E B U G F I N I S H ###"); //console.log("### D E B U G F I N I S H ###");
} }
}, },
@ -423,6 +428,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
<RoomSubList list={ self.state.lists['m.favourite'] } <RoomSubList list={ self.state.lists['m.favourite'] }
@ -435,6 +441,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
<RoomSubList list={ self.state.lists['im.vector.fake.direct'] } <RoomSubList list={ self.state.lists['im.vector.fake.direct'] }
@ -445,6 +452,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
<RoomSubList list={ self.state.lists['im.vector.fake.recent'] } <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
@ -456,6 +464,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
{ Object.keys(self.state.lists).map(function(tagName) { { Object.keys(self.state.lists).map(function(tagName) {
@ -471,6 +480,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
} }
@ -486,6 +496,7 @@ module.exports = React.createClass({
incomingCall={ self.state.incomingCall } incomingCall={ self.state.incomingCall }
collapsed={ self.props.collapsed } collapsed={ self.props.collapsed }
searchFilter={ self.props.searchFilter } searchFilter={ self.props.searchFilter }
onHeaderClick={ self.onSubListHeaderClick }
onShowMoreRooms={ self.onShowMoreRooms } /> onShowMoreRooms={ self.onShowMoreRooms } />
<RoomSubList list={ self.state.lists['im.vector.fake.archived'] } <RoomSubList list={ self.state.lists['im.vector.fake.archived'] }