Нормальный {favorites} без правок DLE. Закладки

В DLE, даже последней ветки, никак не решается проблема с добавлением в закладки. Там и проблем-то нет как таковых, но удобство стилизации не реализовано.

Удобство для людей!

Как мы знаем, у нас есть вот такие вспомогательные теги:

[add-favorites] текст [/add-favorites]
[del-favorites] текст [/del-favorites]

И проблема появляется при активированном кешировании. Мало того, что нужно обновлять страницу, для того чтобы увидеть изменения {favorite-count} в login.tpl, так еще и не срабатывает [del-favorites] текст [/del-favorites][/code], потому как закешировалось с первым! С {favorites} таже самая беда.

Давайте решать "вопрос". К примеру я верстаю на bootstrap + fontawesome и мой вид кнопок добавления в закладки таков:

[add-favorites]
<button class="btn btn-sm btn-primary">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
</button>
[/add-favorites]
[del-favorites]
<button class="btn btn-sm btn-primary">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
</button>
[/del-favorites]

Кнопка удаления и добавления одинаковы? Так и есть, далее я буду стилизовать через CSS (об этом ниже). Править файлы движка (show.custom.php, show.full.php, show.short.php) нет желания, так как после каждого обновления придется вносить правки. В связи с этим мы пойдем другим путем.

JS часть

// переменные
var cookie = $.cookie('favorite'),
	cookiearr, index;
// перезаписываем функцию
window.doFavorites = function () {
	var id = arguments[0],
		plusminus = arguments[1];
	ShowLoading("");
	$.get(dle_root + "engine/ajax/favorites.php", {
		fav_id: id,
		action: plusminus,
		skin: dle_skin,
		alert: 0,
		user_hash: dle_login_hash
	}, function (result) {
		HideLoading("");
		if(plusminus == "plus") {
			toCookie(id, "plus");
			$('[onclick^="doFavorites(\'' + id + '\'"]').attr('onclick', 'doFavorites(\'' + id + '\', \'minus\'); return false;');
			$('.favorite-count').each(function () {
				$(this).text(Number($(this).text()) + 1);
			});
		} else {
			toCookie(id, "minus");
			$('[onclick^="doFavorites(\'' + id + '\'"]').attr('onclick', 'doFavorites(\'' + id + '\', \'plus\', \'0\'); return false;');
			$('.favorite-count').each(function () {
				$(this).text(Number($(this).text()) - 1);
			});
		}
	});
	return !1
}
// обработка куки
function toCookie(id, plusminus) {
	cookie = $.cookie('favorite');
	if(cookie) {
		cookiearr = cookie.split(",");
		index = cookiearr.indexOf(id);
		if(plusminus == "plus") {
			if(index < 0) {
				cookiearr.push(id);
			}
		} else {
			if(index > -1) {
				cookiearr.splice(index, 1);
			}
		}
		if(typeof cookiearr !== 'undefined' && cookiearr.length > 0) {
			$.cookie('favorite', cookiearr.join(","), {
				expires: 365,
				path: '/'
			});
		} else {
			$.removeCookie('favorite', {
				path: '/'
			});
		}
	} else {
		$.cookie('favorite', id, {
			expires: 365,
			path: '/'
		});
	}
}
// проверка куки
if(cookie) {
	cookiearr = cookie.split(",");
	$.each(cookiearr, function (index, el) {
		var id = el;
		$('[onclick^="doFavorites(\'' + id + '\'"]').attr('onclick', 'doFavorites(\'' + id + '\', \'minus\'); return false;');
	});
}

Думаю, стоит добавить описание логики работы скрипта. Как вы уже догадались, чтобы обойти вопрос кеширования, мы будем записывать пользователю в куки ID новостей, после чего проверять и заменять на странице.

Более интересное изменение, это перезапись стандартной функции doFavorites. В ней мы убираем извещающее окно и производим замену onclick действия на кнопке по которой кликнули. То-есть, если кнопка была для добавления, то заменяем её на удаление и наоборот. Так же функция делает изменения количества без перезагрузки страницы по классу favorite-count. Для этого идем в login.tpl вашей темы и добавляем класс к нужному элементу. У меня например было так:

Избранное <b>{favorite-count}</b>

Стало так:

Избранное <b class="favorite-count">{favorite-count}</b>

CSS часть

Ну тут все очень просто:

[onclick*="minus"] > .btn {
	background: red;
}

[onclick*="minus"]:hover > .btn {
	background: orange;
}

Если у любого тега есть атрибут onclick, у которого в любом месте встречается minus, то для класса btn внутри мы делаем красный background. А при наведении на него же оранжевый. На этом всё!

Единственное, на что стоит тут обратить внимание, JS скрипт, который выше, нужно обязательно подключить после {jsfiles} в main.tpl. Иначе функция не перезапишется. Ну и конечно же нужно подключить jquery.cookie.js, если у вас он всё ещё не подключен. В итоге должно получиться как-то так:

{AJAX}
{jsfiles}
<script type="text/javascript" src="{THEME}/js/jquery.cookie.js"></script>
<script type="text/javascript" src="{THEME}/js/favorites.js"></script>

Файлы прикрепил! Удачного дня :)