fixed next/previous buttons on table of contents
This commit is contained in:
parent
ce29dce0a5
commit
fa8ed92718
|
|
@ -99,15 +99,15 @@
|
|||
<div class="col-12">
|
||||
<div class="container stepper-list ml-1">
|
||||
<div class="row" *ngIf="!descriptionInfoValid()">
|
||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
|
||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
|
||||
</div>
|
||||
<div class="row" *ngIf="descriptionInfoValid()">
|
||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
||||
</div>
|
||||
<div class="row toc-pane-container" #boundary>
|
||||
<div #spacer></div>
|
||||
<div class="col-12">
|
||||
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
|
||||
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="reachedBase == false" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,13 +118,13 @@
|
|||
<div class="col-12">
|
||||
<div class="row mt-3 stepper-actions justify-content-center">
|
||||
<div class="col-auto mb-1">
|
||||
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
|
||||
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': reachedBase}" (click)="previousStep()">
|
||||
<span class="material-icons">chevron_left</span>
|
||||
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
|
||||
<div *ngIf="!reachedLast" class="col-auto mb-1">
|
||||
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
|
||||
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
|
||||
<div *ngIf="reachedLast && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
|
||||
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
|
||||
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
|
||||
</button>
|
||||
|
|
@ -151,14 +151,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md form" id="description-editor-form">
|
||||
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
|
||||
<app-description-base-fields-editor-component [hidden]="!reachedBase" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
|
||||
<app-description-form
|
||||
*ngIf="formGroup && formGroup.get('properties')"
|
||||
[propertiesFormGroup]="formGroup.get('properties')"
|
||||
[descriptionId]="formGroup.get('id').value"
|
||||
[descriptionTemplate]="item.descriptionTemplate"
|
||||
[visibilityRulesService]="visibilityRulesService"
|
||||
[hidden]="this.step === 0"
|
||||
[hidden]="reachedBase"
|
||||
[linkToScroll]="linkToScroll"
|
||||
[validationErrorModel]="editorModel.validationErrorModel"
|
||||
[isNew]="isNew || isCopy"
|
||||
|
|
|
|||
|
|
@ -71,7 +71,10 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
|
|||
isFinalized = false;
|
||||
showTocEntriesErrors = false;
|
||||
@ViewChild('table0fContents') table0fContents: TableOfContentsComponent;
|
||||
step: number = 0;
|
||||
|
||||
reachedBase: boolean = true;
|
||||
reachedLast: boolean = false;
|
||||
reachedFirst: boolean = false;
|
||||
|
||||
pageToFieldSetMap: Map<string, DescriptionFieldIndicator[]> = new Map<string, DescriptionFieldIndicator[]>();
|
||||
|
||||
|
|
@ -549,15 +552,19 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
|
|||
public changeStep(selected: ToCEntry = null, execute: boolean = true) {
|
||||
if (execute) {
|
||||
if (selected) {
|
||||
if (this.step == 0) {
|
||||
this.step = 1;
|
||||
}
|
||||
this.reachedBase = false;
|
||||
this.reachedFirst = selected.isFirstEntry;
|
||||
this.reachedLast = selected.isLastEntry;
|
||||
|
||||
const element = document.getElementById(selected.id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
} else {
|
||||
this.step = 0;
|
||||
this.reachedBase = true;
|
||||
this.reachedFirst = false;
|
||||
this.reachedLast = false;
|
||||
|
||||
this.resetScroll();
|
||||
}
|
||||
}
|
||||
|
|
@ -569,38 +576,10 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
|
|||
|
||||
public nextStep() {
|
||||
this.tableOfContentsService.nextClicked();
|
||||
// if (this.step < this.maxStep) {//view is changing
|
||||
// this.step = Math.floor(this.step + 1);
|
||||
// let entry = this.visibleFieldSets[this.step - 1];
|
||||
// const targetElement = document.getElementById(entry.id);
|
||||
// if (targetElement) {
|
||||
// this.table0fContents.onToCentrySelected(entry, false);
|
||||
// this.scroll(entry);
|
||||
// } else {
|
||||
// this.nextStep();
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
public previousStep() {
|
||||
this.tableOfContentsService.nextClicked();
|
||||
|
||||
// if (this.step > 0) {
|
||||
// this.step = Math.ceil(this.step - 1);
|
||||
// if (this.step >= 1) {
|
||||
// let entry = this.visibleFieldSets[this.step - 1];
|
||||
// const targetElement = document.getElementById(entry.id);
|
||||
// if (targetElement) {
|
||||
// this.table0fContents.onToCentrySelected(entry, false);
|
||||
// this.scroll(entry);
|
||||
// } else {
|
||||
// this.previousStep();
|
||||
// }
|
||||
// } else {
|
||||
// this.table0fContents.onToCentrySelected(null, false);
|
||||
// this.resetScroll();
|
||||
// }
|
||||
// }
|
||||
this.tableOfContentsService.previousClicked();
|
||||
}
|
||||
|
||||
private scroll(entry: ToCEntry) {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
|
|||
|
||||
private _tocentrySelected: ToCEntry = null;
|
||||
get tocentrySelected() {
|
||||
return this.hasFocus ? this._tocentrySelected : null;
|
||||
return this._tocentrySelected;
|
||||
// return this.hasFocus ? this._tocentrySelected : null;
|
||||
}
|
||||
set tocentrySelected(value) {
|
||||
this._tocentrySelected = value;
|
||||
|
|
@ -49,37 +50,50 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
|
|||
}
|
||||
|
||||
this.tableOfContentsService.getNextClickedEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
||||
let next = this.tocentrySelected.nextEntry;
|
||||
let next: ToCEntry;
|
||||
|
||||
while (!this._isVisible(next?.id) || next == null) {
|
||||
if (next.isLastEntry) next = null
|
||||
if (!this.tocentrySelected) next = this._getHeadField(this.tocentries[0]);
|
||||
else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
|
||||
next = this.tocentrySelected;
|
||||
while (next?.subEntries && next?.subEntries?.length > 0 && !next?.nextEntry) {
|
||||
next = next?.subEntries[0];
|
||||
}
|
||||
}
|
||||
else next = this.tocentrySelected?.nextEntry;
|
||||
|
||||
else next = next.nextEntry;
|
||||
while (!this._isVisible(next?.id) && !next?.isLastEntry) {
|
||||
next = next?.nextEntry;
|
||||
}
|
||||
|
||||
if (next == null) {
|
||||
next = this.tocentrySelected.nextEntry;
|
||||
next.isLastEntry = true;
|
||||
if (!next || !this._isVisible(next?.id)) {
|
||||
this.onToCentrySelected(null);
|
||||
} else {
|
||||
this.onToCentrySelected(next);
|
||||
}
|
||||
|
||||
this.onToCentrySelected(next);
|
||||
});
|
||||
|
||||
this.tableOfContentsService.getPreviousEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
||||
let previous = this.tocentrySelected.previousEntry;
|
||||
let previous: ToCEntry;
|
||||
|
||||
while (!this._isVisible(previous?.id) || previous == null) {
|
||||
if (previous.isFirstEntry) previous = null
|
||||
if (!this.tocentrySelected) previous = this._getHeadField(this.tocentries[0]);
|
||||
else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
|
||||
previous = this.tocentrySelected;
|
||||
while (previous?.subEntries && previous?.subEntries?.length > 0 && !previous?.previousEntry) {
|
||||
previous = previous?.subEntries[0];
|
||||
}
|
||||
previous = previous.previousEntry;
|
||||
}
|
||||
else previous = this.tocentrySelected?.previousEntry;
|
||||
|
||||
else previous = previous.previousEntry;
|
||||
while (!this._isVisible(previous?.id) && !previous?.isFirstEntry) {
|
||||
previous = previous.previousEntry;
|
||||
}
|
||||
|
||||
if (previous == null) {
|
||||
previous = this.tocentrySelected.previousEntry;
|
||||
previous.isFirstEntry = true;
|
||||
if (!previous || !this._isVisible(previous?.id)) {
|
||||
this.onToCentrySelected(null);
|
||||
} else {
|
||||
this.onToCentrySelected(previous);
|
||||
}
|
||||
|
||||
this.onToCentrySelected(previous);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +146,6 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
|
|||
).subscribe(x => {
|
||||
if (x.isIntersecting) {
|
||||
const target_id = x.target.id;
|
||||
console.log(target_id);
|
||||
if (this._isVisible(target_id)) {
|
||||
this.tocentrySelected = TableOfContentsComponent._findTocEntryById(target_id, this.tocentries);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue