XF 2.0 Вопросы по созданию своего бб-кода..

[mgt]

Привет..

Накидал примерно такой код для бб-спойлера:

<div style="background: whitesmoke; border:1px #ceaf6f solid; font-size: 12px; text-align: left; padding: none; margin: 1px; display: inline-block;">
<div style="background: #dfdac0; text-transform: uppercase; padding: 2px 5px 2px 5px; border-bottom: 1px dotted #b35900; color: #7e5827; font-size: 1.05em; font-weight: bold; width: 100%; display: block;">
<span style="cursor: pointer; display: block;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b> Закрыть</b><a href=\'#\' onClick=\'return false;\'></a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b> Открыть</b><a href=\'#\' onClick=\'return false;\'></a>'; }" /><i class="fa fa-eye-slash"></i><b> Спойлер</b><a href="#" onClick="return false;"> </a>
<font style="text-transform: lowercase; font-size:10.5px;"></font></span></div>
<div class="quotecontent"><div style="font-size: 14px; padding: 10px; 16px; 16px; 10px; display: none;">{text}</div></div></div>
<style type="text/css">
    A { text-decoration: none; color: #7e5827; }
    A:link { text-decoration: none; color: #7e5827; }
    A:hover { text-decoration: none; color: #7e5827; }
    A:active { text-decoration: none; color: #7e5827; }
    A:visited { text-decoration: none; color: #7e5827; }
</style>

он работает, но не совсем так как мне нужно, по-этому есть вопросы:
1. Если заголовок в {option} не указан, то используется текст по умолчанию: "Спойлер", "Закрыть", "Открыть", который указан в коде и обрабатывает по кликам.
1.1 Если заголовок в {option} указан, то текст по умолчанию использоваться не должен.

2. Также, для заголовка я использую иконки FA, но как не пытался их вставлять в код под разными видами написания и с изменением кавычек внутренних и внешних, иконка не выводиться в зависимости от клика по спойлеру, в лучшем случае пустой квадрат вместо символа FA, строка всё также не читается корректно.
Но, если иконку вставлять в тег <a href=> здесь </a>, то она выводиться корректно в любом виде написания..

Вообщем, всю голову изломал как реализовать подобное, может у кого мысли есть какие, как реализовать то что мне нужно?

 

[Captain]

?? Что за ужас? Привет говнокод. Js -> js, css->css а не привет inline style. Спойлер из коробки есть и привет EXTRA.less

 

[mgt]

Captain,
эм.. спойлер из коробки меня не совсем устраивает, по остальному по подробнее можно?

 

[Captain]

И чем он не устраивает? Стилевым оформлением? Есть EXTRA.less

 

[mgt]

И чем он не устраивает?

1. Реализация на основе баттона, убогая.
2. Стиль, это изменить легко.
3. Не знаю у кого как, но у меня он жутко тормозит, при раскрытии, даже видна задержка в его раскрытии.. Предположу что из-за моей старой версии хрома, но обновляться мне не вариант..
   а этот "говнокод", лишен этих недостатков как ни странно ??

 

[Captain]

1. Ну тут кнопка тоже
2. Так чем он не устраивает?
3. Там как минимум css находится в css, js в js. Я удивлён, что ты ещё не засунул обработчик на php в шаблон

 

[West14]

"говнокод", лишен этих недостатков как ни странно

при этом, он не перестает быть говнокодом.

 

[mgt]

Captain,

1. ну там объект кнопа, а здесь все-таки не совсем тоже самое..
2. видом и тем что он лагает у меня, мне хотелось бы видеть спойлер как тот, который был на АГ.ру когда-то..
3. вы же понимаете что для тестовой болванки форума это все условности и перекинуть ксс в лесс, проблемы не составит..

ну и новичок я во всем этом, так что не судите строго..

 

[Matew]

1. Если заголовок в {option} не указан, то используется текст по умолчанию: "Спойлер", "Закрыть", "Открыть", который указан в коде и обрабатывает по кликам.
1.1 Если заголовок в {option} указан, то текст по умолчанию использоваться не должен.

Используйте тернарный оператор. {{ condition ? if true : if false }}

UPD: Хотя по уму, наверное, лучше было бы использовать обработчик

 

[mgt]

Matew,
А с примером кода можно глянуть такую реализацию, ну и/или почитать где все это расписано по обоим пунктам если не затруднит?

 

[Matew]

А с примером кода можно глянуть такую реализацию, ну и/или почитать где все это расписано по обоим пунктам если не затруднит?

Честно говоря, не помню, чтобы данные моменты были в документации, поэтому проще будет откопать в ресурсах какой-то bb код с обработчиком и посмотреть на его пример