Кнопка "Развернуть" в [code]

[Slash]

Здравствуйте. Сегодня увидел на этом форуме кнопку Развернуть в кодах заключеных [coda] и захотел себе так же...
Подскажите как сделать?

[HAMMER663]

Могу рассказать общую теорию))
Итак, файл styles/prosilver/template/bbcode.html
после

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

<a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a>

добавить как раз ссылку

это куда-нибудь в футер (да простит меня Некстати за то что выдрал из phpbbguru )

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

<script type="text/javascript">
// <![CDATA[
$$('div.codebox').each(function(e) {
var bs = e.getChildren();
if (bs[1].scrollHeight > bs[1].offsetHeight + 1) {
bs[0].appendText(' · ');
new Element('a').setProperty('href', '#').setText('Развернуть').injectInside(bs[0])
.addEvent('click', function(event) {
//event.preventDefault();
event.preventDefault ? event.preventDefault() : event.returnValue = false;
viewableArea(bs[1], true); // forum_fn.js
this.setText(this.getText() == 'Развернуть' ? 'Свернуть' : 'Развернуть');
});
}
});
// ]]>
</script>

Это на mootools. Соответственно надо подключать <script type="text/javascript" src="/js/mootools.js"></script>

Добавлено спустя 45 секунд:
Это всего-лишь пример реализации, а не рабочий вариант

[Nekstati]

Скрипт тут использован лишь для того, чтобы ссылка «Развернуть» не появлялась там, где кода мало и нечего разворачивать. А в простейшем случае можно сделать так: найти в bbcode.html

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

<!-- BEGIN code_open --><dl class="codebox"><dt>{L_CODE}: <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a></dt><dd><code><!-- END code_open -->

заменить на

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

<!-- BEGIN code_open --><dl class="codebox"><dt>{L_CODE}: <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a> &middot; <a href="#" onclick="viewableArea(this.parentNode.nextSibling.childNodes[0], true); return false;">{L_EXPAND_VIEW}</a></dt><dd><code><!-- END code_open -->

[Slash]

Nekstati, спасибо. Кнопка появилась... А можно доделать, что б при развёрнутом состоянии менялась кнопка на Свернуть?
И если код влазиит в окно BBcode то кнопка не появлялась?

[Nekstati]

Raisin, открыть overall_footer.html, найти </body>, добавить выше:

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

<!-- IF SCRIPT_NAME == 'viewtopic' -->
<script type="text/javascript">
// <![CDATA[
$$('dl.codebox').each(function(e) {
	var bs = e.getChildren();
	var bt = bs[1].getChildren()[0];
	if (bt.scrollHeight > bt.offsetHeight + 1) {
		bs[0].appendText(' · ');
		new Element('a').setProperty('href', '#').setText('{L_EXPAND_VIEW}').injectInside(bs[0])
			.addEvent('click', function(event) {
			event.preventDefault ? event.preventDefault() : event.returnValue = false;
			viewableArea(bt, true); // forum_fn.js
			this.setText(this.getText() == '{L_EXPAND_VIEW}' ? '{L_COLLAPSE_VIEW}' : '{L_EXPAND_VIEW}');
		});
	}
});
// ]]>
</script>
<!-- ENDIF -->

Требуется Mootools 1.1.

[Hitech]

Может конечно не в тему, но можно сделать так, чтобы была подсветка кода на этом форуме?
Так на много приятнее читать код...
Вот даже мод для этого есть
[Русский перевод] Syntax Highlighter
Плиз

[Nekstati]

Можно. Работаем над этим. Проблема в том, что существующие подсветчики неидеальны. Один подсветчик делает код нечитаемым в IE, другой портит в коде некоторые символы, так что он становится нерабочим, и т. д. и т. п.

[Hitech]

Nekstati
Если будет поддержка всех браузеров кроме IE, то этого будет достаточно как мне кажется.
На IE 6 сейчас мало кто ориентируется, все начинается от версии IE7. Но даже если не будет поддерживаться IE ни в какой версии, все равно большая часть пользователей (больше 70%) будет видеть красивый код

[evrus01]

ГУРУ, ты же знаешь, что мы все равняемся на тебя. Расскажи нам пожалуйста, какой скрипт (мод) самой подсветки синтаксиса используешь ты? Это же вроде не Syntax Highlighter, который упоминал Hitech.
Заранее благодарю за ответ.

[Nekstati]

http://softwaremaniacs.org/soft/highlight/

Простейший способ подключения этого подсветчика: открыть overall_header.html, найти </head>, добавить перед:

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

<link rel="stylesheet" type="text/css" href="http://yandex.st/highlightjs/6.1/styles/vs.min.css" />
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script type="text/javascript">
// <![CDATA[
	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (i = 0; i < boxes.length; i++) {
			if (boxes[i].innerHTML.indexOf('<span') < 0) {
				hljs.highlightBlock(boxes[i], null, true);
			}
		}
	}
	onload_functions.push('highlightInit()');
// ]]>
</script>

Здесь функция highlightInit() проверяет, не подсвечен ли уже код встроенным подсветчиком phpBB, и если нет, инициализирует Highlight.js.

