Русское сообщество fluxbb

artoodetoo

Admin by chance

Зарегистрирован: 2008-09-09

Сообщений: 887

Сайт

Мод: обращение к пользователю и панелька кнопок BBcode

Всё это делалось уже пятьсот миллионов раз, опишу как я поступил с этим конкретным сайтом. Работа заняла у меня примерно 5 минут.

Итак, моя цель в картинках:

и

Во-первых мне понадобится JavaScript, чтобы что-то добавлять в текстовое поле. Отправляюсь на punbb.ru, заглядываю в исходники и добываю вот такую функцию:

function insert_text(open, close)
{

    msgfield = (document.all) ? document.all.req_message : ((document.getElementById('afocus') != null) ? (document.getElementById('afocus').req_message) : (document.getElementsByName('req_message')[0]));

    // IE support
    if (document.selection && document.selection.createRange)
    {
        msgfield.focus();
        sel = document.selection.createRange();
        sel.text = open + sel.text + close;
        msgfield.focus();
    }

    // Moz support
    else if (msgfield.selectionStart || msgfield.selectionStart == '0')
    {
        var startPos = msgfield.selectionStart;
        var endPos = msgfield.selectionEnd;

        msgfield.value = msgfield.value.substring(0, startPos) + open + msgfield.value.substring(startPos, endPos) + close + msgfield.value.substring(endPos, msgfield.value.length);
        msgfield.selectionStart = msgfield.selectionEnd = endPos + open.length + close.length;
        msgfield.focus();
    }

    // Fallback support for other browsers
    else
    {
        msgfield.value += open + close;
        msgfield.focus();
    }

    return false;
}

Здесь моё только "return false", было просто "return". Это важно!
Текст сохраняю в файл /js/post.js

Этот джаваскипт где-то надо подключать. Открываю header.php, нахожу строку

    echo '<script type="text/javascript" src="style/imports/minmax.js"></script>';

добавляю за ней

if (in_array(basename($_SERVER['PHP_SELF']), array('viewtopic.php', 'post.php', 'edit.php')))
    echo '<script type="text/javascript" src="js/post.js"></script>';

Нужны иконки кнопок. Опять же с punbb.ru краду иконки. Они прекрасно подходят к Oxygen-подобным стилям. Если hcs скажет откуда иконки, я с радостью публично скажу спасибо автору и дам ссылку.

Файлы картинок сохраняю в папку /style/Oxygen/img/bbcode/ (возможно в будущем у меня будут разные иконки для разных стилей, см. ниже)

Создаю новый файл панели инструментов для вставки во все редакторы (их три — viewtopic, post и edit)
Файл /include/bbcode.inc.php

<?php

if (file_exists(PUN_ROOT.'style/'.$pun_user['style'].'/img/bbcode/b.png'))
    $btndir = $pun_config['o_base_url'].'/style/'.$pun_user['style'].'/img/bbcode/';
else
    $btndir = $pun_config['o_base_url'].'/style/Oxygen/img/bbcode/';
$smldir = $pun_config['o_base_url'].'/img/smilies/';

echo <<<EOT
        <div id="bbcode-wrapper">
            <div id="bbcode-buttons">
<a href="#" title="b"        onclick="return insert_text('[b]','[/b]')"><img src="{$btndir}b.png" alt="[b]" /></a>
<a href="#" title="i"        onclick="return insert_text('[i]','[/i]')"><img src="{$btndir}i.png" alt="[i]" /></a>
<a href="#" title="u"        onclick="return insert_text('[u]','[/u]')"><img src="{$btndir}u.png" alt="[u]" /></a>
<a href="#" title="url"        onclick="return insert_text('[url]','[/url]')"><img src="{$btndir}url.png" alt="[url]" /></a>
<a href="#" title="email"    onclick="return insert_text('[email]','[/email]')"><img src="{$btndir}email.png" alt="[email]" /></a>
<a href="#" title="img"        onclick="return insert_text('[img]','[/img]')"><img src="{$btndir}img.png" alt="[img]" /></a>
<a href="#" title="list"    onclick="return insert_text('[list]','[/list]')"><img src="{$btndir}list.png" alt="[list]" /></a>
<a href="#" title="*"        onclick="return insert_text('[*]','[/*]')"><img src="{$btndir}li.png" alt="[*]" /></a>
<a href="#" title="quote"    onclick="return insert_text('[quote]','[/quote]
')"><img src="{$btndir}quote.png" alt="[quote]" /></a>
<a href="#" title="code"    onclick="return insert_text('[code ]','[/code ]
')"><img src="{$btndir}code.png" alt="[code ]" /></a>
<a href="#" title="color="    onclick="return insert_text('[color=]','[/color]')"><img src="{$btndir}color.png" alt="[color=]" /></a>
            </div>
            <div id="bbcode-smilies">
