zulip/static/js/portico/integrations.js

import * as google_analytics from './google-analytics.js';
import blueslip from './../blueslip';

import { path_parts } from './landing-page';


// these constants are populated immediately with data from the DOM on page load
// name -> display name
const INTEGRATIONS = new Map();
const CATEGORIES = new Map();

function load_data() {
    $('.integration-lozenge').toArray().forEach((integration) => {
        const name = $(integration).data('name');
        const display_name = $(integration).find('.integration-name').text().trim();

        if (display_name && name) {
            INTEGRATIONS.set(name, display_name);
        }
    });

    $('.integration-category').toArray().forEach((category) => {
        const name = $(category).data('category');
        const display_name = $(category).text().trim();

        if (display_name && name) {
            CATEGORIES.set(name, display_name);
        }
    });
}

const INITIAL_STATE = {
    category: 'all',
    integration: null,
    query: '',
};

let state = Object.assign({}, INITIAL_STATE);


function adjust_font_sizing() {
    $('.integration-lozenge').toArray().forEach((integration) => {
        const $integration_name = $(integration).find('.integration-name');
        const $integration_category = $(integration).find('.integration-category');

        // if the text has wrapped to two lines, decrease font-size
        if ($integration_name.height() > 30) {
            $integration_name.css('font-size', '1em');
            if ($integration_name.height() > 30) {
                $integration_name.css('font-size', '.95em');
            }
        }

        if ($integration_category.height() > 30) {
            $integration_category.css('font-size', '.8em');
            if ($integration_category.height() > 30) {
                $integration_category.css('font-size', '.75em');
            }
        }
    });
}

function update_path() {
    let next_path;
    if (state.integration) {
        next_path = $('.integration-lozenge[data-name="' + state.integration + '"]')
            .closest('a').attr('href');
    } else if (state.category) {
        next_path = $('.integration-category[data-category="' + state.category + '"]')
            .closest('a').attr('href');
    } else {
        next_path = '/';
    }

    window.history.pushState(state, '', next_path);
    google_analytics.config({page_path: next_path});
}

function update_categories() {
    $('.integration-lozenges').css('opacity', 0);

    $('.integration-category').removeClass('selected');
    $('[data-category="' + state.category + '"]').addClass('selected');

    const $dropdown_label = $('.integration-categories-dropdown .dropdown-category-label');
    if (state.category === INITIAL_STATE.category) {
        $dropdown_label.text(i18n.t('Filter by category'));
    } else {
        $dropdown_label.text(CATEGORIES.get(state.category));
    }

    $('.integration-lozenges').animate(
        { opacity: 1 },
        { duration: 400 },
    );

    adjust_font_sizing();
}

const update_integrations = _.debounce(() => {
    const max_scrollY = window.scrollY;

    const integrations = $('.integration-lozenges').children().toArray();
    integrations.forEach((integration) => {
        const $integration = $(integration).find('.integration-lozenge');
        const $integration_category = $integration.find('.integration-category');

        if (state.category !== 'all') {
            $integration_category.css('display', 'none');
            $integration.addClass('without-category');
        } else {
            $integration_category.css('display', '');
            $integration.removeClass('without-category');
        }

        if (!$integration.hasClass('integration-create-your-own')) {
            const display_name = INTEGRATIONS.get($integration.data('name'));
            const display =
                common.phrase_match(state.query, display_name) &&
                ($integration.data('categories').includes(CATEGORIES.get(state.category)) ||
                 state.category === 'all');

            if (display) {
                $integration.css('display', 'inline-block');
            } else {
                $integration.css('display', 'none');
            }
        }

        document.body.scrollTop = Math.min(window.scrollY, max_scrollY);
    });

    adjust_font_sizing();
}, 50);

function hide_catalog_show_integration() {
    const $lozenge_icon = $(".integration-lozenge.integration-" + state.integration).clone(false);
    $lozenge_icon.removeClass('legacy');

    const categories = $('.integration-' + state.integration).data('categories')
        .slice(1, -1)
        .split(',')
        .map((category) => category.trim().slice(1, -1));

    function show_integration(doc) {
        $('#integration-instructions-group .name').text(INTEGRATIONS.get(state.integration));
        $('#integration-instructions-group .categories .integration-category').remove();
        categories.forEach((category) => {
            let link;
            for (const [name, display_name] of CATEGORIES) {
                if (display_name === category) {
                    link = name;
                }
            }
            const category_el = $('<a></a>')
                .attr('href', '/integrations/' + link)
                .append('<h3 class="integration-category"></h3>');
            category_el.find('.integration-category')
                .attr('data-category', link)
                .text(category);
            $('#integration-instructions-group .categories').append(category_el);
        });
        $('#integration-instructions-group').css({
            opacity: 0,
            display: 'flex',
        });
        $('.integration-instructions').css('display', 'none');
        $('#' + state.integration + '.integration-instructions .help-content').html(doc);
        $('#integration-instruction-block .integration-lozenge').remove();
        $("#integration-instruction-block")
            .append($lozenge_icon)
            .css('display', 'flex');
        $('.integration-instructions#' + state.integration).css('display', 'block');

        $("html, body").animate(
            { scrollTop: 0 },
            { duration: 200 },
        );
        $('#integration-instructions-group').animate(
            { opacity: 1 },
            { duration: 300 },
        );

        adjust_font_sizing();
    }

    function hide_catalog(doc) {
        $(".integration-categories-dropdown").css('display', 'none');
        $(".integrations .catalog").addClass('hide');
        $(".extra, #integration-main-text, #integration-search").css("display", "none");

        show_integration(doc);
        $(".main").css("visibility", "visible");
    }

    $.get({
        url: '/integrations/doc-html/' + state.integration,
        dataType: 'html',
        success: hide_catalog,
        error: function (err) {
            blueslip.error("Integration documentation for '" + state.integration + "' not found.", err);
        },
    });
}

