Vorlage Diskussion:Anker

JavaScript-Funktion, um Anker sichtbar zu machen

Hallo Autoren,

wie ihr wisst, ist eines der Nachteile dieser Vorlage, dass sie nur im Quelltext der Seite sichtbar ist. Dies ist natürlich sinnvoll, da einem Leser ein Anker in der Regel versteckt werden soll. Mich als Autor hat es aber immer gestört, erst im Quelltext eines Artikels nachzuschauen, wo sich welche Anker befinden. Ich habe mir deswegen eine JavaScript-Funktion geschrieben, die Anker für mich sichtbar macht. Diesen JavaScript-Code habe ich in meiner benutzerdefinierten JavaScript-Datei gespeichert (diese Datei ist über die Seite Spezial:Einstellungen im Abschnitt „Aussehen“ aufrufbar). Der Code ist folgender:

function changeAnchors() {
   var spans = document.getElementsByTagName('span');
   var span;
   var anchorName;
 
   for (var k = 0; k < spans.length; k++) {
      span = spans[k];
 
      if (span.hasAttribute('id') && span.getAttribute('id').match('^Anker:.*')) {
         anchorName = span.getAttribute('id');
         anchorName = anchorName.substring('Anker:'.length, anchorName.length);
 
         span.appendChild( document.createTextNode('⚓ ' + anchorName) );
         span.setAttribute('class', 'noprint');
         span.setAttribute('style', 'color: gray; font-size: small; vertical-align: super;');
      }
   }
}
 
aOnloadFunctions[aOnloadFunctions.length] = changeAnchors;

Aus dem Quelltext

'''Wichtig! Wichtig!''' {{Anker|Ankername}}

wird dann durch obigen JavaScript-Code:

Wichtig! Wichtig!

Wollen wir dies als Hinweis in den Seiten Vorlage:Anker und Hilfe:Links/ Inmitten einer Seite aufnehmen? Grüße Stephan Kulla 01:23, 7. Mär. 2011 (CET)

Nette Idee, hab's als Gadget (Einstellungen -> Helferlein) unter dem Namen showAnchors verfügbar gemacht. Wenn noch Änderungen gewünscht sind sag Bescheid. Ein Hinweis dazu kann gern auf die Seite, falls du das nicht vor mir erledigst kümmere ich mich morgen drum. ;) Gruß --Prog 02:36, 7. Mär. 2011 (CET)

Die Hinweise stehen jetzt drin, herzlichen Dank für die Idee. Gruß --Prog 18:54, 7. Mär. 2011 (CET)

Hallo Prog, ich habe den Code erweitert. Nun werden die Buchstaben ÄÜÖäüöß!? und das Leerzeichen richtig dekodiert (vorher wurden diese Buchstaben in einer kodierten Form dargestellt - anstatt `Ü' wurde `.C3.9C' angezeigt). Leider habe ich bisher noch keine Möglichkeit gefunden, dass alle kodierten Buchstaben richtig kodiert werden. Kennst du eine Möglichkeit? Hier erst einmal der aktuelle Code:

function changeAnchors() {
   var spans = document.getElementsByTagName('span');
   var span;
   var anchorName;
 
   for (var k = 0; k < spans.length; k++) {
      span = spans[k];
 
      if (span.hasAttribute('id') && span.getAttribute('id').match('^Anker:.*')) {
         // Ankername berechnen
         anchorName = span.getAttribute('id');
         anchorName = anchorName.substring('Anker:'.length, anchorName.length);
 
         /*
          * Problem: nicht alle enkodierte Buchstaben werden dekodiert
          * TODO: Lösung für dieses Problem finden
          */
         anchorName = anchorName.replace(/_/g, ' ');
         anchorName = anchorName.replace(/\.C3\.84/g, 'Ä');
         anchorName = anchorName.replace(/\.C3\.9C/g, 'Ü');
         anchorName = anchorName.replace(/\.C3\.96/g, 'Ö');
         anchorName = anchorName.replace(/\.C3\.A4/g, 'ä');
         anchorName = anchorName.replace(/\.C3\.BC/g, 'ü');
         anchorName = anchorName.replace(/\.C3\.B6/g, 'ö');
         anchorName = anchorName.replace(/\.C3\.9F/g, 'ß');
         anchorName = anchorName.replace(/\.21/g, '!');
         anchorName = anchorName.replace(/\.3F/g, '?');
 
         // span-Tag verändern
         span.appendChild( document.createTextNode('⚓ ' + anchorName) );
         span.setAttribute('class', 'noprint');
         span.setAttribute('style', 'color: gray; font-size: small; vertical-align: super;');
      }
   }
}
 
aOnloadFunctions[aOnloadFunctions.length] = changeAnchors;

Grüße Stephan Kulla 19:43, 7. Mär. 2011 (CET)

Eine Stunde nachdenken für eine Zeile Code, naja läuft jetzt jedenfalls. ;) (Diese Codes sind übrigens ne UTF8-Codierung, praktischerweise stimmt das mit der URI-Codierung überein.) Gruß --Prog 21:50, 7. Mär. 2011 (CET)

Danke für deine Lösung des Dekodier-Problems! Es gibt jedoch noch das Problem, dass Ankernamen mit dem Buchstaben „.“ nicht richtig dekodiert werden („.“ wird zunächst fälschlicherweise durch „%“ ersetzt wodurch in der Regel eine falsch kodierte URI entsteht). Ich habe den Code angepasst, um nur diejenigen Buchstaben „.“ zu ersetzen, denen eine zweistellige Hex-Zahl folgt. Außerdem habe ich noch die Zeile anchorName = anchorName.replace(/_/g, ' '); ergänzt, um auch Leerzeichen richtig zu dekodieren. Den aktuellen Code findest du auf Benutzer:Stephan Kulla/vector.js. Grüße Stephan Kulla 22:03, 8. Mär. 2011 (CET)

Hab beides Umgesetzt, mit den Leerzeichen bin ich aber noch nicht so richtig glücklich. Auf C++-Programmierung/ Inhaltsverzeichnis ist mir durch dein Script ein Fehler bei den Ankern aufgefallen (führendes Leerzeichen) das fällt nach der Änderung auf Leerzeichen weg. Vielleicht kommt mir dazu noch mal ne bessere Idee. Gruß --Prog 22:08, 9. Mär. 2011 (CET)

Mit der jetzigen Version kann ich gut leben. Unterstriche werden übersetzt, falls sie allein (rechts und links kein Unterstrich) und nicht am Anfang oder Ende stehen. Gruß --Prog 16:15, 10. Mär. 2011 (CET)

Ich finde die aktuelle Version auch super. Gute Arbeit Prog ^^ Grüße Stephan Kulla 20:45, 10. Mär. 2011 (CET)