<button class="search-toggle" type="button">
<span class="search-toggle__inner">
<svg class="icon search-toggle__icon search-toggle__icon--closed" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
<svg class="icon search-toggle__icon search-toggle__icon--open" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
<span class="search-toggle__text">Otsi</span>
</span>
</button>
{% set BEM -%}
search-toggle
{%- if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{% endset %}
<button class="{{ BEM }}" type="button">
<span class="search-toggle__inner">
{% include '@icon' with { name: 'search', class: 'search-toggle__icon search-toggle__icon--closed', modifier: '' } %}
{% include '@icon' with { name: 'close', class: 'search-toggle__icon search-toggle__icon--open', modifier: '' } %}
<span class="search-toggle__text">{{ data.text }}</span>
</span>
</button>
{
"language": "en-US",
"data": {
"text": "Otsi"
}
}
.search-toggle {
display: inline-block;
padding: 0;
background: transparent;
border: none;
border-radius: $border-radius-base;
color: $brand-primary;
outline: none;
font-weight: $font-weight-medium;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
transition: background $transition-duration-s $transition-easing,
color $transition-duration-s $transition-easing;
&:hover {
background: $L-background-none-hover;
}
html[data-whatinput='keyboard'] &:focus {
background: $L-background-none-hover;
outline: 2px solid $L-filter-focus;
outline-offset: 2px;
}
}
.search-toggle__inner {
display: flex;
align-items: center;
justify-content: center;
padding: 6px $container-padding;
}
.search-toggle__icon {
flex: 0 0 24px;
margin-right: 8px;
font-size: 24px;
}
.search-toggle__icon--closed {
.search-toggle.is-open & {
display: none;
}
}
.search-toggle__icon--open {
display: none;
.search-toggle.is-open & {
display: inline-block;
}
}
import Component from '../../component/component';
import { searchSettings } from '../search/search';
import './search-toggle.scss';
export interface ISearchToggleSettings {
openClass?: string;
}
export const searchToggleSettings: ISearchToggleSettings = {
openClass: 'is-open',
};
export default class SearchToggle extends Component {
static initSelector: string = '.search-toggle';
settings: ISearchToggleSettings;
constructor(target: HTMLElement) {
super(target);
this.settings = searchToggleSettings;
this.element.on('click', this.onClick.bind(this));
}
onClick(): void {
this.element.toggleClass(this.settings.openClass);
}
}
$(() => {
$('.search-toggle').on('click', (event: Event) => {
if ($(event.target).closest('.search').length === 0) {
const $search: JQuery<HTMLElement> = $('.search');
const input: JQuery<HTMLElement> = $search.find(searchSettings.inputSelector);
let timeout: number = 0;
$search.toggleClass(searchSettings.openClass);
if ($search.hasClass(searchSettings.openClass)) {
if (timeout) {
window.clearTimeout(timeout);
}
timeout = window.setTimeout(() => {
input.trigger('focus');
}, 150);
}
}
});
});