Горячие клавиши полезны, но не всегда спасают

Недавно работал над SEO-оптимизацией одного из последних проектов.. Честно сказать - новая свернутая панель от Битрикс 12 мне не нравится:

Эта «свернутая» панель (которая по размерам похожа на развернутую панель Битрикс 11) абсолютно не компактная, невзрачная. Несмотря на это, существует более неудобная вещь - развернутая панель управления. С ней работать возможно только на больших экранах, мой же стандартный ноутбук к таковым не относится.

Несмотря на все неудобства, вызванные развернутой панелью, пользоваться ею приходится, т.к. только на ней есть кнопка «Оптимизация». В очередной раз поработав в режиме постоянного переключения «свернуть»/«развернуть» пришла в голову идея открывать окошко «Оптимизация» по горячей клавише. Кстати, никогда не настраивал горячие клавиши в Битрикс. Мало того, даже не любил их раньше, но статья не об этом.

Собственно, не нашел возможности назначить горячую клавишу этой кнопке. А отступать уже поздно, даже в условиях нехватка времени. В итоге двухчасовой работы решил свою задачу, назначил клавишу Alt-S для быстрого открытия окошка SEO-оптимизации, работает даже при свернутой панели. Мои решение (на jQuery и без него) расписаны ниже.

Быстрое решение - за 1 минуту, на jQuery. Решение удобное, легкое, кроссбраузерное. Проблема в том, что если на проекте не загружен jQuery, то загружать его отдельно для горячих клавиш - не всегда удобно. Хотя, конечно, возможно, делается это так:

$('.bx-panel-seo-icon').eq(0).parent().click();

Здесь алгоритм прост: для начала смотрим на HTML-разметку кнопок на панели управления (удобно через Firebug или в хроме из панели «Инструменты разработчика»), затем получаем SPAN с соотв. классом ("bx-panel-seo-icon"), определяем родителя и имитируем клик по нему. Выбор 1го элемента из выборки eq(0) здесь - на всякий случай - все-таки, в панели теоретически могут быть кнопки с одинаковым классом. Одновременное нажатие на несколько кнопок - не наш вариант.

JavaScript-код, ответственный за выполнение действий по горячим клавишам, находится в админке (Настройки - Настройки продукта - Горячие клавиши). Нажимаем «Добавить», указываем наименование (напр., «Открытие SEO-окошка»), указываем jQuery-код, приведенный выше. Сохраняем. После этого в развернутой панели управления нажимаем иконку настройки горячих клавиш (справа; если такой иконки нет, нужно в настройках главного модуля включить функционал горячих клавиш). В окошке ищем только что созданный код, и назначаем его клавише. У меня это Alt-S. Сохраняем, пробуем. Работает.

Дело осталось за малым - настроить то же самое без jQuery. Для нетерпеливых сразу код:

var C='bx-panel-seo-icon',D=document.getElementsByTagName('*'),i=-1,E,O;while(E=D[++i]){if((' '+(E['class']||E.className)+' ').indexOf(' '+C+' ')>-1){E=E.parentNode;O=document.createEvent('Events');O.initEvent('click',1,0);E.dispatchEvent(O);}}

Сразу оговорюсь, что данный код не работает в IE8. Сделать, чтобы работало в IE8 - легко, но у меня не получилось объединить весь функционал в одном блоке кода. Дело в том, что для горячих клавиш можно указать JavaScript-код длиной не более 255 символов (т.к. за это отвечает поле типа varchar(255) в БД). Поэтому весь код после 255 символа просто обрезается. Поэтому и в решении я сделал попытку сжать код по максимуму.

Первым делом нашел и доработал функцию, которая находит элементы по классу:

function WD_getElementByClass (className, parent) {
	parent || (parent = document);
	var descendants= parent.getElementsByTagName('*'), i=-1, e, result=[];
	while (e=descendants[++i]) {
		((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
	}
	return result;
}

Затем нашел функцию, позволяющую имитировать события:

function WD_eventFire(el, etype){
	if (el.fireEvent) {
		(el.fireEvent('on' + etype));
	} else {
		var evObj = document.createEvent('Events');
		evObj.initEvent(etype, true, false);
		el.dispatchEvent(evObj);
	}
}

Последняя функция ищет нужный элемент по классу и выполняет клик на его родителе:

function WD_Click_Btn(C) {
	var WD_Element = WD_getElementByClass(C);
	if (WD_Element[0]) {
		WD_Element = WD_Element[0];
		WD_eventFire(WD_Element.parentNode, 'click');
	}
}

Почти все, казалось - дело за малым, но нет. Ввиду ограничения в 255 символов, над кодом пришлось изрядно потрудиться. Из второй функции пришлось «выкинуть» проверку fireEvent, из-за чего в IE8 скрипт потерял работоспособность. Работаете в IE8? Тогда верните fireEvent, а блок кода по else - удалите.

В итоге получилась такая функция:

function wd_hk() {
	var C='bx-panel-seo-icon',D=document.getElementsByTagName('*'), i=-1, E, O;
	while (E=D[++i]) {
		if((' '+(E['class']||E.className)+' ').indexOf(' '+C+' ') > -1) {
			E=E.parentNode;
			O = document.createEvent('Events');
			O.initEvent('click',1,0);
			E.dispatchEvent(O);
		}
	}
}

Собственно, остается только убрать переносы, пробелы, и «вытащить» исполнение кода из функции. Вот что получается:

var C="bx-panel-seo-icon",D=document.getElementsByTagName("*"),i=-1,E,O;while(E=D[++i])if((" "+(E["class"]||E.className)+" ").indexOf(" "+C+" ")>-1){E=E.parentNode;O=document.createEvent("Events");O.initEvent("click",1,0);E.dispatchEvent(O)};

Вот и все!

Остается только добавить правило для горячей клавиши (в Битрикс с 12й по 14ю версии это в меню «Настройки» - «Настройки продукта» - «Горячие клавиши», в 14й версии - «Настройки» - «Настройки продукта» - «Интерфейс» - «Горячие клавиши») - указать имя правила (напр., «SEO») и сжатый JavaScript-код. После этого в панели управления Битрикс (над сайтом) нажать иконку горячих клавиш, и в строке «SEO» указать горячую клавишу, по которой будет открываться окошко. Если этой иконки нет, значит нужно открыть настройки главного модуля и установить опцию «Использовать горячие клавиши».

Отмечу, что указанным кодом можно «нажимать» и другие кнопки. Просто укажите соответствующий класс в переменной «C». Например, я протестировал для кнопок создания раздела (хотя для этого есть готовая горячая клавиша в Битрикс) и открытия окошка структуры.

Upd.: для jQuery появилась возможность просто указать:

$('#bx_topmenu_btn_seo').click();