utterance/utterances
1
1
Fork 0
mirror of https://github.com/utterance/utterances.git synced 2024-10-05 19:49:18 +03:00
Code Issues Projects Releases Wiki Activity

throttle frame measure instead of debounce

Browse Source 
share link and img processing with preview
This commit is contained in:
Jeremy Danyow 2018-04-04 23:35:40 -07:00
parent 895e13c2ca
commit 62229f1bdb
No known key found for this signature in database
GPG Key ID: 96C45DE6B2C1DF40
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/comment-component.ts
View File

@ -1,5 +1,6 @@
import { IssueComment } from './github';
import { timeAgo } from './time-ago';
import { scheduleMeasure } from './measure';
const avatarArgs = '?v=3&s=88';
const displayAssociations: { [association: string]: string; } = {
@ -42,7 +43,7 @@ export class CommentComponent {
</div>
</div>`;
this.retargetLinks();
processRenderedMarkdown(this.element.lastElementChild!.lastElementChild!);
}
public setCurrentUser(currentUser: string | null) {
@ -57,13 +58,11 @@ export class CommentComponent {
this.element.classList.remove('current-user');
}
}
private retargetLinks() {
const links = this.element.lastElementChild!.lastElementChild!.querySelectorAll('a');
let j = links.length;
while (j--) {
const link = links.item(j);
link.target = '_blank';
}
}
}
export function processRenderedMarkdown(markdownBody: Element) {
Array.from(markdownBody.querySelectorAll<HTMLAnchorElement>('a'))
.forEach(a => a.target = '_blank');
Array.from(markdownBody.querySelectorAll<HTMLImageElement>('img'))
.forEach(img => img.onload = scheduleMeasure);
}

11
src/measure.ts
View File

@ -8,7 +8,7 @@ let hostOrigin: string;
export function startMeasuring(origin: string) {
hostOrigin = origin;
addEventListener('resize', scheduleMeasure);
addEventListener('load', scheduleMeasure, true);
addEventListener('load', scheduleMeasure);
}
let lastHeight = -1;
@ -23,9 +23,12 @@ function measure() {
parent.postMessage(message, hostOrigin);
}
let publishTimeout = 0;
let lastMeasure = 0;
export function scheduleMeasure() {
clearTimeout(publishTimeout);
publishTimeout = setTimeout(measure, 50);
const now = Date.now();
if (now - lastMeasure > 50) {
lastMeasure = now;
setTimeout(measure, 50);
}
}

5
src/new-comment-component.ts
View File

@ -1,5 +1,6 @@
import { User, renderMarkdown } from './github';
import { scheduleMeasure } from './measure';
import { processRenderedMarkdown } from './comment-component';
// tslint:disable-next-line:max-line-length
const anonymousAvatar = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" version="1.1"><path fill="rgb(179,179,179)" fill-rule="evenodd" d="M8 10.5L9 14H5l1-3.5L5.25 9h3.5L8 10.5zM10 6H4L2 7h10l-2-1zM9 2L7 3 5 2 4 5h6L9 2zm4.03 7.75L10 9l1 2-2 3h3.22c.45 0 .86-.31.97-.75l.56-2.28c.14-.53-.19-1.08-.72-1.22zM4 9l-3.03.75c-.53.14-.86.69-.72 1.22l.56 2.28c.11.44.52.75.97.75H5l-2-3 1-2z"></path></svg>`;
@ -111,7 +112,9 @@ export class NewCommentComponent {
} else {
this.preview.textContent = 'Loading preview...';
this.renderTimeout = setTimeout(
() => renderMarkdown(text).then(html => this.preview.innerHTML = html).then(scheduleMeasure),
() => renderMarkdown(text).then(html => this.preview.innerHTML = html)
.then(() => processRenderedMarkdown(this.preview))
.then(scheduleMeasure),
500);
}
}