@netcreaties/ngx-smart-banner
Version:
Angular service for the imlementation of a smart banner to notify your users about your available app.
302 lines (292 loc) • 22.2 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Injectable, Inject, Component, Input, EventEmitter, NgModule } from '@angular/core';
import * as i1 from '@angular/cdk/platform';
import { PlatformModule } from '@angular/cdk/platform';
import * as i4 from '@angular/common';
import { isPlatformBrowser, DOCUMENT, CommonModule, isPlatformServer } from '@angular/common';
class CookieService {
constructor(platformId, document) {
this.document = document;
this.isBrowser = isPlatformBrowser(platformId);
}
check(key) {
if (!this.isBrowser) {
return false;
}
return this.isBrowser && this.document.cookie.includes(key);
}
set(key, value, until = null) {
if (!this.isBrowser) {
return;
}
const untilUTC = until === null || until === void 0 ? void 0 : until.toUTCString();
const expires = untilUTC ? `; expires=${(until === null || until === void 0 ? void 0 : until.toUTCString()) || ''}` : '';
this.document.cookie = `${key}=${value}${expires}; path=/; SameSite=Strict`;
}
get(key) {
if (!this.isBrowser) {
return '';
}
const match = this.document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
return (match === null || match === void 0 ? void 0 : match[2]) || null;
}
deleteAll() {
if (!this.isBrowser) {
return;
}
this.document.cookie = '';
}
}
CookieService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: CookieService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
CookieService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: CookieService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: CookieService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: i0.InjectionToken, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; } });
class StarComponent {
}
StarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: StarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
StarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.2", type: StarComponent, selector: "app-star", inputs: { solid: "solid" }, ngImport: i0, template: "<ng-container *ngIf=\"solid; else regular\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 1792 1792\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n fill=\"orange\"\r\n d=\"M1201 1004l306-297-422-62-189-382-189 382-422 62 306 297-73 421 378-199 377 199zm527-357q0 22-26 48l-363 354 86 500q1 7 1 20 0 50-41 50-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z\"\r\n />\r\n </svg>\r\n</ng-container>\r\n<ng-template #regular>\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n class=\"star-rating\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 576 512\"\r\n >\r\n <path\r\n fill=\"orange\"\r\n d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\"\r\n />\r\n </svg>\r\n</ng-template>\r\n", styles: [".smartbanner{box-sizing:border-box;text-shadow:none;position:absolute;top:0;left:0;z-index:99999;padding:0 10px;width:100%;height:84px;display:flex;justify-content:space-between;align-items:center;background:#f3f3f3;font-family:Helvetica,sans,sans-serif}.smartbanner__exit{position:relative;display:block;margin-right:14px;background-color:#f3f3f3;width:12px;height:12px;border:0;text-align:center}.smartbanner__exit:after,.smartbanner__exit:before{position:absolute;top:0;width:1px;height:12px;background:#767676;content:\"\"}.smartbanner__exit:before{transform:rotate(45deg)}.smartbanner__exit:after{transform:rotate(-45deg)}.smartbanner__icon{width:64px;height:64px;border-radius:15px;background-size:64px 64px}.smartbanner__info{margin-left:8px;display:flex;flex-direction:column;justify-content:space-between;width:45%;height:64px;color:#767676}.smartbanner__info--title{font-size:14px;color:#000}.smartbanner__info--rating{display:flex;margin:3px 0}.smartbanner__info--author,.smartbanner__info--price{font-size:12px}.smartbanner__button{display:block;padding:0 10px;min-width:10%;background:#f3f3f3;color:#1474fc;font-size:14px;font-weight:700;text-align:center;text-decoration:none}.smartbanner__button__label{text-align:center}.smartbanner.smartbanner--android{background:#3d3d3d url(\"data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7\")}.smartbanner.smartbanner--android .smartbanner__exit{margin-right:0;width:18px;height:17px;border-radius:14px;background:#1c1e21;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 1px hsla(0,0%,100%,.3);color:#b1b1b3;font-family:ArialRoundedMTBold,Arial;font-size:20px;line-height:17px;text-shadow:0 1px 1px #000}.smartbanner.smartbanner--android .smartbanner__exit:after,.smartbanner.smartbanner--android .smartbanner__exit:before{top:3px;left:8px;width:2px;height:11px;background:#b1b1b3}.smartbanner.smartbanner--android .smartbanner__exit:active,.smartbanner.smartbanner--android .smartbanner__exit:hover{color:#eee}.smartbanner.smartbanner--android .smartbanner__icon{background-color:transparent;box-shadow:none}.smartbanner.smartbanner--android .smartbanner__info{color:#ccc}.smartbanner.smartbanner--android .smartbanner__info--title{color:#fff;font-weight:700}.smartbanner.smartbanner--android .smartbanner__button{color:#fff;background:#3eacc3;padding:5px 10px;border:2px solid #fff;min-width:12%;font-size:14px;font-weight:700}.smartbanner.smartbanner--android .smartbanner__button:active,.smartbanner.smartbanner--android .smartbanner__button:hover{background:none}.smartbanner.smartbanner--android .smartbanner__button__label{display:block;padding:0 10px;background:#42b6c9;background:linear-gradient(180deg,#42b6c9,#39a9bb);box-shadow:none;line-height:24px;text-align:center;text-transform:none}.smartbanner.smartbanner--android .smartbanner__button__label:active,.smartbanner.smartbanner--android .smartbanner__button__label:hover{background:#2ac7e1}.star-rating{font-size:12px;color:#e19620;margin-right:2px}"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: StarComponent, decorators: [{
type: Component,
args: [{
selector: 'app-star',
templateUrl: './star.component.html',
styleUrls: ['../ngx-smart-banner.component.scss'],
}]
}], propDecorators: { solid: [{
type: Input
}] } });
class NgxSmartBannerComponent {
constructor(platform, cookieService) {
this.platform = platform;
this.cookieService = cookieService;
this.onClose = new EventEmitter();
if (this.platform.ANDROID) {
this.modifier = 'android';
}
if (this.platform.IOS) {
this.modifier = 'ios';
}
}
/**
* Gets icon
*/
get icon() {
var _a, _b, _c, _d;
if (this.platform.ANDROID) {
return (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.android;
}
if (this.platform.IOS) {
return (_d = (_c = this.settings) === null || _c === void 0 ? void 0 : _c.icon) === null || _d === void 0 ? void 0 : _d.ios;
}
return null;
}
/**
* Gets button url
*/
get buttonUrl() {
var _a, _b, _c, _d;
if (this.platform.ANDROID) {
return (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.buttonUrl) === null || _b === void 0 ? void 0 : _b.android;
}
if (this.platform.IOS) {
return (_d = (_c = this.settings) === null || _c === void 0 ? void 0 : _c.buttonUrl) === null || _d === void 0 ? void 0 : _d.ios;
}
return '#';
}
/**
* Gets price suffix
*/
get priceSuffix() {
var _a, _b;
if (this.platform.ANDROID) {
return (_a = this.settings.priceSuffix) === null || _a === void 0 ? void 0 : _a.android;
}
if (this.platform.IOS) {
return (_b = this.settings.priceSuffix) === null || _b === void 0 ? void 0 : _b.ios;
}
return '';
}
/**
* Set cookie to reminder value and destroy component
*/
exit() {
this.cookieService.set('smartbanner_closed', '1', this.endDate('exit'));
this.onClose.emit();
this.componentRef.destroy();
}
/**
* Set cookie to hidden value and destroy component
*
* @author Roy Freij <roy@bsbip.com>
*/
view() {
this.cookieService.set('smartbanner_closed', '1', this.endDate('view'));
this.onClose.emit();
this.componentRef.destroy();
}
/**
* Gets end date
*/
endDate(type) {
const date = new Date();
if (!this.settings.daysReminder) {
return null;
}
const timeToLive = type === 'exit'
? this.settings.daysHidden
: this.settings.daysReminder;
date.setDate(date.getDate() + (timeToLive || 0));
return date;
}
/**
* Gets review rating
*
* @author Harry Apperloo <harry@bsbip.com>
*/
get reviewAverage() {
var _a, _b, _c, _d;
if (this.platform.ANDROID) {
return (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.rating) === null || _b === void 0 ? void 0 : _b.android;
}
if (this.platform.IOS) {
return (_d = (_c = this.settings) === null || _c === void 0 ? void 0 : _c.rating) === null || _d === void 0 ? void 0 : _d.ios;
}
return 5;
}
}
NgxSmartBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerComponent, deps: [{ token: i1.Platform }, { token: CookieService }], target: i0.ɵɵFactoryTarget.Component });
NgxSmartBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.2", type: NgxSmartBannerComponent, selector: "nc-ngx-smart-banner", inputs: { settings: "settings", componentRef: "componentRef" }, ngImport: i0, template: "<div class=\"smartbanner smartbanner--{{ modifier }}\">\r\n <button\r\n (click)=\"exit()\"\r\n class=\"smartbanner__exit\"\r\n [attr.aria-label]=\"settings.closeLabel\"\r\n ></button>\r\n <div\r\n class=\"smartbanner__icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + icon + ')' }\"\r\n ></div>\r\n <div class=\"smartbanner__info\">\r\n <div class=\"smartbanner__info--title\">\r\n {{ settings.title }}\r\n </div>\r\n <div class=\"smartbanner__info--author\">\r\n {{ settings.author }}\r\n </div>\r\n <div class=\"smartbanner__info--rating\" *ngIf=\"!settings.hideRating && reviewAverage\">\r\n <app-star\r\n *ngFor=\"let in of [0, 1, 2, 3, 4]; let i = index\"\r\n [solid]=\"reviewAverage <= i\"\r\n ></app-star>\r\n </div>\r\n <div class=\"smartbanner__info--price\">\r\n {{ settings.price }}{{ priceSuffix }}\r\n </div>\r\n </div>\r\n <a\r\n href=\"{{ buttonUrl }}\"\r\n target=\"_blank\"\r\n (click)=\"view()\"\r\n class=\"smartbanner__button\"\r\n rel=\"noopener\"\r\n [attr.aria-label]=\"settings.buttonLabel\"\r\n >\r\n {{ settings.buttonLabel }}\r\n </a>\r\n</div>\r\n", styles: [".smartbanner{box-sizing:border-box;text-shadow:none;position:absolute;top:0;left:0;z-index:99999;padding:0 10px;width:100%;height:84px;display:flex;justify-content:space-between;align-items:center;background:#f3f3f3;font-family:Helvetica,sans,sans-serif}.smartbanner__exit{position:relative;display:block;margin-right:14px;background-color:#f3f3f3;width:12px;height:12px;border:0;text-align:center}.smartbanner__exit:after,.smartbanner__exit:before{position:absolute;top:0;width:1px;height:12px;background:#767676;content:\"\"}.smartbanner__exit:before{transform:rotate(45deg)}.smartbanner__exit:after{transform:rotate(-45deg)}.smartbanner__icon{width:64px;height:64px;border-radius:15px;background-size:64px 64px}.smartbanner__info{margin-left:8px;display:flex;flex-direction:column;justify-content:space-between;width:45%;height:64px;color:#767676}.smartbanner__info--title{font-size:14px;color:#000}.smartbanner__info--rating{display:flex;margin:3px 0}.smartbanner__info--author,.smartbanner__info--price{font-size:12px}.smartbanner__button{display:block;padding:0 10px;min-width:10%;background:#f3f3f3;color:#1474fc;font-size:14px;font-weight:700;text-align:center;text-decoration:none}.smartbanner__button__label{text-align:center}.smartbanner.smartbanner--android{background:#3d3d3d url(\"data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7\")}.smartbanner.smartbanner--android .smartbanner__exit{margin-right:0;width:18px;height:17px;border-radius:14px;background:#1c1e21;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 1px hsla(0,0%,100%,.3);color:#b1b1b3;font-family:ArialRoundedMTBold,Arial;font-size:20px;line-height:17px;text-shadow:0 1px 1px #000}.smartbanner.smartbanner--android .smartbanner__exit:after,.smartbanner.smartbanner--android .smartbanner__exit:before{top:3px;left:8px;width:2px;height:11px;background:#b1b1b3}.smartbanner.smartbanner--android .smartbanner__exit:active,.smartbanner.smartbanner--android .smartbanner__exit:hover{color:#eee}.smartbanner.smartbanner--android .smartbanner__icon{background-color:transparent;box-shadow:none}.smartbanner.smartbanner--android .smartbanner__info{color:#ccc}.smartbanner.smartbanner--android .smartbanner__info--title{color:#fff;font-weight:700}.smartbanner.smartbanner--android .smartbanner__button{color:#fff;background:#3eacc3;padding:5px 10px;border:2px solid #fff;min-width:12%;font-size:14px;font-weight:700}.smartbanner.smartbanner--android .smartbanner__button:active,.smartbanner.smartbanner--android .smartbanner__button:hover{background:none}.smartbanner.smartbanner--android .smartbanner__button__label{display:block;padding:0 10px;background:#42b6c9;background:linear-gradient(180deg,#42b6c9,#39a9bb);box-shadow:none;line-height:24px;text-align:center;text-transform:none}.smartbanner.smartbanner--android .smartbanner__button__label:active,.smartbanner.smartbanner--android .smartbanner__button__label:hover{background:#2ac7e1}.star-rating{font-size:12px;color:#e19620;margin-right:2px}"], components: [{ type: StarComponent, selector: "app-star", inputs: ["solid"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-ngx-smart-banner',
templateUrl: './ngx-smart-banner.component.html',
styleUrls: ['./ngx-smart-banner.component.scss'],
}]
}], ctorParameters: function () { return [{ type: i1.Platform }, { type: CookieService }]; }, propDecorators: { settings: [{
type: Input
}], componentRef: [{
type: Input
}] } });
class NgxSmartBannerModule {
}
NgxSmartBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxSmartBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerModule, declarations: [NgxSmartBannerComponent, StarComponent], imports: [CommonModule, PlatformModule], exports: [NgxSmartBannerComponent] });
NgxSmartBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerModule, imports: [[CommonModule, PlatformModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxSmartBannerComponent, StarComponent],
imports: [CommonModule, PlatformModule],
exports: [NgxSmartBannerComponent],
}]
}] });
var NgxSmartBannerPlatform;
(function (NgxSmartBannerPlatform) {
NgxSmartBannerPlatform["Android"] = "android";
NgxSmartBannerPlatform["IOS"] = "ios";
})(NgxSmartBannerPlatform || (NgxSmartBannerPlatform = {}));
class NgxSmartBannerService {
constructor(platform, componentResolver, platformId, cookieService) {
this.platform = platform;
this.componentResolver = componentResolver;
this.platformId = platformId;
this.cookieService = cookieService;
this.smartBanner = null;
this.onOpen = new EventEmitter();
this.onClose = new EventEmitter();
this.isServer = isPlatformServer(this.platformId);
this.settings = {
title: 'Smart application',
author: 'Smartbanner contributors',
price: 'FREE',
closeLabel: 'Close',
buttonLabel: 'VIEW',
enabledPlatforms: [
NgxSmartBannerPlatform.Android,
NgxSmartBannerPlatform.IOS,
],
viewContainerRef: null,
priceSuffix: {
ios: ' - On the App Store',
android: ' - In Google play',
},
rating: {
ios: 2,
android: 5,
},
hideRating: false,
};
}
/**
* Initializes ngx smart banner service
*
* @params settings
*/
initialize(settings) {
this.settings = Object.assign(Object.assign({}, this.settings), settings);
if (!this.settings.viewContainerRef) {
throw new Error('No view container ref provided');
}
if (this.isServer || this.cookieService.check('smartbanner_closed')) {
return;
}
if (!this.platformEnabled) {
return;
}
if (this.smartBanner === null) {
const componentFactory = this.componentResolver.resolveComponentFactory(NgxSmartBannerComponent);
const componentRef = this.settings.viewContainerRef.createComponent(componentFactory);
this.onOpen.emit();
componentRef.instance.componentRef = componentRef;
this.smartBanner = componentRef.instance;
this.onCloseSubscription$ = this.smartBanner.onClose.subscribe(() => {
this.onClose.emit();
this.onCloseSubscription$.unsubscribe();
});
}
this.smartBanner.settings = this.settings;
}
/**
* Determine if platform is enabled
*/
get platformEnabled() {
var _a, _b;
if (this.platform.ANDROID) {
return !!((_a = this.settings.enabledPlatforms) === null || _a === void 0 ? void 0 : _a.includes(NgxSmartBannerPlatform.Android));
}
if (this.platform.IOS) {
return !!((_b = this.settings.enabledPlatforms) === null || _b === void 0 ? void 0 : _b.includes(NgxSmartBannerPlatform.IOS));
}
return false;
}
}
NgxSmartBannerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerService, deps: [{ token: i1.Platform }, { token: i0.ComponentFactoryResolver }, { token: PLATFORM_ID }, { token: CookieService }], target: i0.ɵɵFactoryTarget.Injectable });
NgxSmartBannerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: NgxSmartBannerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: i1.Platform }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: CookieService }]; } });
/*
* Public API Surface of ngx-smart-banner
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSmartBannerComponent, NgxSmartBannerModule, NgxSmartBannerPlatform, NgxSmartBannerService };
//# sourceMappingURL=netcreaties-ngx-smart-banner.js.map