File
Implements
Methods
|
closePopover
|
closePopover(continueClicked: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| continueClicked |
boolean
|
No
|
|
|
appName
|
Type : string
|
Default value : ''
|
|
|
|
isPopoverPresent
|
Default value : false
|
|
|
import {Component, OnInit} from '@angular/core';
import {NavParams, PopoverController} from '@ionic/angular';
import {CommonUtilService} from '@app/services/common-util.service';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import {Environment, ImpressionSubtype, ImpressionType, InteractSubtype, InteractType, PageId} from '@app/services/telemetry-constants';
@Component({
selector: 'app-sb-tutorial-popup',
templateUrl: './sb-tutorial-popup.component.html',
styleUrls: ['./sb-tutorial-popup.component.scss']
})
export class SbTutorialPopupComponent implements OnInit {
appName = '';
isPopoverPresent = false;
explainVideos;
quesBanks;
interactiveMaterial;
constructor(
private popoverCtrl: PopoverController,
private navParams: NavParams,
private commonUtilService: CommonUtilService,
private telemetryGeneratorService: TelemetryGeneratorService
) {
this.explainVideos = '<strong class="bold">' + this.commonUtilService.translateMessage('EXP_VIDEOS') + '</strong>';
this.quesBanks = '<strong class="bold">' + this.commonUtilService.translateMessage('QUES_BANKS') + '</strong>';
this.interactiveMaterial = '<strong class="bold">' + this.commonUtilService.translateMessage('INTERACTIVE_MATERIAL') + '</strong>';
}
ngOnInit() {
this.appName = this.navParams.get('appLabel');
this.telemetryGeneratorService.generateImpressionTelemetry(
ImpressionType.VIEW,
ImpressionSubtype.TUTORIAL_WALKTHROUGH,
PageId.LIBRARY,
Environment.HOME
);
setTimeout(() => {
this.isPopoverPresent = true;
}, 2000);
}
closePopover(continueClicked: boolean) {
this.popoverCtrl.dismiss();
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
continueClicked ? InteractSubtype.TUTORIAL_CONTINUE_CLICKED : InteractSubtype.CLOSE_CLICKED,
Environment.HOME,
PageId.APP_TUTORIAL_POPUP
);
}
}
<div id="main-content">
<img class="close-icon" src="assets/imgs/close_tutorial.svg" alt="close-icon" (click)="closePopover(false)">
<div class="tutorial-content">
<p id="heading-text ion-text-center ion-align-items-center">
{{'TUTORIAL_HEADING' | translate}}
</p>
<img style="margin-top: 2em; margin-bottom: 2em" src="./assets/imgs/tutorial.svg" alt="tutorial">
<p id="details-text"
[innerHTML]="'DETAIL_TUTORIAL' | translate: {'%appName': appName, '%explainVideos': explainVideos, '%quesBanks': quesBanks, '%interactiveMaterial': interactiveMaterial}">
</p>
<div style="display: flex; flex-grow: 1"></div>
<button class="sb-btn sb-btn-md sb-btn-primary PR35 W100 ellipsis text-uppercase btn-block continue"
(click)="closePopover(true)">
<ion-grid class="ion-no-padding">
<ion-row class="ion-justify-content-between">
<ion-col class="ion-no-padding">
</ion-col>
<ion-col class="ion-no-padding">{{ 'TUTORIAL_BUTTON' | translate }}</ion-col>
<ion-col class="ion-no-padding text-align-end ion-align-self-center">
<img class="arrow-icon" src="assets/imgs/ic_back.svg" alt="arrow-icon"
[class.animate]="isPopoverPresent">
</ion-col>
</ion-row>
</ion-grid>
</button>
</div>
</div>
@import "src/assets/styles/_variables.scss";
img.arrow-icon{
display: inline-block;
width: 1.375rem;
margin-top: -3px;
&.animate {
position: relative;
animation: dropDown 5s linear infinite;
animation-duration: 0.9s;
}
}
@keyframes dropDown {
0% {right: 0;}
50% {right: 10px;}
100% {right: 0;}
}
.tutorial-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.close-icon {
display: inline-block;
float: right;
position: absolute;
top: -0.625rem;
right: -0.625rem;
}
#details-text {
font-size: $font-size-base;
line-height: 1.188rem;
text-align: center;
color: map-get($colors, primary_black);
}
#heading-text {
margin-top: 1rem;
color: map-get($colors, primary_black);
font-weight: bold;
padding-left: 5em;
padding-right: 4em;
}
#main-content {
height: calc(100vh - 52px);
padding: 16px;
overflow-y: scroll;
}
Legend
Html element with directive