Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复嵌入图片过大指引位置错误 #1802

Merged
merged 1 commit into from
Dec 10, 2024
Merged

fix: 修复嵌入图片过大指引位置错误 #1802

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions apps/application/template/embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,20 @@ const initChat=(root)=>{
const chat_button_img=root.querySelector('.maxkb-chat-button > img')
// 对话框元素
const chat_container=root.querySelector('#maxkb-chat-container')
// 引导层
const mask_content = root.querySelector('.maxkb-mask > .maxkb-content')
const mask_tips = root.querySelector('.maxkb-tips')
chat_button_img.onload=(event)=>{
if(mask_content){
mask_content.style.width = chat_button_img.width + 'px'
mask_content.style.height = chat_button_img.height + 'px'
if('{{x_type}}'=='left'){
mask_tips.style.marginLeft = (chat_button_img.naturalWidth>500?500:chat_button_img.naturalWidth)-64 + 'px'
}else{
mask_tips.style.marginRight = (chat_button_img.naturalWidth>500?500:chat_button_img.naturalWidth)-64 + 'px'
}
}
}

const viewport=root.querySelector('.maxkb-openviewport')
const closeviewport=root.querySelector('.maxkb-closeviewport')
Expand All @@ -90,17 +104,16 @@ const initChat=(root)=>{
}
const drag=(e)=>{
if (['touchmove','touchstart'].includes(e.type)) {
chat_button.style.top=(e.touches[0].clientY-25)+'px'
chat_button.style.left=(e.touches[0].clientX-25)+'px'
chat_button.style.top=(e.touches[0].clientY-chat_button_img.naturalHeight/2)+'px'
chat_button.style.left=(e.touches[0].clientX-chat_button_img.naturalWidth/2)+'px'
} else {
chat_button.style.top=(e.y-25)+'px'
chat_button.style.left=(e.x-25)+'px'
chat_button.style.top=(e.y-chat_button_img.naturalHeight/2)+'px'
chat_button.style.left=(e.x-chat_button_img.naturalWidth/2)+'px'
}
chat_button.style.width =chat_button_img.naturalWidth+'px'
chat_button.style.height =chat_button_img.naturalHeight+'px'
}
if({{is_draggable}}){
console.dir(chat_button_img)
chat_button.addEventListener("drag",drag)
chat_button.addEventListener("dragover",(e)=>{
e.preventDefault()
Expand Down Expand Up @@ -155,7 +168,7 @@ function initMaxkbStyle(root){

#maxkb .maxkb-mask {
position: fixed;
z-index: 999;
z-index: 10001;
background-color: transparent;
height: 100%;
width: 100%;
Expand Down Expand Up @@ -242,8 +255,6 @@ function initMaxkbStyle(root){
{{x_type}}: {{x_value}}px;
{{y_type}}: {{y_value}}px;
cursor: pointer;
max-height:500px;
max-width:500px;
z-index:10000;
}
#maxkb #maxkb-chat-container{
Expand Down Expand Up @@ -306,4 +317,4 @@ function embedChatbot() {
initMaxkb()
} else console.error('invalid parameter')
}
window.onload = embedChatbot
window.addEventListener('load',embedChatbot)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此段代码主要涉及初始化聊天控件的设置和事件处理，其中对文档流（viewport）元素有一定的引用，需要进一步明确是针对哪些窗口尺寸进行适配。

对于代码中存在的一些问题：1) 在处理拖动事件时使用 clientY 和 clientX 计算距离而不是实际的位置；2) 使用绝对定位布局后应考虑在计算样式高度宽度以及鼠标悬停效果时引入相对单位(px)，如:not(#maxkb .maxkb-mask)等条件用于获取或限制元素大小。这些调整有助于提升代码的可读性和实用性，避免了不必要的浏览器兼容性问题。

Loading