more offline work
This commit is contained in:
parent
cbcb270ed3
commit
a2f0f9bc39
|
@ -1,4 +1,4 @@
|
|||
<:Window bind:innerHeight bind:online />
|
||||
<:Window bind:innerHeight />
|
||||
<Nav page={{page}} />
|
||||
|
||||
<div class="container" on:scroll="onScroll(event)" ref:node>
|
||||
|
@ -12,27 +12,15 @@
|
|||
|
||||
import debounce from 'lodash/debounce'
|
||||
import throttle from 'lodash/throttle'
|
||||
import { toast } from '../_utils/toast'
|
||||
import { mark, stop } from '../_utils/marks'
|
||||
|
||||
const SCROLL_EVENT_DELAY = 300
|
||||
const RESIZE_EVENT_DELAY = 700
|
||||
const OFFLINE_DELAY = 1000
|
||||
|
||||
const notifyOffline = debounce(() => {
|
||||
toast.say('You appear to be offline. You can still read toots while offline.')
|
||||
}, OFFLINE_DELAY)
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
mark('onCreate Layout')
|
||||
let node = this.refs.node
|
||||
this.observe('online', online => {
|
||||
document.body.classList.toggle('offline', !online)
|
||||
if (!online) {
|
||||
notifyOffline()
|
||||
}
|
||||
})
|
||||
this.observe('innerHeight', debounce(() => {
|
||||
// respond to window resize events
|
||||
this.store.set({
|
||||
|
|
|
@ -25,10 +25,15 @@ const importIndexedDBGetAllShim = () => import(
|
|||
/* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
|
||||
)
|
||||
|
||||
const importOfflineNotification = () => import(
|
||||
/* webpackHunkName: 'offlineNotification' */ '../_utils/offlineNotification'
|
||||
)
|
||||
|
||||
export {
|
||||
importURLSearchParams,
|
||||
importTimeline,
|
||||
importIntersectionObserver,
|
||||
importRequestIdleCallback,
|
||||
importIndexedDBGetAllShim
|
||||
importIndexedDBGetAllShim,
|
||||
importOfflineNotification
|
||||
}
|
|
@ -1,7 +1,29 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import padStart from 'lodash/padStart'
|
||||
|
||||
const STORE = 'statuses'
|
||||
|
||||
function toPaddedBigInt(id) {
|
||||
return padStart(id, 30, '0')
|
||||
}
|
||||
|
||||
function toReversePaddedBigInt(id) {
|
||||
let bigInt = toPaddedBigInt(id)
|
||||
let res = ''
|
||||
for (let i = 0; i < bigInt.length; i++) {
|
||||
res += (9 - parseInt(bigInt.charAt(i), 10)).toString(10)
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
function transformStatusForStorage(status) {
|
||||
status = cloneDeep(status)
|
||||
status.pinafore_id_as_big_int = toPaddedBigInt(status.id)
|
||||
status.pinafore_id_as_negative_big_int = toReversePaddedBigInt(status.id)
|
||||
status.pinafore_stale = true
|
||||
return status
|
||||
}
|
||||
|
||||
const dbPromise = new Promise((resolve, reject) => {
|
||||
let req = indexedDB.open(STORE, 1)
|
||||
req.onerror = reject
|
||||
|
@ -20,21 +42,13 @@ const dbPromise = new Promise((resolve, reject) => {
|
|||
req.onsuccess = () => resolve(req.result)
|
||||
})
|
||||
|
||||
function transformStatusForStorage(status) {
|
||||
status = cloneDeep(status)
|
||||
status.pinafore_id_as_big_int = parseInt(status.id, 10)
|
||||
status.pinafore_id_as_negative_big_int = -parseInt(status.id, 10)
|
||||
status.pinafore_stale = true
|
||||
return status
|
||||
}
|
||||
|
||||
export async function getTimelineAfter(max_id = null, limit = 20) {
|
||||
const db = await dbPromise
|
||||
return await new Promise((resolve, reject) => {
|
||||
const tx = db.transaction(STORE, 'readonly')
|
||||
const store = tx.objectStore(STORE)
|
||||
const index = store.index('pinafore_id_as_negative_big_int')
|
||||
let sinceAsNegativeBigInt = max_id === null ? null : -parseInt(max_id, 10)
|
||||
let sinceAsNegativeBigInt = max_id === null ? null : toReversePaddedBigInt(max_id)
|
||||
let query = sinceAsNegativeBigInt === null ? null : IDBKeyRange.lowerBound(sinceAsNegativeBigInt, false)
|
||||
|
||||
let res
|
||||
|
|
21
routes/_utils/offlineNotification.js
Normal file
21
routes/_utils/offlineNotification.js
Normal file
|
@ -0,0 +1,21 @@
|
|||
import debounce from 'lodash/debounce'
|
||||
import { toast } from './toast'
|
||||
|
||||
const OFFLINE_DELAY = 1000
|
||||
|
||||
const notifyOffline = debounce(() => {
|
||||
toast.say('You appear to be offline. You can still read toots while offline.')
|
||||
}, OFFLINE_DELAY)
|
||||
|
||||
const observe = online => {
|
||||
if (!localStorage.store_currentInstance) {
|
||||
return // only show notification for logged-in users
|
||||
}
|
||||
document.body.classList.toggle('offline', !online)
|
||||
if (!online) {
|
||||
notifyOffline()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('offline', () => observe(false));
|
||||
window.addEventListener('online', () => observe(true));
|
|
@ -1,10 +1,12 @@
|
|||
import { init } from 'sapper/runtime.js'
|
||||
import { toast } from '../routes/_utils/toast'
|
||||
|
||||
import {
|
||||
importURLSearchParams,
|
||||
importIntersectionObserver,
|
||||
importRequestIdleCallback,
|
||||
importIndexedDBGetAllShim,
|
||||
importOfflineNotification
|
||||
} from '../routes/_utils/asyncModules'
|
||||
|
||||
// polyfills
|
||||
|
@ -24,5 +26,6 @@ Promise.all([
|
|||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
importOfflineNotification()
|
Loading…
Reference in a new issue