Add storage information to settings page
This commit is contained in:
toasted-nutbread
parent
884be644ec
commit
2328d61a81
|
|
@ -203,6 +203,8 @@ async function onReady() {
|
|||
}
|
||||
|
||||
formUpdateVisibility(options);
|
||||
|
||||
storageInfoInitialize();
|
||||
}
|
||||
|
||||
$(document).ready(utilAsync(onReady));
|
||||
|
|
@ -520,3 +522,82 @@ async function onAnkiFieldTemplatesReset(e) {
|
|||
ankiErrorShow(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Storage
|
||||
*/
|
||||
|
||||
async function getBrowser() {
|
||||
if (typeof chrome !== "undefined") {
|
||||
if (typeof browser !== "undefined") {
|
||||
try {
|
||||
const info = await browser.runtime.getBrowserInfo();
|
||||
if (info.name === "Fennec") {
|
||||
return "firefox-mobile";
|
||||
}
|
||||
} catch (e) { }
|
||||
return "firefox";
|
||||
} else {
|
||||
return "chrome";
|
||||
}
|
||||
} else {
|
||||
return "edge";
|
||||
}
|
||||
}
|
||||
|
||||
function storageBytesToLabeledString(size) {
|
||||
const base = 1000;
|
||||
const labels = ["bytes", "KB", "MB", "GB"];
|
||||
let labelIndex = 0;
|
||||
while (size >= base) {
|
||||
size /= base;
|
||||
++labelIndex;
|
||||
}
|
||||
const label = size.toFixed(1).replace(/\.0+$/, "");
|
||||
return `${label}${labels[labelIndex]}`;
|
||||
}
|
||||
|
||||
async function storageEstimate() {
|
||||
try {
|
||||
return await navigator.storage.estimate();
|
||||
} catch (e) { }
|
||||
return null;
|
||||
}
|
||||
|
||||
async function storageInfoInitialize() {
|
||||
const browser = await getBrowser();
|
||||
const container = document.querySelector("#storage-info");
|
||||
container.setAttribute("data-browser", browser);
|
||||
|
||||
await storageShowInfo();
|
||||
|
||||
container.classList.remove("storage-hidden");
|
||||
|
||||
document.querySelector("#storage-refresh").addEventListener('click', () => storageShowInfo(), false);
|
||||
}
|
||||
|
||||
async function storageShowInfo() {
|
||||
storageSpinnerShow(true);
|
||||
|
||||
const estimate = await storageEstimate();
|
||||
const valid = (estimate !== null);
|
||||
|
||||
if (valid) {
|
||||
document.querySelector("#storage-usage").textContent = storageBytesToLabeledString(estimate.usage);
|
||||
document.querySelector("#storage-quota").textContent = storageBytesToLabeledString(estimate.quota);
|
||||
}
|
||||
document.querySelector("#storage-use").classList.toggle("storage-hidden", !valid);
|
||||
document.querySelector("#storage-error").classList.toggle("storage-hidden", valid);
|
||||
|
||||
storageSpinnerShow(false);
|
||||
}
|
||||
|
||||
function storageSpinnerShow(show) {
|
||||
const spinner = $('#storage-spinner');
|
||||
if (show) {
|
||||
spinner.show();
|
||||
} else {
|
||||
spinner.hide();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<style>
|
||||
#anki-spinner, #anki-general, #anki-error,
|
||||
#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
|
||||
#debug, .options-advanced {
|
||||
#debug, .options-advanced, .storage-hidden, #storage-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -29,6 +29,17 @@
|
|||
.bottom-links {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
[data-show-for-browser] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-browser=edge] [data-show-for-browser~=edge],
|
||||
[data-browser=chrome] [data-show-for-browser~=chrome],
|
||||
[data-browser=firefox] [data-show-for-browser~=firefox],
|
||||
[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
|
||||
display: initial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -197,6 +208,40 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="storage-info" class="storage-hidden">
|
||||
<div>
|
||||
<img src="/mixed/img/spinner.gif" class="pull-right" id="storage-spinner" />
|
||||
<h3>Storage</h3>
|
||||
</div>
|
||||
|
||||
<div id="storage-use" class="storage-hidden">
|
||||
<p class="help-block">
|
||||
Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="storage-error" class="storage-hidden">
|
||||
<p class="help-block">
|
||||
Could not detect how much storage Yomichan is using.
|
||||
</p>
|
||||
<div data-show-for-browser="firefox firefox-mobile"><div class="alert alert-danger options-advanced">
|
||||
On Firefox and Firefox for Android, the storage information feature may be hidden behind a browser flag.
|
||||
|
||||
If you would like to enable this flag, open <a href="about:config" target="_blank">about:config</a> and search for the
|
||||
<strong>dom.storageManager.enabled</strong> option. If this option has a value of <strong>false</strong>, toggling it to
|
||||
<strong>true</strong> may allow storage information to be calculated.
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div data-show-for-browser="firefox-mobile"><div class="alert alert-warning">
|
||||
If you are using Firefox for Android, you will have to make sure you have enough free space on your device to install dictionaries.
|
||||
</div></div>
|
||||
|
||||
<div>
|
||||
<input type="button" value="Refresh" id="storage-refresh" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user