Een van de dingen die ontbreken in de standaard-versie van Nucleus is een preview-optie voor reacties.
Onhandig voor hier op de site was ook dat er twee plugins zijn die op de server de ingevoerde code onder handen nemen voordat deze in de database opgeslagen wordt. De eerste vervangt de smilie-tekens die je kunt gebruiken door de HTML-code die de afbeeldingen laat zien en de tweede vervangt de Wiki-code die je kunt gebruiken in de reacties.
Er was wel een commentpreview-plugin, maar die kende natuurlijk mijn Wiki-code plugin niet en ik kreeg die ook niet meteen aan het werken. Dus ging ik zelf aan de slag.
Ik had al wat ervaring opgedaan met AJAX (Javascript + XML) voor het zoekvenster rechtsboven in de voorpagina (waar het zoeken begint zodra je begint te typen) en wilde dat ook voor de comment-preview.
De werking op het moment is eigenlijk heel simpel:
Onder het reactievak zie je nu naast de post-knop ook een preview-knop. Die preview-knop roept een stukje javascript aan zodra je er op klikt:
onclick=”javascript:getPreview(this.parentNode);”
De functie getPreview vind je in het bestand livepreview2.js waarnaar boven in elke pagina verwezen wordt:
<script type=”text/javascript” src=”livepreviewv2.js”></script>
In het voorbeeld kun je zien dat het script de inhoud van het textveld voor de reactie (“nucleus_cf_body”) pakt en dat doorgeeft aan een PHP-script op de server (“livepreview.php”). Dat PHP-script zorgt voor de daadwerkelijke preview, roept de plugins aan die ik heb en geeft het resultaat weer terug aan het Javascript dat er dan voor zorgt dat die preview toegevoegd wordt aan een <div> onder het tekstveld:
<div id=”LPResult” style=”display: none;”><br /><br /><h2>Preview:</h2><div id=”LPShadow” class=”formfield”> </div></div>
Het resultaat is dat je niet ziet dat er iets op de server gebeurt (tenzij je een langzame verbinding hebt of heel goed het dataverkeer tussen je browser en de server in de gaten houdt) terwijl het werk toch op de server kan gebeuren en ik niet het onnodige werk van het vertalen van bestaande PHP-code naar Javascript-code (zodat ik het in de browser kan runnen).
Al met al achteraf gezien redelijk simpel.