rantii/js/pages/rant-page.js

/**
 * @fileoverview Rant Page Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description Single rant view page with comments
 * @keywords rant, page, detail, view, single
 */

import { BaseComponent } from '../components/base-component.js';

class RantPage extends BaseComponent {
    static get observedAttributes() {
        return ['rant-id', 'comment-id'];
    }

    init() {
        this.render();
    }

    render() {
        const rantId = this.getAttr('rant-id');

        this.addClass('page', 'rant-page');

        this.setHtml(`
            <rant-detail rant-id="${rantId || ''}"></rant-detail>
        `);

        if (rantId) {
            this.load(rantId);
        }
    }

    async load(rantId) {
        const detail = this.$('rant-detail');
        if (detail) {
            await detail.load(rantId);

            const commentId = this.getAttr('comment-id');
            if (commentId) {
                requestAnimationFrame(() => {
                    detail.scrollToComment(commentId);
                });
            }
        }
    }

    onAttributeChanged(name, oldValue, newValue) {
        if (name === 'rant-id' && newValue) {
            this.load(newValue);
        }
        if (name === 'comment-id' && newValue) {
            const detail = this.$('rant-detail');
            if (detail) {
                detail.scrollToComment(newValue);
            }
        }
    }
}

customElements.define('rant-page', RantPage);

export { RantPage };