mirror of
https://github.com/Retropex/bitfeed.git
synced 2025-05-12 19:20:46 +02:00
URL param support & tweak tiny screen UI layout
This commit is contained in:
Mononaut
parent
c06bbe2fa6
commit
13d2f584d0
@ -4,13 +4,6 @@
|
||||
import config from './config.js'
|
||||
import { settings } from './stores.js'
|
||||
|
||||
if (URL) {
|
||||
const queryParams = (new URL(document.location)).searchParams
|
||||
if (queryParams.get('noTrack') != null) {
|
||||
$settings.noTrack = true
|
||||
}
|
||||
}
|
||||
|
||||
if (!$settings.noTrack && config.public) analytics.init()
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import TxController from '../controllers/TxController.js'
|
||||
import TxRender from './TxRender.svelte'
|
||||
import getTxStream from '../controllers/TxStream.js'
|
||||
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, blocksEnabled, tinyScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
|
||||
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
|
||||
import BlockInfo from '../components/BlockInfo.svelte'
|
||||
import TxInfo from '../components/TxInfo.svelte'
|
||||
import Sidebar from '../components/Sidebar.svelte'
|
||||
@ -29,7 +29,7 @@
|
||||
if (!config.noTxFeed || !config.noBlockFeed) txStream = getTxStream()
|
||||
|
||||
$: {
|
||||
if ($blockVisible && $blocksEnabled) {
|
||||
if ($blockVisible) {
|
||||
if (txController) txController.showBlock()
|
||||
} else {
|
||||
if (txController) txController.hideBlock()
|
||||
@ -74,8 +74,6 @@
|
||||
$devEvents.addOneCallback = fakeTx
|
||||
$devEvents.addManyCallback = fakeTxs
|
||||
$devEvents.addBlockCallback = fakeBlock
|
||||
|
||||
if (!$settings.showMessages) $settings.showMessages = true
|
||||
})
|
||||
|
||||
function resize () {
|
||||
@ -232,17 +230,19 @@
|
||||
left: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-x);
|
||||
}
|
||||
|
||||
// &::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// background: var(--palette-b);
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
.mempool-info {
|
||||
position: absolute;
|
||||
bottom: .5em;
|
||||
left: 0.5rem;
|
||||
right: 0.5em;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-x);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.height-bar {
|
||||
@ -424,7 +424,14 @@
|
||||
|
||||
<div class="mempool-height" style="bottom: calc({$mempoolScreenHeight + 20}px)">
|
||||
<div class="height-bar" />
|
||||
<span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
|
||||
{#if $tinyScreen}
|
||||
<div class="mempool-info">
|
||||
<span class="left">Mempool</span>
|
||||
<span class="right">{ numberFormat.format(Math.round($mempoolCount)) }</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="block-area-wrapper">
|
||||
@ -453,7 +460,7 @@
|
||||
<span class="fx-ticker {fxColor}" on:click={() => { $sidebarToggle = 'settings'}}>{ fxLabel }</span>
|
||||
{/if}
|
||||
{#if $tinyScreen && $currentBlock }
|
||||
<span class="block-height"><b>Block: </b>{ integerFormat.format($currentBlock.height) }</span>
|
||||
<span class="block-height"><b>Block: </b>{ numberFormat.format($currentBlock.height) }</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
@ -5,7 +5,7 @@ import BitcoinTx from '../models/BitcoinTx.js'
|
||||
import BitcoinBlock from '../models/BitcoinBlock.js'
|
||||
import TxSprite from '../models/TxSprite.js'
|
||||
import { FastVertexArray } from '../utils/memory.js'
|
||||
import { txCount, mempoolCount, mempoolScreenHeight, blockVisible, blocksEnabled, currentBlock, selectedTx, blockAreaSize } from '../stores.js'
|
||||
import { txCount, mempoolCount, mempoolScreenHeight, blockVisible, currentBlock, selectedTx, blockAreaSize, highlight, colorMode } from '../stores.js'
|
||||
import config from "../config.js"
|
||||
|
||||
export default class TxController {
|
||||
@ -36,9 +36,6 @@ export default class TxController {
|
||||
colorMode.subscribe(mode => {
|
||||
this.setColorMode(mode)
|
||||
})
|
||||
blocksEnabled.subscribe(enabled => {
|
||||
this.blocksEnabled = enabled
|
||||
})
|
||||
}
|
||||
|
||||
getVertexData () {
|
||||
@ -110,10 +107,6 @@ export default class TxController {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.blocksEnabled) {
|
||||
this.poolScene.scrollLock = true
|
||||
}
|
||||
|
||||
const block = new BitcoinBlock(blockData)
|
||||
this.knownBlocks[block.id] = true
|
||||
if (this.clearBlockTimeout) clearTimeout(this.clearBlockTimeout)
|
||||
|
||||
@ -19,19 +19,22 @@ function createCounter () {
|
||||
}
|
||||
}
|
||||
|
||||
function createCachedDict (namespace, defaultValues) {
|
||||
function createCachedDict (namespace, setValues, defaultValues) {
|
||||
const initial = {
|
||||
...defaultValues
|
||||
}
|
||||
|
||||
// load from local storage
|
||||
Object.keys(initial).forEach(field => {
|
||||
const val = localStorage.getItem(`${namespace}-${field}`)
|
||||
if (val != null) {
|
||||
try {
|
||||
initial[field] = JSON.parse(val)
|
||||
} catch (e) {
|
||||
initial[field] = val
|
||||
// fields take setValues first, then fall back to cached values, then defaults
|
||||
if (setValues[field] != null) initial[field] = setValues[field]
|
||||
else {
|
||||
const val = localStorage.getItem(`${namespace}-${field}`)
|
||||
if (val != null) {
|
||||
try {
|
||||
initial[field] = JSON.parse(val)
|
||||
} catch (e) {
|
||||
initial[field] = val
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -96,7 +99,7 @@ export const settingsOpen = writable(false)
|
||||
let localeCurrencyCode = LocaleCurrency.getCurrency(navigator.language)
|
||||
if (!currencies[localeCurrencyCode]) localeCurrencyCode = 'USD'
|
||||
|
||||
export const settings = createCachedDict('settings', {
|
||||
const defaultSettings = {
|
||||
darkMode: true,
|
||||
showNetworkStatus: true,
|
||||
currency: localeCurrencyCode,
|
||||
@ -105,13 +108,28 @@ export const settings = createCachedDict('settings', {
|
||||
colorByFee: false,
|
||||
fancyGraphics: true,
|
||||
showMessages: true,
|
||||
noTrack: false
|
||||
})
|
||||
noTrack: false,
|
||||
}
|
||||
|
||||
const searchParams = URL ? (new URL(document.location)).searchParams : {}
|
||||
const urlSettings = Object.keys(defaultSettings).reduce((map, key) => {
|
||||
const param = searchParams.get(key)
|
||||
if (param != null) {
|
||||
if (param.toLowerCase() === 'false') map[key] = false
|
||||
else map[key] = param
|
||||
}
|
||||
|
||||
return map
|
||||
}, {})
|
||||
if (urlSettings.showMessages == null) urlSettings.showMessages = true
|
||||
|
||||
export const settings = createCachedDict('settings', urlSettings, defaultSettings)
|
||||
|
||||
export const colorMode = derived([settings], ([$settings]) => {
|
||||
return $settings.colorByFee ? "fee" : "age"
|
||||
})
|
||||
|
||||
export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {
|
||||
export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {}, {
|
||||
guides: false,
|
||||
layoutHints: false,
|
||||
}) : writable({})
|
||||
@ -131,4 +149,3 @@ export const highlightingFull = writable(false)
|
||||
const aspectRatio = window.innerWidth / window.innerHeight
|
||||
let isTinyScreen = (window.innerWidth < 480 && window.innerHeight < 480)
|
||||
export const tinyScreen = writable(isTinyScreen)
|
||||
export const blocksEnabled = derived([tinyScreen], ([$tinyScreen]) => !$tinyScreen)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user