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

Click on stuck header scrolls to that header, collapses expands for none stuck header

pull/21833/head
wmwragg 2016-08-26 15:09:13 +01:00
parent 71e829fd32
commit b9e95865af
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,12 +65,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 // Initilaise the stickyHeaders when the component is created
this._updateStickyHeaders(undefined, true); this._updateStickyHeaders(true);
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
// Reinitilaise the stickyHeaders when the component is updated // Reinitilaise the stickyHeaders when the component is updated
this._updateStickyHeaders(undefined, true); this._updateStickyHeaders(true);
}, },
onAction: function(payload) { onAction: function(payload) {
@ -121,7 +121,7 @@ module.exports = React.createClass({
this._delayedRefreshRoomList(); this._delayedRefreshRoomList();
}, },
onArchivedHeaderClick: function(ev, isHidden) { onArchivedHeaderClick: function(isHidden) {
if (!isHidden) { if (!isHidden) {
var self = this; var self = this;
this.setState({ isLoadingLeftRooms: true }); this.setState({ isLoadingLeftRooms: true });
@ -136,9 +136,9 @@ module.exports = React.createClass({
} }
}, },
onSubListHeaderClick: function(ev, isHidden) { onSubListHeaderClick: function(isHidden, scrollToPosition) {
// The scroll area has expanded or contracted, so re-calculate sticky headers positions // The scroll area has expanded or contracted, so re-calculate sticky headers positions
this._updateStickyHeaders(ev, true); this._updateStickyHeaders(true, scrollToPosition);
}, },
onRoomTimeline: function(ev, room, toStartOfTimeline) { onRoomTimeline: function(ev, room, toStartOfTimeline) {
@ -267,7 +267,7 @@ module.exports = React.createClass({
_whenScrolling: function(e) { _whenScrolling: function(e) {
this._repositionTooltip(e); this._repositionTooltip(e);
this._repositionIncomingCallBox(e, false); this._repositionIncomingCallBox(e, false);
this._updateStickyHeaders(e, false); this._updateStickyHeaders(false);
}, },
_repositionTooltip: function(e) { _repositionTooltip: function(e) {
@ -318,7 +318,7 @@ module.exports = React.createClass({
} }
}, },
_initAndPositionStickyHeaders: function(e, initialise) { _initAndPositionStickyHeaders: function(initialise, scrollToPosition) {
var scrollArea = this._getScrollNode(); var scrollArea = this._getScrollNode();
var scrollAreaHeight = scrollArea.getBoundingClientRect().height; var scrollAreaHeight = scrollArea.getBoundingClientRect().height;
@ -343,13 +343,9 @@ module.exports = React.createClass({
} }
var self = this; var self = this;
if (e !== undefined && e.type === "click") { var scrollStuckOffset = 0;
console.log("### D E B U G ###"); if (scrollToPosition !== undefined) {
// var clickedElement = e.target; scrollArea.scrollTop = scrollToPosition;
// console.log(clickedElement.offsetTop);
// scrollArea.scrollTop = clickedElement.offsetTop;
//e.target.scrollIntoView();
//scrollArea.scrollTop = e.target.parentNode.dataset.originalPosition;
} }
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;
@ -358,6 +354,10 @@ 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 (scrollToPosition !== undefined && stickyPosition === scrollToPosition) {
scrollStuckOffset = topStuckHeight;
}
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";
@ -375,9 +375,13 @@ module.exports = React.createClass({
stickyHeader.style.top = null; stickyHeader.style.top = null;
} }
}); });
// Adjust the scroll to take account of stuck headers
if (scrollToPosition !== undefined) {
scrollArea.scrollTop -= scrollStuckOffset;
}
}, },
_updateStickyHeaders: function(e, initialise) { _updateStickyHeaders: function(initialise, scrollToPosition) {
var self = this; var self = this;
if (initialise) { if (initialise) {
@ -385,10 +389,10 @@ module.exports = React.createClass({
// of the newly rendered object as using requestAnimationFrame caused // of the newly rendered object as using requestAnimationFrame caused
// artefacts to appear on screen briefly // artefacts to appear on screen briefly
window.setTimeout(function() { window.setTimeout(function() {
self._initAndPositionStickyHeaders(e, initialise); self._initAndPositionStickyHeaders(initialise, scrollToPosition);
}); });
} else { } else {
this._initAndPositionStickyHeaders(e, initialise); this._initAndPositionStickyHeaders(initialise, scrollToPosition);
} }
}, },