109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
|
|
let $storage_manager;
|
|
let $quota_exceeded_window;
|
|
let ignoring_quota_exceeded = false;
|
|
|
|
function storage_quota_exceeded(){
|
|
if($quota_exceeded_window){
|
|
$quota_exceeded_window.close();
|
|
$quota_exceeded_window = null;
|
|
}
|
|
if(ignoring_quota_exceeded){
|
|
return;
|
|
}
|
|
const $w = $DialogWindow().title("Storage Error").addClass("dialogue-window squish");
|
|
$w.$main.html(
|
|
"<p>JS Paint stores images as you work on them so that if you " +
|
|
"close your browser or tab or reload the page " +
|
|
"your images are usually safe.</p>" +
|
|
"<p>However, it has run out of space to do so.</p>" +
|
|
"<p>You can still save the current image with <b>File > Save</b>. " +
|
|
"You should save frequently, or free up enough space to keep the image safe.</p>"
|
|
);
|
|
$w.$Button("Manage Storage", () => {
|
|
$w.close();
|
|
ignoring_quota_exceeded = false;
|
|
manage_storage();
|
|
}).focus();
|
|
$w.$Button("Ignore", () => {
|
|
$w.close();
|
|
ignoring_quota_exceeded = true;
|
|
});
|
|
$w.$content.width(500);
|
|
$w.center();
|
|
$quota_exceeded_window = $w;
|
|
}
|
|
|
|
function manage_storage(){
|
|
if($storage_manager){
|
|
$storage_manager.close();
|
|
}
|
|
$storage_manager = $DialogWindow().title("Manage Storage").addClass("storage-manager dialogue-window squish");
|
|
// @TODO: way to remove all (with confirmation)
|
|
const $table = $(E("table")).appendTo($storage_manager.$main);
|
|
const $message = $(E("p")).appendTo($storage_manager.$main).html(
|
|
"Any images you've saved to your computer with <b>File > Save</b> will not be affected."
|
|
);
|
|
$storage_manager.$Button("Close", () => {
|
|
$storage_manager.close();
|
|
});
|
|
|
|
const addRow = (k, imgSrc) => {
|
|
const $tr = $(E("tr")).appendTo($table);
|
|
|
|
const $img = $(E("img")).attr({src: imgSrc});
|
|
const $remove = $(E("button")).text("Remove").addClass("remove-button");
|
|
const href = `#${k.replace("image#", "local:")}`;
|
|
const $open_link = $(E("a")).attr({href, target: "_blank"}).text(localize("Open"));
|
|
const $thumbnail_open_link = $(E("a")).attr({href, target: "_blank"}).addClass("thumbnail-container");
|
|
$thumbnail_open_link.append($img);
|
|
$(E("td")).append($thumbnail_open_link).appendTo($tr);
|
|
$(E("td")).append($open_link).appendTo($tr);
|
|
$(E("td")).append($remove).appendTo($tr);
|
|
|
|
$remove.on("click", () => {
|
|
localStorage.removeItem(k);
|
|
$tr.remove();
|
|
if($table.find("tr").length == 0){
|
|
$message.html("<p>All clear!</p>");
|
|
}
|
|
});
|
|
};
|
|
|
|
let localStorageAvailable = false;
|
|
try {
|
|
localStorage._available = true;
|
|
localStorageAvailable = localStorage._available;
|
|
delete localStorage._available;
|
|
// eslint-disable-next-line no-empty
|
|
} catch (e) {}
|
|
|
|
if (localStorageAvailable) {
|
|
for(const k in localStorage){
|
|
if(k.match(/^image#/)){
|
|
let v = localStorage[k];
|
|
try {
|
|
if (v[0] === '"') {
|
|
v = JSON.parse(v);
|
|
}
|
|
// eslint-disable-next-line no-empty
|
|
} catch (e) {}
|
|
addRow(k, v);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!localStorageAvailable) {
|
|
// @TODO: DRY with similar message
|
|
// @TODO: instructions for your browser; it's called Cookies in chrome/chromium at least, and "storage" gives NO results
|
|
$message.html("<p>Please enable local storage in your browser's settings for local backup. It may be called Cookies, Storage, or Site Data.</p>");
|
|
} else if($table.find("tr").length == 0) {
|
|
$message.html("<p>All clear!</p>");
|
|
}
|
|
|
|
$storage_manager.$content.width(450);
|
|
$storage_manager.center();
|
|
|
|
$storage_manager.find(".remove-button").focus();
|
|
}
|