import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import FilterTreeEnum from '../../../../enum/filter-tree-enum';
/**
* Filter option item for displayType = 'box'
* @extends FilterOptionItem
*/
class FilterOptionItemBox extends FilterOptionItem {
getTemplate() {
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(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
.replace(/{{class.button}}/g, Class.button)
.replace(/{{label}}/g, this.label)
.replace(/{{countLabel}}/g, this.countLabel);
}
bindEvents() {
super.bindEvents();
this.setBoxItemSize();
}
/**
* Set the css 'width' value of each box.
* This is called in 'bindEvents', after its element is rendered on the DOM
*/
setBoxItemSize() {
if (this.filterTreeType == FilterTreeEnum.FilterTreeType.VERTICAL && this.$element) {
this.$element.css('width', this.parent.calculateBoxItemSize());
}
}
}
export default FilterOptionItemBox;