Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 1

С версии WP-Recall 15.3.0 было объявлено о js фильтрах (filters) и экшенах (actions) и появилась подробная статья с описанием
В данной статье мы рассмотрим практическое применение этим хукам (руководство применимо к версии WP-Recall 15.7.0 и старше).

Навигация:

* Добавим дополнительный css класс контенту вкладки
* Выключим прокрутку к вкладке
* Заменим иконку loader-а на свою
* Сменим звук приходящего сообщения в чате. Прибавим или убавим его

Немного слов:

По аналогии с фильтрами и экшенами в вордпресс, js хуки в WordPress плагине WP-Recall дают нам мощный инструмент динамического влияния, изменения или, по сигналам, расширения имеющегося функционала.
Например систему js-хуков я применил в дополнении личного кабинета Across Ocean Pro - я отлавливаю событие загрузки вкладки, и только потом, шеврону (кнопке вызова мобильного меню), я назначаю класс.

Или в дополнении You Need To Login – когда после загрузки вкладки я внутри нее начинаю обработку на jquery.

Т.е. экшены позволяют нам зацепиться за событие, и как только оно наступило – выполнить нашу js функцию
Если вы хотите посмотреть весь список js actions – ищите поиском по файлам WP-Recall  rcl_do_action
Если вам нужны js фильтры – ищите rcl_apply_filters

Вначале хочу дать пояснение к коду ниже. Опытные разработчики его называют спагетти-код - когда в коде намешиваются разные языки - например в php идет js, jQuery, html, css. Когда их можно было бы положить в свои файлы и подключать по необходимости. Т.е. чтобы избавиться от этого вы просто js код между тегами:

- (php переменная $out) можете разместить в подключенном вашим шаблоном (или вами) .js файле. Но не спрашивайте меня "где этот js в моей ВП теме", "что это", "я разместил - а не работает". Поэтому берите php код и вставляйте как знаете -  в файл функций (functions.php) вашей вордпресс темы (статья то для новичков - поэтому этот момент правильности опустим, так же как и не будем говорить о том - "когда мне нужен один мелкий js-сниппет - зачем мне озадачиваться поисками нужного js файла?")

Рассмотрим практическое применение js actions:

Добавим дополнительный css класс контенту вкладки

Работать мы будем с  rcl_upload_tab - это js экшен. Срабатывает как только ajax вкладка загрузилась

 

- как видно: мы в футер сайта добавили скрипт. Скрипт будет выводиться только в ЛК (во всех примерах эти участки идентичны). Внутри него функция otfm_after_load_content_add_class повешена на событие rcl_upload_tab - и внутри этой функции идет работа jquery по добавлению контентной части вкладки - css класса my_custom_class.

Напомню - событие срабатывает в момент ajax загрузки (динамической) - и отловить это событие теперь просто.

Пример слишком абстрактный - но кто знаком с работой хуков вордпресс - увидят много общего. Цель - показать как прицепиться к js хуку - достигнута.

Вы внутри функции можете запускать свою логику работы - что либо добавить - как html, так и стили, или наоборот - поудалять ненужное нам. Заменить текст.
В общем - все то, что можно сделать используя методы jquery

Js хуки:

rcl_before_upload_tab - срабатывает перед загрузкой вкладки (начало ajax загрузки)
rcl_upload_tab - срабатывает после того как контент вкладки получен. класс .active кнопке назначен
rcl_footer - в футере. когда html загрузка страницы происходит.
rcl_success_upload_avatar - удачная загрузка аватарки (с 15.9 версии)
rcl_success_upload_cover - удачная загрузка обложки (с 15.9 версии)

Прокрутим сразу к форме общения в чате:

Перейдя в чужой кабинет, залогиненным пользователем, и нажав на вкладку "Чат" - если наше окно маленькое - то прокрутка доведет нас до формы ввода сообщения. Что весьма удобно для мобильных пользователей:

 

- тут мы из элемента "e", который содержит объект данных текущей вкладки, взяли информацию о том, какая это вкладка - и применили это "точечно".

 

Рассмотрим практические применения js filters:

С фильтрами тоже интересно работать - так же как и в вордпресс фильтрах мы должны возвращать результат.

Часто на форуме задавали вопрос - "а как отключить в кабинете автоматическую прокрутку к вкладке?" - его и рассмотрим.

Выключим прокрутку к вкладке

Работаем с фильтром rcl_options_url_params - он содержит единственную настройку - скроллить к табу или нет. По умолчанию включен. Выключим его:

- тут мы так же в личном кабинете прописываем скрипт в футере. И внутри функции dd3_scroll_tab_off - мы меняем параметр настройки и возвращаем его.

В оригинале, в скрипте js/recall.js - в плагине была такая настройка:

- мы повлияли на нее установив scroll в 0 (а как вы видите есть возможность повлиять на отступ - но это вам домашнее задание). Теперь нам не нужно исправлять это в скрипте, боясь обновить плагин и затереть наши правки - функция выше, размещенная в файле функций вашей вордпресс темы (functions.php) сделает это.

Идем дальше (дальше круче):

Заменим иконку loader-а на свою

Все мы видели, нажимая на вкладку в личном кабинете, или нажимая на вызов блока "подробная информация" как в то время пока ajax-запрос обрабатывается крутящуюся иконку ожидания. Я называю ее спиннер (spinner):

его мы сейчас заменим на свой.

Выбираем нужную иконку на сервисе Font Awesome. Для примера я взял fa-sun-o

Простой код js-фильтра:

- Повлияли на фильтр rcl_preloader_options, где в options.icon - мы поставили свою иконку.

Сменим звук приходящего сообщения в чате. Прибавим или убавим его

Самый нужный сниппет. Позволит вам влиять на громкость звукового уведомления чата, и сменить его:

- влияем на фильтр rcl_chat_sound_options и передаем в него новый путь до файлов, имя файла и  громкость. Если надо просто прибавить/убавить громкость у текущего файла - строчки options.path и options.sounds из примера стираем.

Как мы видим в коде файлы размещены у нас по пути:

- мы знаем что обновления плагина WP-Recall не затирают эту папку.

Звуки sounds.zip  - скачиваем на пк. Распаковываем. И два файла Draw.mp3 и Draw.ogg заливаем к себе на сайт - в вышеуказанную папку (два файла нужны для разных устройств и разных браузеров)

 

Такие вот возможности дает плагин WP-Recall. Мы разобрали лишь часть из них. Возможно каких-то хуков еще нет - но дайте знать где и какие вам нужны - автор плагина рассмотрит возможность добавления.

Полезные ссылки:
Старт для разработки
Коллекция сниппетов к WP-Recall

3

Автор публикации

260

Вся лента по разработке здесь: http://across-ocean.otshelnik-fm.ru/?author=1&tab=notes&gpf=2307

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Комментарии: 1030Публикации: 120Регистрация: 27-01-2013Продаж/Покупок: 5289/120