Как сохранить совместимость при адаптации js шаблона (плагина) к js движка

Зачастую при адаптации шаблонов/плагинов так и тянутся руки поправить js в движке, что чревато потерей совместимости с другими шаблонами и плагинами.

Чтобы разобраться с этим вопросом и с целью самообразования, решил написать этот топик — может кому-то пригодится.

Какие есть варианты:
  1. Редактировать js-файлы прямо в движке
  2. Переписать (переопределить) нужный метод

Читать дальше →

Переопределение js (Решено)

Задача 1.
В файле /engine/lib/internal/template/js/blocks.js есть код, добавляющий класс active иконке обновления блока («прямой эфир» и «блоги»).
В шаблоне используются иконки (точнее шрифт) font-awesome, поэтому необходимо переопределить класс active на класс fa-spin (вращение).

Решение:
— в template.js шаблона перед вызовом функции инициализации блоков добавим опцию:
ls.blocks.options.update_active = 'fa-spin';

— затем переопределим ее с новой опцией:
ls.blocks.init = function(block,params) {
	params=params || {};
	$('.js-block-'+block+'-item').click(function(){
		ls.blocks.load(this, block);
		return false;
	});
	if (params.group_items) {
		this.initNavigation(block,params.group_min);
	}

	var $this=this;
	$('.js-block-'+block+'-update').click(function(){
		$(this).addClass($this.options.update_active);
		ls.blocks.load($this.getCurrentItem(block), block);
		setTimeout( function() { $(this).removeClass($this.options.update_active); }.bind(this), 600 );
	});
};


Задача 2.
В стандартном функционале при добавлении в избранное js движка добавляет к иконке избранного в футере топика класс active, и это легко можно задействовать при использовании спрайтов, указав координаты «активной» иконки. В нашем примере используется иконки font-awesome, поэтому класс active нам не подходит. Хотя vOFFka в своих шаблонах выкрутился по-другому, задав иконке с классом active желтый цвет.
Т.е. нам нужно при добавлении в избранное менять класс иконки избранного с fa-star-o (звездочка с контуром) на fa-star (залитая звездочка).
Также необходимо при добавлении/удалении в избранное соответственно менять title иконке (Добавить в избранное/Удалить из избранного).

Решение:
Окончание процесса добавления/удаления избранного в движке помечено js-хуком.
В template.js шаблона Synio я нашел применение этого хука (удаляет нулевое значение числа добавлений в избранное) и решил его дополнить:
// избранное
ls.hook.add('ls_favourite_toggle_after',function(idTarget,objFavourite,type,params,result){
	$('#fav_count_'+type+'_'+idTarget).text((result.iCount>0) ? result.iCount : '');

	// меняем иконку
	$('#fav_topic_'+idTarget).toggleClass('fa-star').toggleClass('fa-star-o');
	// Для всех типов объектов, добавляемых в избранное (например, + камменты), следует писать так
	// this.objFavourite.toggleClass('fa-star').toggleClass('fa-star-o');
	// или так
	// $('#fav_'+type+'_'+idTarget).toggleClass('fa-star').toggleClass('fa-star-o');

	// меняем title иконке
	if (result.bState) {
		this.objFavourite.attr('title', 'Удалить из избранного');
	} else {
		this.objFavourite.attr('title', 'Добавить в избранное');
	}
});


P.S.:
Вероятно, вышеизложенное гораздо проще реализовать правками непосредственно в файлах движка, но это может привести к проблемам совместимости.

Большое спасибо ort , PSNet (статья) и tema_mak за помощь в решении задач!