diff --git a/src/components/ScrollDisplay.ts b/src/components/ScrollDisplay.ts index a34b78e1..d2c7d59e 100644 --- a/src/components/ScrollDisplay.ts +++ b/src/components/ScrollDisplay.ts @@ -16,11 +16,9 @@ const { htmlToElement, purgeNode } = utils */ export class ScrollDisplay { /** Renders an entry (from the view model) to the top of the scroll. */ - readonly renderPrevious = this.generateRender({ - insertStrategy: insertBefore, - }) + readonly renderPrevious = this.generateRender('afterbegin') /** Renders an entry (from the view model) to the bottom of the scroll. */ - readonly renderNext = this.generateRender({ insertStrategy: insertAfter }) + readonly renderNext = this.generateRender('beforeend') // TODO(later): Remove after rewriting picker? readonly rendered: Promise @@ -50,11 +48,7 @@ export class ScrollDisplay { element.offsetTop + element.offsetHeight / 2 - this.root.offsetHeight / 2 } - private generateRender({ - insertStrategy: insert, - }: { - insertStrategy: (parent: Element, child: Element) => void - }) { + private generateRender(insertPosition: InsertPosition) { return (entry: RenderedEntry) => { let node: Element if (entry.type === 'message') { @@ -62,7 +56,7 @@ export class ScrollDisplay { } else { node = renderPageNode(entry) } - insert(this.root, node) + this.root.insertAdjacentElement(insertPosition, node) return node } @@ -72,13 +66,8 @@ export class ScrollDisplay { function renderPageNode(page: RenderedPageInfo) { const node = document.createElement('div') node.classList.add('tikkun-page') - if (page.run) - node.setAttribute('data-page-title', page.run.leining.date.title) - // TODO: Confirm safe to delete - // node.setAttribute('data-page-number', pageNumber.toString(10)) - const el = htmlToElement(Page(page)) - node.appendChild(el) + node.appendChild(htmlToElement(Page(page))) return node } @@ -86,17 +75,11 @@ function renderPageNode(page: RenderedPageInfo) { function renderMessageNode(entry: RenderedMessageInfo) { const node = document.createElement('div') node.classList.add('tikkun-message') + const span = document.createElement('span') span.classList.add('tikkun-message-text') - node.appendChild(span) span.textContent = entry.text - return node -} -const insertBefore = (parent: Element, child: Element) => { - parent.insertAdjacentElement('afterbegin', child) -} - -const insertAfter = (parent: Element, child: Element) => { - parent.insertAdjacentElement('beforeend', child) + node.appendChild(span) + return node } diff --git a/src/index.ts b/src/index.ts index 0fa75363..7118b064 100644 --- a/src/index.ts +++ b/src/index.ts @@ -46,8 +46,8 @@ const setVisibility = ({ }) => { const classList = document.querySelector(selector).classList - classList[visible ? 'remove' : 'add']('u-hidden') - classList[visible ? 'remove' : 'add']('mod-animated') + classList.toggle('u-hidden', !visible) + classList.toggle('mod-animated', !visible) } const showParshaPicker = () => {