Commit e32036eb authored by Alexander's avatar Alexander

ability to select and deselect individual bli filter icons

parent 60361790
......@@ -13,12 +13,23 @@ export class FilterBLIDimensionsControl extends Control{
//our control is already in the DOM
//but due to styling issues is not shown correctly
isCollapsed:boolean;
basicStyle :string = ' width: 3em; height:3em; background-color:white; border-radius:20px; ';
isCollapsed:boolean = false;
basicStyle :string = ' width: 3em; height:3em; border-radius:20px; ';
collapsedStyle : string = ' margin-right:-1em; margin-left:-1em; ';
filterButtons : HTMLElement[]=[];
//the actual filter
filters : boolean[]=[];
//should be final, do not know how to do it
arr : string[] = [
'community','education','engagement','governance',
'health','housing','income','infrastructure',
'leisure','nature','satisfaction','security',
'wlbalance','work'
];
constructor(opt_options){
super({});
......@@ -38,16 +49,17 @@ export class FilterBLIDimensionsControl extends Control{
//element.setAttribute("style","position: absolute; bottom:80px; left:20px;");
const arr : string[] = [
'community','education','engagement','governance',
'health','housing','income','infrastructure',
'leisure','nature','satisfaction','security',
'wlbalance','work'
];
for(let i=0;i<this.arr.length;i++){
let button = this.make_bli_icon('bliicon-'+this.arr[i]+'.svg')
button.addEventListener('click',()=>{
this.clickSomeBLIIcon(i);
});
for(let i=0;i<arr.length;i++){
let button = this.make_bli_icon('bliicon-'+arr[i]+'.svg')
this.filterButtons.push(button);
this.filters.push(true);
element.appendChild(button);
if(i==6){
......@@ -69,8 +81,13 @@ export class FilterBLIDimensionsControl extends Control{
target: opt_options.target
});
this.isCollapsed=false;
this.rerender(this);
}
clickSomeBLIIcon(i:number){
console.log('clicked '+this.arr[i]);
this.filters[i]=!this.filters[i];
this.rerender(this);
}
make_bli_icon(file : string) : HTMLElement{
......@@ -85,11 +102,22 @@ export class FilterBLIDimensionsControl extends Control{
console.log('click toggle filter icons');
instance.isCollapsed = !instance.isCollapsed;
instance.filterButtons.forEach(function(element){
this.rerender(instance);
}
rerender(instance:FilterBLIDimensionsControl) : void{
//applies the styles to the filter control
instance.filterButtons.forEach(function(element,index){
const activeStyle:string=' background-color: rgb(148, 193, 31); ';
const inActiveStyle:string=' background-color: white; '
element.setAttribute(
'style',
instance.basicStyle
+((instance.isCollapsed)?instance.collapsedStyle:'')
+((instance.filters[index])?activeStyle:inActiveStyle)
);
});
}
......
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