Come posso modificare il comportamento di caricamento di Ajax in Views?

Ho una vista con alcuni filtri esposti in un blocco; utilizza AJAX e la funzione di invio automatico, quindi la vista viene ricaricata non appena viene modificata un'opzione di filtro.

Nel breve ritardo tra la selezione di un'opzione e il caricamento della vista, il familiare throbber AJAX blu viene mostrato da qualche parte nella parte inferiore del modulo (penso dove si trova attualmente il pulsante di invio nascosto).

So di poter personalizzare questa immagine sovrascrivendo il CSS per l'elemento throbber, ma preferirei non usarlo affatto.

Quello che preferirei di gran lunga fare è sbiadire temporaneamente il modulo di filtro esposto (e idealmente anche la vista principale), usando un'animazione jQuery. Poi svanirebbero di nuovo quando la chiamata AJAX è completa.

In caso contrario, vorrei utilizzare lo stesso metodo utilizzato dal modulo dell'interfaccia utente di Views durante l'aggiornamento, ovvero posizionando questa icona al centro della pagina:

Dato che è già incorporato, ho appena ipotizzato che ci sarebbe un'impostazione da qualche parte per cambiare lo stile / posizione di questo comportamento di caricamento; nessuna tale fortuna però.

Come posso implementare uno di questi metodi?

Sto usando Drupal 7 con Views 7.x-3.3.

Se non ti dispiace usare un po 'di jquery potresti sempre fare qualcosa del tipo:

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

Per completezza, ecco il codice che ho finito per usare; sbiadisce sia la forma del filtro esposta che la vista quando inizia il caricamento AJAX, e torna di nuovo al termine:

(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);

Ciao, ho creato un modulo molto semplice che dosa esattamente quello che vuoi fare. Il modulo ha una pagina di configurazione in cui puoi controllare lo stile del ladro e persino caricare le tue immagini senza alcun hacking.

Questo è il link sandbox: http://drupal.org/sandbox/ANDiTKO/1556808

Se lo trovi utile, ti preghiamo di consultarlo qui in modo che possa essere approvato come progetto ufficiale: http://drupal.org/node/1556114

Ho appena fatto una ricerca.
Il throbbercodice è codificato qui nel costruttore di Drupal.views.ajaxView.
Un'istanza di Drupal.views.ajaxViewnon è memorizzata in Drupal.ajaxe non esiste @todo .
Significa che non possiamo entrare nell'oggetto e impostare i nostri parametri.

Come funziona Views?

La risposta breve è CSS.
La pagina di amministrazione di Views nasconde throbber e aggiunge stile al suo genitore .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;
}

Posso fare qualcosa con Drupal.ajax?

Sì, ho trovato alcuni metodi che è possibile sovrascrivere per gli elementi AJAX (pulsanti, collegamenti, ecc.). Ho mostrato un esempio qui: Come estendere o "agganciare" Drupal Form AJAX? . Ma in questo caso non sarà così buono.
L'elemento progresso sta mostrando sul beforeSendpalco, quindi puoi fare qualcosa prima che accada.