Wikipedia:Technik/Skin/Gadgets/editMenus/JS

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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.

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

[Quelltext bearbeiten]

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

[Quelltext bearbeiten]

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

[Quelltext bearbeiten]

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

  • [data-id=41] ist momentan die laufende Nummer für &nbsp; 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 ) );