Ответы на часто задаваемые вопросы

Внимание эта страница в будущем будет изменяться.

События для исполнения вашего кода, когда модуль загружен

window.addEventListener('busVoiceSearchBefore', function(e) {
	console.log('busVoiceSearch - запущен, можно установить своё условие запуска переопределив настройки модуля: ', busVoiceSearch.setting);
});

window.addEventListener('busVoiceSearch', function(e) {
	console.log('busVoiceSearch - запущен и пройдена проверка, значит можем использовать функции busVoiceSearch: ', window.busVoiceSearch);
});

window.addEventListener('busVoiceSearchAfter', function(e) {
	console.log('busVoiceSearch - запущен и пройдена проверка, а также выполнен код и возможно асинхронный код ещё выпоняется');
});

Список данных для настроек модуля (данные можно получить и через событие busVoiceSearchBefore переопределить):

busVoiceSearch.setting['lang-browser'] - получать язык браузера, а не сайта. По умолчанию отключено

busVoiceSearch.setting['lang'] - код языка получаемый из тега html, если нету, то из куков или браузера

busVoiceSearch.setting['lg'] - статус для размера экрана > 1200px

busVoiceSearch.setting['md'] - статус для размера экрана >= 992px и <= 1199px

busVoiceSearch.setting['sm'] - статус для размера экрана >= 768px и <= 991px

busVoiceSearch.setting['xs'] - статус для размера экрана < 768px

busVoiceSearch.setting['col'] - показывает какой размер экрана сейчас:

lg - > 1200px

md - >= 992px и <= 1199px

sm - >= 768px и <= 991px

xs - < 768px

busVoiceSearch.setting['ids'] - массив селекторов для поиска и привязки к html коду, подсчёт id начинается от нуля. По умолчанию это поле поиска, и массив такой: ['header input[name="search"]']. Поиск производится через document.querySelector(selectors)

busVoiceSearch.setting['button'] - функция для возможности изменить кнопку голосового поиска и её установку относительно элементу найденного по прописанному селектору в настройках ids. Функция получает такие данные, как element (результат document.querySelector), id (порядковый номер селекторов массива ids), selector (входные данные селекторов массива ids)

Функция отправляет данные, как element (входной результат document.querySelector), new_element (новый элемент который будет установлен в элемент element), button (элемент по которому нужно нажать).

Пример функции по умолчанию:

busVoiceSearch.setting['button'] = function(element, id, selector) {
	var new_element = document.createElement('span');
	//new_element.id = 'bus-voice-search';
	new_element.innerHTML = '<i class="fa fa-microphone"></i>';
	new_element.style['position'] = 'absolute';
	new_element.style['padding'] = '10px';
	new_element.style['right'] = '90px';
	new_element.style['cursor'] = 'pointer';
	new_element.style['color'] = 'black';
	new_element.style['z-index'] = 2;
	element.parentNode.insertBefore(new_element, element.nextSibling);
	var button = element.parentNode.querySelector('button');

	return [element, new_element, button];
}

busVoiceSearch.setting['button-html-on'] - html код или текст на который будет заменятся new_element.innerHTML = '<i class="fa fa-microphone"></i>'; когда началась запись звука. По умолчанию <i class="fa fa-circle"></i>

busVoiceSearch.setting['button-html-off'] - html код или текст на который будет заменятся new_element.innerHTML = '<i class="fa fa-microphone"></i>'; когда браузером запрещено использование микрофона. По умолчанию <i class="fa fa-microphone-slash"></i>

busVoiceSearch.setting['debug'] - дебаг режим, включает в разных местах модуля функцию console.log и выводит данные результатов событий или функций. По умолчанию отключено

Пример настройки кнопки для моего сайта с помощью модуля opencart аналитики:

<script><!--
// запускаем модуль для нужных нам экранов, например, только для мобильных
window.addEventListener('busVoiceSearchBefore', function(e) {
	busVoiceSearch.setting['lg'] = false;
	busVoiceSearch.setting['md'] = false;
	busVoiceSearch.setting['sm'] = false;
});

// устанавливаем свою кнопку в нужное нам место
window.addEventListener('busVoiceSearch', function(e) {
	busVoiceSearch.setting['ids'] = ['header input[name="search"]', 'main [class*="blog-search"] input[name="search"]'];
	busVoiceSearch.setting['button'] = function(element, id, selector) {
		if (id || selector == 'header input[name="search"]') {
			var new_element = document.createElement('span');
			new_element.id = 'bus-voice-search-' + id;
			new_element.innerHTML = '<i class="fa fa-microphone"></i>';
			new_element.style['position'] = 'absolute';
			new_element.style['padding'] = '10px';
			new_element.style['top'] = '15px';
			new_element.style['right'] = '100px';
			new_element.style['cursor'] = 'pointer';
			new_element.style['font-size'] = '30px';
			new_element.style['color'] = 'white';
			new_element.style['z-index'] = 2;
			element.parentNode.insertBefore(new_element, element.nextSibling);
		}

		return [element, new_element];
	};
});
//--></script>