`
}
/**
* 初始化引导
* @param {*} root
*/
const initGuide=(root)=>{
root.insertAdjacentHTML("beforeend",guideHtml)
const button=root.querySelector(".maxkb-button")
const close_icon=root.querySelector('.maxkb-close')
const close_func=()=>{
root.removeChild(root.querySelector('.maxkb-tips'))
root.removeChild(root.querySelector('.maxkb-mask'))
localStorage.setItem('maxkbMaskTip',true)
}
button.onclick=close_func
close_icon.onclick=close_func
}
const initChat=(root)=>{
// 添加对话icon
root.insertAdjacentHTML("beforeend",chatButtonHtml)
// 添加对话框
root.insertAdjacentHTML('beforeend',getChatContainerHtml('{{protocol}}','{{host}}','{{token}}'))
// 按钮元素
const chat_button=root.querySelector('.maxkb-chat-button')
// 对话框元素
const chat_container=root.querySelector('#maxkb-chat-container')
const viewport=root.querySelector('.maxkb-openviewport')
const closeviewport=root.querySelector('.maxkb-closeviewport')
const close_func=()=>{
chat_container.style['display']=chat_container.style['display']=='block'?'none':'block'
chat_button.style['display']=chat_container.style['display']=='block'?'none':'block'
}
close_icon=chat_container.querySelector('.maxkb-chat-close')
chat_button.onclick = close_func
close_icon.onclick=close_func
const viewport_func=()=>{
if(chat_container.classList.contains('maxkb-enlarge')){
chat_container.classList.remove("maxkb-enlarge");
viewport.classList.remove('maxkb-viewportnone')
closeviewport.classList.add('maxkb-viewportnone')
}else{
chat_container.classList.add("maxkb-enlarge");
viewport.classList.add('maxkb-viewportnone')
closeviewport.classList.remove('maxkb-viewportnone')
}
}
viewport.onclick=viewport_func
closeviewport.onclick=viewport_func
}
/**
* 第一次进来的引导提示
*/
function initMaxkb(){
const maxkb=document.createElement('div')
const root=document.createElement('div')
root.id="maxkb"
initMaxkbStyle(maxkb)
maxkb.appendChild(root)
document.body.appendChild(maxkb)
const maxkbMaskTip=localStorage.getItem('maxkbMaskTip')
if(maxkbMaskTip==null){
initGuide(root)
}
initChat(root)
}
// 初始化全局样式
function initMaxkbStyle(root){
style=document.createElement('style')
style.type='text/css'
style.innerText= `
/* 放大 */
#maxkb .maxkb-enlarge {
width: 50%!important;
height: 100%!important;
bottom: 0!important;
right: 0 !important;
}
@media only screen and (max-width: 768px){
#maxkb .maxkb-enlarge {
width: 100%!important;
height: 100%!important;
right: 0 !important;
bottom: 0!important;
}
}
/* 引导 */
#maxkb .maxkb-mask {
position: fixed;
z-index: 999;
background-color: transparent;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#maxkb .maxkb-mask .maxkb-content {
width: 45px;
height: 48px;
box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.6);
border-radius: 50% 0 0 50%;
position: absolute;
right: 0;
bottom: 38px;
z-index: 1000;
}
#maxkb .maxkb-tips {
position: fixed;
bottom: 30px;
right: 60px;
padding: 22px 24px 24px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
background: #3370FF;
z-index: 1000;
}
#maxkb .maxkb-tips .maxkb-arrow {
position: absolute;
background: #3370FF;
width: 10px;
height: 10px;
pointer-events: none;
transform: rotate(45deg);
box-sizing: border-box;
/* left */
right: -5px;
bottom: 33px;
border-left-color: transparent;
border-bottom-color: transparent
}
#maxkb .maxkb-tips .maxkb-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
}
#maxkb .maxkb-tips .maxkb-button {
text-align: right;
margin-top: 24px;
}
#maxkb .maxkb-tips .maxkb-button button {
border-radius: 4px;
background: #FFF;
padding: 3px 12px;
color: #3370FF;
cursor: pointer;
outline: none;
border: none;
}
#maxkb .maxkb-tips .maxkb-button button::after{
border: none;
}
#maxkb .maxkb-tips .maxkb-close {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
#maxkb-chat-container {
width: 420px;
height: 600px;
display:none;
}
@media only screen and (max-width: 768px) {
#maxkb-chat-container {
width: 100%;
height: 70%;
right: 0 !important;
}
}
#maxkb .maxkb-chat-button{
position: fixed;
bottom: 30px;
right: 0;
cursor: pointer;
}
#maxkb #maxkb-chat-container{
z-index:10000;position: relative;
border-radius: 8px;
border: 1px solid #ffffff;
background: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.10);
position: fixed;bottom: 16px;right: 16px;overflow: hidden;
}
#maxkb #maxkb-chat-container .maxkb-operate{
top: 18px;
right: 15px;
position: absolute;
display: flex;
align-items: center;
}
#maxkb #maxkb-chat-container .maxkb-operate .maxkb-chat-close{
margin-left:15px;
cursor: pointer;
}
#maxkb #maxkb-chat-container .maxkb-operate .maxkb-openviewport{
cursor: pointer;
}
#maxkb #maxkb-chat-container .maxkb-operate .maxkb-closeviewport{
cursor: pointer;
}
#maxkb #maxkb-chat-container .maxkb-viewportnone{
display:none;
}
#maxkb #maxkb-chat-container #maxkb-chat{
height:100%;
width:100%;
border: none;
}
#maxkb #maxkb-chat-container {
animation: appear .4s ease-in-out;
}
@keyframes appear {
from {
height: 0;;
}
to {
height: 600px;
}
}`
root.appendChild(style)
}
function embedChatbot() {
white_list_str='{{white_list_str}}'
white_list=white_list_str.split(',')
if ({{is_auth}}&&({{white_active}}?white_list.includes(window.location.origin):true)) {
// 初始化maxkb智能小助手
initMaxkb()
} else console.error('invalid parameter')
}
window.onload = embedChatbot