fix: avoid conflicts of same classname on some websites

This commit is contained in:
josc146
2023-03-18 23:54:57 +08:00
parent 90a19df56e
commit 8793fa5fde
5 changed files with 27 additions and 24 deletions
+9 -9
View File
@@ -28,7 +28,7 @@ async function mountComponent(siteConfig, userConfig) {
)
return
document.querySelectorAll('.chat-gpt-container').forEach((e) => {
document.querySelectorAll('.chatgptbox-container').forEach((e) => {
unmountComponentAtNode(e)
e.remove()
})
@@ -37,12 +37,12 @@ async function mountComponent(siteConfig, userConfig) {
if (userConfig.inputQuery) question = await getInput([userConfig.inputQuery])
if (!question && siteConfig) question = await getInput(siteConfig.inputQuery)
document.querySelectorAll('.chat-gpt-container').forEach((e) => {
document.querySelectorAll('.chatgptbox-container').forEach((e) => {
unmountComponentAtNode(e)
e.remove()
})
const container = document.createElement('div')
container.className = 'chat-gpt-container'
container.className = 'chatgptbox-container'
render(
<DecisionCard
session={initSession()}
@@ -107,7 +107,7 @@ async function prepareForSelectionTools() {
if (selection) {
const position = { x: e.clientX + 15, y: e.clientY - 15 }
toolbarContainer = createElementAtPosition(position.x, position.y)
toolbarContainer.className = 'toolbar-container'
toolbarContainer.className = 'chatgptbox-toolbar-container'
render(
<FloatingToolbar
session={initSession()}
@@ -123,7 +123,7 @@ async function prepareForSelectionTools() {
document.addEventListener('mousedown', (e) => {
if (toolbarContainer && toolbarContainer.contains(e.target)) return
document.querySelectorAll('.toolbar-container').forEach((e) => e.remove())
document.querySelectorAll('.chatgptbox-toolbar-container').forEach((e) => e.remove())
})
document.addEventListener('keydown', (e) => {
if (
@@ -157,7 +157,7 @@ async function prepareForSelectionToolsTouch() {
y: e.changedTouches[0].clientY - 15,
}
toolbarContainer = createElementAtPosition(position.x, position.y)
toolbarContainer.className = 'toolbar-container'
toolbarContainer.className = 'chatgptbox-toolbar-container'
render(
<FloatingToolbar
session={initSession()}
@@ -173,7 +173,7 @@ async function prepareForSelectionToolsTouch() {
document.addEventListener('touchstart', (e) => {
if (toolbarContainer && toolbarContainer.contains(e.target)) return
document.querySelectorAll('.toolbar-container').forEach((e) => e.remove())
document.querySelectorAll('.chatgptbox-toolbar-container').forEach((e) => e.remove())
})
}
@@ -191,7 +191,7 @@ async function prepareForRightClickMenu() {
if (data.itemId === 'new') {
const position = { x: menuX, y: menuY }
const container = createElementAtPosition(position.x, position.y)
container.className = 'toolbar-container-not-queryable'
container.className = 'chatgptbox-toolbar-container-not-queryable'
render(
<FloatingToolbar
session={initSession()}
@@ -207,7 +207,7 @@ async function prepareForRightClickMenu() {
} else {
const position = { x: menuX, y: menuY }
const container = createElementAtPosition(position.x, position.y)
container.className = 'toolbar-container-not-queryable'
container.className = 'chatgptbox-toolbar-container-not-queryable'
render(
<FloatingToolbar
session={initSession()}
+8 -8
View File
@@ -36,11 +36,11 @@
--dragbar-color: #ccced0;
}
.sidebar-free {
.chatgptbox-sidebar-free {
margin-left: 60px;
}
.chat-gpt-container {
.chatgptbox-container {
width: 100%;
flex-basis: 0;
flex-grow: 1;
@@ -101,7 +101,7 @@
.gpt-loading {
color: var(--font-color);
animation: gpt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
animation: chatgptbox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.code-copy-btn {
@@ -202,7 +202,7 @@
}
}
@keyframes gpt-pulse {
@keyframes chatgptbox-pulse {
0%,
100% {
opacity: 1;
@@ -213,7 +213,7 @@
}
}
.gpt-selection-toolbar {
.chatgptbox-selection-toolbar {
display: flex;
align-items: center;
border-radius: 15px;
@@ -222,7 +222,7 @@
box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.2);
}
.gpt-selection-toolbar-button {
.chatgptbox-selection-toolbar-button {
margin-left: 2px;
padding: 2px;
border-radius: 30px;
@@ -231,11 +231,11 @@
cursor: pointer;
}
.gpt-selection-toolbar-button:hover {
.chatgptbox-selection-toolbar-button:hover {
background-color: #d4d5da;
}
.gpt-selection-window {
.chatgptbox-selection-window {
height: auto;
border-radius: 8px;
background-color: var(--theme-color);