mirror of
https://github.com/zulip/zulip.git
synced 2025-11-10 17:07:07 +00:00
0594207180
As realm_logo.rerender is now used for initial rendering of
logo as well in c8849f8, so we rename this function from
rerender to render.
102 lines
3.4 KiB
JavaScript
102 lines
3.4 KiB
JavaScript
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 night mode logo is uploaded but a day mode one
|
|
// is, use the day mode one; this handles the common case
|
|
// of transparent background logos that look good on both
|
|
// night and day 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,
|
|
);
|
|
}
|