openaire-library/utils/modal/alert.ts

248 lines
7.2 KiB
TypeScript
Raw Normal View History

import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input, OnDestroy,
OnInit,
Output,
ViewChild,
ViewEncapsulation
} from '@angular/core';
declare var UIkit: any;
@Component({
selector: 'modal-alert',
template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #modal-container">
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
<div class="uk-modal-dialog">
2022-07-04 10:32:24 +02:00
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div [class.uk-invisible]="!alertHeader">
<h6 class="uk-margin-remove">{{alertTitle}}</h6>
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
</div>
2022-07-04 10:32:24 +02:00
<button class="uk-close uk-icon uk-margin-left" (click)="cancel()">
<icon name="close" ratio="1.4"></icon>
</button>
</div>
<div #bodyElement class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content>
</div>
<div *ngIf="(choice || okButton || cancelButton) && alertFooter" class="uk-modal-footer">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<label *ngIf="choice" class="uk-width-expand">
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
<input type="checkbox" [(ngModel)]="select">
<span class="uk-margin-small-left">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-auto':'uk-width-1-1'">
<div class="uk-width-1-1" [ngClass]="(previousButton && (cancelButton || okButton)) ? 'uk-flex uk-flex-between uk-grid' : ''">
<div *ngIf="previousButton" class="uk-flex-left">
<button class="uk-button uk-button-default uk-margin-small-left"
(click)="previous()">{{previousButtonText}}</button>
</div>
<div class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button uk-button-primary" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span>
<span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button>
</span>
</div>
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
</div>
</div>
</div>
</div>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
/**
* API to an open alert window.
*/
export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
private static MODAL_COUNTER: number = 0;
id: string = "modal";
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
@Input() classTitle: string = "uk-background-primary-opacity";
@Input() classBody: string = "";
@Input() large: boolean = false;
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
@Input() overflowBody: boolean = true;
@ViewChild("bodyElement") bodyElement: ElementRef;
/**
* Caption for the title.
*/
public alertTitle: string;
/**
* Describes if the alert contains Ok Button.
* The default Ok button will close the alert and emit the callback.
* Defaults to true.
*/
public okButton: boolean = true;
/**
* Caption for the OK button.
* Default: Ok
*/
public okButtonText: string = 'OK';
/**
* Describes if the alert contains cancel Button.
* The default Cancelbutton will close the alert.
* Defaults to true.
*/
public cancelButton: boolean = true;
/**
* Caption for the Cancel button.
* Default: Cancel
*/
public cancelButtonText: string = 'Cancel';
/**
* if the alertMessage is true it will show the contentString inside alert body.
*/
/**
* Describes if the alert contains Previous Button.
* The default Previous button will emit the callback.
* Defaults to false.
*/
public previousButton: boolean = false;
/**
* Caption for the Previous button.
* Default: Previous
*/
public previousButtonText: string = 'Previous';
public alertMessage: boolean = true;
/**
* Some message/content can be set in message which will be shown in alert body.
*/
public message: string;
/**
* if the value is true alert footer will be visible or else it will be hidden.
*/
public alertFooter: boolean = true;
/**
* shows alert header if the value is true.
*/
public alertHeader: boolean = true;
/**
* if the value is true ok button align on the left, else on the right
*/
public okButtonLeft: boolean = true;
/**
* if the value is true ok button is disabled
*/
@Input()
public okDisabled: boolean = false;
/**
* If the value is true, a checkbox option will be appeared on the right side of footer
*/
@Input()
public choice: boolean = false;
/**
* if the value is true then on ok clicked, modal will stay open.
*/
public stayOpen: boolean = false;
/**
* Value will be emitted if @choice is true
*/
public select: boolean = true;
/**
* Emitted when ok button was clicked
* or when Ok method is called.
*/
@Output() public alertOutput: EventEmitter<any> = new EventEmitter();
/**
* Emitted when cancel button was clicked
* or when cancel method is called.
*/
@Output() public cancelOutput: EventEmitter<any> = new EventEmitter();
@ViewChild('element') element: ElementRef;
private subscriptions: any[] = [];
constructor() {
}
ngOnInit() {
AlertModal.MODAL_COUNTER++;
this.id = 'modal-' + AlertModal.MODAL_COUNTER;
}
ngAfterViewInit() {
if(this.element && typeof document !== "undefined") {
this.subscriptions.push(UIkit.util.on(document, 'hide', '#' + this.id, () => {
this.cancelOutput.emit(true);
}));
}
}
ngOnDestroy() {
if(typeof document !== "undefined") {
const element = document.getElementById("modal-container");
for (let i = element.childNodes.length - 1; i >= 0; --i) {
let child: ChildNode = element.childNodes[i];
if (child['id'] == this.id) {
child.remove();
}
}
}
this.subscriptions.forEach(subscription => {
if(subscription instanceof Function) {
subscription();
}
});
}
/**
* Opens an alert window creating backdrop.
*/
open() {
2023-05-11 12:04:09 +02:00
if(typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).show();
if(this.overflowBody) {
this.bodyElement.nativeElement.scrollTo(0, 0);
}
2023-05-11 12:04:09 +02:00
}
}
/**
* ok method closes the modal and emits modalOutput.
*/
ok() {
2023-05-11 12:04:09 +02:00
if (!this.stayOpen && typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).hide();
}
if (!this.choice) {
this.alertOutput.emit(true);
} else {
this.alertOutput.emit({
value: true,
choice: this.select
});
}
}
/**
* cancel method closes the modal.
*/
cancel() {
2023-05-11 12:04:09 +02:00
if(typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).hide();
}
}
previous() {
this.cancelOutput.emit();
}
get bodyHeight() {
return (this.bodyElement) ? this.bodyElement.nativeElement.offsetHeight : 0;
}
}