Commit 60361790 authored by Alexander's avatar Alexander

ability to collapse the bli filter icons

parent f020d0f4
......@@ -13,6 +13,12 @@ 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; ';
collapsedStyle : string = ' margin-right:-1em; margin-left:-1em; ';
filterButtons : HTMLElement[]=[];
constructor(opt_options){
super({});
......@@ -40,14 +46,17 @@ export class FilterBLIDimensionsControl extends Control{
];
for(let i=0;i<arr.length;i++){
element.appendChild(this.make_bli_icon('bliicon-'+arr[i]+'.svg'));
let button = this.make_bli_icon('bliicon-'+arr[i]+'.svg')
this.filterButtons.push(button);
element.appendChild(button);
if(i==6){
let expandToggle = document.createElement('div');
expandToggle.setAttribute('style','border-radius:20px;');
expandToggle.className='btn btn-primary m-3';
expandToggle.innerText='< Dimensionen des Guten Lebens >';
expandToggle.addEventListener('click',()=>this.clickToggleFilterIcons());
expandToggle.addEventListener('click',()=>this.clickToggleFilterIcons(this));
element.appendChild(expandToggle);
}
......@@ -60,17 +69,28 @@ export class FilterBLIDimensionsControl extends Control{
target: opt_options.target
});
this.isCollapsed=false;
}
make_bli_icon(file : string) : HTMLElement{
let icon=document.createElement('img');
icon.src='/assets/img/bli/'+file;
icon.setAttribute('style','width: 3em; height:3em; background-color:white; border-radius:20px;');
icon.setAttribute('style',this.basicStyle);
icon.className='mt-3';
return icon;
}
clickToggleFilterIcons(){
clickToggleFilterIcons = (instance : FilterBLIDimensionsControl) => {
console.log('click toggle filter icons');
instance.isCollapsed = !instance.isCollapsed;
instance.filterButtons.forEach(function(element){
element.setAttribute(
'style',
instance.basicStyle
+((instance.isCollapsed)?instance.collapsedStyle:'')
);
});
}
}
\ No newline at end of file
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