the-glorious-startpage/js/show-search-box.js

class SearchBoxShow {
	
	constructor() {

		this._searchBox = document.querySelector('#searchBox');
		this._searchBoxContainer = document.querySelector('#searchBoxContainer');
		this._centeredBoxOverlay = document.querySelector('#centeredBoxOverlay');

		this._searchBoxVisility = false;

		this.showSearchBox = this.showSearchBox.bind(this);
		this.hideSearchBox = this.hideSearchBox.bind(this);
		this.toggleSearchBox = this.toggleSearchBox.bind(this);
	}

	getSearchBoxVisibility = () => {
		return this._searchBoxVisility;
	}

	showSearchBox = () => {
		this._searchBoxContainer.classList.add('showSearchBox');

		// Focus
		this._searchBox.focus();

		this._searchBoxVisility = !this._searchBoxVisility;

		// Toggle overlay
		this._centeredBoxOverlay.classList.toggle('showOverlay');
	}

	hideSearchBox = () => {
		this._searchBoxContainer.classList.remove('showSearchBox');

		// Toggle overlay
		this._centeredBoxOverlay.classList.toggle('showOverlay');

		this._searchBox.value = '';

		// Hide suggestions
		autoSuggestion.hideSuggestions();

		this._searchBoxVisility = !this._searchBoxVisility;
	}

	toggleSearchBox = () => {

		// If profile anim is still running,
		// Return to avoid spam
		if (profileImage.getProfileAnimationStatus()) return;

		// Rotate profile
		profileImage.rotateProfile();

		if (this._searchBoxVisility) {
			// Hide search box
			this.hideSearchBox();

		} else {
			// Show search box
			this.showSearchBox();
		}

		// console.log('toggle searchbox');
	}


}