OSIT-AE-App-Svelte/src/parent_iframe.html

<!-- BEGIN: Aether apps for iframe -->
<script>
    let parent_ae_app_iframe_url = 'https://dev-chow.oneskyit.com/';

    let parent_ae_params = new URLSearchParams(document.location.search);
    let parent_ae_slct_account_id = parent_ae_params.get('account_id');
    let parent_ae_slct_event_id = parent_ae_params.get('event_id');
    let parent_ae_slct_event_presenter_id = parent_ae_params.get('event_presenter_id');
    let parent_ae_slct_sponsorship_id = parent_ae_params.get('sponsorship_id');
    let parent_ae_slct_sponsorship_cfg_id = parent_ae_params.get('sponsorship_cfg_id');
    let parent_ae_slct_obj_type = parent_ae_params.get('ae_type');
    let parent_ae_slct_obj_id = parent_ae_params.get('ae_id');

    let parent_ae_iframe_height = null;

    if (parent_ae_slct_event_id && parent_ae_slct_event_presenter_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_id=${parent_ae_slct_event_id}`;
    } else if (parent_ae_slct_event_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_id=${parent_ae_slct_event_id}`;
    } else if (parent_ae_slct_event_presenter_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_presenter_id=${parent_ae_slct_event_presenter_id}`;
    }
    if (parent_ae_slct_sponsorship_id && parent_ae_slct_sponsorship_cfg_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}/sponsorships?sponsorship_id=${parent_ae_slct_sponsorship_id}&sponsorship_cfg_id=${parent_ae_slct_sponsorship_cfg_id}`;
    } else if (parent_ae_slct_sponsorship_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}sponsorships?sponsorship_id=${parent_ae_slct_sponsorship_id}`;
    } else if (parent_ae_slct_sponsorship_cfg_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}sponsorships?sponsorship_cfg_id=${parent_ae_slct_sponsorship_cfg_id}`;
    }

    if (parent_ae_slct_obj_type && parent_ae_slct_obj_id) {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}&${parent_ae_slct_obj_type}_id=${parent_ae_slct_obj_id}`;
    }

    if (parent_ae_app_iframe_url == 'https://dev-chow.oneskyit.com/') {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}?iframe=true`;
    } else {
        parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}&iframe=true`;
    }

    console.log(`AE parent iframe URL: ${parent_ae_app_iframe_url}`);

    window.addEventListener('message', function (event) {
        console.log('AE iframe parent: Message received from the child:', event.data);

        if (event.data) {
            if (event.data.iframe_height) {
                parent_ae_iframe_height = event.data.iframe_height;
                console.log(`Got AE iframe height: ${parent_ae_iframe_height}`);

                let parent_ae_iframe_element = document.getElementById('ae_iframe');

                // parent_ae_iframe_element.style.height = parent_ae_iframe_height;
                parent_ae_iframe_element.style.height = `${parent_ae_iframe_height + 50}px`;
            }

            const url = new URL(location);

            // Check if event_id is defined in the message
            if (event.data.event_id !== undefined) {
                console.log(`Got AE Event ID: ${event.data.event_id}`);
                parent_ae_slct_event_id = event.data.event_id;

                if (event.data.event_id) {
                    url.searchParams.set('event_id', event.data.event_id);
                } else {
                    url.searchParams.delete('event_id');
                }
                history.pushState({}, '', url);
            }

            // Check if event_presenter_id is defined in the message
            if (event.data.event_presenter_id !== undefined) {
                console.log(`Got AE Event Presenter ID: ${event.data.event_presenter_id}`);
                parent_ae_slct_event_presenter_id = event.data.event_presenter_id;

                if (event.data.event_presenter_id) {
                    url.searchParams.set('event_presenter_id', event.data.event_presenter_id);
                } else {
                    url.searchParams.delete('event_presenter_id');
                }
                history.pushState({}, '', url);
            }

            // Check if sponsorship_id is defined in the message
            if (event.data.sponsorship_id !== undefined) {
                console.log(`Got AE Sponsorship ID: ${event.data.sponsorship_id}`);
                parent_ae_slct_sponsorship_id = event.data.sponsorship_id;

                if (event.data.sponsorship_id) {
                    url.searchParams.set('sponsorship_id', event.data.sponsorship_id);
                } else {
                    url.searchParams.delete('sponsorship_id');
                }
                history.pushState({}, '', url);
            }

            // Check if sponsorship_cfg_id is defined in the message
            if (event.data.sponsorship_cfg_id !== undefined) {
                console.log(`Got AE Sponsorship Config ID: ${event.data.sponsorship_cfg_id}`);
                parent_ae_slct_sponsorship_cfg_id = event.data.sponsorship_cfgt_id;

                if (event.data.sponsorship_cfg_id) {
                    url.searchParams.set('sponsorship_cfg_id', event.data.sponsorship_cfg_id);
                } else {
                    url.searchParams.delete('sponsorship_cfg_id');
                }
                history.pushState({}, '', url);
            }
        } else {
            console.log(`No data in AE iframe child message? ${event}`);
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        console.log('Parent of AE iframe is ready!');
        console.log(`AE parent iframe URL: ${parent_ae_app_iframe_url}`);

        let parent_ae_iframe_element = document.getElementById('ae_iframe');
        console.log('AE parent iframe element', parent_ae_iframe_element);

        parent_ae_iframe_element.src = parent_ae_app_iframe_url;
    });
    console.log('AE iframe parent scripts run');
</script>

<p>
    <iframe
        width="100%"
        height="750"
        style="min-height: 600px; max-height: 100%"
        id="ae_iframe"
        src=""
        class="ae_parent_iframe"
    ></iframe>
</p>
<!-- END: Aether apps for iframe -->