@rxdi/ui-kit
Version:
UI Components for building graphql-server website
251 lines • 10.1 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PwaInstallComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
require("infinite-carousel-wc");
const pwa_install_component_css_1 = require("./pwa-install.component.css");
require("../global-menu/global-menu.component");
/**
* @customElement rx-pwa-install
*/
let PwaInstallComponent = class PwaInstallComponent extends lit_html_1.LitElement {
constructor() {
super(...arguments);
this.manifestpath = '';
this.explainer = ``;
}
OnUpdate() {
return __awaiter(this, void 0, void 0, function* () {
yield this.getManifestData();
window.addEventListener('beforeinstallprompt', e => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredprompt = e;
});
document.onkeyup = e => {
if (e.key === 'Escape') {
this.cancel();
}
};
});
}
getManifestData() {
return __awaiter(this, void 0, void 0, function* () {
if (this.manifestdata) {
this.updateButtonColor(this.manifestdata);
return;
}
if (this.manifestpath) {
const response = yield fetch(this.manifestpath);
const data = yield response.json();
this.manifestdata = data;
}
});
}
updateButtonColor(data) {
if (data.theme_color) {
this.style.setProperty('--install-button-color', data.theme_color);
}
}
openPrompt() {
this.openmodal = true;
}
install() {
return __awaiter(this, void 0, void 0, function* () {
if (this.deferredprompt) {
this.deferredprompt.prompt();
const choiceResult = yield this.deferredprompt.userChoice;
if (choiceResult.outcome === 'accepted') {
console.log('Your PWA has been installed');
return true;
}
else {
console.log('User chose to not install your PWA');
return false;
}
}
else {
// handle else case
}
});
}
cancel() {
this.openmodal = false;
if (this.hasAttribute('openmodal')) {
this.removeAttribute('openmodal');
}
}
};
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", Object)
], PwaInstallComponent.prototype, "deferredprompt", void 0);
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", Object)
], PwaInstallComponent.prototype, "manifestpath", void 0);
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", String)
], PwaInstallComponent.prototype, "iconpath", void 0);
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", Object)
], PwaInstallComponent.prototype, "manifestdata", void 0);
__decorate([
(0, lit_html_1.property)({ type: Boolean }),
__metadata("design:type", Boolean)
], PwaInstallComponent.prototype, "openmodal", void 0);
__decorate([
(0, lit_html_1.property)({ type: Boolean }),
__metadata("design:type", Boolean)
], PwaInstallComponent.prototype, "showopen", void 0);
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", Object)
], PwaInstallComponent.prototype, "explainer", void 0);
PwaInstallComponent = __decorate([
(0, lit_html_1.Component)({
selector: 'rx-pwa-install',
style: pwa_install_component_css_1.style,
template() {
return (0, lit_html_1.html) `
${this.showopen
? (0, lit_html_1.html) `
<button id="openButton" ="${() => this.openPrompt()}">
<slot>
Install
</slot>
</button>
`
: null}
${this.openmodal
? (0, lit_html_1.html) `
<div id="background" ="${() => this.cancel()}"></div>
`
: null}
${this.openmodal
? (0, lit_html_1.html) `
<button id="closeButton" ="${() => this.cancel()}">
<svg
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.33"
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z"
fill="#60656D"
/>
</svg>
</button>
`
: null}
${this.openmodal && this.manifestdata
? (0, lit_html_1.html) `
<div id="installModal">
<div id="headerContainer">
<img
src="${this.iconpath
? this.iconpath
: this.manifestdata.icons[0].src}"
/>
<div>
<h1>${this.manifestdata.name}</h1>
<p id="desc">
${this.explainer}
</p>
</div>
</div>
<div id="contentContainer">
<div id="featuresScreenDiv">
${this.manifestdata.features
? (0, lit_html_1.html) `
<div id="keyFeatures">
<h3>Key Features</h3>
<ul>
${this.manifestdata.features
? this.manifestdata.features.map(feature => {
return (0, lit_html_1.html) `
<li>${feature}</li>
`;
})
: null}
</ul>
</div>
`
: null}
${this.manifestdata.screenshots
? (0, lit_html_1.html) `
<div id="screenshotsContainer">
<div id="screenshots">
<infinite-carousel-wc>
${this.manifestdata.screenshots.map((screen, index) => {
return (0, lit_html_1.html) `
<div slot="${index + 1}">
<img src="${screen.src}" />
</div>
`;
})}
</infinite-carousel-wc>
</div>
</div>
`
: null}
</div>
<div>
<h3>App Description</h3>
<p>${this.manifestdata.description}</p>
</div>
</div>
<div id="buttonsContainer">
${this.deferredprompt
? (0, lit_html_1.html) `
<button
id="installButton"
="${() => this.install()}"
>
Install ${this.manifestdata.short_name}
</button>
`
: (0, lit_html_1.html) `
<button
="${() => this.cancel()}"
id="installButton"
>
Close
</button>
`}
</div>
</div>
`
: null}
`;
}
})
], PwaInstallComponent);
exports.PwaInstallComponent = PwaInstallComponent;
//# sourceMappingURL=pwa-install.component.js.map