Source: components/filter/filter-tree/filter-option/filter-option-swatch.js

import FilterOption from './filter-option';
import Settings from '../../../../helpers/settings';
import FilterTreeEnum from '../../../../enum/filter-tree-enum';
import Utils from "../../../../helpers/utils";

/**
 * Filter option with displayType = 'swatch'
 */
class FilterOptionSwatch extends FilterOption {
	/**
	 * Get the content html template for DisplayType.SWATCH
	 * @returns {string} Raw html template
	 */
	getBlockContentTemplate() {
		return `
			<ul class="{{class.filterOptionItemList}} {{class.filterOptionItemListSwatch}} {{swatchStyle}}">
				{{filterItems}}
			</ul>
		`;
	}

	compileBlockContentTemplate() {
		this.swatchStyle = this.buildSwatchStyle();
		return this.getBlockContentTemplate()
			.replace(/{{swatchStyle}}/g, this.swatchStyle);
	}

	/**
	 * Set the class for swatch styles in the html template
	 * Setting for swatch style: general.swatchStyle
	 * Possible values: 'circle-list', 'circle-grid', 'square-list', 'square-grid'
	 * Default value for vertical: 'circle-grid', default for horizontal: 'circle-list'
	 * @returns {string}
	 */
	buildSwatchStyle() {
		var swatchStyleSettings = Settings.getSettingValue('general.swatchStyle');
		if (swatchStyleSettings) {
			return swatchStyleSettings;
		}
		var isListStyle = this.filterTreeType == FilterTreeEnum.FilterTreeType.HORIZONTAL
			|| (Utils.isMobile() && Settings.getSettingValue('general.filterTreeMobileStyle') == 'style2');
		var swatchStyle = isListStyle ? 'circle-list' : 'circle-grid';
		return swatchStyle;
	}
}

export default FilterOptionSwatch;