MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fs-modal changes

This commit is contained in:
Alex Martzios 2022-05-30 17:56:47 +03:00
parent 9f57b1c459
commit 0a46aea1e7
3 changed files with 77 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
deposit/depositFirstPage.component.ts
View File

@ -30,7 +30,7 @@ import {FullScreenModalComponent} from '../utils/modal/full-screen-modal/full-sc
Find the appropriate repository to deposit your research. Find the appropriate repository to deposit your research.
</div> </div>
<div class="uk-margin-medium-top" uk-scrollspy-class> <div class="uk-margin-medium-top" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" href="#modal-full" uk-toggle>Get Started</a> <a class="uk-button uk-button-primary uk-text-uppercase" (click)="openFsModal()">Get Started</a>
</div> </div>
</div> </div>
</div> </div>
@ -99,62 +99,63 @@ import {FullScreenModalComponent} from '../utils/modal/full-screen-modal/full-sc
</div> </div>
</div> </div>
</div> </div>
<fs-modal> </div>
<div class="uk-height-1-1 uk-padding uk-flex uk-flex-column uk-flex-middle uk-flex-center"> </div>
<div class="title uk-h2 uk-margin-large-bottom"> <fs-modal #fsModal>
Find the appropriate repository. <div class="uk-height-1-1 uk-padding uk-flex uk-flex-column uk-flex-middle uk-flex-center">
</div> <div class="title uk-h2 uk-margin-large-bottom">
<div class="cards uk-grid uk-grid-large" uk-height-match="target: .uk-card-body, .uk-tile-primary;"> Find the appropriate repository.
<div> </div>
<div class="uk-card uk-card-default uk-text-center" style="width: 360px;"> <div class="cards uk-grid uk-grid-large" uk-height-match="target: .uk-card-body, .uk-tile-primary;">
<div class="uk-card-body uk-text-small"> <div>
<img src="assets/common-assets/common/Logo_Horizontal.png" alt="OpenAIRE logo" class="uk-width-small uk-margin-bottom"> <div class="uk-card uk-card-default uk-text-center" style="width: 360px;">
<div> <div class="uk-card-body uk-text-small">
Search and browse for <span class="uk-text-bold">OpenAIRE compliant repositories</span> registered in OpenDOAR and re3data. <img src="assets/common-assets/common/Logo_Horizontal.png" alt="OpenAIRE logo" class="uk-width-small uk-margin-bottom">
</div> <div>
</div> Search and browse for <span class="uk-text-bold">OpenAIRE compliant repositories</span> registered in OpenDOAR and re3data.
<a href="/participate/deposit/search" type="submit"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
<span>OpenAIRE compliant repositories</span>
</span>
</button>
</a>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-text-center" style="width: 360px;">
<div class="uk-card-body uk-text-small">
<img src="assets/common-assets/common/logo-zenodo.png" alt="Zenodo logo" class="uk-width-small uk-margin-bottom">
<div>
Deposit your research in <br><span class="uk-text-bold">Zenodo repository</span>
</div>
</div>
<a *ngIf="zenodoInformation.shareInZenodoUrl" type="submit"
[queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)"
routerLinkActive="router-link-active" [routerLink]="zenodoInformation.shareInZenodoUrl"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
Use related Zenodo communities
</span>
</button>
</a>
<a *ngIf="!zenodoInformation.shareInZenodoUrl" target="_blank" type="submit" href="{{zenodoInformation.url}}"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
Zenodo Repository
</span>
</button>
</a>
</div> </div>
</div> </div>
<a routerLink="/participate/deposit/search" type="submit" (click)="closeFsModal()"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
<span>OpenAIRE compliant repositories</span>
</span>
</button>
</a>
</div> </div>
</div> </div>
</fs-modal> <div>
</div> <div class="uk-card uk-card-default uk-text-center" style="width: 360px;">
<div class="uk-card-body uk-text-small">
<img src="assets/common-assets/common/logo-zenodo.png" alt="Zenodo logo" class="uk-width-small uk-margin-bottom">
<div>
Deposit your research in <br><span class="uk-text-bold">Zenodo repository</span>
</div>
</div>
<a *ngIf="zenodoInformation.shareInZenodoUrl" type="submit"
[queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)"
routerLinkActive="router-link-active" [routerLink]="zenodoInformation.shareInZenodoUrl"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
Use related Zenodo communities
</span>
</button>
</a>
<a *ngIf="!zenodoInformation.shareInZenodoUrl" target="_blank" type="submit" href="{{zenodoInformation.url}}"
class="uk-card-footer uk-padding-small uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
<button class="uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
Zenodo Repository
</span>
</button>
</a>
</div>
</div>
</div>
</div>
</fs-modal>
`, `,
}) })
@ -255,7 +256,11 @@ export class DepositFirstPageComponent {
this._meta.updateTag({content:url},"property='og:url'"); this._meta.updateTag({content:url},"property='og:url'");
} }
// public openFsModal() { public openFsModal() {
// this.fsModal.open(); this.fsModal.open();
// } }
public closeFsModal() {
this.fsModal.close();
}
} }

