Кнопка «Код для блога» в NetCat как генерировать кнопки «Код для Блога» в листинге объектов в NetCat

В этом рецепте описан способ создания кнопки вывода "кода для вставки в блог" через Fancybox, с автоматическим созданием превью. Рассмотрим сразу самый сложный случай: генерирование кнопки "Код для блога" в листинге объектов, т.е. по одной кнопке для каждой статьи, коих на странице сразу много.

Этот материал устарел, поскольку крайне неразумно делать столько запросов к БД. Описанный в конце статьи todo, это скорее mustdo перед применением рецепта на боевом сайте.

Версия NetCat: любая
Статус: бета, требуются доработки
Источники: www.fancybox.net, www.ixbt.com :)

Установка:

Так как код будет выводиться в Fancybox (как его засунуть в NetCat рассказано в Как интегрировать Fancybox в NetCat?), для его вызова будем использовать ссылку вида <a class='sourcecodelink' href='#data$f_RowID'>Код для вставки в блог</a>, где "sourcecodelink" - указатель группы настроек для вызова Fancybox (см. подробности по предыдущей ссылке), а "#data$f_RowID" - сгенерированный уникальный идентификатор div'a для вывода. Как видите, он состоит из статичной части data (может быть и любым другим буквосочетанием) и динамической части - ID текущего объекта. Сделано это специально, чтобы кнопку можно было использовать при листинге нескольких объектов на странице, поместив ее код в поле "объект в списке" компонента.

Не столь важно, чем именно будет выводиться код (это может быть и простое всплывающее окно), как то, что же там будет внутри. А вот что:

    <!-- Код для вставки в блог-->
    <div style='display:none'> <!-- блок скрыт и не отображается на странице-->
        <div id='data$f_RowID'> <!-- ID этого блока совпадает с якорем в ссылке, по которой мы будем вызывать блок, и это НЕ случайно :), именно его содержимое выцепит и продемонстрирует Fancybox  -->

                <div style='width: 900px;'> <!-- превью рассчитано на разрешение 1024х768, тут надо задать размер внешнего блока-->
                <div style='clear: both;'></div>
                Код:<br>
                <div style='text-align:center;'>
                    <!-- нижеследующая textarea - это и есть то поле, откуда пользователь скопирует код в буфер. В ней текст всегда выделен, и ее ширина задается в числе симоволов, а не в пикселях. Именно поэтому чуть выше мы задали ширину внешнему блоку -->
                    <textarea style='font-size: 10px;' readonly='readonly' rows='10' cols='217' onfocus='this.select()' onclick='this.select()'>
<!-- finar.ru code--><div style='font-size: 12px; font-family: Verdana, Geneva, sans-serif; background: #FFFFFF; padding: 10px 10px; margin: 15px 0; border: 1px solid #000; color: #000;'><a href='$subHost$fullLink'><img style='float: left; margin: 0 15px 5px 0; border: 1px solid #ECECF3;' alt='finar.ru' title='$f_Name' src='$subHost/images/logo.jpg' border='0'></a><div style='font-size: 11px; margin: 0 0 4px 0; letter-spacing: 0; color: #999;'>$f_Date</div><h2 style='font-size: 14px; font-weight: bold; line-height: 20px; text-align: left; margin: 0 0 4px 0; letter-spacing: 0;'><a style='color: #000' href='$subHost$fullLink'>$f_Name</a></h2><div style='line-height: 17px; font-size: 12px;'>$f_Preview</div><div style='clear: both;'><p><a style='color: #333' href='$subHost$fullLink'>Читать далее на finar.ru</a></p></div></div><!-- /finar.ru code--></textarea>

                </div>
                Превью:<br><!-- а это тот же код, только на этот раз он исполнится в бразуере пользователя, и он увидит симпатичную картинку-->
                <div style='clear: both;'></div>
                <div style='font-size: 12px; font-family: Verdana, Geneva, sans-serif; background: #FFFFFF; padding: 10px 10px; margin: 15px 0; border: 1px solid #000; color: #000;'>
                    <a href='$subHost$fullLink'>
                        <img style='float: left; margin: 0 15px 5px 0; border: 1px solid #ECECF3;' alt='finar.ru' title='$f_Name' src='$subHost/images/logo.jpg' border='0'>
                    </a>
                    <div style='font-size: 11px; margin: 0 0 4px 0; letter-spacing: 0; color: #999;'>$f_Date</div>
                    <h2 style='font-size: 14px; font-weight: bold; line-height: 20px; text-align: left; margin: 0 0 4px 0; letter-spacing: 0;'><a style='color: #000' href='$subHost$fullLink'>$f_Name</a></h2>
                    <div style='line-height: 17px; font-size: 12px;'>$f_Preview</div>
                    <div style='clear: both;'>
                        <p><a style='color: #333' href='$subHost$fullLink'>Читать далее на finar.ru</a></p>
                    </div>
                </div>
                <div style='clear: both;'></div>
                </div>
        </div>
    </div>
    <!-- /Код для вставки в блог-->

Использование:

Думаю, из комментариев к коду все предельно ясно. Результат работы можно увидеть на скриншоте:

To-do:

Все это здорово, но после вставки такого кода в "Объект в списке" число запросов к БД при листинге увеличится до трех раз. Как этого можно избежать?

  1. JavaScript'ом копировать содержимое textarea в "превью", чтобы не генерить его на сервере дважды
  2. выводить код iframe'ом (через адресную строку меняя макет дизайна и шаблон представления компонента) или ajax'ом только по запросу пользователя.
  3. update: создать отдельный шаблон компонента для подгрузки подобных вещей ajax'ом

Но это уже в todo-лист, а пока кэширование спасет мир!

Блог

Tilda Module: интеграция NetCat с Tilda.cc

Представляем нашу новую разработку, модуль интеграции CMS NetCat с платформой Tilda.cc. Модуль дает возможностью полуавтоматически размещать классные лендинги прямо в структуре вашего сайта!

далее

Как оптимально заархивировать файлы, чтобы распаковать их средствами ISPmanager?

В определенных случаях файлы выгоднее заливать на веб-сервер в виде архива. Во-первых, если данные хорошо сжимаются, или же просто файлов очень много, это сократит время заливки. Во-вторых, в любом случае это обезопасит данные от случайного повреждения, так как при распаковке архива происходит проверка его целостности с помощью контрольной суммы (CRC). Однако, не вполне понятно, какой формат архива и тип сжатия выбирать? Мы провели небольшое экспериментальное исследование на эту тему.

далее

Как расшифровать бэкапы, зашифрованные ISPmanager?

В ISPmanager версии 5.52.0 и старше, реализована новая система резервного копирования, построенная на основе некоей ISPtar. И работает она... своеобразно. Попробуем разобраться, как именно.

далее

Типовой сайт по раскрытию информации по Приказу ФСФР 22.06.2005 № 05-23/пз-н

Представляемый программный комплекс предназначен для российских УК ПИФ (управляющих компаний паевого инвестиционного фонда). В соответствии с требованиями законодательства, такие УК обязаны иметь сайт по раскрытию информации, на котором будет регулярно публиковаться определенный набор документов, касающихся их деятельности. И не только публиковаться, но и своевременно отправляться в Архив, а кроме всего прочего должно вестись журналирование всех этих действий. Иначе -- плохо, иначе -- нарушение действующего законодательства, наказания, штрафы, отзыв лицензии и так далее.

далее

Весь блог тут