Merge pull request #796 from Azgaar/pwa

Progressive Web App
This commit is contained in:
Azgaar 2022-05-13 22:59:22 +03:00 committed by GitHub
commit 529444f58f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 143 additions and 24 deletions

View file

@ -0,0 +1,73 @@
// module to prompt PWA installation
let installButton = null;
let deferredPrompt = null;
export function init(event) {
const dontAskforInstallation = localStorage.getItem("installationDontAsk");
if (dontAskforInstallation) return;
installButton = createButton();
deferredPrompt = event;
window.addEventListener("appinstalled", () => {
tip("Application is installed", false, "success", 8000);
cleanup();
});
}
function createButton() {
const button = document.createElement("button");
button.style = `
position: fixed;
top: 1em;
right: 1em;
padding: 0.6em 0.8em;
width: auto;
`;
button.className = "options glow";
button.innerHTML = "Install";
button.onclick = openDialog;
button.onmouseenter = () => tip("Install the Application");
document.querySelector("body").appendChild(button);
return button;
}
function openDialog() {
alertMessage.innerHTML = /* html */ `You can install the tool so that it will look and feel like desktop application:
have its own icon on your home screen and work offline with some limitations
`;
$("#alert").dialog({
resizable: false,
title: "Install the Application",
width: "38em",
buttons: {
Install: function () {
$(this).dialog("close");
deferredPrompt.prompt();
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
const checkbox =
'<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>';
const pane = this.parentElement.querySelector(".ui-dialog-buttonpane");
pane.insertAdjacentHTML("afterbegin", checkbox);
},
close: function () {
const box = this.parentElement.querySelector(".checkbox");
if (box?.checked) {
localStorage.setItem("installationDontAsk", true);
cleanup();
}
$(this).dialog("destroy");
}
});
function cleanup() {
installButton.remove();
installButton = null;
deferredPrompt = null;
}
}

View file

@ -2,10 +2,7 @@
// module to control the Tools options (click to edit, to re-geenerate, tp add)
toolsContent.addEventListener("click", function (event) {
if (customization) {
tip("Please exit the customization mode first", false, "warning");
return;
}
if (customization) return tip("Please exit the customization mode first", false, "warning");
if (!["BUTTON", "I"].includes(event.target.tagName)) return;
const button = event.target.id;
@ -30,10 +27,8 @@ toolsContent.addEventListener("click", function (event) {
// click on Regenerate buttons
if (event.target.parentNode.id === "regenerateFeature") {
if (sessionStorage.getItem("regenerateFeatureDontAsk")) {
processFeatureRegeneration(event, button);
return;
}
const dontAsk = sessionStorage.getItem("regenerateFeatureDontAsk");
if (dontAsk) return processFeatureRegeneration(event, button);
alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.<br /><br />Are you sure you want to proceed?`;
$("#alert").dialog({
@ -49,15 +44,14 @@ toolsContent.addEventListener("click", function (event) {
}
},
open: function () {
const pane = $(this).dialog("widget").find(".ui-dialog-buttonpane");
$(
'<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>'
).prependTo(pane);
const checkbox =
'<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>';
const pane = this.parentElement.querySelector(".ui-dialog-buttonpane");
pane.insertAdjacentHTML("afterbegin", checkbox);
},
close: function () {
const box = $(this).dialog("widget").find(".checkbox")[0];
if (!box) return;
if (box.checked) sessionStorage.setItem("regenerateFeatureDontAsk", true);
const box = this.parentElement.querySelector(".checkbox");
if (box?.checked) sessionStorage.setItem("regenerateFeatureDontAsk", true);
$(this).dialog("destroy");
}
});