custom_details.html

<script>
    document.addEventListener("DOMContentLoaded", function () {

        /* Intercept into Airtable call */
        window['records'] = [];
        $.ajaxSetup({
            dataFilter: function (data, type) {
                if(type === 'json' && data) {
                    const jsonData = JSON.parse(data);
                    if(jsonData.records && jsonData.records.length > 0) {
                        window['records'] = window['records'].concat(jsonData.records);   
                    }
                    console.log(window['records']);
                }
                return data;
            }
        });

        setInterval(function () {
            /* Add mailto to emails */
            $('.js-list-item-button').each(function () {
                const email = $(this).attr('data-mapped-url');
                if(email && !email.includes('mailto:')) {
                    $(this).attr('data-mapped-url', 'mailto:' + email);
                }
            });

            /* Add data into list item */
            $('.js-list-item').each(function () {
                const recordId = $(this).attr('data-recordid');
                const dataExtended = $(this).attr('data-extended');
                if(!dataExtended && window['records']) {
                    const record = window['records'].find(
                        function(r) { 
                            return r.id == recordId;
                        }
                    );
                    console.log(record);
                    if(record) {

                        /* Add social icons */
                        $(this).append('<div class="js-social-icons"><a class="mt-2 mb-2 ml-2 mr-2" style="" href="' + record.fields['Facebook page'] + '" target="_blank"><i style="color:#455254" class="fab fa-facebook"></i></a><a class="mt-2 mb-2 ml-2 mr-2" style="" href="' + record.fields['Instagram name'] + '" target="_blank"><i style="color:#455254" class="fab fa-instagram-square"></i></a><a class="mt-2 mb-2 ml-2 mr-2" style="" href="' + record.fields['Twitter handle'] + '" target="_blank"><i style="color:#455254" class="fab fa-twitter"></i></a></div>');

                        $(this).find('.js-social-icons a').click(function(e) {
                            e.stopPropagation();
                            window.open($(this).attr('href'), '_blank');
                        });

                        if(record.fields['Where is your organisation based?']) {
                            $(this).find('.sub-title').after('<p style="font-size: 14px; color: #6f6f6f;" class="js-location mt-2 mb-2">' + record.fields['Where is your organisation based?'] + '</p>');
                        }
                        
                        /* Add show more */
                        $(this).append('<div class="js-list-item-show-details"><a class="js-expand-button" style="border: none; color: black; margin-top: 16px; margin-bottom: 8px; margin-right: 16px; text-align: center; text-decoration: underline; display: inline-block; font-size: 14px; cursor: pointer;">Show more</a></div>');
                        $(this).find('.js-list-item-show-details a').click(function(e) {
                            e.stopPropagation();
                            if($(this).html() === 'Show more') {
                                $(this).parents('.js-list-item').find('.js-list-item-details').removeClass('d-none');
                                $(this).html('Show less');
                            } else {
                                $(this).parents('.js-list-item').find('.js-list-item-details').addClass('d-none');
                                $(this).html('Show more');
                            }
                        });
                        $(this).append('<div class="js-list-item-details d-none mt-3" style="cursor:default;"></div>');
                        $(this).find('.js-list-item-details').click(function(e) {
                            e.stopPropagation();
                        });

                        /* Full name */
                        if(record.fields['First name']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Full name</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['First name'] + ' ' + record.fields['Last name'] + '</div>');
                        }

                        /* Phone number */
                        if(record.fields['Phone number']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Phone number</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['Phone number'] + '</div>');
                        }

                        /* Organisation type */
                        if(record.fields['Organisation type']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Organisation type</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['Organisation type'] + '</div>');
                        }

                        /* What is the name of the main contact for communications (if not above)? */
                        if(record.fields['What is the name of the main contact for communications?']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">What is the name of the main contact for communications (if not above)?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['What is the name of the main contact for communications?'] + '</div>');
                        }

                        /* What is the email for the main contact for communication (if not above)? */
                        if(record.fields['What is the email for the main contact for communication?']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">What is the email for the main contact for communication (if not above)?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['What is the email for the main contact for communication?'] + '</div>');
                        }

                        /* Blog */
                        if(record.fields['Blog']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Blog</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1"><a terget="_blank" href="' + record.fields['Blog'] + '">' + record.fields['Blog'] + '</a></div>');
                        }

                        /* Do you send out a newsletter? */
                        if(record.fields['Do you send out a newsletter?'] != undefined) {
                            const value = (record.fields['Do you send out a newsletter?'] ? 'Yes' : 'No');
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Do you send out a newsletter?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + value + '</div>');
                        }

                        /* How frequently is your newsletter distributed? */
                        if(record.fields['How frequently is your newsletter distributed?']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">How frequently is your newsletter distributed?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['How frequently is your newsletter distributed?'] + '</div>');
                        }

                        /* Do you share products and services offered by other organisations on your newsletter or via your social media channels? */
                        if(record.fields['Do you share products and services offered by other organisations on your newsletter or via your social media channels?'] != undefined) {
                            const value = (record.fields['Do you share products and services offered by other organisations on your newsletter or via your social media channels?'] ? 'Yes' : 'No');
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Do you share products and services offered by other organisations on your newsletter or via your social media channels?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + value + '</div>');
                        }

                        /* How far in advance do you prefer to receive information from other
organisations about their products/services? */
                        if(record.fields['How far in advance do you prefer to receive information from other organisations about their products/services?']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">How far in advance do you prefer to receive information from other organisations about their products/services?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['How far in advance do you prefer to receive information from other organisations about their products/services?'] + '</div>');
                        }

                        /* Is there anything else you\'d like to tell us that will help other organisations to work with you in an efficient manner? */
                        if(record.fields['Is there anything else you\'d like to tell us that will help other organisations to work with you in an efficient manner?']) {
                            $(this).find('.js-list-item-details').append('<div class="mt-4" style="font-size: 16px; font-weight: bold;">Is there anything else you\'d like to tell us that will help other organisations to work with you in an efficient manner?</div>');
                            $(this).find('.js-list-item-details').append('<div style="font-size: 16px;" class="mt-1">' + record.fields['Is there anything else you\'d like to tell us that will help other organisations to work with you in an efficient manner?'] + '</div>');
                        }

                        $(this).attr('data-extended', 'true');
                    }
                }
            });

        }, 100);

    });
</script>