Skip to main content

I'm rolling thunder ...

... I'm pouring rain. I'm coming up like a hurricane! - AC/DC Lange haben wir es uns vorgenommen, endlich ist es so weit. Zensations trägt sein Scherflein zu Drupal bei. Und zwar in Form eines Moduls, das ein, vielleicht nicht monumentales, aber dennoch lästiges Problem lösen soll.

Thou shall give and thou shall be giveth. Ein Grundsatz den eigentlich der Hausverstand diktiert. Und gerade in einer so aktiven und hilfsbereiten Community, wie der rund um das Content Management System Drupal, ist die Motivation sich einzubringen sehr hoch. Jedoch sind es dann die lästigen Kleinigkeiten wie Tagesgeschäft und Brötchen verdienen, die immer wieder Vorrang haben. Um dem entgegenzuwirken haben wir beschlossen es ähnlich kleinen Unternehmen wie Google oder 3M nachzumachen, und den Freebie Friday eingeführt. Den Freitag widmen wir also ab sofort, sofern nicht gerade irgendein Hut brennt, der Weiterentwicklung eigener Module und allgemeiner Mithilfe in der Drupal Community..

Hurricane

Das erste Ergebnis ist ein kleines Modul namens Hurricane. Jeder kennt, kaum einer liebt ihn - den Drupal Throbber. So toll die AJAX-API ist, das kleine pixelige animated Gif mit den hässlichen weißen Rändern muss man in 99% aller Anwendungsfälle ersetzen. Und da es in der Natur von Entwicklern liegt wiederkehrende Aufgaben zu automatisieren, hat sich letztendlich ein Modul daraus entwickelt.

Throbber + Chuck = Hurricane

Zielsetzung

Das Ziel war relativ einfach definiert. Ein Drop-in Replacement für den von Drupal mitgelieferten Progress Indicator, das so wenig wie möglich in vorhandene HTML Strukturen eingreift um überall kompatibel zu sein, möglichst viele Browser unterstützt, den zusätzlichen Aufwand der Erstellung eines animated Gif für jede Farb- und Größenvariation wegrationalisiert und auch gleich für hochauflösende Displays optimiert ist. Als Basistechnologie die diese Anforderungen am besten erfüllt entpuppte sich nach eingehender Studie verschiedenster vorhandener Throbber-Plugins wie CanvasLoader und Spin.js, die SVG/VML Library Raphaël.

Wie funktionierts?

Als erstes installiere man die aktuelle Version von Raphaël in einem der libraries Ordner von Drupal und Version 2.0 oder höher des von Hurricane benötigten Libraries Moduls. Hurricane ist im Moment noch ein experimentelles Projekt und kann nur über Git geklont werden:

git clone http://git.drupal.org/sandbox/pmelab/1806234.git hurricane

Alternativ ist es im Moment auch noch als Download auf Github verfügbar. Danach erscheinen vier neue Einträge in der Drupal Moduladministration:

hurricane

Das Kernmodul, welches das jQuery Plugin zur Verfügung stellt. Plant man Hurricane komplett von Hand zu steuern reicht dieses alleine aus. Richtig, hier kann man gar nicht definieren wie der Throbber aussieht. Dazu kommen wir später.

$('.my-throbber').hurricane()

hurricane_integration

Damit klinkt sich Hurricane selbstständig in die API's von Drupal ein und ersetzt vorhandene Throbber.

Hurricane Integrationsbeispiel

Ausserdem wird in den Theme Settings eine neue Gruppe für Hurricane verfügbar, wo der Default-Throbber für dieses Theme konfiguriert werden kann.

![Hurricane Settings](/sites/default/files/images/Bildschirmfoto 2012-10-11 um 09.44.35.png "Hurricane Theme Settings")

hurricane_renderers

Das Basismodul liefert nur eine sehr simple Ausgabeform, einen in zwei Farben pulsierenden, Punkt (den sogenannten Drop) standardmäßig mit aus. hurricane kann über einen Hook um weitere Renderer erweitert werden, was in hurricane_renderers passiert. Möchte man mit Hurricane herumspielen empfiehlt es sich diese Modul auch gleich zu aktivieren.

  • Hurricane: Der namensgebende Renderer, der im großen und ganzen die Darstellung und Optionen von CanvasLoader und Spin.js nachahmt.
  • Twister: Eine Reihe von lustigen Symbolen, die man nach belieben rotieren und in zwei Farben pulsieren lassen kann.

hurricane_tests

