Показать меню раздела

On Click Markupper

OnClickMarkupper позволяет создавать кнопки, исходя из своего содержания генерирующие текстовый код и вставляющие его под курсор в текстовом пространстве. Такие кнопки позволяют добавлять в режим редактирования страницы сложный функционал, избавляя редакторов от необходимости помнить его синтаксис.

Что это делает?

В режиме редактирования страницы создаем карту сайта, выводящуюся в отдельной вкладке. Во время редактирования страницы редактор сайта может перейти в эту вкладку и увидеть полную структуру всего сайта. Кликнув на любой статье он вставит форматированную ссылку на нее в текст своего материала. Удобно!

Более общее применение: программирование реакции на "клик" по любому элементу DOM с реакцией в виде вставки текстового фрагмента в текстовый блок "под курсор".

Демо

Живой пример

Пусть есть вот такой код: 

<ul>
<li class="object">
  <span class="obj-title">MultyUploader </span>
  <span class="obj-name">PmWikiPh/MultyUploader</span>
</li>
<li class="object">
  <span class="obj-title">КнопкоКодоГенератор</span>
  <span class="obj-name">PmWikiPh/OnClickMarkupper</span>
</li>
</ul>

С помощью данного рецепта можно запрограммировать вставку ссылок по клику просто следующим вызовом функции:
phOnClickMarkupper('ul li.object', '.obj-name', '[[%GOAL%|+]]', 'clicked-by-user', 'text');

Код будет следить за кликом по li, находить в нем вложенный span.obj-name, его содержимое вставлять в микрошаблон на место %GOAL% и, наконец, получившийся текст вставлять под курсор текстового поля text, назначая при этом класс clicked-by-user кликнутому li.

Техническая информация

Требования

Библиотека jQuery.

Как это работает

OnClickMarkupper работает через jQuery (т.е. с использованием обычных CSS-селекторов) следит за DOM-объектом, по которому кликнул пользователь, выбирает дочерний объект, и через предопределенный шаблон вставляет его в текстовый блок туда, где в данный момент расположен курсор. Кликнутому элементу назначается специальный класс, означающий его кликнутость.

Подключение, настройки, использование

Скачайте и подключите в макете дизайна файл http://master.pmwiki.ru/pub/!phph/!phph-pack/phOnClickMarkupper.js. Подключайте файл после jQuery и до первого вызова функционала.

Далее, эту функцию нужно вызвать столько раз, в скольких обстоятельствах вы будете ее применять.

Удобнее всего это делать через (farm)config.php. Например, по-умолчанию, функция вызывается вот так:
$HTMLFooterFmt['scripts']['OnClickMarkupper.js-sitemap']= "<script>phOnClickMarkupper('#sitemap a', 'HREF', '[[%GOAL%|+]]', 'clicked-by-user', 'text');</script>";
Это обеспечивает работоспособность вкладки Карта Сайта в режиме редактирования.

Если вы измените метод формирования Карты Сайта (вот здесь), например, используя SitemapsPack, то вызов функции необходимо будет переопределить. Это можно сделать, перезаписав тот же элемент массива еще раз, примерно вот так:
$HTMLFooterFmt['scripts']['OnClickMarkupper.js-sitemap']= "<script>phOnClickMarkupper('новые_параметры_вызова";
Важно понимать, что использование массива HTMLFooterFmt позволяет вам сделать это в любом месте, например:

  • в конфигурации локального сайта, работающим в рамках Фермы
  • в конфигурации локального макета дизайна;
  • в конфигурации Рецепта.

При этом нет необходимости правки не исходного кода конфигурации системы.

Если вы захотите использовать Рецепт еще раз (например, в другой вкладке), следует добавить еще один вызов функции. Это делается также, как и переопределение, просто нужно изменить ключ массива. Например вот так: $HTMLFooterFmt['scripts']['OnClickMarkupper.js-uploader']=....

Конфигурация

Рассмотрим пример конфигурации: phOnClickMarkupper('.what-is-clicked', '.where-is-source', '[[%GOAL%|+]]', 'clicked-by-user', 'text'); Здесь:

  • .what-is-clicked - валидный CSS-селектор, определяющий элемент, по которому предполагается обеспечить реакцию на клик
  • .where-is-source - валидный CSS-селектор, определяющий дочерний по отношению к what-is-clicked элемент, в котором хранится Значение для вставки. Внимание: если такой элемент будет не один, то на страницу вставятся все найденные значения.
    • опционально, вместо CSS-селектора можно указать значение HREF. В этом случае, скрипт возьмет значение атрибута href той ссылки, по которой кликнули.
  • [[%GOAL%|+]] - микрошаблон, через который "прогоняется" Значение перед вставкой. %GOAL% заменяется на Значение из .where-is-source
  • clicked-by-user - имя класса, который будет добавлен элементу, определенному на первом шаге

Служебная информация

Status
beta
Core
yes
Version
20190829

Todo:pmwiki.ru

  • собственно, а где Рецепт-то? Актуализировать.
  • глюк в Карте Сайта, ссылка GO не работает