<a href="#" onclick="return insert_text('', ' :) ');" ><img src="{$smldir}smile.png" alt=":)" /></a>
<a href="#" onclick="return insert_text('', ' :| ');" ><img src="{$smldir}neutral.png" alt=":|" /></a>
<a href="#" onclick="return insert_text('', ' :( ');" ><img src="{$smldir}sad.png" alt=":(" /></a>
<a href="#" onclick="return insert_text('', ' :D ');" ><img src="{$smldir}big_smile.png" alt=":D" /></a>
<a href="#" onclick="return insert_text('', ' :o ');" ><img src="{$smldir}yikes.png" alt=":o" /></a>
<a href="#" onclick="return insert_text('', ' ;) ');" ><img src="{$smldir}wink.png" alt=";)" /></a>
<a href="#" onclick="return insert_text('', ' :/ ');" ><img src="{$smldir}hmm.png" alt=":/" /></a>
<a href="#" onclick="return insert_text('', ' :P ');" ><img src="{$smldir}tongue.png" alt=":P" /></a>
<a href="#" onclick="return insert_text('', ' :lol: ');" ><img src="{$smldir}lol.png" alt=":lol:" /></a>
<a href="#" onclick="return insert_text('', ' :mad: ');" ><img src="{$smldir}mad.png" alt=":mad:" /></a>
<a href="#" onclick="return insert_text('', ' :rolleyes: ');" ><img src="{$smldir}roll.png" alt=":rolleyes:" /></a>
<a href="#" onclick="return insert_text('', ' :cool: ');" ><img src="{$smldir}cool.png" alt=":cool:" /></a>
            </div>
            <div class="clearer"></div>
        </div>

EOT;

ВАЖНО!!! мне пришлось добавить лишние пробелы в этом тексте везде, где встречается слово "code". Уберите их, когда будете копировать!

Этот файл надо инклудить из редакторов. Открываю на редактирование viewtopic.php нахожу строку

<div class="infldset txtarea">

сразу за ней добавляю

<?php include PUN_ROOT.'include/bbcode.inc.php'; ?>

то же самое проделываю с файлами post.php и edit.php

Я забыл про "обращение к автору", это где маленькая стрелка вниз на первой картинке!
Возвращаюсь во viewtopic.php, нахожу такой текст

<strong><?php echo $username ?></strong>

это вывод имени автора сообщения. сразу после него вставляю свою волшебную стрелочку. Получается вот так:

<dt><strong><?php echo $username ?></strong><a href="#req_message" onclick="return insert_text('', '[b]<?php echo pun_htmlspecialchars($cur_post['username']) ?>[/b], ')">&nbsp;&darr;&nbsp;</a></dt>

Работа сделана! Остается только чуть-чуть поправить стиль, чтобы панель кнопок смотрелась лучше. В конец файла /style/imports/base.css добавляю такой текст:

/* ---------- BBCODE TOOLBAR ------------- */
DIV#bbcode-wrapper {
    MARGIN: 0;
    PADDING: 0;
    POSITION: relative;
    OVERFLOW: hidden;
}
DIV#bbcode-wrapper A {
    DISPLAY: block;
    FLOAT: left;
    PADDING-RIGHT: 4px;
}    
DIV#bbcode-buttons {
    FLOAT: left;
}
DIV#bbcode-smilies {
    FLOAT: right; 
}

=================
Скачать мод можно отсюда: https://fluxbb.qb7.ru/files/fluxbborgrujs090614.zip

---

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Luca

Участник

Зарегистрирован: 2009-10-08

Сообщений: 164

Re: Мод: обращение к пользователю и панелька кнопок BBcode

>Текст сохраняю в файл /js/post.js

Путь от корня сайта какой?

artoodetoo

Admin by chance

Зарегистрирован: 2008-09-09

Сообщений: 887

Сайт

Re: Мод: обращение к пользователю и панелька кнопок BBcode

js/post.js путь от корня форума. если сайт = форум, то такой

---

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.