Guided tour comments added
This commit is contained in:
parent
8e473d1a9f
commit
370360872a
|
@ -1,12 +1,17 @@
|
|||
<!-- custom add: isStepUnique -->
|
||||
<div *ngIf="currentTourStep && !isOrbShowing">
|
||||
<div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
|
||||
<div class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft"
|
||||
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight" [style.width.px]="overlayWidth">
|
||||
<div class="guided-tour-spotlight-overlay"
|
||||
[style.top.px]="overlayTop"
|
||||
[style.left.px]="overlayLeft"
|
||||
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight"
|
||||
[style.width.px]="overlayWidth">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="currentTourStep && !isOrbShowing">
|
||||
<div #tourStep *ngIf="currentTourStep" class="tour-step tour-{{ currentTourStep.orientation }}" [ngClass]="{
|
||||
'page-tour-step': !currentTourStep.selector }"
|
||||
<div #tourStep *ngIf="currentTourStep"
|
||||
class="tour-step tour-{{ currentTourStep.orientation }}"
|
||||
[ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
|
||||
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
|
||||
[style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"
|
||||
[style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"
|
||||
|
@ -17,6 +22,9 @@
|
|||
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
|
||||
{{currentTourStep.title}}
|
||||
</h3>
|
||||
<h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">
|
||||
{{ currentTourStep.title }}
|
||||
</h2>
|
||||
<div class="tour-buttons">
|
||||
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
|
||||
(click)="guidedTourService.nextStep()">
|
||||
|
|
|
@ -14,7 +14,7 @@ ngx-guided-tour {
|
|||
.guided-tour-spotlight-overlay {
|
||||
position: fixed;
|
||||
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5);
|
||||
border-radius: 44px;
|
||||
border-radius: 44px; /*custom add*/
|
||||
}
|
||||
|
||||
.tour-orb {
|
||||
|
@ -56,7 +56,8 @@ ngx-guided-tour {
|
|||
.tour-step {
|
||||
position: fixed;
|
||||
&.page-tour-step {
|
||||
max-width: 1043px;
|
||||
// max-width: 400px;
|
||||
max-width: 1043px; /*custom add*/
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
@ -85,14 +86,16 @@ ngx-guided-tour {
|
|||
}
|
||||
|
||||
&.tour-bottom , &.tour-top {
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
.tour-arrow::before {
|
||||
// transform: translateX(-50%);
|
||||
// left: 50%;
|
||||
transform: scale(2);
|
||||
left: 494px;
|
||||
/*custom add*/
|
||||
transform: scale(2);
|
||||
left: 494px;
|
||||
}
|
||||
/*custom add*/
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.tour-bottom-right, &.tour-top-right {
|
||||
|
@ -121,29 +124,36 @@ ngx-guided-tour {
|
|||
}
|
||||
|
||||
&.tour-right {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px; /*custom add*/
|
||||
.tour-arrow::before {
|
||||
transform: scale(1.5);
|
||||
transform: scale(1.5); /*custom add*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: -15px;
|
||||
margin-top: -15px; /*custom add*/
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tour-block {
|
||||
padding: 15px 25px;
|
||||
// padding: 15px 25px;
|
||||
|
||||
/*custom add*/
|
||||
padding: 15px 25px 15px 0px;
|
||||
max-height: 348px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tour-title {
|
||||
// font-weight: bold !important;
|
||||
// padding-bottom: 20px;
|
||||
|
||||
/*custom add*/
|
||||
font-weight: lighter !important;
|
||||
font-size: 16px !important;
|
||||
padding: 28px 45px 0px 65px;
|
||||
padding: 28px 74px 0px 65px;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
color: #212121;
|
||||
|
@ -161,7 +171,7 @@ ngx-guided-tour {
|
|||
|
||||
.tour-buttons {
|
||||
overflow: hidden; // clearfix
|
||||
padding: 10px 45px 30px 65px;
|
||||
padding: 10px 70px 30px 65px; /*custom add*/
|
||||
|
||||
button.link-button {
|
||||
padding-left: 0;
|
||||
|
@ -182,8 +192,11 @@ ngx-guided-tour {
|
|||
}
|
||||
|
||||
button.skip-button.link-button {
|
||||
padding: 0;
|
||||
// padding-left: 0;
|
||||
border-left: 0;
|
||||
|
||||
/*custom add*/
|
||||
padding: 0;
|
||||
float: right;
|
||||
width: 133px;
|
||||
height: 40px;
|
||||
|
@ -192,20 +205,23 @@ ngx-guided-tour {
|
|||
color: #129D99;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
// border-radius: 1px;
|
||||
// float: right;
|
||||
border: none;
|
||||
outline: none;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
|
||||
/*custom add*/
|
||||
float: left;
|
||||
padding: 10px 0px;;
|
||||
width: 101px;
|
||||
background: #129D99 0% 0% no-repeat padding-box;
|
||||
}
|
||||
|
||||
/*custom add*/
|
||||
button.skip-button.link-button, .next-button {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
@ -216,13 +232,14 @@ ngx-guided-tour {
|
|||
}
|
||||
}
|
||||
|
||||
/*custom add*/
|
||||
.argos-present-img {
|
||||
background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
|
||||
min-width: 176px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
top: 110px;
|
||||
left: -65px;
|
||||
left: -85px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,7 +17,6 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
@Input() public minimalTourStepWidth?= 500;
|
||||
@Input() public skipText?= 'Leave Tour';
|
||||
@Input() public nextText?= 'Got it!';
|
||||
@Input() public progressIndicator?: TemplateRef<any> = undefined;
|
||||
@ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
|
||||
public highlightPadding = 4;
|
||||
public currentTourStep: TourStep = null;
|
||||
|
@ -30,7 +29,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
constructor(
|
||||
public guidedTourService: GuidedTourService,
|
||||
private windowRef: WindowRefService,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private changeDetectorRef: ChangeDetectorRef, /*custom add*/
|
||||
@Inject(DOCUMENT) private dom: any
|
||||
) { }
|
||||
|
||||
|
@ -63,7 +62,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
if (step && step.selector) {
|
||||
const selectedElement = this.dom.querySelector(step.selector);
|
||||
if (selectedElement) {
|
||||
this.handleOrb();
|
||||
this.handleOrb(); /*custom add*/
|
||||
this.scrollToAndSetElement();
|
||||
} else {
|
||||
this.selectedElementRect = null;
|
||||
|
@ -86,6 +85,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
/*custom add*/
|
||||
ngAfterContentChecked() {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
@ -337,6 +337,9 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
|
||||
public get overlayTop(): number {
|
||||
if (this.selectedElementRect) {
|
||||
// return this.selectedElementRect.top - this.getHighlightPadding();
|
||||
|
||||
/*custom add*/
|
||||
let customTopOffset = 0;
|
||||
if (this.currentTourStep.customTopOffset) {
|
||||
customTopOffset = this.currentTourStep.customTopOffset;
|
||||
|
|
|
@ -20,9 +20,10 @@ export interface TourStep {
|
|||
useHighlightPadding?: boolean;
|
||||
/** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
|
||||
highlightPadding?: number;
|
||||
/** True if the tour has no other step */
|
||||
|
||||
/** CUSTOM ADD: True if the tour has no other step */
|
||||
isStepUnique?: boolean;
|
||||
/** Adds offset in pixels to the calculated overlayTop */
|
||||
/** CUSTOM ADD: Adds offset in pixels to the calculated overlayTop */
|
||||
customTopOffset?: number;
|
||||
}
|
||||
|
||||
|
|
|
@ -77,33 +77,33 @@ export class GuidedTourService {
|
|||
}
|
||||
}
|
||||
|
||||
// public backStep(): void {
|
||||
// if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
|
||||
// this._currentTour.steps[this._currentTourStepIndex].closeAction();
|
||||
// }
|
||||
// if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
|
||||
// this._currentTourStepIndex--;
|
||||
// this._setFirstAndLast();
|
||||
// if (this._currentTour.steps[this._currentTourStepIndex].action) {
|
||||
// this._currentTour.steps[this._currentTourStepIndex].action();
|
||||
// setTimeout(() => {
|
||||
// if (this._checkSelectorValidity()) {
|
||||
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
// } else {
|
||||
// this.backStep();
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// if (this._checkSelectorValidity()) {
|
||||
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
// } else {
|
||||
// this.backStep();
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// this.resetTour();
|
||||
// }
|
||||
// }
|
||||
public backStep(): void {
|
||||
if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
|
||||
this._currentTour.steps[this._currentTourStepIndex].closeAction();
|
||||
}
|
||||
if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
|
||||
this._currentTourStepIndex--;
|
||||
this._setFirstAndLast();
|
||||
if (this._currentTour.steps[this._currentTourStepIndex].action) {
|
||||
this._currentTour.steps[this._currentTourStepIndex].action();
|
||||
setTimeout(() => {
|
||||
if (this._checkSelectorValidity()) {
|
||||
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
} else {
|
||||
this.backStep();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this._checkSelectorValidity()) {
|
||||
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
} else {
|
||||
this.backStep();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.resetTour();
|
||||
}
|
||||
}
|
||||
|
||||
public skipTour(): void {
|
||||
if (this._currentTour.skipCallback) {
|
||||
|
|
Loading…
Reference in New Issue