function hide_integration_show_catalog() {
    function show_catalog() {
        $("html, body").animate(
            { scrollTop: 0 },
            { duration: 200 },
        );

        $(".integration-categories-dropdown").css('display', '');
        $(".integrations .catalog").removeClass('hide');
        $(".extra, #integration-main-text, #integration-search").css("display", "block");
        adjust_font_sizing();
    }

    function hide_integration() {
        $('#integration-instruction-block').css('display', 'none');
        $('#integration-instructions-group').css('display', 'none');
        $('.inner-content').css({ padding: '' });
        $("#integration-instruction-block .integration-lozenge").remove();
        show_catalog();
    }

    hide_integration();
}

function get_state_from_path() {
    const result = Object.assign({}, INITIAL_STATE);
    result.query = state.query;

    const parts = path_parts();
    if (parts[1] === 'doc' && INTEGRATIONS.get(parts[2])) {
        result.integration = parts[2];
    } else if (CATEGORIES.has(parts[1])) {
        result.category = parts[1];
    }

    return result;
}

function render(next_state) {
    const previous_state = Object.assign({}, state);
    state = next_state;

    if (previous_state.integration !== next_state.integration &&
        next_state.integration !== null) {
        hide_catalog_show_integration();
    } else {
        if (previous_state.integration !== next_state.integration) {
            hide_integration_show_catalog();
        }

        if (previous_state.category !== next_state.category) {
            update_categories();
            update_integrations();
        }

        if (previous_state.query !== next_state.query) {
            update_integrations();
        }

        $(".main").css("visibility", "visible");
    }

}

function dispatch(action, payload) {
    switch (action) {
    case 'CHANGE_CATEGORY':
        render(Object.assign({}, state, {
            category: payload.category,
        }));
        update_path();
        break;

    case 'SHOW_INTEGRATION':
        render(Object.assign({}, state, {
            integration: payload.integration,
        }));
        update_path();
        break;

    case 'HIDE_INTEGRATION':
        render(Object.assign({}, state, {
            integration: null,
        }));
        update_path();
        break;

    case 'SHOW_CATEGORY':
        render(Object.assign({}, state, {
            integration: null,
            category: payload.category,
        }));
        update_path();
        break;

    case 'UPDATE_QUERY':
        render(Object.assign({}, state, {
            query: payload.query,
        }));
        break;

    case 'LOAD_PATH':
        render(get_state_from_path());
        google_analytics.config({page_path: window.location.pathname});
        break;

    default:
        blueslip.error('Invalid action dispatched on /integrations.');
        break;
    }
}

function toggle_categories_dropdown() {
    const $dropdown_list = $('.integration-categories-dropdown .dropdown-list');
    $dropdown_list.slideToggle(250);
}

function integration_events() {
    $('#integration-search input[type="text"]').keypress((e) => {
        const integrations = $('.integration-lozenges').children().toArray();
        if (e.which === 13 && e.target.value !== '') {
            for (let i = 0; i < integrations.length; i += 1) {
                const integration = $(integrations[i]).find('.integration-lozenge');

                if ($(integration).css('display') !== 'none') {
                    $(integration).closest('a')[0].click();
                    break;
                }
            }
        }
    });

    $('.integration-categories-dropdown .dropdown-toggle').click(() => {
        toggle_categories_dropdown();
    });

    $('.integration-instruction-block').on('click', 'a .integration-category', (e) => {
        const category = $(e.target).data('category');
        dispatch('SHOW_CATEGORY', { category: category });
        return false;
    });

    $('.integrations a .integration-category').on('click', (e) => {
        const category = $(e.target).data('category');
        dispatch('CHANGE_CATEGORY', { category: category });
        toggle_categories_dropdown();
        return false;
    });

    $('.integrations a .integration-lozenge').on('click', (e) => {
        if (!$(e.target).closest('.integration-lozenge').hasClass('integration-create-your-own')) {
            const integration = $(e.target).closest('.integration-lozenge').data('name');
            dispatch('SHOW_INTEGRATION', { integration: integration });
            return false;
        }
    });

    $('a#integration-list-link span, a#integration-list-link i').on('click', () => {
        dispatch('HIDE_INTEGRATION');
        return false;
    });

    // combine selector use for both focusing the integrations searchbar and adding
    // the input event.
    $(".integrations .searchbar input[type='text']")
        .focus()
        .on('input', (e) => {
            dispatch('UPDATE_QUERY', { query: e.target.value.toLowerCase() });
        });

    $(window).scroll(() => {
        if (document.body.scrollTop > 330) {
            $('.integration-categories-sidebar').addClass('sticky');
        } else {
            $('.integration-categories-sidebar').removeClass('sticky');
        }
    });

    $(window).on('resize', () => {
        adjust_font_sizing();
    });

    $(window).on('popstate', () => {
        if (window.location.pathname.startsWith('/integrations')) {
            dispatch('LOAD_PATH');
        } else {
            window.location = window.location.href;
        }
    });
}

// init
$(() => {
    integration_events();
    load_data();
    dispatch('LOAD_PATH');
});