zulip/static/js/hotspots.js

const render_hotspot_overlay = require('../templates/hotspot_overlay.hbs');
const render_intro_reply_hotspot = require('../templates/intro_reply_hotspot.hbs');

// popover orientations
const TOP = 'top';
const LEFT = 'left';
const RIGHT = 'right';
const BOTTOM = 'bottom';
const LEFT_BOTTOM = 'left_bottom';
const VIEWPORT_CENTER = 'viewport_center';

// popover orientation can optionally be fixed here (property: popover),
// otherwise popovers.compute_placement is used to compute orientation
const HOTSPOT_LOCATIONS = new Map([
    ["intro_reply", {
        element: '.selected_message .messagebox-content',
        offset_x: 0.85,
        offset_y: 0.7,
        popover: BOTTOM,
    }],
    ["intro_streams", {
        element: '#streams_header .sidebar-title',
        offset_x: 1.35,
        offset_y: 0.39,
    }],
    ["intro_topics", {
        element: '.topic-name',
        offset_x: 0.8,
        offset_y: 0.39,
    }],
    ["intro_gear", {
        element: '#settings-dropdown',
        offset_x: -0.4,
        offset_y: 1.2,
        popover: LEFT_BOTTOM,
    }],
    ["intro_compose", {
        element: '#left_bar_compose_stream_button_big',
        offset_x: 0,
        offset_y: 0,
    }],
]);

// popover illustration url(s)
const WHALE = '/static/images/hotspots/whale.svg';

exports.post_hotspot_as_read = function (hotspot_name) {
    channel.post({
        url: '/json/users/me/hotspots',
        data: { hotspot: JSON.stringify(hotspot_name) },
        error: function (err) {
            blueslip.error(err.responseText);
        },
    });
};

function place_icon(hotspot) {
    const element = $(hotspot.location.element);
    const icon = $('#hotspot_' + hotspot.name + '_icon');

    if (element.length === 0 || element.css('display') === 'none' ||
        !element.is(':visible') || element.is(':hidden')) {
        icon.css('display', 'none');
        return false;
    }

    const offset = {
        top: element.outerHeight() * hotspot.location.offset_y,
        left: element.outerWidth() * hotspot.location.offset_x,
    };
    const client_rect = element.get(0).getBoundingClientRect();
    const placement = {
        top: client_rect.top + offset.top,
        left: client_rect.left + offset.left,
    };
    icon.css('display', 'block');
    icon.css(placement);
    return true;
}

function place_popover(hotspot) {
    if (!hotspot.location.element) {
        return;
    }

    const popover_width = $('#hotspot_' + hotspot.name + '_overlay .hotspot-popover').outerWidth();
    const popover_height = $('#hotspot_' + hotspot.name + '_overlay .hotspot-popover').outerHeight();
    const el_width = $(hotspot.location.element).outerWidth();
    const el_height = $(hotspot.location.element).outerHeight();
    const arrow_offset = 20;

    let popover_offset;
    let arrow_placement;
    const orientation = hotspot.location.popover ||
        popovers.compute_placement(
            $(hotspot.location.element),
            popover_height,
            popover_width,
            false,
        );

    switch (orientation) {
    case TOP:
        popover_offset = {
            top: -(popover_height + arrow_offset),
            left: el_width / 2 - popover_width / 2,
        };
        arrow_placement = 'bottom';
        break;

    case LEFT:
        popover_offset = {
            top: el_height / 2 - popover_height / 2,
            left: -(popover_width + arrow_offset),
        };
        arrow_placement = 'right';
        break;

    case BOTTOM:
        popover_offset = {
            top: el_height + arrow_offset,
            left: el_width / 2 - popover_width / 2,
        };
        arrow_placement = 'top';
        break;

    case RIGHT:
        popover_offset = {
            top: el_height / 2 - popover_height / 2,
            left: el_width + arrow_offset,
        };
        arrow_placement = 'left';
        break;

    case LEFT_BOTTOM:
        popover_offset = {
            top: 0,
            left: -(popover_width + arrow_offset / 2),
        };
        arrow_placement = '';
        break;

    case VIEWPORT_CENTER:
        popover_offset = {
            top: el_height / 2,
            left: el_width / 2,
        };
        arrow_placement = '';
        break;

    default:
        blueslip.error(
            'Invalid popover placement value for hotspot \'' +
                hotspot.name + '\'',
        );
        break;
    }

    // position arrow
    arrow_placement = 'arrow-' + arrow_placement;
    $('#hotspot_' + hotspot.name + '_overlay .hotspot-popover')
        .removeClass('arrow-top arrow-left arrow-bottom arrow-right')
        .addClass(arrow_placement);

    // position popover
    let popover_placement;
    if (orientation === VIEWPORT_CENTER) {
        popover_placement = {
            top: '45%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
        };
    } else {
        const client_rect = $(hotspot.location.element).get(0).getBoundingClientRect();
        popover_placement = {
            top: client_rect.top + popover_offset.top,
            left: client_rect.left + popover_offset.left,
            transform: '',
        };
    }

    $('#hotspot_' + hotspot.name + '_overlay .hotspot-popover')
        .css(popover_placement);
}

function insert_hotspot_into_DOM(hotspot) {
    if (hotspot.name === "intro_reply") {
        $('#bottom_whitespace').append(render_intro_reply_hotspot({}));
        return;
    }

    const hotspot_overlay_HTML = render_hotspot_overlay({
        name: hotspot.name,
        title: hotspot.title,
        description: hotspot.description,
        img: WHALE,
    });

    const hotspot_icon_HTML =
        '<div class="hotspot-icon" id="hotspot_' + hotspot.name + '_icon">' +
            '<span class="dot"></span>' +
            '<span class="pulse"></span>' +
            '<div class="bounce"><span class="bounce-icon">?</span></div>' +
        '</div>';

    setTimeout(() => {
        $('body').prepend(hotspot_icon_HTML);
        $('body').prepend(hotspot_overlay_HTML);
        if (place_icon(hotspot)) {
            place_popover(hotspot);
        }

        // reposition on any event that might update the UI
        ['resize', 'scroll', 'onkeydown', 'click'].forEach((event_name) => {
            window.addEventListener(event_name, _.debounce(() => {
                if (place_icon(hotspot)) {
                    place_popover(hotspot);
                }
            }, 10), true);
        });
    }, hotspot.delay * 1000);
}

exports.is_open = function () {
    return $('.hotspot.overlay').hasClass('show');
};

exports.close_hotspot_icon = function (elem) {
    $(elem).animate({ opacity: 0 }, {
        duration: 300,
        done: function () {
            $(elem).css({ display: 'none' });
        }.bind(elem),
    });
};

function close_read_hotspots(new_hotspots) {
    const unwanted_hotspots = _.difference(
        Array.from(HOTSPOT_LOCATIONS.keys()),
        new_hotspots.map((hotspot) => hotspot.name),
    );

    for (const hotspot_name of unwanted_hotspots) {
        exports.close_hotspot_icon($('#hotspot_' + hotspot_name + '_icon'));
    }
}

exports.load_new = function (new_hotspots) {
    close_read_hotspots(new_hotspots);
    new_hotspots.forEach((hotspot) => {
        hotspot.location = HOTSPOT_LOCATIONS.get(hotspot.name);
    });
    new_hotspots.forEach(insert_hotspot_into_DOM);
};

exports.initialize = function () {
    exports.load_new(page_params.hotspots);
};

window.hotspots = exports;