Небольшая модификация, позволяющая вывести смайлики в форме ответа через табы, тем самым поделив их: по типу, по размеру, по цвету или по любому другому принципу.
Модификация включает в себя правки двух шаблонов и подключения стилей.

Изображение

Первое, данная модификация работает на jquery, поэтому необходимо, чтобы была подключена её библиотека.

Тестировалось только на prosilver, но и на subsilver2 будет работать, места для правки только могут слегка отличаться, в остальном всё тоже самое.

Итак.
Открываем шаблоны posting_editor.html и quick_reply.html, находим:

Код: Выделить всё

			<!-- BEGIN smiley -->
				<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
меняем на:

Код: Выделить всё

				<div class="smiles-tabs tabs-style-topline">
					<ul class="smiles-nav">
						<li><a href="#smiles-linebox-1"><span>1</span></a></li>
						<li><a href="#smiles-linebox-2"><span>2</span></a></li>
						<li><a href="#smiles-linebox-3"><span>3</span></a></li>
					</ul>
					<!-- BEGIN smiley -->
						<!-- IF smiley.S_ROW_COUNT == 0 or smiley.S_ROW_COUNT == 16 or smiley.S_ROW_COUNT == 32 -->
						<div id="smiles-linebox-<!-- IF smiley.S_ROW_COUNT == 0 -->1<!-- ELSEIF smiley.S_ROW_COUNT == 16 -->2<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->3<!-- ENDIF -->">
						<!-- ENDIF -->
							<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>

						<!-- IF smiley.S_ROW_COUNT == 15 or smiley.S_ROW_COUNT == 31 or smiley.S_ROW_COUNT == 47 -->
						</div>
						<!-- ENDIF -->
					<!-- END smiley -->
				</div>
Пояснения.
Допустим, мы хотим иметь три блока со смайлами, которые открываются табами с номерами от одного до трёх. Для этого мы добавляем три ссылки:

Код: Выделить всё

<li><a href="#smiles-linebox-1"><span>1</span></a></li>
каждый со своим номером.
Чтобы разделить смайлы на три блока, их нужно для начала посчитать. В нашем примере 48 смайлов, мы делим их на три и получаем по 16 изображений на блок. Исходя из этого мы будем настраивать порядок их разделения.
В нашем коде есть следующий элемент:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 0 or smiley.S_ROW_COUNT == 16 or smiley.S_ROW_COUNT == 32 -->
Номера говорят где нужно добавить следующий элемент.
0 - это значит, что перед первым смайлом будет добавлен элемент <div id="smiles-linebox-...
16 - это значит, что элемент будет добавлен после 16 изображения.
и тд.

Если табов должно быть более трёх, то с начала добавляем в управление ссылку:

Код: Выделить всё

<li><a href="#smiles-linebox-4"><span>4</span></a></li>
и or smiley.S_ROW_COUNT == 32 со своим значением.

Код:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 0 -->1<!-- ELSEIF smiley.S_ROW_COUNT == 16 -->2<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->3<!-- ENDIF -->
Номера должны соответствовать номерам кода данного чуть выше.
При добавлении четвёртого блока, просто добавляем перед <!-- ENDIF -->:

Код: Выделить всё

<!-- ELSEIF smiley.S_ROW_COUNT == 32 -->
с тем же значением, что и выше.

Следующий код:

Код: Выделить всё

<!-- IF smiley.S_ROW_COUNT == 15 or smiley.S_ROW_COUNT == 31 or smiley.S_ROW_COUNT == 47 -->
расположенный снизу нашей модификации, говорит в каком месте надо поставить закрывающий тег </div>.
Получается так. 0 - открываем блок, 15 - закрываем; 16 - открываем второй блок, 31 - закрываем; 32 - открываем третий блок, 47 - закрываем.

Если посмотреть на код, легко понять принцип.


С настройками вроде разобрались, пора добавить скрипт, в начало обоих файлов добавляем:

Код: Выделить всё

<script type="text/javascript">
/*
* Smiles block tabs
* prosilver ( phpBB 3.0.x style )
* Modified by:	xaocZ ( CabinetAdmin )
* Support mod:	http://cabinetadmina.ru
*/

$(document).ready(function(){
	$('.smiles-tabs div').hide();
	$('.smiles-tabs div:first').show();
	$('.smiles-tabs ul li:first').addClass('tab-current');
	$('.smiles-tabs ul li a').click(function(){ 
		$('.smiles-tabs ul li').removeClass('tab-current');
		$(this).parent().addClass('tab-current'); 
		var currentTab = $(this).attr('href'); 
		$('.smiles-tabs div').hide();
		$(currentTab).show();
		return false;
	});
});
</script>
Стили.
Открываем тему нашего стиля (forms.css), находим:

Код: Выделить всё

/* Input field styles
---------------------------------------- */
и перед найденным добавляем:

Код: Выделить всё

/* Smiles block style / phpBB 3.0.x style prosilver */
.smiles-tabs {
	position: relative;
	overflow: hidden;
	margin: 5px auto 0;
}

/* Nav */
.smiles-tabs .smiles-nav {
	text-align: center;
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.smiles-tabs .smiles-nav li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.smiles-tabs .smiles-nav a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5;
}

