hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-08 10:34:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile view: adding select element for navigation

Browse Source
This commit is contained in:
lhenze
2019-10-01 12:12:50 -04:00
parent 39aa284310
commit d4d4a6121e
2 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html
View File

@@ -1,8 +1,45 @@
<h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2> <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection" > <nav class="comcol-browse mb-4" aria-label="Browse Community or Collection" >
<div class="list-group list-group-horizontal"> <div class="d-none d-sm-block">
<a *ngIf="contentType=='collection'" [routerLink]="['/collections/' + id ]" class="list-group-item" routerLinkActive="active">{{'collection.page.browse.recent.head' | translate}}</a>
<a *ngIf="contentType=='community'" [routerLink]="['/communities/' + id ]" class="list-group-item" routerLinkActive="active" >{{'community.all-lists.head' | translate}}</a> <div class="list-group list-group-horizontal">
<a *ngFor="let config of types" class="list-group-item" [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}" routerLinkActive="active">{{'browse.comcol.by.' + config.id | translate}}</a> <a *ngIf="contentType=='collection'" [routerLink]="['/collections/' + id ]" class="list-group-item" routerLinkActive="active">{{'collection.page.browse.recent.head' | translate}}</a>
<a *ngIf="contentType=='community'" [routerLink]="['/communities/' + id ]" class="list-group-item" routerLinkActive="active" >{{'community.all-lists.head' | translate}}</a>
<a *ngFor="let config of types" class="list-group-item" [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}" routerLinkActive="active">{{'browse.comcol.by.' + config.id | translate}}</a>
</div>
</div>
<div class="d-block d-sm-none">
<select name="browse-type" class="form-control" aria-label="Browse Community or Collection" (change)="onSelectChange(($event.target))">
<option *ngIf="contentType=='collection'"
[value]="['/collections/' + id ]"
[routerLink]="['/collections/' + id ]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null " >
{{'collection.page.browse.recent.head' | translate}}
</option>
<option *ngIf="contentType=='community'"
[value]="['/communities/' + id ]"
[routerLink]="['/communities/' + id ]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null " >
{{'community.all-lists.head' | translate}}
</option>
<option *ngFor="let config of types"
[value]="['/browse/' + config.id]"
[routerLink]="['/browse/' + config.id]"
[queryParams]="{scope: id}"
[attr.data-params]="[id]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null ">
{{'browse.comcol.by.' + config.id | translate}}
</option>
</select>
</div> </div>
</nav> </nav>

17
src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, Inject, Input, OnInit } from '@angular/core'; import { Component, Inject, Input, OnInit } from '@angular/core';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config'; import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface'; import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
/** /**
@@ -22,11 +23,23 @@ export class ComcolPageBrowseByComponent implements OnInit {
*/ */
types: BrowseByTypeConfig[]; types: BrowseByTypeConfig[];
constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig) { constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig, private router: Router) {
} }
ngOnInit(): void { ngOnInit(): void {
this.types = this.config.browseBy.types; this.types = this.config.browseBy.types;
} }
onSelectChange(target) {
const optionIndex = target.selectedIndex;
const selectedOptionElement = target.options[optionIndex];
const paramsAttribute = selectedOptionElement.getAttribute('data-params');
console.log('change value ' + target.value + ' paramsAttribute ' + paramsAttribute);
if (paramsAttribute) {
/* console.log('Yes paramsAttribute ' + paramsAttribute);*/
this.router.navigate([target.value], { queryParams: { scope: paramsAttribute } });
} else {
/* console.log('No paramsAttribute ');*/
this.router.navigate([target.value]);
}
}
} }