269 lines
7.7 KiB
JavaScript
269 lines
7.7 KiB
JavaScript
frappe.ready(() => {
|
|
|
|
setup_socket_io();
|
|
|
|
add_color_to_avatars();
|
|
|
|
expand_first_discussion();
|
|
|
|
$(".search-field").keyup((e) => {
|
|
search_topic(e);
|
|
});
|
|
|
|
$(".reply").click((e) => {
|
|
show_new_topic_modal(e);
|
|
});
|
|
|
|
$("#login-from-discussion").click((e) => {
|
|
login_from_discussion(e);
|
|
});
|
|
|
|
$(".sidebar-topic").click((e) => {
|
|
if ($(e.currentTarget).attr("aria-expanded") == "true") {
|
|
e.stopPropagation();
|
|
}
|
|
});
|
|
|
|
$(document).on("keydown", ".comment-field", (e) => {
|
|
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.which == 13) && !$(".discussion-modal").hasClass("show")) {
|
|
e.preventDefault();
|
|
submit_discussion(e);
|
|
}
|
|
});
|
|
|
|
$(document).on("input", ".discussion-on-page .comment-field", (e) => {
|
|
if ($(e.currentTarget).val()) {
|
|
$(e.currentTarget).css("height", "48px");
|
|
$(".cancel-comment").removeClass("hide").addClass("show");
|
|
$(e.currentTarget).css("height", $(e.currentTarget).prop("scrollHeight"));
|
|
} else {
|
|
$(".cancel-comment").removeClass("show").addClass("hide");
|
|
$(e.currentTarget).css("height", "48px");
|
|
}
|
|
});
|
|
|
|
$(document).on("click", ".submit-discussion", (e) => {
|
|
submit_discussion(e);
|
|
});
|
|
|
|
$(document).on("click", ".cancel-comment", () => {
|
|
clear_comment_box();
|
|
});
|
|
|
|
if ($(document).width() <= 550) {
|
|
$(document).on("click", ".sidebar-parent", () => {
|
|
hide_sidebar();
|
|
});
|
|
}
|
|
|
|
$(document).on("click", ".back", (e) => {
|
|
back_to_sidebar(e);
|
|
});
|
|
|
|
});
|
|
|
|
const show_new_topic_modal = (e) => {
|
|
e.preventDefault();
|
|
$("#discussion-modal").modal("show");
|
|
let topic = $(e.currentTarget).attr("data-topic");
|
|
$("#submit-discussion").attr("data-topic", topic ? topic : "");
|
|
};
|
|
|
|
const setup_socket_io = () => {
|
|
const assets = [
|
|
"/assets/frappe/js/lib/socket.io.min.js",
|
|
"/assets/frappe/js/frappe/socketio_client.js"
|
|
];
|
|
|
|
frappe.require(assets, () => {
|
|
if (window.dev_server) {
|
|
frappe.boot.socketio_port = "9000";
|
|
}
|
|
frappe.socketio.init(9000);
|
|
frappe.socketio.socket.on("publish_message", (data) => {
|
|
publish_message(data);
|
|
});
|
|
});
|
|
};
|
|
|
|
const publish_message = (data) => {
|
|
const doctype = decodeURIComponent($(".discussions-parent").attr("data-doctype"));
|
|
const docname = decodeURIComponent($(".discussions-parent").attr("data-docname"));
|
|
const topic = data.topic_info;
|
|
const single_thread = $(".is-single-thread").length;
|
|
const first_topic = !$(".reply-card").length;
|
|
const document_match_found = doctype == topic.reference_doctype && docname == topic.reference_docname;
|
|
|
|
if ($(`.discussion-on-page[data-topic=${topic.name}]`).length) {
|
|
post_message_cleanup();
|
|
data.template = style_avatar_frame(data.template);
|
|
$('<div class="card-divider-dark mb-8"></div>' + data.template)
|
|
.insertBefore(`.discussion-on-page[data-topic=${topic.name}] .discussion-form`);
|
|
|
|
} else if (!first_topic && !single_thread && document_match_found) {
|
|
post_message_cleanup();
|
|
data.new_topic_template = style_avatar_frame(data.new_topic_template);
|
|
|
|
$(data.sidebar).insertAfter(`.discussions-sidebar .form-group`);
|
|
$(`#discussion-group`).prepend(data.new_topic_template);
|
|
|
|
if (topic.owner == frappe.session.user) {
|
|
$(".discussion-on-page") && $(".discussion-on-page").collapse();
|
|
$(".sidebar-topic").first().click();
|
|
}
|
|
|
|
} else if (single_thread && document_match_found) {
|
|
post_message_cleanup();
|
|
data.template = style_avatar_frame(data.template);
|
|
$(data.template).insertBefore(`.discussion-form`);
|
|
$(".discussion-on-page").attr("data-topic", topic.name);
|
|
|
|
} else if (topic.owner == frappe.session.user && document_match_found) {
|
|
post_message_cleanup();
|
|
window.location.reload();
|
|
}
|
|
|
|
update_reply_count(topic.name);
|
|
};
|
|
|
|
const post_message_cleanup = () => {
|
|
$(".topic-title").val("");
|
|
$(".comment-field").val("");
|
|
$(".discussion-on-page .comment-field").css("height", "48px");
|
|
$("#discussion-modal").modal("hide");
|
|
$("#no-discussions").addClass("hide");
|
|
$(".cancel-comment").addClass("hide");
|
|
};
|
|
|
|
const update_reply_count = (topic) => {
|
|
let reply_count = $(`[data-target='#t${topic}']`).find(".reply-count").text();
|
|
reply_count = parseInt(reply_count) + 1;
|
|
$(`[data-target='#t${topic}']`).find(".reply-count").text(reply_count);
|
|
};
|
|
|
|
const expand_first_discussion = () => {
|
|
if ($(document).width() > 550) {
|
|
$($(".discussions-parent .collapse")[0]).addClass("show");
|
|
$($(".discussions-sidebar [data-toggle='collapse']")[0]).attr("aria-expanded", true);
|
|
} else {
|
|
$("#discussion-group").addClass("hide");
|
|
}
|
|
};
|
|
|
|
const search_topic = (e) => {
|
|
let input = $(e.currentTarget).val();
|
|
|
|
let topics = $(".discussions-parent .discussion-topic-title");
|
|
if (input.length < 3 || input.trim() == "") {
|
|
topics.closest(".sidebar-parent").removeClass("hide");
|
|
return;
|
|
}
|
|
|
|
topics.each((i, elem) => {
|
|
let topic_id = $(elem).parent().attr("data-target");
|
|
|
|
/* Check match in replies */
|
|
let match_in_reply = false;
|
|
const replies = $(`${topic_id}`);
|
|
for (const reply of replies.find(".reply-text")) {
|
|
if (has_common_substring($(reply).text(), input)) {
|
|
match_in_reply = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
/* Match found in title or replies, then show */
|
|
if (has_common_substring($(elem).text(), input) || match_in_reply) {
|
|
$(elem).closest(".sidebar-parent").removeClass("hide");
|
|
} else {
|
|
$(elem).closest(".sidebar-parent").addClass("hide");
|
|
}
|
|
});
|
|
};
|
|
|
|
const has_common_substring = (str1, str2) => {
|
|
const str1_arr = str1.toLowerCase().split(" ");
|
|
const str2_arr = str2.toLowerCase().split(" ");
|
|
|
|
let substring_found = false;
|
|
for (const first_word of str1_arr) {
|
|
for (const second_word of str2_arr) {
|
|
if (first_word.indexOf(second_word) > -1) {
|
|
substring_found = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return substring_found;
|
|
};
|
|
|
|
const submit_discussion = (e) => {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
|
|
const title = $(".topic-title:visible").length ? $(".topic-title:visible").val().trim() : "";
|
|
const reply = $(".comment-field:visible").val().trim();
|
|
|
|
if (reply) {
|
|
let doctype = $(e.currentTarget).closest(".discussions-parent").attr("data-doctype");
|
|
doctype = doctype ? decodeURIComponent(doctype) : doctype;
|
|
|
|
let docname = $(e.currentTarget).closest(".discussions-parent").attr("data-docname");
|
|
docname = docname ? decodeURIComponent(docname) : docname;
|
|
|
|
frappe.call({
|
|
method: "frappe.website.doctype.discussion_topic.discussion_topic.submit_discussion",
|
|
args: {
|
|
"doctype": doctype ? doctype : "",
|
|
"docname": docname ? docname : "",
|
|
"reply": reply,
|
|
"title": title,
|
|
"topic_name": $(e.currentTarget).closest(".discussion-on-page").attr("data-topic")
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const login_from_discussion = (e) => {
|
|
e.preventDefault();
|
|
const redirect = $(e.currentTarget).attr("data-redirect") || window.location.href;
|
|
window.location.href = `/login?redirect-to=${redirect}`;
|
|
};
|
|
|
|
const add_color_to_avatars = () => {
|
|
const avatars = $(".avatar-frame");
|
|
avatars.each((i, avatar) => {
|
|
if (!$(avatar).attr("style")) {
|
|
$(avatar).css(get_color_from_palette($(avatar)));
|
|
}
|
|
});
|
|
};
|
|
|
|
const get_color_from_palette = (element) => {
|
|
const palette = frappe.get_palette(element.attr("title"));
|
|
return {"background-color": `var(${palette[0]})`, "color": `var(${palette[1]})` };
|
|
};
|
|
|
|
const style_avatar_frame = (template) => {
|
|
const $template = $(template);
|
|
$template.find(".avatar-frame").length
|
|
&& $template.find(".avatar-frame").css(get_color_from_palette($template.find(".avatar-frame")));
|
|
return $template.prop("outerHTML");
|
|
};
|
|
|
|
const clear_comment_box = () => {
|
|
$(".discussion-on-page .comment-field").val("");
|
|
$(".cancel-comment").removeClass("show").addClass("hide");
|
|
$(".discussion-on-page .comment-field").css("height", "48px");
|
|
};
|
|
|
|
const hide_sidebar = () => {
|
|
$(".discussions-sidebar").addClass("hide");
|
|
$("#discussion-group").removeClass("hide");
|
|
};
|
|
|
|
const back_to_sidebar = () => {
|
|
$(".discussions-sidebar").removeClass("hide");
|
|
$("#discussion-group").addClass("hide");
|
|
$(".discussion-on-page").collapse("hide");
|
|
};
|