pinafore/routes/_store/observers/onlineObservers.js
Nolan Lawson 48a1bd47b3
refactor(themes): use CSS specificity order for themes (#684)
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.
2018-11-24 00:41:36 -08:00

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 }))
}