Как изменить поведение загрузки ajax в Views?

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

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

Я знаю, что могу настроить это изображение, переопределив CSS для элемента throbber, но я бы предпочел не использовать его вообще.

Что я бы предпочел сделать, так это временно скрыть открытую форму фильтра (и в идеале также и основной вид), используя анимацию jQuery. Затем они исчезнут после завершения вызова AJAX.

В противном случае я хотел бы использовать тот же метод, который используется модулем пользовательского интерфейса Views при обновлении, а именно поместить этот значок в середине страницы:

Поскольку это уже встроено, я просто предполагал, что где-то будет настройка для изменения стиля / местоположения этого поведения загрузки; нет такой удачи, хотя

Как мне реализовать любой из этих методов?

Я использую Drupal 7 с Views 7.x-3.3.

Если вы не возражаете против использования небольшого количества jquery, вы всегда можете сделать что-то вроде:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

Для полноты вот код, который я в конечном итоге использовал; он затеняет как открытую форму фильтра, так и представление, когда начинается загрузка AJAX, и возвращается обратно, когда завершает работу:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);

Здравствуйте, я создал очень простой модуль, который дозирует именно то, что вы хотите сделать. Модуль имеет страницу конфигурации, где вы можете контролировать стиль пульсометра и даже загружать свои собственные изображения без какого-либо взлома.

Это ссылка на песочницу: http://drupal.org/sandbox/ANDiTKO/1556808

Если вы найдете это полезным, пожалуйста, покажите его здесь, чтобы он мог быть утвержден в качестве официального проекта: http://drupal.org/node/1556114

Я только что провел исследование.
Это throbberжестко закодировано здесь в конструкторе Drupal.views.ajaxView.
Экземпляр Drupal.views.ajaxViewне хранится в Drupal.ajaxи есть @todo о нем.
Это означает, что мы не можем войти в объект и установить свои собственные параметры.

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

Краткий ответ - CSS.
Страница администратора просмотров просто скрывает throbber и добавляет стиль своему родителю .ajax-progress-throbber.

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

Могу ли я что-то сделать с Drupal.ajax?

Да, я нашел несколько методов, которые вы можете перезаписать для элементов AJAX (кнопки, ссылки и т. Д.). Я показал здесь пример: как расширить или «зацепить» Drupal Form AJAX? , Но в этом случае все будет не так хорошо.
Элемент прогресса отображается на beforeSendэтапе, так что вы можете сделать что-то, прежде чем это произойдет.