48a1bd47b3
The point of this PR is to make it easier to implement scrollbars (#683). With this PR, the themes move from a body tag-based system (e.g. `body.theme-scarlet`) to a system where they simply declare global CSS and we use CSS specificity order to give us the right theme.
43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import debounce from 'lodash-es/debounce'
|
|
import { toast } from '../../_utils/toast'
|
|
|
|
const OFFLINE_DELAY = 5000
|
|
const NOTIFY_OFFLINE_LIMIT = 1
|
|
|
|
let notifyCount = 0
|
|
|
|
let offlineStyle = process.browser && document.getElementById('theOfflineStyle')
|
|
|
|
// debounce to avoid notifying for a short connection issue
|
|
const notifyOffline = debounce(() => {
|
|
if (process.browser && !navigator.onLine && ++notifyCount <= NOTIFY_OFFLINE_LIMIT) {
|
|
toast.say('You seem to be offline. You can still read toots while offline.')
|
|
}
|
|
}, OFFLINE_DELAY)
|
|
|
|
export function onlineObservers (store) {
|
|
if (!process.browser) {
|
|
return
|
|
}
|
|
let meta = document.getElementById('theThemeColor')
|
|
let oldTheme = meta.content
|
|
|
|
store.observe('online', online => {
|
|
// "only x" ensures the <style> tag does not have any effect
|
|
offlineStyle.setAttribute('media', online ? 'only x' : 'all')
|
|
if (online) {
|
|
meta.content = oldTheme
|
|
} else {
|
|
let offlineThemeColor = window.__themeColors.offline
|
|
if (meta.content !== offlineThemeColor) {
|
|
oldTheme = meta.content
|
|
}
|
|
meta.content = offlineThemeColor
|
|
notifyOffline()
|
|
}
|
|
})
|
|
|
|
window.addEventListener('offline', () => store.set({ online: false }))
|
|
window.addEventListener('online', () => store.set({ online: true }))
|
|
}
|