Skip to content

Commit 06648c4

Browse files
committed
Moved UI functions from content.js to lib/ui.js ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/chatgpt-widescreen]
1 parent cc47113 commit 06648c4

File tree

6 files changed

+62
-44
lines changed

6 files changed

+62
-44
lines changed

chromium/extension/content.js

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77

88
// Import JS resources
99
for (const resource of [
10-
'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js',
10+
'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'lib/ui.js',
1111
'components/buttons.js', 'components/modals.js', 'components/tooltip.js'
1212
]) await import(chrome.runtime.getURL(resource))
1313

1414
// Init ENV context
1515
const env = {
1616
browser: { isMobile: chatgpt.browser.isMobile() }, site: /([^.]+)\.[^.]+$/.exec(location.hostname)[1], ui: {}}
1717
env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
18-
env.ui.scheme = getScheme()
18+
env.ui.scheme = ui.getScheme()
1919

2020
// Import DATA
2121
const { app } = await chrome.storage.sync.get('app'),
@@ -27,6 +27,7 @@
2727
modals.imports.import({ app, env }) // for app data + env.<browser|ui> flags
2828
settings.imports.import({ site: env.site }) // to load/save active tab's settings
2929
tooltip.imports.import({ site: env.site, sites }) // for tooltip.update() position logic
30+
ui.imports.import({ site: env.site, sites }) // for ui.ui.isFullWin() logic
3031

3132
// Init SETTINGS
3233
const firstRunKey = `${env.site}_isFirstRun`
@@ -85,7 +86,7 @@
8586
case 'ON' : activateMode(mode) ; break
8687
case 'OFF' : deactivateMode(mode) ; break
8788
default : ( mode == 'wideScreen' ? document.head.contains(wideScreenStyle)
88-
: mode == 'fullWindow' ? isFullWin() : chatgpt.isFullScreen() ) ? deactivateMode(mode)
89+
: mode == 'fullWindow' ? ui.isFullWin() : chatgpt.isFullScreen() ) ? deactivateMode(mode)
8990
: activateMode(mode)
9091
}
9192

