Term 2 – Week 6

This week I was given two new UI tasks. The first was to have a label change from “Make fullscreen” to “Exit fullscreen” depending if the browser is in full-screen mode. Second was to fix a bug in the chat component. In some instances when new messages come in, the message list displayed would not auto scroll to the bottom. This meant the user would have to manually scroll down to see new incoming messages.

The Chat bug turned out to be a result of recent updates to the chrome browser. Initially the check to see weather or not to automatically scroll was:

const { scrollArea } = this.refs;
this.shouldScrollBottom = scrollArea.scrollTop + scrollArea.offsetHeight ===

A Boolean variable is set to be true if the scrollTop + offsetHeight equals the scrollHeight. This assumed that the scrollTop variable was an integer, once the update happened scrollTop changed to be a float in certain instances. To account for this and fix the bug the condition was changed to the following:

let position = scrollArea.scrollTop + scrollArea.offsetHeight;

//Compare with <1 to account for the chance scrollArea.scrollTop is a float
//value in some browsers.
this.shouldScrollBottom = position === scrollArea.scrollHeight || (scrollArea.scrollHeight – position < 1);
I Figured out how to switch the full-screen button label buy creating a new Boolean property on the parent component and pass it down to the child. From there i could use that to determine which label to show.

When this was set up and working i found a bug where if “Esc” was pressed to exit full-screen mode the state of the component would not change because the custom event triggered by the buttons onClick function was not being called. The custom events were removed and replaced with the following:

document.addEventListener(“fullscreenchange”, this.fullScreenToggleCallback);
document.addEventListener(“webkitfullscreenchange”, this.fullScreenToggleCallback);
document.addEventListener(“mozfullscreenchange”, this.fullScreenToggleCallback);
document.addEventListener(“MSFullscreenChange”, this.fullScreenToggleCallback);

by using these to detect when full-screen mode for the browser changes we then use the following callback function to affect the component state. :

fullScreenToggleCallback() {
if (screen.height – 1 <= window.innerHeight) {
// browser is probably in fullscreen
this.setState({isFullScreen: true});
this.setState({isFullScreen: false});

I will be revisiting the centering of the action bar buttons now that a design has been settled on. Once that is done i will be moving on to debugging some accessibility related issues.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s