.smiles-tabs .smiles-nav a span {
	font-size: 1.0em;
}

.smiles-tabs .smiles-nav li.tab-current a {
	color: #74777b;
}

.smiles-tabs .smiles-nav a:focus {
	outline: none;
}

.smiles-tabs .smiles-nav a:hover {
	text-decoration: none;
}

/* Top Line */
.tabs-style-topline .smiles-nav li {
	border: 1px solid rgba(40,44,42,0.1);
}

.tabs-style-topline .smiles-nav li:not(:last-child) {
	border-right: none;
}

.tabs-style-topline .smiles-nav li.tab-current {
	border-top-color: #4692BF;
	border-bottom: none;
}

.tabs-style-topline .smiles-nav a {
	padding: 0.5em 0;
	background: rgba(40,44,42,0.05);
	color: #74777b;
	line-height: 1.3;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.tabs-style-topline .smiles-nav a:hover,
.tabs-style-topline .smiles-nav a:focus {
	background: rgba(202,220,235,0.15);
	color: #4692BF;
}

.tabs-style-topline .smiles-nav li.tab-current a {
	background: none;
	box-shadow: inset 0 3px 0 #4692BF;
	color: #4692BF;
}

.tabs-style-topline .smiles-nav a span {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}

/* Content */
.smiles-tabs div {
	display: none;
	padding-top: 1em;
}
Отрабатывание должно осуществляться во всех браузерах. Проблемы могут возникнуть только в отображении табов, поскольку используются нестандартные свойства, которые позволяют растягивать табы на всю ширину. Отображаться будет во всех современных браузерах, в тех которые не понимают свойства табы будут отображаться друг под другом.


Модификация в виде расширения для форумов 3.3 версии доступна здесь - viewtopic.php?f=157&t=5035
Комментарии: 53

CabinetAdmin 15 сен 2015, 16:06 Сообщение

Должно быть точно так же, только шаблон правки будет не как в phpbb 3.0 quick_reply.html, а quickreply_editor_message_before.html, который находится тут /ext/tatiana5/quickreply/styles/prosilver/template/event.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 29 дек 2015, 18:48 Сообщение

Все же в расширение не думаете его сделать? Чтобы не править шаблоны?
  • 0
Изображение

CabinetAdmin 29 дек 2015, 20:04 Сообщение

Кстати да, события добавили, надо заняться.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 21 янв 2016, 16:57 Сообщение

Вроде нашел небольшой баг этого способа, при нажатии на вкладки страница сползает вниз к вложениям, а вот при нажатии вкладки вложения подымается наоборот к написанию текста.
  • 0
Изображение

CabinetAdmin 22 янв 2016, 15:20 Сообщение

Вроде как не должно ничего никуда сползать... Возможно скрипт с чем-то конфликтует. По крайней мере у меня на тестовом форуме никаких движений нет. Консоль смотреть надо :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 01 фев 2016, 22:50 Сообщение

Все же ждем расширения без правок :drink: НУ и конечно как победить все же эту ошибку? http://cabinetadmina.ru/viewtopic.php?p=70774#p70774
  • 0
Изображение

southklad 07 фев 2016, 20:52 Сообщение

Что же с ошибкой делать пользователи уже стали ее все чаще замечать и она очень не удобна
  • 0
Изображение

CabinetAdmin 08 фев 2016, 16:03 Сообщение

Так...
Сначала я даже не совсем понял что и куда сползает...
В общем дело не в этом моде, дело вообще не в расширениях и модах, дело в стиле. Вернее нет, совсем не в расширениях. Одно расширение даёт такой эффект - меню с выпадающим списком. В html структуре этого расширения есть id tabs, как и в структуре вкладок, вот страницу и поднимает при нажатии. За остальным в тему стиля.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 27 мар 2016, 21:23 Сообщение

Эххх когда же мы дождемся расширения этого :(
  • 0
Изображение

roma 22 авг 2016, 13:28 Сообщение

А есть ли расширение для 3.1?
  • 0

southklad 16 янв 2018, 17:34 Сообщение

Блин, но в 3.2 не работает :(
  • 0
Изображение

southklad 03 авг 2018, 20:38 Сообщение

Что же делать тем у кого 3.2? Очень надо чтобы это работало.
  • 0
Изображение

CabinetAdmin 04 авг 2018, 12:09 Сообщение

Что означает не работает? У меня работает, если делать всё по инструкции, кроме скрипта, он добавляется в футер. Собственно в 3.1 скрипт тоже добавляется в футер, поскольку библиотека расположена именно там. Установка на 3.1 и на 3.2 никак не отличается.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 04 авг 2018, 18:00 Сообщение

CabinetAdmin, странно я когда переходил в не основном форуме на 3.2 так и не смог дать им ума. Буду пробовать
  • 0
Изображение

southklad 19 окт 2020, 20:43 Сообщение

Установил для стиля Милк2

не появляются смайлы и выдает

Код: Выделить всё

Uncaught ReferenceError: $ is not defined
Изображение
  • 0
Изображение

Похожие темы