File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(resourceService: ResourceService, _deviceDetectorService: DeviceDetectorService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| resourceService |
ResourceService
|
No
|
| _deviceDetectorService |
DeviceDetectorService
|
No
|
|
|
showModal
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
hideCompatibilityModel
|
hideCompatibilityModel()
|
|
|
|
|
|
modalHandler
|
modalHandler()
|
|
|
|
|
|
openCompatibilityModel
|
openCompatibilityModel()
|
|
|
|
|
|
showCompatibilityModal
|
showCompatibilityModal()
|
|
|
|
|
|
hideFooter
|
Default value : true
|
|
|
|
isChrome
|
Default value : false
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { ResourceService } from '../../services/index';
@Component({
selector: 'app-browser-compatibility',
templateUrl: './browser-compatibility.component.html',
styleUrls: ['./browser-compatibility.component.scss']
})
export class BrowserCompatibilityComponent implements OnInit {
@ViewChild('modal') modal;
@Input() showModal = false;
browserCompatible: boolean;
isChrome = false;
showBrowserMsg: boolean;
deviceInfo: any;
hideFooter = true;
constructor(public resourceService: ResourceService, private _deviceDetectorService: DeviceDetectorService) {
this.resourceService = resourceService;
}
ngOnInit() {
this.showCompatibilityModal();
}
openCompatibilityModel() {
this.browserCompatible = true;
}
hideCompatibilityModel() {
this.browserCompatible = false;
localStorage.setItem('BrowserIncompatibleModel', 'shown');
}
showCompatibilityModal() {
this.deviceInfo = this._deviceDetectorService.getDeviceInfo();
const browser = (this.deviceInfo.browser).toLowerCase();
if ((browser !== 'chrome' && browser !== 'firefox') || (this.showModal && browser === 'firefox')) {
this.modalHandler();
}
}
modalHandler() {
this.showBrowserMsg = true;
if ((localStorage.getItem('BrowserIncompatibleModel') !== 'shown')) {
this.browserCompatible = true;
}
}
}
<app-modal-wrapper *ngIf="browserCompatible" [config]="{disableClose: true, size: 'normal'}" (dismiss)="alert($event)"
#modal>
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible normal">
<!--Header-->
<div class="sb-modal-header">
{{resourceService.frmelmnts.lbl.improveYourExperience}}
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content">
<div class="ui center aligned">
<div class="ui grid">
<div class="twelve wide center aligned column">
<div class="content">
<div class="secondary-text-color-sunbird mb-10">
{{resourceService.frmelmnts.lbl.incompatibleBrowser}}</div>
<div class="secondary-text-color-sunbird mb-30">
{{resourceService.frmelmnts.lbl.browserSuggestions}}</div>
<div class="ui tiny image">
<img src="{{'assets/images/chrome.png' | cdnprefixurl}}">
</div>
<div class="ui header mb-0 mt-10">Chrome</div>
</div>
</div>
</div>
</div>
</div>
<!--Content-->
<!--Actions-->
<div class="sb-modal-actions">
<a class="sb-btn sb-btn-normal sb-btn-primary" target="_blank"
href="https://www.google.com/chrome/">
{{resourceService.frmelmnts.btn.download}}
</a>
<button class="sb-btn sb-btn-normal sb-btn-outline-primary" tabindex="0"
(click)="hideCompatibilityModel()">
{{resourceService.frmelmnts.btn.ok}}
</button>
</div>
<!--/Actions-->
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
<div class="twelve wide column" *ngIf="showBrowserMsg">
<div class="ui basic segment" *ngIf="hideFooter">
<div class="ui grid">
<div class="twelve wide column center aligned">
<div class="ui large label">
<i class="exclamation triangle icon"></i>
<span>
{{resourceService.frmelmnts.lbl.incompatibleBrowser}}
{{resourceService.frmelmnts.lbl.forDetails}}
<a class="cursor-pointer mr-10" tabindex="0"
(click)="openCompatibilityModel()">{{resourceService.frmelmnts.lbl.clickHere}}</a>
</span>
<i class="close icon closeBtn-dial-code cursor-pointer" tabindex="0"
(click)="hideFooter = false"></i>
</div>
</div>
</div>
</div>
</div>
.ui.segment {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: var(--white);
z-index: 9999;
}
Legend
Html element with directive