La procedura descritta è sostanzialmente applicabile a qualunque sistema di blogging, a patto che si abbia accesso al codice sorgente delle pagine che rappresentano sia il template per la lista commenti che quello per la compilazione e registrazione del commento stesso. Nel caso specifico verranno descritte due procedure passo passo, una per il sistema WordPress e una per il sistema BlogEngine.NET .
L'obiettivo è quello di aggiungere in calce (o in testa a seconda di come si preferisca) a ciascun commento di un post, un'area cliccabile (identificabile con un pusante, un immagine o un link ipertestuale) che consenta di copiare automaticamente il testo (o parte) del commento stesso, all'interno della casella (textbox) destinata alla compilazione del nuovo messaggio da inviare. E' ormai prassi consolidata chiamare questa operazione "quotare un testo": si utilizza nelle risposte (o reply) alle e-mailW, ad i post nei forumW di discussione e nei commenti ai post pubblicati in un blogW.
Per raggiungere tale scopo è necessario che il testo di ciascun commento sia identificato da un tag avente un ID univoco. Praticamente tutti i sistemi di blogging correntemente utilizzati attribuiscono un codice univoco a ciascun commento: normalmente, però, tale ID viene assegnato ad un tag contenitore (generalmente un DIV) che al suo interno contiene numerose altre informazioni, oltre al testo del commento, che non sono necessarie ai fini del nostro obiettivo. Per questo motivo sarà necessario assegnare un ID univoco solo al testo del commento ed al nome (o nickname) dell'autore dello stesso.
Procedura per WordPress
Aprire il file comments.php del tema associato al proprio blog e posizionarsi nella sezione di codice relativa al ciclo di generazione commenti: generalmente è racchiuso tra le stringhe
<?php foreach ($comments as $comment) : ?>
...
<?php endforeach; /* end for each comment */ ?>
Individuare la stringa di codice:
<?php comment_author_link() ?>
Verificare che tale stringa non sia già racchiusa all'interno di una coppia di tag <span> ... </span>. In caso affermativo aggiungere all'interno del tag la stringa:
ID="au_<?php comment_ID() ?>"
avendo cura di non eliminare altri attributi già presenti all'interno di esso. In caso contrario sostituire completamente la stringa con:
<span ID="au_<?php comment_ID() ?>"><?php comment_author_link() ?></span>
Individuare la stringa di codice:
<?php comment_text() ?>
Verificare che tale stringa non sia già racchiusa all'interno di una coppia di tag <span> ... </span> . In caso affermativo aggiungere all'interno del tag la stringa:
ID="co_<?php comment_ID() ?>"
avendo cura di non eliminare altri attributi già presenti all'interno di esso. In caso contrario sostituire completamente la stringa con:
<span ID="co_<?php comment_ID() ?>"> <?php comment_text() ?></span>
Nel caso in cui il codice di cui sopra, sia racchiuso tra una qualunque altra coppia di tag (ad esempio <div> ... </div>), si può procedere in maniera del tutto identica a quanto già descritto precedentemente.
Individuare la stringa di codice che identifica la fine del ciclo di generazione commenti. Generalmente è individuata dalla linea di codice:
...
<?php endforeach; /* end for each comment */ ?>
Immediatamente prima di questo comando inserire il seguente codice HTML
<input type="button" value="Cita" onclick="Quote('<?php comment_ID() ?>')" />
In questo modo il pulsante collegato alla procedura di citazione automatica del commento verrà posizionato in coda al commento stesso. Se invece si preferisce posizionarlo in testa, è necessario inserire il codice HTML indicato, subito dopo l'inizio del ciclo di generazione commenti, vale a dire dopo il codice individuato da:
<?php foreach ($comments as $comment) : ?>
...
Ora è necessario inserire il codice javascriptW contenente la funzione richiamata dall'evento click di ogni pulsante associato al relativo commento (la posizione in cui si copia il codice è assolutamente ininfluente):
<script type="text/javascript">
<!--//
function Quote(otextarea) {
var otext = document.getElementById("co_" + otextarea);
var oauthor = document.getElementById("au_" + otextarea)
var otextCommentArea = document.getElementById("comment");
if (window.getSelection)
var sel = window.getSelection();
else if (document.getSelection)
var sel = document.getSelection();
else if (document.selection) {
var sel = document.selection.createRange().text; }
if (otext.innerText){
if (sel != "") otextCommentArea.value += "<b>" + oauthor.innerText + "</b> ha scritto:\n<cite>" + sel + "</cite>";
else otextCommentArea.value += "<b>" + oauthor.innerText + "</b> ha scritto:\n<cite>" + otext.innerText + "</cite>";
}
else {
if (sel != "") otextCommentArea.value += "<b>" + oauthor.textContent + "</b> ha scritto:\n<cite>" + sel + "</cite>";
else otextCommentArea.value += "<b>" + oauthor.textContent + "</b> ha scritto:\n<cite>" + otext.textContent + "</cite>";
}
otextCommentArea.focus();
}
//-->
</script>
La funzione Quote() assume di default che l'ID della textarea usata per l'inserimento dei commenti sia comment; in caso contrario è sufficiente andare a modificare l'assegnazione della variabile otextCommentArea.
A questo punto è sufficiente effettuare il salvataggio del file comments.php.
Procedura per BlogEngine.NET
BlogEngine.NET, per motivi di sicurezza, non interpreta i tag HTML inseriti nella textarea dedicata alla registrazione del commento relativo ad un post; è possibile però utilizzare una estensione (plug-in) implementata da Mads Kristensen per interpretare, in loro vece, i comandi BBCodeW. Per questo motivo la procedura descritta utilizzerà i codici BBCode come qualificatori per la formattazione del testo nella creazione della citazione dei commenti.
Aprire il file commentview.ascx del tema associato al proprio blog, relativo al template di generazione singolo commento, e individuare la stringa di codice:
<%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\">" + Comment.Author + "</a>" : Comment.Author %>
Verificare che tale stringa non sia già racchiusa all'interno di una coppia di tag <span> ... </span>. In caso affermativo aggiungere all'interno del tag la stringa:
ID="au_<%=Comment.Id%>"
avendo cura di non eliminare altri attributi già presenti all'interno di esso. In caso contrario sostituire completamente la stringa con:
<span id="au_<%=Comment.Id%>"><%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\">" + Comment.Author + "</a>" : Comment.Author %></span>
Individuare la stringa di codice:
<%= ResolveLinks(Comment.Content) %>
Verificare che tale stringa non sia già racchiusa all'interno di una coppia di tag <span> ... </span> . In caso affermativo aggiungere all'interno del tag la stringa:
ID="co_<%=Comment.Id%>"
avendo cura di non eliminare altri attributi già presenti all'interno di esso. In caso contrario sostituire completamente la stringa con:
<span id="co_<%=Comment.Id%>"><%= ResolveLinks(Comment.Content) %></span>
Nel caso in cui il codice di cui sopra, sia racchiuso tra una qualunque altra coppia di tag (ad esempio <div> ... </div>), si può procedere in maniera del tutto identica a quanto già descritto precedentemente.
Subito dopo inserire il seguente codice HTML
<input type="button" value="Cita" onclick="Quote('<%=Comment.Id%>')" />
In questo modo il pulsante collegato alla procedura di citazione automatica del commento verrà posizionato in coda al commento stesso. Se invece si preferisce posizionarlo in testa, è necessario inserire il codice HTML indicato preferibilmente dopo codice individuato da
<div id="id_<%=Comment.Id %>" ... >
Salvare e chiudere il file commentview.ascx ed aprire il file commentview.ascx presente all'interno del percorso /User controls/ che corrisponde al custom control standard che si occupa della generazione del ciclo commenti e del salvataggio degli stessi. A questo punto si aggiunge il seguente codice javascriptW all'interno dei tag <script ...> ... </script> presenti nella parte terminale del file stesso e contenenti le funzioni Ajax per il salvataggio asincrono dei commenti.
...
function Quote(otextarea) {
var otext = document.getElementById("co_" + otextarea);
var oauthor = document.getElementById("au_" + otextarea)
var otextCommentArea = document.getElementById("<%=txtContent.ClientID%>");
if (window.getSelection)
var sel = window.getSelection();
else if (document.getSelection)
var sel = document.getSelection();
else if (document.selection) {
var sel = document.selection.createRange().text; }
if (otext.innerText){
if (sel != "") otextCommentArea.value += "[b]" + oauthor.innerText + "[/b] ha scritto:\n[cite]" + sel + "[/cite]";
else otextCommentArea.value += "[b]" + oauthor.innerText + "[/b] ha scritto:\n[cite]" + otext.innerText + "[/cite]";
}
else {
if (sel != "") otextCommentArea.value += "[b]" + oauthor.textContent + "[/b] ha scritto:\n[cite]" + sel + "[/cite]";
else otextCommentArea.value += "[b]" + oauthor.textContent + "[/b] ha scritto:\n[cite]" + otext.textContent + "[/cite]";
}
otextCommentArea.focus();
}
...
A questo punto è sufficiente effettuare il salvataggio del file commentview.ascx.
Conclusioni
La procedura è facilmente personalizzabile e vuole costituire solo una base sulla quale implementare nuove funzionalità che, sfruttando il DOM (Document Object ModelW) delle pagine HTMLW, permettano una redazione più amichevole e facilitata dei commenti al post di un blog. La funzione Javascript utilizzata consente anche la "citazione parziale" del testo di un commento: è sufficiente infatti selezionare con il puntatore del mouse solo la porzione di scritto che si desidera citare e poi cliccare sul tasto dedicato. All'interno della textarea riservata alla scrittura del nuovo commento verrà quindi inserito (e opportunamente citato) solo il testo selezionato.
Aggiornamento del 15 novembre 2007
Il codice della funzione Quote() è stato aggiornato per rendere cross-browser anche la funzionalità di citazione del solo testo selezionato con il puntatore del mouse. La procedura è stata testata con esito positivo su Internet Explorer, FireFox, Opera e Safari.