А вот то же самое, но с добавлением ссылок «Развернуть/Свернуть» к большим блокам кода:

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

<link rel="stylesheet" type="text/css" href="http://yandex.st/highlightjs/6.1/styles/vs.min.css" />
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script type="text/javascript">
// <![CDATA[
	function expandCode(e) {
		var c = e.parentNode.nextSibling.firstChild;
		if (c.style.maxHeight == 'none') {
			c.style.maxHeight = '200px';
			e.innerHTML = '{L_EXPAND_VIEW}';
		}
		else {
			c.style.maxHeight = 'none';
			e.innerHTML = '{L_COLLAPSE_VIEW}';
		}
	}
	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (i = 0; i < boxes.length; i++) {
			if (boxes[i].innerHTML.indexOf('<span') < 0) {
				hljs.highlightBlock(boxes[i], null, true);
			}
			if (boxes[i].scrollHeight > boxes[i].offsetHeight + 1) {
				boxes[i].parentNode.previousSibling.innerHTML += ' &middot; <a href="#" onclick="expandCode(this); return false;">{L_EXPAND_VIEW}</a>';
			}
		}
	}
	onload_functions.push('highlightInit()');
// ]]>
</script>

Внимание: для примера тут указана ссылка на CSS, хранимую на Яндексе, но вам надо использовать локальную CSS и чуть подправить её: заменить все pre на dl.codebox code, иначе код не будет подсвечиваться. Например, было:

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

pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag {
  font-weight: bold;
}

Стало:

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

dl.codebox code .css .tag,
dl.codebox code .javadoctag,
dl.codebox code .phpdoc,
dl.codebox code .yardoctag {
  font-weight: bold;
}

И ещё необходимо добавить в эту CSS следующие строки:

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

dl.codebox code {
  color: #000;
}

Учтите также, что автоопределение языка в Highlight.js часто ошибается. Например, PHP сплошь и рядом принимается за Perl. Чтобы ошибок было меньше, сделайте свою сборку Highlight.js, содержащую только те языки, которые вам необходимы.

На phpBB Guru всё сделано сильно по-другому. Но это отдельная песня; опубликую её в виде мода, если будет время. Пока можете попробовать использовать этот мод: syntax highlighting - highlight.js — но учтите, что он недоработан и с ним могут быть проблемы в некоторых браузерах.

[evrus01]

Решил обойтись скриптом в шаблоне (свой ксс + свой пак языков, как вы рекомендовали) — все прекрасно подсвечивает. Спасибо огромное.
Ваши советы бесценны.

[evrus01]

А как бы сделать кнопку скопировать [Copy to clipboard]?

Вместо кнопки [Выделить все]

Добавлено спустя 3 минуты 56 секунд:
Вот чего нашел https://github.com/jonrohan/ZeroClipboard

Добавлено спустя 3 минуты 6 секунд:
http://evrus.ts6.ru/clipboard/test.html

Доки с примерами

[Nekstati]

Штатно копирование выполняется в два действия: нажатие на ссылку «Выделить всё» и Ctrl+C, и с этой модификацией оно тоже будет выполняться в два действия: нажатие на ссылку и закрытие алерта, сообщающего об успешности операции (а без алерта нельзя: пользователь не поймёт, скопировалось оно или нет). Т. е. никакой выгоды в удобстве нет, зато есть лишние 10 КБ кода. Ну и флэш сам по себе — бяка и у некоторых несознательных личностей отключён.

Кстати, в старой версии известного скрипта Syntax Highlighter использовалась эта фича, но в новой автор от неё почему-то отказался.

[evrus01]

Nekstati, посмотрите, как "alert" реализован, например, здесь (copied!)

[Djeday]

У меня почему-то не работает подсветка кода.
Пробовал и со скриптами, что в данной теме и скачивал с офф. сайта - не помогает.
Файл css изменил, как написано. В overall_header добавил код:

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

<link rel="stylesheet" type="text/css" href="http://djedaysoft.ru/scripts/vs.css" />
<script type="text/javascript" src="http://djedaysoft.ru/scripts/highlight.pack.js"></script>
<script type="text/javascript">
// <![CDATA[
	function expandCode(e) {
		var c = e.parentNode.nextSibling.firstChild;
		if (c.style.maxHeight == 'none') {
			c.style.maxHeight = '200px';
			e.innerHTML = '{L_EXPAND_VIEW}';
		}
		else {
			c.style.maxHeight = 'none';
			e.innerHTML = '{L_COLLAPSE_VIEW}';
		}
	}
	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (i = 0; i < boxes.length; i++) {
			if (boxes[i].innerHTML.indexOf('<span') < 0) {
				hljs.highlightBlock(boxes[i], null, true);
			}
			if (boxes[i].scrollHeight > boxes[i].offsetHeight + 1) {
				boxes[i].parentNode.previousSibling.innerHTML += ' &middot; <a href="#" onclick="expandCode(this); return false;">{L_EXPAND_VIEW}</a>';
			}
		}
	}
	onload_functions.push('highlightInit()');
// ]]>
</script>

В тему стиля добавил код.
А код теперь отображается так:

1.jpg