zulip/static/js/realm_logo.js

import $ from "jquery";

import * as channel from "./channel";
import {page_params} from "./page_params";
import * as settings_data from "./settings_data";
import * as upload_widget from "./upload_widget";

export function build_realm_logo_widget(upload_function, is_night) {
    let logo_section_id = "#realm-day-logo-upload-widget";
    let logo_source = page_params.realm_logo_source;

    if (is_night) {
        logo_section_id = "#realm-night-logo-upload-widget";
        logo_source = page_params.realm_night_logo_source;
    }

    const $delete_button_elem = $(logo_section_id + " .image-delete-button");
    const $file_input_elem = $(logo_section_id + " .image_file_input");
    const $file_input_error_elem = $(logo_section_id + " .image_file_input_error");
    const $upload_button_elem = $(logo_section_id + " .image_upload_button");

    const get_file_input = function () {
        return $file_input_elem.expectOne();
    };

    if (!page_params.is_admin) {
        return undefined;
    }

    if (logo_source === "D") {
        $delete_button_elem.hide();
    } else {
        $delete_button_elem.show();
    }

    const data = {night: JSON.stringify(is_night)};
    $delete_button_elem.on("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        channel.del({
            url: "/json/realm/logo",
            data,
        });
    });

    return upload_widget.build_direct_upload_widget(
        get_file_input,
        $file_input_error_elem.expectOne(),
        $upload_button_elem.expectOne(),
        upload_function,
        page_params.max_logo_file_size_mib,
    );
}

function change_logo_delete_button(logo_source, $logo_delete_button, $file_input) {
    if (logo_source === "U") {
        $logo_delete_button.show();
    } else {
        $logo_delete_button.hide();
        // Need to clear input because of a small edge case
        // where you try to upload the same image you just deleted.
        $file_input.val("");
    }
}

export function render() {
    const $file_input = $("#realm-day-logo-upload-widget .image_file_input");
    const $night_file_input = $("#realm-night-logo-upload-widget .realm-logo-file-input");
    $("#realm-day-logo-upload-widget .image-block").attr("src", page_params.realm_logo_url);

    if (page_params.realm_night_logo_source === "D" && page_params.realm_logo_source !== "D") {
        // If no dark theme logo is uploaded but a light theme one
        // is, use the light theme one; this handles the common case
        // of transparent background logos that look good on both
        // dark and light themes.  See also similar code in admin.js.

        $("#realm-night-logo-upload-widget .image-block").attr("src", page_params.realm_logo_url);
    } else {
        $("#realm-night-logo-upload-widget .image-block").attr(
            "src",
            page_params.realm_night_logo_url,
        );
    }

    if (settings_data.using_dark_theme() && page_params.realm_night_logo_source !== "D") {
        $("#realm-logo").attr("src", page_params.realm_night_logo_url);
    } else {
        $("#realm-logo").attr("src", page_params.realm_logo_url);
    }

    change_logo_delete_button(
        page_params.realm_logo_source,
        $("#realm-day-logo-upload-widget .image-delete-button"),
        $file_input,
    );
    change_logo_delete_button(
        page_params.realm_night_logo_source,
        $("#realm-night-logo-upload-widget .image-delete-button"),
        $night_file_input,
    );
}

export function initialize() {
    // render once
    render();

    // Rerender the realm-logo when the browser detects color scheme changes.
    const dark_mode_media_query_list = window.matchMedia("(prefers-color-scheme: dark)");
    dark_mode_media_query_list.addEventListener("change", () => {
        if ($(":root").hasClass("color-scheme-automatic")) {
            render();
        }
    });
}