Commit b47462d3 authored by Alexander's avatar Alexander

work in progress. temporary commit.

parent a1d45b70
<div class="bli-filter-wrap" >
<div class="bli-wrap" >
<div class="row justify-content-center d-flex flex-nowrap">
<div class="col-md-2"></div>
<div class="col-md-3 row justify-content-center" [ngClass]="{'collapsed':_collapsed, 'not-collapsed':!_collapsed}">
<div *ngFor="let dim of bli_dimensions().slice(0,6)" class="mt-3 bli-icon-filter" (click)="toggleIcon(dim)">
<img src="{{make_bli_img_src(dim)}}" class="img-basic" [ngClass]="{'collapsed-img':_collapsed, 'not-collapsed-img':!_collapsed, 'activeStyle': isActive(dim), 'inActiveStyle':!isActive(dim)}"/>
<span class="{{bliService.getIcon(dim.name)}}" style="width: 3em; height:3em; border-radius:20px; "></span>
<div class="col-md-3 row justify-content-center" >
<div *ngFor="let dim of bli_dimensions().slice(0,6)" class="mt-3 bli-icon-filter col-sm-2" (click)="toggleIcon(dim)">
<img src="{{make_bli_img_src(dim)}}" class="img-basic" [ngClass]="{'collapsed-img':isVisible(dim), 'not-collapsed-img':!isVisible(dim), 'activeStyle': isActive(dim), 'inActiveStyle':!isActive(dim)}"/>
</div>
</div>
<div
class="col-md-2 btn btn-primary m-3 row justify-content-center"
(click)="clickHandler()"
(click)="toggleVisibleIcons()"
style="font-weight:bold; font-size:0.8em; border-radius:30px;"
>
<table class="col">
......@@ -30,7 +30,6 @@
<div class="col-md-3 row justify-content-center" [ngClass]="{'collapsed':_collapsed, 'not-collapsed':!_collapsed}">
<div *ngFor="let dim of bli_dimensions().slice(6,12)" class="mt-3 bli-icon-filter" (click)="toggleIcon(dim)">
<img src="{{make_bli_img_src(dim)}}" class="img-basic" [ngClass]="{'collapsed-img':_collapsed, 'not-collapsed-img':!_collapsed, 'activeStyle': isActive(dim), 'inActiveStyle':!isActive(dim)}"/>
<span class="{{bliService.getIcon(dim.name)}}" style="width: 3em; height:3em; border-radius:20px; "></span>
</div>
</div>
......
......@@ -10,26 +10,42 @@ export class BliFilterComponent implements OnInit {
basicStyle :string = ' width: 3em; height:3em; border-radius:20px; ';
visible:Map<string,boolean> = new Map<string,boolean>();
filters:Map<string,boolean> = new Map<string,boolean>();
constructor(private bliService: BliService,private mapService : MapService) {
for(let s in this.bli_dimensions()){
this.filters.set(s,false);
//all filters are invisible in the beginning
this.visible.set(s,false);
}
}
ngOnInit() {
}
_wide:boolean;
_collapsed:boolean=false;
_collapsed:boolean=true;
isActive(dim:string):boolean{
return this.filters.get(dim);
}
clickHandler():void{
this._wide = !this._wide;
isVisible(dim:string):boolean{
return this.visible.get(dim);
}
toggleVisibleIcons():void{
this._collapsed = !this._collapsed;
//all non-selected icons become invisible
for(let s in this.bli_dimensions()){
if(this._collapsed){
this.visible.set(s,this.filters.get(s));
}else{
this.visible.set(s,true);
}
}
}
make_bli_img_src(name:string):string{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment