Replace reduceMotion logic check in typeLines with characterDelay value check. Also adds a condition to skip the await call for lines if lineDelay is not 0.

This commit is contained in:
Jamie C 2021-06-02 14:36:36 -05:00
Родитель b07b9ba87a
Коммит 77fe7b0a6b
1 изменённых файлов: 4 добавлений и 6 удалений

Просмотреть файл

@ -11,8 +11,7 @@ const loaded: Promise<unknown> = (function () {
class TypingEffectElement extends HTMLElement { class TypingEffectElement extends HTMLElement {
async connectedCallback(): Promise<void> { async connectedCallback(): Promise<void> {
await loaded await loaded
if (this.content) if (this.content) await typeLines(this.lines, this.content, this.characterDelay, this.lineDelay)
await typeLines(this.lines, this.content, this.characterDelay, this.lineDelay, this.prefersReducedMotion)
if (this.cursor) this.cursor.hidden = true if (this.cursor) this.cursor.hidden = true
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('typing:complete', { new CustomEvent('typing:complete', {
@ -90,11 +89,10 @@ async function typeLines(
lines: string[], lines: string[],
contentElement: HTMLElement, contentElement: HTMLElement,
characterDelay: number, characterDelay: number,
lineDelay: number, lineDelay: number
reduceMotion: boolean
): Promise<void> { ): Promise<void> {
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
if (reduceMotion) { if (characterDelay === 0) {
contentElement.append(lines[lineIndex]) contentElement.append(lines[lineIndex])
} else { } else {
for (const character of lines[lineIndex].split('')) { for (const character of lines[lineIndex].split('')) {
@ -103,7 +101,7 @@ async function typeLines(
} }
} }
await wait(lineDelay) if (lineDelay !== 0) await wait(lineDelay)
if (lineIndex < lines.length - 1) contentElement.append(document.createElement('br')) if (lineIndex < lines.length - 1) contentElement.append(document.createElement('br'))
} }
} }