rio/frontend/code/components/revealer.ts

import { textStyleToCss } from '../cssUtils';
import { applyIcon } from '../designApplication';
import { ComponentId, TextStyle } from '../dataModels';
import { commitCss } from '../utils';
import { ComponentBase, ComponentState } from './componentBase';
import { RippleEffect } from '../rippleEffect';

let HEADER_PADDING: number = 0.3;

export type RevealerState = ComponentState & {
    _type_: 'Revealer-builtin';
    header?: string | null;
    content?: ComponentId;
    header_style?: 'heading1' | 'heading2' | 'heading3' | 'text' | TextStyle;
    is_open: boolean;
};

export class RevealerComponent extends ComponentBase {
    state: Required<RevealerState>;

    private headerElement: HTMLElement;
    private labelElement: HTMLElement;
    private arrowElement: HTMLElement;
    private contentOuterElement: HTMLElement;
    private contentInnerElement: HTMLElement;

    private rippleInstance: RippleEffect;

    createElement(): HTMLElement {
        // Create the HTML
        let element = document.createElement('div');
        element.classList.add('rio-revealer');

        element.innerHTML = `
            <div class="rio-revealer-header">
                <div class="rio-revealer-label"></div>
                <div class="rio-revealer-arrow"></div>
            </div>
            <div class="rio-revealer-content-outer">
                <div class="rio-revealer-content-inner"></div>
            </div>
`;

        // Expose the elements
        this.headerElement = element.querySelector(
            '.rio-revealer-header'
        ) as HTMLElement;

        this.labelElement = this.headerElement.querySelector(
            '.rio-revealer-label'
        ) as HTMLElement;

        this.arrowElement = this.headerElement.querySelector(
            '.rio-revealer-arrow'
        ) as HTMLElement;

        this.contentOuterElement = element.querySelector(
            '.rio-revealer-content-outer'
        ) as HTMLElement;

        this.contentInnerElement = element.querySelector(
            '.rio-revealer-content-inner'
        ) as HTMLElement;

        // Initialize them
        applyIcon(this.arrowElement, 'material/expand_more', 'currentColor');

        this.rippleInstance = new RippleEffect(element, {
            triggerOnPress: false,
        });

        // Listen for presses
        this.headerElement.onclick = (event) => {
            // Trigger the ripple effect
            this.rippleInstance.trigger(event);

            // Toggle the open state
            this.setStateAndNotifyBackend({
                is_open: !this.state.is_open,
            });
        };

        // Color change on hover/leave
        this.headerElement.onmouseenter = () => {
            this.element.style.background = 'var(--rio-local-bg-variant)';
        };

        this.headerElement.onmouseleave = () => {
            this.element.style.removeProperty('background');
        };

        return element;
    }

    updateElement(
        deltaState: RevealerState,
        latentComponents: Set<ComponentBase>
    ): void {
        super.updateElement(deltaState, latentComponents);

        // Update the header
        if (deltaState.header === null) {
            this.headerElement.style.display = 'none';
        } else if (deltaState.header !== undefined) {
            this.headerElement.style.removeProperty('display');
            this.labelElement.textContent = deltaState.header;
        }

        // Update the child
        this.replaceOnlyChild(
            latentComponents,
            deltaState.content,
            this.contentInnerElement
        );

        // Update the text style
        if (deltaState.header_style !== undefined) {
            // The text is handled by a helper function
            Object.assign(
                this.labelElement.style,
                textStyleToCss(deltaState.header_style)
            );

            // The text style defines the overall scale of the header
            let headerScale: number;
            if (deltaState.header_style === 'heading1') {
                headerScale = 2;
            } else if (deltaState.header_style === 'heading2') {
                headerScale = 1.5;
            } else if (deltaState.header_style === 'heading3') {
                headerScale = 1.2;
            } else if (deltaState.header_style === 'text') {
                headerScale = 1;
            } else {
                headerScale = deltaState.header_style.fontSize;
            }

            // Adapt the header's padding
            let cssPadding = `${HEADER_PADDING * headerScale}rem`;
            this.headerElement.style.padding = cssPadding;

            // Make the arrow match
            let arrowSize = headerScale * 1.0;
            this.arrowElement.style.width = `${arrowSize}rem`;
            this.arrowElement.style.height = `${arrowSize}rem`;
            this.arrowElement.style.color = this.labelElement.style.color;
        }

        // Expand / collapse
        if (deltaState.is_open !== undefined) {
            // If this component has only just been created, then skip the
            // animation and render the final result immediately
            if (this.contentOuterElement.style.maxHeight === '') {
                if (deltaState.is_open) {
                    this.element.classList.add('rio-revealer-open');
                    this.contentOuterElement.style.maxHeight = 'unset';
                } else {
                    this.contentOuterElement.style.maxHeight = '0';
                }
            } else {
                if (deltaState.is_open) {
                    this.animateOpen();
                } else {
                    this.animateClose();
                }
            }
        }
    }

    private animateOpen(): void {
        // Do nothing if already expanded
        if (this.element.classList.contains('rio-revealer-open')) {
            return;
        }

        // Update the CSS to trigger the expand animation
        this.contentOuterElement.style.maxHeight = '0';
        this.element.classList.add('rio-revealer-open');

        // The components may currently be in flux due to a pending re-layout.
        // If that is the case, reading the `scrollHeight` would lead to an
        // incorrect value. Wait for the resize to finish before fetching it.
        requestAnimationFrame(() => {
            // Animating max-height only works with fixed values (and not
            // `unset`, etc), so we have to assign the child's exact height in
            // pixels
            this.setMaxHeightToChildHeight();

            // Once the animation is finished, remove the max-height so that the
            // child component can freely resize itself
            setTimeout(() => {
                this.contentOuterElement.style.maxHeight = 'unset';
            }, 1000 * 0.25);
        });
    }

    private animateClose(): void {
        // Do nothing if already collapsed
        if (!this.element.classList.contains('rio-revealer-open')) {
            return;
        }

        // Again, animating from `max-height: unset` doesn't work, so we have to
        // set it to the child's size in pixels
        this.setMaxHeightToChildHeight();
        commitCss(this.contentOuterElement);

        this.element.classList.remove('rio-revealer-open');
        this.contentOuterElement.style.maxHeight = '0';
    }

    private setMaxHeightToChildHeight(): void {
        let contentHeight = this.contentInnerElement.scrollHeight;
        let selfHeight = this.element.scrollHeight;
        let headerHeight = this.headerElement.scrollHeight;
        let targetHeight = Math.max(contentHeight, selfHeight - headerHeight);

        this.contentOuterElement.style.maxHeight = `${targetHeight}px`;
    }
}