9
deposit/searchDataprovidersToDeposit.component.ts
View File

@ -30,7 +30,7 @@ import {properties} from "../../../environments/environment";
<div class="uk-width-large"> <div class="uk-width-large">
<div search-input [(value)]="keyword" placeholder="Search by name, description, subject..." (searchEmitter)="keywordChanged()"></div> <div search-input [(value)]="keyword" placeholder="Search by name, description, subject..." (searchEmitter)="keywordChanged()"></div>
<div class="uk-margin-top uk-text-center"> <div class="uk-margin-top uk-text-center">
<a href="{{zenodoInformation.url}}" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"> <a [href]="zenodoInformation.url" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<span>Zenodo Repository</span><span class="custom-external custom-icon space"></span> <span>Zenodo Repository</span><span class="custom-external custom-icon space"></span>
</span> </span>
@ -98,6 +98,13 @@ export class SearchDataprovidersToDepositComponent {
this.parameters = Object.assign({}, params); this.parameters = Object.assign({}, params);
this.keyword = params["fv0"]?params["fv0"]:''; this.keyword = params["fv0"]?params["fv0"]:'';
}); });
if (!this.zenodoInformation) {
this.zenodoInformation = new ZenodoInformationClass();
}
if (!this.zenodoInformation.shareInZenodoUrl) {
this.zenodoInformation.url = this.properties.zenodo;
}
// this.searchPage.refineFields = this.refineFields; // this.searchPage.refineFields = this.refineFields;
// this.searchPage.fieldIdsMap = this.fieldIdsMap; // this.searchPage.fieldIdsMap = this.fieldIdsMap;
// this.searchPage.keywordFields = this.keywordFields; // this.searchPage.keywordFields = this.keywordFields;

23
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -1,13 +1,14 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core"; import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs'; import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators"; import {delay} from "rxjs/operators";
declare var UIkit;
@Component({ @Component({
selector: 'fs-modal', selector: 'fs-modal',
template: ` template: `
<div id="modal-full" class="uk-modal-full" uk-modal> <div #modal_full class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog uk-height-1-1"> <div class="uk-modal-dialog uk-height-1-1">
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button> <button class="uk-modal-close-full uk-close-large uk-margin-medium-top uk-margin-medium-right" type="button" uk-close></button>
<div class="uk-height-1-1"> <div class="uk-height-1-1">
<div class="header"> <div class="header">
<ng-content select="[actions]"></ng-content> <ng-content select="[actions]"></ng-content>
@ -55,7 +56,7 @@ export class FullScreenModalComponent implements OnInit {
@Output() @Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
opened: boolean = false; opened: boolean = false;
private readonly element: any; @ViewChild('modal_full') element: ElementRef;
private subscriptions: any[] = []; private subscriptions: any[] = [];
private clickedInside: boolean; private clickedInside: boolean;
@ -65,7 +66,6 @@ export class FullScreenModalComponent implements OnInit {
ngOnInit() { ngOnInit() {
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
document.body.appendChild(this.element);
this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => { this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
if(event.keyCode === 27) { if(event.keyCode === 27) {
this.close(); this.close();
@ -75,7 +75,6 @@ export class FullScreenModalComponent implements OnInit {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.element.remove();
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) { if (subscription instanceof Subscription) {
subscription.unsubscribe(); subscription.unsubscribe();
@ -84,18 +83,12 @@ export class FullScreenModalComponent implements OnInit {
} }
open() { open() {
if (typeof document !== "undefined") { UIkit.modal(this.element.nativeElement).show();
this.opened = true;
document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
}
} }
close() { close() {
if (typeof document !== "undefined" && this.opened) { UIkit.modal(this.element.nativeElement).hide();
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open'); this.cancelEmitter.emit();
this.opened = false;
this.cancelEmitter.emit();
}
} }
ok() { ok() {