In Zukunft soll diese Modul auch die automatisierten Tests enthalten, im Moment stellt es aber nur eine einfache Seite mit dem Pfad hurricane/test zur Verfügung. Dort findet man einen Ajax-Button und ein Autocomplete Feld mit eingebauter Verzögerung. So kann man den erstellten Throbber in aller Ruhe unter realen Bedingungen im eigenen Theme testen.

CSS Integration

An diesem Punkt haben wir einen wunderschön konfigurierbaren Throbber der automatisch in allen AJAX-Funktionen angezeigt wird und auch noch selbstständig die in CSS-definierte Größe des entsprechenden HTML-Elements annimmt. Was aber, wenn wir an einem aufwändigeren Interface arbeiten in dem zum Beispiel verschiedene Hintergrundfarben vorkommen oder wir je nach Semantik des Prozesses (Bildupload, Autovervollständigung, Suche, Views-Paging ...) einen anderen Indikator einbauen wollen? Oder auf kleinen Screens eine gänzlich andere Darstellung verwenden? Im schlimmsten Fall müsste man für jede Variation eine eigene Gif-Animation bauen. Und selbst mit anderen Javascript-Libraries die schon das einfache ändern von Farbe und Form ermöglichen wäre es notwendig diese separat aufzurufen. Und damit wäre die schöne automatische Integration in Drupal wieder vernichtet.

Hier kommt der eigentliche Clou von Hurricane ins Spiel. Anstatt dem Plugin die Einstellungen direkt zu übergeben, werden sie aus CSS Font- und Textproperties, die innerhalb des Throbber-Elements ohnehin nicht gebraucht werden, gelesen. So ist es möglich CSS Mechanismen zu nutzen, um das Aussehen des Throbbers wie das jedes anderen Seitenelements zu steuern. Zum Beispiel verwandelt folgendes Snippet den Throbber von Autocompletion-Textfeldern in eine pulsierende Lupe:


.form-item-autocomplete .ajax-progress div.throbber {
    line-height: 50px;
    text-indent: 100px;
    word-spacing: 72px;
    letter-spacing: 1px;
    font-size: 50px;
    font-weight: 900;
    font-family: twister !important;
    color: #3182c5;
    background-color: #CCC;
}

Angepasster Throbber

Zugegeben, niemand würde sich merken wollen welche CSS Properties für welche Änderungen der Darstellung verantwortlich sind. Noch dazu können die Implementierungen der Renderer diese völlig frei interpretieren. Deswegen wird im Bereich Export/CSS der Theme Settings die aktuelle Konfiguration direkt als CSS Snippet ausgegeben.

![CSS Export](/sites/default/files/images/Bildschirmfoto 2012-10-11 um 12.22.43.png "CSS Export in Theme Settings")

Das mag auf den ersten Blick wie ein unwichtiges Detail wirken, ermöglicht aber das Aussehen eines Ajax-Elements vollständig im Stylesheet zu definieren, ohne von einer zusätzlichen JavaScript Datei abhängig zu sein. Damit kann die Darstellung des Indikators zusammen mit der des restlichen Elements definiert werden, was die Konsistenz erhöht und den Aufwand von verschiedenen Variationen (Stichwort Media Queries und Adaptive Design) verringert.

Probleme

Zwar ist die Browserkompatibilität von Internet Explorer 6+ recht beeindruckend, der Android Standardbrowser unterstützt SVG jedoch erst seit Version 3.2. Die dort erhältlichen Alternativbrowser wie Opera Mini und Firefox unterstützen den Standard schon länger, sind aber nicht all zu weit verbreitet.

Ein anderes Problem ist natürlich die zusätzlichen 31kb Datentransfer die Raphael verursacht. Man muss aber bedenken dass diese zusammen mit anderen JavaScript Dateien aggregiert übertragen werden und im Gegensatz zu einer Throbbergrafik keinen zusätzlichen HTTP-Request auslösen. Und aufwändigere Interfaces werden eventuell ohnehin SVG/VML verwenden und Raphael daher auch anders nutzen.

Zukunft

Momentan muss das Modul vor allem getestet werden, und wir freuen uns sehr über Bugreports in der Issue Queue. Gern gesehen sind auch Anregungen für neue Animationen des Renderers. Ein weiterer Knackpunkt sind andere Module in die sich Hurricane integrieren sollte. Auch hier sind wir für Hinweise dankbar. Auf dass sich die Community nicht nur mit Kleinigkeiten wie Views in Core und Configuration Management die Zeit vertreibt, sondern endlich die wirklichen Probleme in Angriff nimmt! Wer Ironie findet darf sie behalten.

Wird nicht veröffentlicht