`
}
/**
* 初始化引导
* @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('http','agent.wwaan.com','c3ecb6ba752b2cd6',''))
// 按钮元素
const chat_button=root.querySelector('.maxkb-chat-button')
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('right'=='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')
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')
}
}
const drag=(e)=>{
if (['touchmove','touchstart'].includes(e.type)) {
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-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(true){
chat_button.addEventListener("drag",drag)
chat_button.addEventListener("dragover",(e)=>{
e.preventDefault()
})
chat_button.addEventListener("dragend",drag)
chat_button.addEventListener("touchstart",drag)
chat_button.addEventListener("touchmove",drag)
}
viewport.onclick=viewport_func
closeviewport.onclick=viewport_func
}
/**
* 第一次进来的引导提示
*/
function initMaxkb(){
const maxkb=document.createElement('div')
const root=document.createElement('div')
const maxkbId = 'maxkb-'+'fa4f3b788c0611f0870c0242ac120003'
root.id=maxkbId
initMaxkbStyle(maxkb, maxkbId)
maxkb.appendChild(root)
document.body.appendChild(maxkb)
const maxkbMaskTip=localStorage.getItem('maxkbMaskTip')
if(maxkbMaskTip==null && false){
initGuide(root)
}
initChat(root)
}
// 初始化全局样式
function initMaxkbStyle(root, maxkbId){
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: 10001;
background-color: transparent;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#maxkb .maxkb-mask .maxkb-content {
width: 64px;
height: 64px;
box-shadow: 1px 1px 1px 9999px rgba(0,0,0,.6);
position: absolute;
right: 0.0px;
bottom: 30.0px;
z-index: 10001;
}
#maxkb .maxkb-tips {
position: fixed;
right:calc(0.0px + 75px);
bottom: calc(30.0px + 0px);
padding: 22px 24px 24px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
background: #3370FF;
z-index: 10001;
}
#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: 450px;
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;
right: 0.0px;
bottom: 30.0px;
cursor: pointer;
z-index:10000;
}
#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;
line-height: 18px;
}
#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;
}
}`
.replaceAll('#maxkb ',`#${maxkbId} `)
root.appendChild(style)
}
function embedChatbot() {
white_list_str=''
white_list=white_list_str.split(',')
if (true&&(false?white_list.includes(window.location.origin):true)) {
// 初始化maxkb智能小助手
initMaxkb()
} else console.error('invalid parameter')
}
window.addEventListener('load',embedChatbot)
})();
