chunzhi/chatgpt_academic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

smarter chatbot height adjustment

Browse Source
This commit is contained in:
binary-husky 2023-12-25 21:26:24 +08:00
parent 5c7499cada
commit c625348ce1
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
themes/common.js
View File

@ -156,21 +156,21 @@ function chatbotContentChanged(attempt = 1, force = false) {
function chatbotAutoHeight() { function chatbotAutoHeight() {
// 自动调整高度 // 自动调整高度
function update_height() { function update_height() {
var { panel_height_target, chatbot_height, chatbot } = get_elements(true); var { height_target, chatbot_height, chatbot } = get_elements(true);
if (panel_height_target != chatbot_height) { if (height_target != chatbot_height) {
var pixelString = panel_height_target.toString() + 'px'; var pixelString = height_target.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString; chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
} }
} }
function update_height_slow() { function update_height_slow() {
var { panel_height_target, chatbot_height, chatbot } = get_elements(); var { height_target, chatbot_height, chatbot } = get_elements();
if (panel_height_target != chatbot_height) { if (height_target != chatbot_height) {
new_panel_height = (panel_height_target - chatbot_height) * 0.5 + chatbot_height; new_panel_height = (height_target - chatbot_height) * 0.5 + chatbot_height;
if (Math.abs(new_panel_height - panel_height_target) < 10) { if (Math.abs(new_panel_height - height_target) < 10) {
new_panel_height = panel_height_target; new_panel_height = height_target;
} }
// console.log(chatbot_height, panel_height_target, new_panel_height); // console.log(chatbot_height, height_target, new_panel_height);
var pixelString = new_panel_height.toString() + 'px'; var pixelString = new_panel_height.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString; chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
} }
@ -179,7 +179,7 @@ function chatbotAutoHeight() {
update_height(); update_height();
setInterval(function () { setInterval(function () {
update_height_slow() update_height_slow()
}, 50); // 每100毫秒执行一次 }, 50); // 每50毫秒执行一次
} }
function get_elements(consider_state_panel = false) { function get_elements(consider_state_panel = false) {
@ -187,23 +187,36 @@ function get_elements(consider_state_panel = false) {
if (!chatbot) { if (!chatbot) {
chatbot = document.querySelector('#gpt-chatbot'); chatbot = document.querySelector('#gpt-chatbot');
} }
const input_panel = document.querySelector('#input-panel');
const panel1 = document.querySelector('#input-panel').getBoundingClientRect(); const panel1 = document.querySelector('#input-panel').getBoundingClientRect();
const panel2 = document.querySelector('#basic-panel').getBoundingClientRect() const panel2 = document.querySelector('#basic-panel').getBoundingClientRect()
const panel3 = document.querySelector('#plugin-panel').getBoundingClientRect(); const panel3 = document.querySelector('#plugin-panel').getBoundingClientRect();
// const panel4 = document.querySelector('#interact-panel').getBoundingClientRect(); // const panel4 = document.querySelector('#interact-panel').getBoundingClientRect();
const panel5 = document.querySelector('#input-panel2').getBoundingClientRect();
const panel_active = document.querySelector('#state-panel').getBoundingClientRect(); const panel_active = document.querySelector('#state-panel').getBoundingClientRect();
if (consider_state_panel || panel_active.height < 25) { if (consider_state_panel || panel_active.height < 25) {
document.state_panel_height = panel_active.height; document.state_panel_height = panel_active.height;
} }
// 25 是chatbot的label高度, 16 是右侧的gap // 25 是chatbot的label高度, 16 是右侧的gap
var panel_height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16 * 2; var height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16 * 2;
// 禁止动态的state-panel高度影响 // 禁止动态的state-panel高度影响
panel_height_target = panel_height_target + (document.state_panel_height - panel_active.height) height_target = height_target + (document.state_panel_height - panel_active.height)
var panel_height_target = parseInt(panel_height_target); var height_target = parseInt(height_target);
var chatbot_height = chatbot.style.height; var chatbot_height = chatbot.style.height;
const err_tor = 5;
if (Math.abs(panel1.left - chatbot.getBoundingClientRect().left) < err_tor){
// 是否处于窄屏模式
height_target = window.innerHeight * 0.6;
}else{
// 调整高度
const chatbot_height_exceed = 15;
const chatbot_height_exceed_m = 10;
if (panel3.bottom >= window.innerHeight - chatbot_height_exceed) {
height_target = window.innerHeight - chatbot.getBoundingClientRect().top - chatbot_height_exceed_m;
}
}
var chatbot_height = parseInt(chatbot_height); var chatbot_height = parseInt(chatbot_height);
return { panel_height_target, chatbot_height, chatbot }; return { height_target, chatbot_height, chatbot };
} }