import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import FilterOptionEnum from "../../../../enum/filter-option-enum";
/**
* Filter option item for displayType = 'list'
* @extends FilterOptionItem
*/
class FilterOptionItemList extends FilterOptionItem {
constructor(filterTreeType) {
super(filterTreeType);
this.$element = null;
}
getTemplate() {
// Filter by collection uses <a> tag
if (this.parent.filterType == FilterOptionEnum.FilterType.COLLECTION) {
return `
<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{disabled}}">
<a class="{{class.button}}" href="{{href}}">
<span class="boost-pfs-check-box"></span>
<span class="boost-pfs-filter-option-value">{{label}}</span>
<span class="boost-pfs-filter-option-amount">{{countLabel}}</span>
</a>
</li>
`;
// Else uses <button>
} else {
return `
<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{disabled}}">
<button role="checkbox" class="{{class.button}}">
<span class="boost-pfs-check-box"></span>
<span class="boost-pfs-filter-option-value">{{label}}</span>
<span class="boost-pfs-filter-option-amount">{{countLabel}}</span>
</button>
</li>
`;
}
}
compileTemplate() {
return this.getTemplate()
.replace(/{{class.filterOptionItem}}/g, Class.filterOptionItem)
.replace(/{{class.filterOptionLabel}}/g, Class.filterOptionLabel)
.replace(/{{class.button}}/g, Class.button)
.replace(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
.replace(/{{label}}/g, this.label)
.replace(/{{href}}/g, this.href)
.replace(/{{countLabel}}/g, this.countLabel);
}
}
export default FilterOptionItemList;