Site links

Indledning

Fra HTML4.0 har det været muligt at markere et HTML-dokuments ændringer med elementerne DEL og INS. I en browser vises slettet tekst (DEL) oftes men en streg over teksten, mens indsat tekst (INS) vises med en streg under teksten.
mhaDocChanges gør det muligt at vise og skjule disse ændringer, så man kan se det "aktuelle" dokument og det med alle ændringerne.

Der findes også en nyere forklaring af XHTML Edit Module

Top

Eksempel

Dette er et eksperiment eksempel på ins og del.

Du kan se en ren version, hvor HTML, CSS, og JS er adskilt i 3 filer.

Top

Opsætning

For at opbygge en side med mhaDocChanges skal du bruge følgende filer: En javascript-fil (docchanges.js) samt et stylesheet (docchanges.css) for at lave grund stylen på DEL og INS elementerne.

Som i eksemplet ovenfor er DEL rød med en linie igennem og INS er blå med en linie under. Hvis du ønsker at ændre dette skal du i filen docchanges.js ændre i konfigurations variablerne i dhd.cfg.

Variablerne cssINSshow og cssDELshow bestemmer, hvordan INS og DEL skal se ud når de vises, mens cssINShide og cssDELhide bestemmer, hvordan de skal se ud når de skjules. 

dhd.cfg = {
 cssINSshow : 'text-decoration: underline; color: blue;',
 cssDELshow : 'text-decoration: line-through; display: inline; color: red;',
 cssINShide : 'text-decoration: none; color: black;',
 cssDELhide : 'text-decoration: none; display: none; color: black; ',
 cssShowen : false
}

Der hvor man ønsker at indsætte knappen, der viser og skjuler ændringer, skal man indsætte et div element med id'et showChanges.

<div id="showChanges"></div>

Top

Dokumentation

Koden benytter namespaces (ex. dhd.showDocChanges) som du kan læse mere om i artiklen Designing for portability: 1 ved kapitlet "Isolating your code through Namespaces"

Ved eventen onload bliver funktionen dhd.initShowDocChanges kørt, hvis browseren understøtter de metoder der bliver brugt i koden.

I dhd.initShowDocChanges undersøges om der finde DEL og INS elementer samt en div element med id'et showChanges på siden. Hvis der gør, oprettes knappen til at skjule og vise ændringerne. Knappen får tilføjet funktionen dhd.showDocChanges ved eventen onclick.

I funktionen dhd.showDocChanges undersøges der udfra boolean'en dhd.cfg.cssShowen om DEL og INS elementerne skal skjules eller vises. Funktionen dhd.insertCSS køres på konfigurations variablerne i dhd.cfg på elementerne INS og DEL.

Funktionen dhd.insertCSS indsætter en CSS reglen enten på W3C måden via insertRule eller på Microsofts måde via addRule.

Top