Wikipedia:Technik/Skin/Gadgets/editMenus/JS

editMenus mit JavaScript

---

Diese Seite erläutert fortgeschrittene Konfigurationsmöglichkeiten zu den Sonderzeichenleisten editMenus mittels der Programmiersprache JavaScript.

Sie sind angemeldeten und nicht angemeldeten Benutzern möglich. Zu den allgemeinen Rahmenbedingungen siehe Benutzer-Einstellungen und Benutzer-JS.

Übersicht

Es können eigene Menüs programmiert werden und weitgehend in die projektweit angebotene Gestaltung eingegriffen werden.

• Grundsätzlich beruht das Gadget auf menuSwitcher@PerfektesChaos, und dessen Programmierer-Schnittstelle kann für alle individuellen Anpassungen genutzt werden.
• Nach der Standard-Konfiguration wird ein mw.hook mit editMenus.completed ausgelöst, der als Parameter das Anwendungs-Objekt von menuSwitcher erhält.
  • Dieses enthält auch eine Komponente .fire() und dieser Funktion können eigene Menüs usw. als Konfigurationsobjekt übergeben werden.
  • Damit die eigene Konfiguration nicht von der projektweiten Spezifikation überschrieben wird, muss deren Fertigstellung zunächst abgewartet werden.
• Wenn vor dem Start ein mw.hook mit editMenus.position ausgelöst wird und diesem ein Positionierungs-Objekt mitgegeben wird, kann die Anordnung der Werkzeugleisten in der Seite beeinflusst werden.
  • Dazu sollte die automatische Aktivierung abgeschaltet werden, weil sonst die Positionierung bereits abgeschlossen sein kann.
  • Alternativ kann mit üblichen Mitteln die Positionierung später wie die jedes anderen Elements geändert werden.

Rahmen-Beispiel

Nachstehend ein Muster-Code, der für eigene Entwicklungen genutzt werden kann.

// <nowiki>
/* global mediaWiki: false */
( function ( mw ) {
   "use strict";

   function customize( app ) {
      var options = { };
      /* options.xyz = ... */
      app.fire( options );
   }


   switch ( mw.config.get( "wgAction" ) ) {
      case "edit":
      case "submit":
      case "parsermigration-edit":
      // mw.hook( "editMenus.position" ).fire( /* pos */  );
         mw.hook( "editMenus.completed" ).add( customize );
         break;
   }   // switch wgAction

   mw.loader.load( "ext.gadget.editMenus" );
}( mediaWiki ) );
//  </nowiki>

• Die Konfiguration wirkt auf die Quelltextbearbeitung einer Seite.
• In der Funktion customize() können die Vereinbarungen programmiert werden, die nach der projektweiten Konfiguration ausgeführt werden sollen.
• Das Objekt options ist dabei das Konfigurationsobjekt, das an das Anwendungsobjekt von menuSwitcher übergeben werden kann.
• app ist das Anwendungsobjekt für menuSwitcher und enthält noch einige Verwaltungsinformationen.
• Ggf. kann über "editMenus.position" auch noch ein alternativer Ort für die Platzierung von Menüblöcken spezifiziert werden.
• Erst nachdem alle Konfigurationsinformationen beisammen sind, wird mit mw.loader.load das Gadget programmatisch gestartet; dann in allen dort vorgesehenen Situationen.

Es wird davon ausgegangen, dass die automatisierte Ausführung deaktiviert wurde, damit sie erst nach Vervollständigung der Konfiguration durch die eigenen Wünsche in eine HTML-Darstellung umgesetzt wird.

Beispiel: Eigenes Einzel-Menü, Vorlage einfügen

Nachstehend:

• Definition eines eigenen Menüs unter dem Bezeichner Meins
• Angebot zum Einfügen der {{Internetquelle}} mit ausgefülltem Abrufdatum; Platzierung um die markierte URL, Einschluss in <ref>.
• Bei Quelltextbearbeitung einer Seite wird das Menü vor allen anderen in die Auswahl eingefügt. Die Reihenfolge zwischen den Fremdsprachen kann interaktiv angepasst werden.

// <nowiki>
/* global mediaWiki: false                                             */
( function ( mw ) {
   "use strict";

   function customize( app ) {
      var jetzt = new Date(),
          date  = jetzt.getFullYear() + "-" +
                  ( jetzt.getMonth() < 9  ?  "0"  :  "" ) +
                  ( jetzt.getMonth() +1 ) + "-" +
                  ( jetzt.getDate() < 10  ?  "0"  :  "" ) +
                  jetzt.getDate(),
          e = [ {start:  "<ref>{{Internetquelle |url=",
                 suffix: " |titel= |autor= | hrsg= | werk= |datum=" +
                         " |archiv-url= |archiv-datum= |offline=" +
                         " |sprache= |format= |abruf=" + date +
                         "}}</ref>",
                 show:   "{{Internetquelle}}"}
              ],
          panel = { selector: "Meins",
                    support:  "editMenus",
                    def:      e },
          options = { };
      options.defs = { contentmodel: "wikitext",
                       system:       "builtin",
                       create:       [ panel ] };
      app.fire( options );
   }


   switch ( mw.config.get( "wgAction" ) ) {
      case "edit":
      case "submit":
      case "parsermigration-edit":
         mw.hook( "editMenus.completed" ).add( customize );
         break;
   }   // switch wgAction

   mw.loader.load( "ext.gadget.editMenus" );
}( mediaWiki ) );
//  </nowiki>

Wer das möchte, kann eine individuell sinnvolle Auswahl des projektweiten Standard-Menüs (Funktion first()) nahtlos in sein persönliches Menü kopieren.

Beispiel: Tastaturkürzel

Das nachstehende Beispiel fügt auf Shift+Leertaste im Bearbeitungsfeld ein geschütztes Leerzeichen   ein.

• [data-id=41] ist momentan die laufende Nummer für   in den vom Projekt definierten Angeboten – könnte sich eines Tages unangekündigt ändern.
• Weitere Auswertungen anderer Tastaturkürzel könnten ebenfalls in function fired() erfolgen.

( function ( mw, $ ) {
   "use strict";
   var $nbsp;
   function fired( event ) {
      if ( event.shiftKey  &&
           event.key === " " ) {
         event.preventDefault();
         if ( ! $nbsp ) {
            $nbsp = $( "[data-id=41]" );
         }
         $nbsp.trigger( "click" );
      }
   }
   function furnish() {
      $( "#wpTextbox1" ).on( "keydown", fired );
   }
   $( furnish );
}( window.mediaWiki, window.jQuery ) );