Отключить навигацию с клавиатуры (Wordpress) при открытом модальном окне PrettyPhoto

Я загружаю jQuery PrettyPhoto с CDN. У меня есть этот JS для включения навигации по сообщениям с клавиатуры:

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

Я хотел бы добавить логическое значение, чтобы предотвратить выполнение этого кода при открытом модальном окне PP, но я не уверен, как это сделать. Соответствующий код в PP:

// Window/Keyboard events
$(window).unbind('resize.prettyphoto').bind('resize.prettyphoto',function(){ _center_overlay(); _resize_overlay(); });

if (pp_settings.keyboard_shortcuts) {
  $(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto',function(e){
    if (typeof $pp_pic_holder != 'undefined'){
      if ($pp_pic_holder.is(':visible')){
        switch(e.keyCode){
          case 37:
            $.prettyPhoto.changePage('previous');
            e.preventDefault();
            break;
          case 39:
          $.prettyPhoto.changePage('next');
          e.preventDefault();
          break;
          case 27:
          if (!settings.modal)
            $.prettyPhoto.close();
            e.preventDefault();
            break;
        };
        // return false;
      };
    };
  });
};

Я знаю, что могу сделать что-то подобное в навигации по сообщениям:

  // Add keyboard navigation for the next & previous post buttons

 var canUseArrows = true;
 $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37 && canUseArrows) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39 && canUseArrows) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

Но я не уверен, как подключиться к функции PP.

Спасибо, что посмотрели,

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
166
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Кажется невозможным «подключиться к функции PP»; однако я пробовал со следующим, и у меня это работает:

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false,
      // Check if the modal is open/visible.
      canNavi = ! $('.pp_pic_holder').is(':visible');
    if (canNavi && e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (canNavi && e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

Спасибо; Я попробую и расскажу, как это работает.

Chris J. Zähller 12.03.2018 17:55

Это прекрасно работает. Я явно слишком много думал об этом.

Chris J. Zähller 12.03.2018 18:02

Это может быть немного эффективнее.

// Add keyboard navigation for the next & previous post buttons
$(document).keydown(function (e) {
var url = false,
// Check if the modal is open/visible.
canNavi = ( ! $( '.pp_pic_holder' ).length );
if (canNavi && e.which == 37) { // Left arrow key code
  url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
} else if (canNavi && e.which == 39) { // Right arrow key code
  url = $('a.next-post').attr('href');
}
if (url) {
  window.location = url;
}

});

Из документации jQuery:

  • Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

  • Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

Это должно быть верно для $('.pp_pic_holder:visible') (выбор элементов), но не $('.pp_pic_holder').is(':visible') (фильтрация элементов выбранный). Потому что я считаю, что .is(':visible') похож на .filter(':visible') (хотя возвращаемое значение отличается), что jQuery рекомендует при фильтрации выбранных или согласованных элементов. Из .is() doc, «он позволяет вам тестировать содержимое объекта jQuery без изменений», которым в нашем случае является объект $('.pp_pic_holder').

Sally CJ 13.03.2018 00:04

Однако, если вы предпочитаете просто проверить свойство length (то есть $( '.pp_pic_holder' ).length), то я думаю, что решение остается за вами. знак равно

Sally CJ 13.03.2018 00:09

Другие вопросы по теме