telemachy/src/component/telemachy.component.html at 19b60e4ee03792556f2114e06ed8dc570433c06a · code-orange/telemachy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div (window:keyup)="onKey($event)"></div>
<ng-container *ngIf="step">
	<ng-container *ngIf="isYoutube(step)">
		<div class="overlay" [ngStyle]="{top: 0, left:0, width: '100%', height: '100vh', position: 'fixed'}"></div>
		<iframe width="853" height="480" [src]="getVideoUrl()" frameborder="0" allowfullscreen class="video"></iframe>
		<div class="ytpopup">
			<div class="content">
				<div class="controls flex-container">
					<div class="step-button">
						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
					</div>
					<span class="step-counter">({{progress}}/{{total}})</span>
					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
				</div>
			</div>
		</div>
	</ng-container>
	<ng-container *ngIf="isHtml(step)">
		<div class="overlay" [ngStyle]="{top: 0, left:0, width: '100%', height: documentHeight, position: 'fixed'}"></div>
		<div class="popup">
			<div class="content">
				<div [innerHtml]="asHtmlTourStep(step).body" class="body"></div>
				<hr class="horizontal-line"/>
				<div class="controls flex-container">
					<div class="step-button">
						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
					</div>
					<span class="step-counter">({{progress}}/{{total}})</span>
					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
				</div>
			</div>
		</div>
	</ng-container>
	<ng-container *ngIf="isElement(step)">
		<div class="overlay" [ngStyle]="{left: 0, top: 0, width: asElementTourStep(step).documentWidth, height: asElementTourStep(step).top}"></div>
		<div class="overlay" [ngStyle]="{left: 0, top: asElementTourStep(step).top, width: asElementTourStep(step).left, height: asElementTourStep(step).fromTop}"></div>
		<div class="overlay" [ngStyle]="{left: asElementTourStep(step).left, top: asElementTourStep(step).bottom, width: asElementTourStep(step).fromLeft, height: asElementTourStep(step).toBottom}"></div>
		<div class="overlay" [ngStyle]="{left: asElementTourStep(step).right, top: asElementTourStep(step).top, width: asElementTourStep(step).toRight, height: asElementTourStep(step).height}"></div>

		<div class="explanation" [ngStyle]="{left: asElementTourStep(step).leftContent, top: asElementTourStep(step).bottom, width: (asElementTourStep(step).domElement.getBoundingClientRect().width - 2) + 'px'}">
			<div class="content">
				<div [innerHtml]="asElementTourStep(step).body"></div>
				<hr class="horizontal-line"/>
				<div class="controls flex-container">
					<div class="step-button">
						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
					</div>
					<span class="step-counter">({{progress}}/{{total}})</span>
					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
				</div>
			</div>
		</div>
	</ng-container>
</ng-container>