11 novembre 2007  8

Una procedura per quotare automaticamente i commenti in un post

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.

Esprimi il tuo giudizio

Commenti (8) -

Dan
Dan
11 nov 2007 alle 04:30  01
WOW

Nice work Cristiano!
Cristiano
Cristiano
11 nov 2007 alle 19:12  02
@ Dan:

Thanks a lot! I'm presently developing a BlogEngine's extension to implement this feature.
Traffyk
Traffyk
13 nov 2007 alle 15:24  03
Davvero un lavoro stupendo Cristiano mi meraviglio di come ti sia venuta in mente di pubblicare una soluzione equivalente per wordpress... evidentemente vuoi passare dalla parte del nemico Smile

Giusto un suggerimento per produrre codice perfettamente validato anche per javascript: dopo il tag di apertura basta mettere il tag di commento per l'html <!-- e prima del tag di chiusura --> . Proprio giusto per completare questo fantastico lavoro.

PS: ma perchè non risolvi il problema degli id duplicati nel blog? Avresti una completa validazione w3c ti manca davvero un soffio ;)
Cristiano
Cristiano
13 nov 2007 alle 22:45  04
@ Traffyk:

Non ho mai affermato nè di non conoscere la piattaforma WordPress, ne di non conoscere PHP. Non uso WordPress perchè questa soluzione sviluppata con .NET 2.0 (BlogEngine) mi consente sperimentazioni più interessanti. Un giorno argomenterò in maniera più esaustiva.

I tag di commento sono stati omessi intenzionalmente: non tutti potrebbero essere interessati alla validazione del codice. E poi dovevo darti un'occasione per poter fare un intervento, no ? ;)

Al momento la validazione del codice non è fra le priorità di sviluppo di questo sito: non ho ancora eliminato il problema per questioni di tempo e di voglia (comunque riguarda solo la home page)
Traffyk
Traffyk
13 nov 2007 alle 22:55  05
Riguardo al javascript lo sai che non conosco quale sia il giusto modo di programmare? Con o senza tag di commento?? Ormai ho imparato a metterli anche se comunque credo siano abbastanza inutili perchè infatti servono soltanto ad aggirare il parser w3c.

Comunque ci farebbe piacere avere uno sviluppatore per wordpress in più eh ;)

Riguardo alla validazione del tuo codice ti basta aggiungere l'id numerico di ogni post, dovresti essere in un loop quindi credo ti basti aggiungere il codice una sola volta per risolvere il problema Smile
Cristiano
Cristiano
13 nov 2007 alle 23:56  06
@ Traffyk:

...Riguardo al javascript lo sai che non conosco quale sia il giusto modo di programmare? Con o senza tag di commento??...

Sarebbe buona norma metterli sempre, ma servono solo nel caso in cui il browser non interpreti javascript: in tal caso il codice compreso tra i commenti viene trattato appunto come un commento e non interpretato. Il validatore del W3c non è affidabile e spesso valida la pagina anche se ci sono javascript non commentati.

...Comunque ci farebbe piacere avere uno sviluppatore per wordpress in più eh...

Ce ne sono già troppi. Meglio avere qualcuno in Italia che si occupi di BlogEngine visto che c'è penuria.

...Riguardo alla validazione del tuo codice ti basta aggiungere l'id numerico di ogni post...

N0n è così semplice, a quell'ID è associato anche uno stile nel CSS: il problema è nel template della home page che soffre di un paio di errori semantici di base che prima o poi eliminerò. Le altre pagine sono tutte correttamente validate
Daniele Salamina
Daniele Salamina
16 nov 2007 alle 18:08  08
quando ho 5 min provo a mettere in pratica per WP.

Grazie!
Cristiano
Cristiano
16 nov 2007 alle 21:11  09
@ Daniele Salamina:

Ottimo. Tienimi aggiornato sul risultato ... Smile

Pingbacks and trackbacks (2)+

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti