js экшены и фильтры WP-Recall. Практическое применение

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

С версии 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 код между тегами:

<script></script>

1	<script></script>

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

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

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

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

function otfm_add_content_class(){
    if(!rcl_is_office()) return false; // если мы не в ЛК
$out = "<script>
rcl_add_action('rcl_upload_tab','otfm_after_load_content_add_class');
function otfm_after_load_content_add_class(){
    jQuery('#lk-content').addClass('my_custom_class');
}
</script>";
    echo $out;
}
add_action('wp_footer','otfm_add_content_class');

function otfm_add_content_class(){

if(!rcl_is_office()) return false; // если мы не в ЛК

$out = "<script>

rcl_add_action('rcl_upload_tab','otfm_after_load_content_add_class');

function otfm_after_load_content_add_class(){

jQuery('#lk-content').addClass('my_custom_class');

}

</script>";

echo $out;

}

add_action('wp_footer','otfm_add_content_class');

- как видно: мы в футер сайта добавили скрипт. Скрипт будет выводиться только в ЛК (во всех примерах эти участки идентичны). Внутри него функция 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 версии)

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

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

// прокрутка в вкладке чат к форме
function dd3_tab_scroll_tab_chat(){
    if(!rcl_is_office()) return false;
 
$out = "
function dd3_scroll_chat_form(e){
    var dChat = e.result.post.tab_id;               // мы получили объект и берем нужные данные
    var h = window.innerHeight;                     // высота окна браузера
    if(dChat === 'chat'){                           // мы во вкладке чат
        var chatForm = jQuery('.chat-form');        // наша форма
        if(chatForm.length < 1) return false;       // а это если мы в своем лк - ее нет (или гость)
        var offsetToChat = chatForm.offset().top;   // отступ до формы
        if((h + 250) < offsetToChat){ // если окно браузера огромное - не будем прокручивать
            jQuery('body,html').animate({scrollTop:offsetToChat - (h - 140)}, 1000); // 140 допуск на высоту формы
        }
    }
}
rcl_add_action('rcl_upload_tab','dd3_scroll_chat_form');
";
    echo '<script>'.$out.'</script>';
}
add_action('wp_footer','dd3_tab_scroll_tab_chat');

// прокрутка в вкладке чат к форме

function dd3_tab_scroll_tab_chat(){

if(!rcl_is_office()) return false;

$out = "

function dd3_scroll_chat_form(e){

var dChat = e.result.post.tab_id; // мы получили объект и берем нужные данные

var h = window.innerHeight; // высота окна браузера

if(dChat === 'chat'){ // мы во вкладке чат

var chatForm = jQuery('.chat-form'); // наша форма

if(chatForm.length < 1) return false; // а это если мы в своем лк - ее нет (или гость)

var offsetToChat = chatForm.offset().top; // отступ до формы

if((h + 250) < offsetToChat){ // если окно браузера огромное - не будем прокручивать

jQuery('body,html').animate({scrollTop:offsetToChat - (h - 140)}, 1000); // 140 допуск на высоту формы

}

rcl_add_action('rcl_upload_tab','dd3_scroll_chat_form');

echo '<script>'.$out.'</script>';

}

add_action('wp_footer','dd3_tab_scroll_tab_chat');

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

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

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

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

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

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

// выключим прокрутку к вкладке
function dd3_tab_scroll_off(){
    if(!rcl_is_office()) return false;

$out = "
rcl_add_filter('rcl_options_url_params','dd3_scroll_tab_off');
function dd3_scroll_tab_off(options){
        options.scroll = 0;
    return options;
}
";
    echo '<script>'.$out.'</script>';
}
add_action('wp_footer','dd3_tab_scroll_off');

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

function dd3_tab_scroll_off(){

if(!rcl_is_office()) return false;

$out = "

rcl_add_filter('rcl_options_url_params','dd3_scroll_tab_off');

function dd3_scroll_tab_off(options){

options.scroll = 0;

return options;

}

echo '<script>'.$out.'</script>';

}

add_action('wp_footer','dd3_tab_scroll_off');

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

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

var options = {
    scroll:1,
    offset:100
};

var options = {

scroll:1,

offset:100

};

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

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

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

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

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

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

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

// заменим спиннер на свой
function dd3_change_spinner(){
    if(!rcl_is_office()) return false;

    $out = "
rcl_add_filter('rcl_preloader_options','dd3_spinner');
function dd3_spinner(options){
    options.icon = 'fa-sun-o';
    return options;
}
";
    echo '<script>'.$out.'</script>';
}
add_action('wp_footer','dd3_change_spinner');

// заменим спиннер на свой

function dd3_change_spinner(){

if(!rcl_is_office()) return false;

$out = "

rcl_add_filter('rcl_preloader_options','dd3_spinner');

function dd3_spinner(options){

options.icon = 'fa-sun-o';

return options;

}

echo '<script>'.$out.'</script>';

}

add_action('wp_footer','dd3_change_spinner');

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

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

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

// сменим звук чата
function dd3_chat_sound(){
    if(!rcl_is_office()) return false;

$out = "
rcl_add_filter('rcl_chat_sound_options','dd3_sound');
function dd3_sound(options){
    options.path = Rcl.wpurl + '/wp-content/wp-recall/add-on/'; // путь до файла
    options.sounds = ['Draw'];  // имя файла
    options.volume = '0.6';     // громкость

    return options;
}
";
    echo '<script>'.$out.'</script>';
}
add_action('wp_footer','dd3_chat_sound');

// сменим звук чата

function dd3_chat_sound(){

if(!rcl_is_office()) return false;

$out = "

rcl_add_filter('rcl_chat_sound_options','dd3_sound');

function dd3_sound(options){

options.path = Rcl.wpurl + '/wp-content/wp-recall/add-on/'; // путь до файла

options.sounds = ['Draw']; // имя файла

options.volume = '0.6'; // громкость

return options;

}

echo '<script>'.$out.'</script>';

}

add_action('wp_footer','dd3_chat_sound');

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

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

/wp-content/wp-recall/add-on/

1	/wp-content/wp-recall/add-on/

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

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

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

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

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

не в сети 12 минут

Дружаев Владимир (Otshelnik-Fm)

3 075

"Web overclock" - Веб-разон. Ускорим свои сайты самыми безумными способами!
Зацени https://otshelnik-fm.ru/groups/web-overclock/

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

Комментариев (13)

garry Февраль 8, 2017 в 02:30 Войдите, чтобы ответить

Полезно и как всегда познавательно! Надеюсь осилю в итоге 🙂

1
Otshelnik-Fm Март 4, 2017 в 17:27 Войдите, чтобы ответить

Добавил еще один пример: "Прокрутим сразу к форме общения в чате" - так вы научитесь как из объекта выбирать нужную нам вкладку. Применимо для личного кабинета.

1
Aleks Март 30, 2017 в 15:54 Войдите, чтобы ответить

Замечательная статья 8)
Скажите, сниппет по замене спинера, заменяет только во вкладке ЛК. Можно ещё добавить , чтоб и при отправке сообщения в чате тоже менялся.

0
- Otshelnik-Fm Март 30, 2017 в 16:32 Войдите, чтобы ответить
  
  Убирайте проверку на кабинет в 3й строчке
  
  1
Aleks Март 30, 2017 в 16:37 Войдите, чтобы ответить

Супер 8)

0
Web-Blog Ноябрь 5, 2017 в 21:22 Войдите, чтобы ответить

А как вообще в ЛК отключить прокрутку? Дело в том, что пишу тут кое что и по задумке при нажатии на кнопку прокрутка должна крутит до заданного мной места, на всех страницах сайта работает, но вот в ЛК крутит к самому верху странички!

0
- Otshelnik-Fm Ноябрь 6, 2017 в 09:57 Войдите, чтобы ответить
  
  "Выключим прокрутку к вкладке" - почему этот пример не подошел?
  
  0
  - Web-Blog Ноябрь 6, 2017 в 12:27 Войдите, чтобы ответить
    
    Работает, но как-то не докручивает 200-300 пикселей по профилю, конкретно по полям профиля! Возможно тут уже косяк не в прокрутке к вкладке, а сам вп! В любом случае спасибо за статью и ответ!
    
    0
    - Otshelnik-Fm Ноябрь 6, 2017 в 12:30 Войдите, чтобы ответить
      
      Если сделали по инструкции "Выключим прокрутку к вкладке" то прокрутки вообще не будет. Вас не понять о чем вы говорите.
      Создавайте новую тему на форуме. Я не знаю что вам тут в каментах ответить еще.
      
      0
      - Web-Blog Ноябрь 6, 2017 в 12:33
        
        Все ОК, спасибо! Еще раз прошу прощения если флужу или задаю вопросы не корректно!
        
        0
dmitry6996 Февраль 28, 2018 в 20:24 Войдите, чтобы ответить

Класс! Полезненько )

0
AlekseiPo Март 15, 2018 в 12:43 Войдите, чтобы ответить

Давно хотел убрать прокрутку к вкладке. Вышел на эту тему с форума и всё смог реализовать. Спасибо, Владимир, за руководство!

1
SkaRzn Август 9, 2018 в 16:28 Войдите, чтобы ответить

Не пойму куда кусок скрипта

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

вставить нужно

PS/ не прочел сверху, там все написано, а я не внимательный))

0