Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix scroll glue behavior #923

Merged
merged 3 commits into from Nov 13, 2019
Merged

Fix scroll glue behavior #923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a8c13b
fix https://github.com/threema-ch/threema-web/issues/18
vortex852456 Nov 10, 2019
7842e0a
Removed unnecessary throttle
vortex852456 Nov 12, 2019
ca8fb10
removed throttle helper since it's not longer used
vortex852456 Nov 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 0 additions & 26 deletions src/helpers.ts
View file
Open in desktop
Expand Up @@ -219,32 +219,6 @@ export function isString(val: any): boolean {
return typeof val === 'string' || val instanceof String;
}

/**
* Throttle function.
*
* Taken from https://remysharp.com/2010/07/21/throttling-function-calls
*/
export function throttle(fn, threshold: number = 250, scope) {
let last;
let deferTimer;
return function() {
const context = scope || this;
const now = +(new Date());
const args = arguments;
if (last && now < last + threshold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, threshold);
} else {
last = now;
fn.apply(context, args);
}
};
}

/**
* Detect whether browser supports passive event listeners.
*
Expand Down
10 changes: 5 additions & 5 deletions src/partials/messenger.ts
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@ import {Logger} from 'ts-log';
import {ContactControllerModel} from '../controller_model/contact';
import {DialogController} from '../controllers/dialog';
import {TroubleshootingController} from '../controllers/troubleshooting';
import {bufferToUrl, hasValue, supportsPassive, throttle, u8aToHex} from '../helpers';
import {bufferToUrl, hasValue, supportsPassive, u8aToHex} from '../helpers';
import {emojify} from '../helpers/emoji';
import {ContactService} from '../services/contact';
import {ControllerService} from '../services/controller';
Expand Down Expand Up @@ -406,11 +406,11 @@ class ConversationController {
this.domChatElement = document.querySelector('#conversation-chat') as HTMLElement;

// Add custom event handlers
this.domChatElement.addEventListener('scroll', throttle(() => {
this.domChatElement.addEventListener('scroll', () => {
$rootScope.$apply(() => {
this.updateScrollJump();
});
}, 100, this), supportsPassive() ? {passive: true} : false);
}, supportsPassive() ? {passive: true} : false);
}

// Set receiver, conversation and type
Expand Down Expand Up @@ -915,12 +915,12 @@ class ConversationController {
}

/**
* Only show the scroll to bottom button if user scrolled more than 10px
* Only show the scroll to bottom button if user scrolled more than 1px
* away from bottom.
*/
private updateScrollJump(): void {
const chat = this.domChatElement;
this.showScrollJump = chat.scrollHeight - (chat.scrollTop + chat.offsetHeight) > 10;
this.showScrollJump = chat.scrollHeight - (chat.scrollTop + chat.offsetHeight) > 1;
}

/**
Expand Down