@@ -189,7 +190,7 @@
189190
if (config.wideScreen ^ document.head.contains(wideScreenStyle)) { // sync Widescreen
190191
supressNotifs() ; toggleMode('wideScreen') }
191192
if (sites[env.site].hasSidebar) {
192-
if (config.fullWindow ^ isFullWin()) { // sync Full-Window
193+
if (config.fullWindow ^ ui.isFullWin()) { // sync Full-Window
193194
supressNotifs() ; toggleMode('fullWindow') }
194195
sync.fullerWin() // sync Fuller Windows
195196
}
@@ -222,7 +223,7 @@
222223

223224
async mode(mode) { // setting + icon + tooltip + chatbar
224225
const state = ( mode == 'wideScreen' ? !!document.getElementById('wideScreen-mode')
225-
: mode == 'fullWindow' ? isFullWin()
226+
: mode == 'fullWindow' ? ui.isFullWin()
226227
: chatgpt.isFullScreen() )
227228
settings.save(mode, state) ; buttons.update.svg(mode) ; tooltip.update(mode)
228229
if (!config.extensionDisabled) { // tweak UI
@@ -238,19 +239,6 @@
238239
}
239240
}
240241

241-
function getScheme() {
242-
const rootElem = document.documentElement
243-
return env.site == 'perplexity' ? rootElem.dataset.colorScheme : rootElem.className
244-
|| (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
245-
}
246-
247-
function isFullWin() {
248-
return env.site == 'poe' ? !!document.getElementById('fullWindow-mode')
249-
: !sites[env.site].hasSidebar // false if sidebar non-existent
250-
|| /\d+/.exec(getComputedStyle(document.querySelector(
251-
sites[env.site].selectors.sidebar))?.width || '')[0] < 100
252-
}
253-
254242
chatgpt.canvasIsOpen = function() {
255243
return document.querySelector('section.popover')?.getBoundingClientRect().top == 0 }
256244

@@ -268,7 +256,7 @@
268256
// Init FULL-MODE states
269257
config.fullScreen = chatgpt.isFullScreen()
270258
if (sites[env.site].selectors.btns.sidebarToggle) // site has native FW state
271-
config.fullWindow = isFullWin() // ...so match it
259+
config.fullWindow = ui.isFullWin() // ...so match it
272260
else await settings.load('fullWindow') // otherwise load CWM's saved state
273261

274262
// Apply general style TWEAKS
@@ -348,7 +336,7 @@
348336
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
349337
'change', () => requestAnimationFrame(handleSchemePrefChange))
350338
function handleSchemePrefChange() {
351-
const displayedScheme = getScheme()
339+
const displayedScheme = ui.getScheme()
352340
if (env.ui.scheme != displayedScheme) {
353341
env.ui.scheme = displayedScheme ; modals.stylize() ; buttons.update.color() }
354342
}
@@ -357,7 +345,7 @@
357345
if (sites[env.site].selectors.btns.sidebarToggle && sites[env.site].hasSidebar) {
358346
const sidebarObserver = new MutationObserver(async () => {
359347
await new Promise(resolve => setTimeout(resolve, env.site == 'perplexity' ? 500 : 0))
360-
if ((config.fullWindow ^ isFullWin()) && !config.modeSynced) sync.mode('fullWindow')
348+
if ((config.fullWindow ^ ui.isFullWin()) && !config.modeSynced) sync.mode('fullWindow')
361349
})
362350
setTimeout(() => { // delay half-sec before observing to avoid repeated toggles from node observer
363351
let obsTarget = document.querySelector(sites[env.site].selectors.sidebar)

chromium/extension/lib/ui.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
window.ui = {
2+
3+
imports: {
4+
import(deps) { // { site: env.site, sites }
5+
for (const depName in deps) this[depName] = deps[depName] }
6+
},
7+
8+
getScheme() {
9+
const rootElem = document.documentElement
10+
return this.imports.site == 'perplexity' ? rootElem.dataset.colorScheme : rootElem.className
11+
|| (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
12+
},
13+
14+
isFullWin() {
15+
const site = this.imports.site, sites = this.imports.sites
16+
return site == 'poe' ? !!document.getElementById('fullWindow-mode')
17+
: !sites[site].hasSidebar // false if sidebar non-existent
18+
|| /\d+/.exec(getComputedStyle(document.querySelector(
19+
sites[site].selectors.sidebar))?.width || '')[0] < 100
20+
}
21+
};

chromium/extension/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"matches": [ "<all_urls>" ],
2121
"resources": [
2222
"components/buttons.js", "components/modals.js", "components/tooltip.js",
23-
"lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js"
23+
"lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js", "lib/ui.js"
2424
]
2525
}],
2626
"content_scripts": [{

firefox/extension/content.js

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77

88
// Import JS resources
99
for (const resource of [
10-
'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js',
10+
'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'lib/ui.js',
1111
'components/buttons.js', 'components/modals.js', 'components/tooltip.js'
1212
]) await import(chrome.runtime.getURL(resource))
1313

1414
// Init ENV context
1515
const env = {
1616
browser: { isMobile: chatgpt.browser.isMobile() }, site: /([^.]+)\.[^.]+$/.exec(location.hostname)[1], ui: {}}
1717
env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
18-
env.ui.scheme = getScheme()
18+
env.ui.scheme = ui.getScheme()
1919

2020
// Import DATA
2121
const { app } = await chrome.storage.sync.get('app'),
@@ -27,6 +27,7 @@
2727
modals.imports.import({ app, env }) // for app data + env.<browser|ui> flags
2828
settings.imports.import({ site: env.site }) // to load/save active tab's settings
2929
tooltip.imports.import({ site: env.site, sites }) // for tooltip.update() position logic
30+
ui.imports.import({ site: env.site, sites }) // for ui.ui.isFullWin() logic
3031

3132
// Init SETTINGS
3233
const firstRunKey = `${env.site}_isFirstRun`
@@ -85,7 +86,7 @@
8586
case 'ON' : activateMode(mode) ; break
8687
case 'OFF' : deactivateMode(mode) ; break
8788
default : ( mode == 'wideScreen' ? document.head.contains(wideScreenStyle)
88-
: mode == 'fullWindow' ? isFullWin() : chatgpt.isFullScreen() ) ? deactivateMode(mode)
89+
: mode == 'fullWindow' ? ui.isFullWin() : chatgpt.isFullScreen() ) ? deactivateMode(mode)
8990
: activateMode(mode)
9091
}
9192

@@ -189,7 +190,7 @@
189190
if (config.wideScreen ^ document.head.contains(wideScreenStyle)) { // sync Widescreen
190191
supressNotifs() ; toggleMode('wideScreen') }
191192
if (sites[env.site].hasSidebar) {
192-
if (config.fullWindow ^ isFullWin()) { // sync Full-Window
193+
if (config.fullWindow ^ ui.isFullWin()) { // sync Full-Window
193194
supressNotifs() ; toggleMode('fullWindow') }
194195
sync.fullerWin() // sync Fuller Windows
195196
}
@@ -222,7 +223,7 @@
222223

223224
async mode(mode) { // setting + icon + tooltip + chatbar
224225
const state = ( mode == 'wideScreen' ? !!document.getElementById('wideScreen-mode')
225-
: mode == 'fullWindow' ? isFullWin()
226+
: mode == 'fullWindow' ? ui.isFullWin()
226227
: chatgpt.isFullScreen() )
227228
settings.save(mode, state) ; buttons.update.svg(mode) ; tooltip.update(mode)
228229
if (!config.extensionDisabled) { // tweak UI
@@ -238,19 +239,6 @@
238239
}
239240
}
240241

241-
function getScheme() {
242-
const rootElem = document.documentElement
243-
return env.site == 'perplexity' ? rootElem.dataset.colorScheme : rootElem.className
244-
|| (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
245-
}
246-
247-
function isFullWin() {
248-
return env.site == 'poe' ? !!document.getElementById('fullWindow-mode')
249-
: !sites[env.site].hasSidebar // false if sidebar non-existent
250-
|| /\d+/.exec(getComputedStyle(document.querySelector(
251-
sites[env.site].selectors.sidebar))?.width || '')[0] < 100
252-
}
253-
254242
chatgpt.canvasIsOpen = function() {
255243
return document.querySelector('section.popover')?.getBoundingClientRect().top == 0 }
256244

@@ -268,7 +256,7 @@
268256
// Init FULL-MODE states
269257
config.fullScreen = chatgpt.isFullScreen()
270258
if (sites[env.site].selectors.btns.sidebarToggle) // site has native FW state
271-
config.fullWindow = isFullWin() // ...so match it
259+
config.fullWindow = ui.isFullWin() // ...so match it
272260
else await settings.load('fullWindow') // otherwise load CWM's saved state
273261

274262
// Apply general style TWEAKS
@@ -348,7 +336,7 @@
348336
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
349337
'change', () => requestAnimationFrame(handleSchemePrefChange))
350338
function handleSchemePrefChange() {
351-
const displayedScheme = getScheme()
339+
const displayedScheme = ui.getScheme()
352340
if (env.ui.scheme != displayedScheme) {
353341
env.ui.scheme = displayedScheme ; modals.stylize() ; buttons.update.color() }
354342
}
@@ -357,7 +345,7 @@
357345
if (sites[env.site].selectors.btns.sidebarToggle && sites[env.site].hasSidebar) {
358346
const sidebarObserver = new MutationObserver(async () => {
359347
await new Promise(resolve => setTimeout(resolve, env.site == 'perplexity' ? 500 : 0))
360-
if ((config.fullWindow ^ isFullWin()) && !config.modeSynced) sync.mode('fullWindow')
348+
if ((config.fullWindow ^ ui.isFullWin()) && !config.modeSynced) sync.mode('fullWindow')
361349
})
362350
setTimeout(() => { // delay half-sec before observing to avoid repeated toggles from node observer
363351
let obsTarget = document.querySelector(sites[env.site].selectors.sidebar)

firefox/extension/lib/ui.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
window.ui = {
2+
3+
imports: {
4+
import(deps) { // { site: env.site, sites }
5+
for (const depName in deps) this[depName] = deps[depName] }
6+
},
7+
8+
getScheme() {
9+
const rootElem = document.documentElement
10+
return this.imports.site == 'perplexity' ? rootElem.dataset.colorScheme : rootElem.className
11+
|| (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
12+
},
13+
14+
isFullWin() {
15+
const site = this.imports.site, sites = this.imports.sites
16+
return site == 'poe' ? !!document.getElementById('fullWindow-mode')
17+
: !sites[site].hasSidebar // false if sidebar non-existent
18+
|| /\d+/.exec(getComputedStyle(document.querySelector(
19+
sites[site].selectors.sidebar))?.width || '')[0] < 100
20+
}
21+
};

firefox/extension/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"matches": [ "<all_urls>" ],
2121
"resources": [
2222
"components/buttons.js", "components/modals.js", "components/tooltip.js",
23-
"lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js"
23+
"lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js", "lib/ui.js"
2424
]
2525
}],
2626
"content_scripts": [{

0 commit comments

Comments
 (0)