Comentarios anidados sin el nuevo código

Somos muchos los que no usamos los nuevos comentarios anidados de Blogger por diferentes razones.

Porque lo intentamos cuando apenas salieron y había tantos problemas que les tomamos antipatía; porque si bien muchos de esos errores se corrigieron hay otro errores que persisten; porque no nos da ganas volver a escribir el CSS y dejar las cosas a nuestro gusto, etc etc. Tantas razones como usuarios existen. Yo soy uno de ellos y la verdad es que tantas ideas y vueltas me quitaron las ganas de usarlos. Además el que se lean desde los feeds en lugar de ser parte del servidor mismo me pareció siempre una tontera ... lenta. Demasiadas vueltas y demasiada falta de control de los resultados para mi gusto.

Sin embargo ...

Un día apareció Felipe con una idea que publicó en NicoNico donde arma los comentarios anidados con las opciones de reply incluidas pero sin el sistema de Blogger, simplemente (no tan simplemente) agregando una serie de códigos a los comentarios normales lo que nos permite, tener tanto control sobre su forma de verse como teníamos antes; es más, colocando esos códigos tal y como los muestra en su entrada, los comentarios se verán igual y sólo habrá que agregarle CSS a los agregados.

La explicación detallada la pueden ver en su página y acá la repetiré acá con las variantes que usé en mi plantilla.

Tal como dice, lo primero es expandir la plantilla y buscar esto que es el formulario de comentarios; allí cambiaremos ese DIV:

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
    .......
</div>
</b:if>

por esto:

<div class='comment-form' id='comment-form-thread'>

Ahora, vamos a tener que modificar el loop donde se muestran los comentarios así que buscamos esto:

<b:loop values='data:post.comments' var='comment'>
  .......
</b:loop>

Básicamente, deberíamos cambiar el contenido y eso debe hacer con cuidado así que sugiero hacer una copia previa:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.inReplyTo'>
    <!--FIX-->
  <b:else/>
    ....... dejamos el código tal como está .......
    ....... y debajo, agregaremos el código extra .......
  </b:if>
</b:loop>

Ese código extra es el que NicoNico muestra en su página en color azul. Acá, dejo el código completo del loop tal como lo uso en este blog, con los agregados que requiere en caso de usar scripts o las personalizaciones propias de esta plantilla.

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.inReplyTo'>
  <!-- FIX -->
<b:else/>
  <div class='comentariobloque' expr:id='data:comment.id'>
    <div class='comentario-base'>
      <a expr:name='&quot;comment-&quot; + data:comment.id'/>
      <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16' style='margin-bottom:-2px;' width='16'/>
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <span class='autorcomentario'>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
        </span>
        <span class='comment-footer'>
          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <!-- uso un script para mostrar la fecha relativa -->
              <script type='text/javascript'>fecharelativa(&#39;<data:comment.timestamp/>&#39;);</script>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </span>
      </dt>
      <dd class='comment-body'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
        <b:else/>
          <p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
          <!-- uso un script para mostrar los emoticones -->
          <script type='text/javascript'>
            cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
            emoticonComentario(cual);
          </script>
        </b:if>
      </dd>
    </div>
    <div class='contenedor-respuestas'>
      <b:loop values='data:post.comments' var='comentariohijo'>
        <b:if cond='data:comentariohijo.inReplyTo == data:comment.id'>
          <div class='respuestas-comentarios'>
            <div expr:class='&quot;comment-author-thread &quot; + data:comentariohijo.authorClass' expr:id='data:comentariohijo.anchorName'>
              <b:if cond='data:comentariohijo.favicon'>
                <img expr:src='data:comentariohijo.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comentariohijo.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comentariohijo.authorAvatarImage/>
              </b:if>
            </div>
            <div class='respuesta'>
              <span class='autorcomentario'>
                <b:if cond='data:comentariohijo.authorUrl'>
                  <a expr:href='data:comentariohijo.authorUrl' rel='nofollow'><data:comentariohijo.author/></a>
                 <b:else/>
                   <data:comentariohijo.author/>
                 </b:if>
              </span>
              <span class='comment-footer'>
                <span class='comment-timestamp'>
                  <!-- uso un script para mostrar la fecha relativa -->
                  <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
                     <script type='text/javascript'>fecharelativa(&#39;<data:comentariohijo.timestamp/>&#39;);</script>
                  </a>
                  <b:include data='comentariohijo' name='commentDeleteIcon'/>
                </span>
              </span>
              <div class='comment-body'>
                <b:if cond='data:comentariohijo.isDeleted'>
                  <span class='deleted-comment'><data:comentariohijo.body/></span>
                <b:else/>
                  <p expr:id='&quot;combody-&quot; + data:comentariohijo.anchorName'><data:comentariohijo.body/></p>
                  <!-- uso un script apra mostrar los emoticones -->
                  <script type='text/javascript'>
                    cual = &quot;combody-&quot; + &quot;<data:comentariohijo.anchorName/>&quot;;
                    emoticonComentario(cual);
                  </script>
                </b:if>
              </div>
            </div>
          </div>
        </b:if>
      </b:loop>
    </div>
    <b:if cond='data:post.numComments &lt; 200'>
      <a class='reply-action' expr:id='&quot;replyboton-&quot; + data:comment.id' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Responder</a>
    <b:else/>
      <script type='text/javascript'>
        var indexc = &#39;<data:post.numComments/>&#39;
        var indexcomment = &#39;<data:comment.id/>&#39;
        //<![CDATA[
        var indexpage = indexc/200;
        indexpage = Math.ceil(indexpage);
        var indexl = window.location.href;
        indexl = indexl.indexOf("commentPage=" + indexpage + "");
        var replyAction = "<a id='replyboton-" + indexcomment +"' class='reply-action' onclick='reply(&quot;" + indexcomment + "&quot;);return false;' href='#'>Responder</a>";
        if(indexl!=-1) {
          if(indexc < (indexpage*200)) { document.write(replyAction) }
        }
        //]]>
      </script>
    </b:if>
    <div class='contenedorreply' expr:id='&quot;contenedorreply-&quot; + data:comment.id'/>
  </div>
</b:if>

</b:loop>

Último paso; buscamos:

<b:includable id='comments' var='post'>

y justo debajo, agregamos lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type='text/javascript'>var flagItem = 0;</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <script type='text/javascript'>var flagItem = 1;</script>
</b:if>
<script type='text/javascript'>
  /* Código bajo Licencia Creative Commons 3.0 (Atribución-No Comercial)
     Felipe @ http://gplus.to/iFelipeCalvo */
  var indexa = &#39;<data:top.id/>&#39;;
  var indexb = &#39;<data:post.id/>&#39;;
  //<![CDATA[
    // Distingue entre post y página estática
    flagItem="0"==flagItem?"&postID=":"&pageID=";
    // ACA VAN LAS DOS FUNCIONES
  //]]>
</script>

Acá hay una variante respecto del código original. Simplemente coloqué las dos funciones del script junto con el resto por razones de comodidad pero es indistinto agregarlas allí o en el head; las dos funciones tsl como las uso, dicen lo siguiente:

<script type='text/javascript'>
//<![CDATA[
function replyOriginal() {
  var b = document.getElementById("comment-editor").getAttribute("src"), a = b.indexOf("#"), b = b.substring(a), a = document.getElementById("comment-editor");
  a.parentNode.removeChild(a);
  a = document.getElementById("replypost");
  a.parentNode.removeChild(a);
  b = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";
  a = document.createElement("iframe");
  a.setAttribute("id", "comment-editor");
  a.setAttribute("name", "comment-editor");
  a.setAttribute("src", b);
  a.setAttribute("height", "250px");
  a.setAttribute("width", "100%");
  a.setAttribute("frameborder", "0");
  a.setAttribute("allowtransparency", "true");
  document.getElementById("comment-form-thread").appendChild(a)
}

function reply(b) {
  var a = document.getElementById("comment-editor").getAttribute("src"), c = a.indexOf("#"), a = a.substring(c), c = document.getElementById("comment-editor");
  var boton = c.parentElement.getAttribute("id").replace("contenedorreply-", "replyboton-");
  if(document.getElementById(boton).innerHTML=="Cancelar") {
    document.getElementById(boton).innerHTML="Responder";
  }
  if(c.parentElement.getAttribute("id").indexOf(b)>=0) { replyOriginal();
    return;
  }
  c.parentNode.removeChild(c);
  a = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";
  c = document.createElement("iframe");
  c.setAttribute("id", "comment-editor");
  c.setAttribute("name", "comment-editor");
  c.setAttribute("src", a);
  c.setAttribute("height", "250px");
  c.setAttribute("width", "100%");
  c.setAttribute("frameborder", "0");
  c.setAttribute("allowtransparency", "true");
  document.getElementById("contenedorreply-" + b + "").appendChild(c);
  document.getElementById("replyboton-"+b).innerHTML = "Cancelar";
  document.getElementById("replypost") || (b = document.createElement("a"), b.innerHTML = "Agregar un comentario", b.setAttribute("id", "replypost"), b.setAttribute("class", "LoadMore"), b.setAttribute("href", "#"), b.setAttribute("onclick", "replyOriginal();return false;"), document.getElementById("comment-form-thread").appendChild(b))
}
//]]>
</script>

Y por último, como siempre, el CSS antes de </head> que,como dije, sólo requiere que se agreguen las nuevas reglas y que dependerán totlamente del blog donde se agregaue esto asi que me limito a enumerarlas:

<:style>
  .respuestas-comentarios {}
  .comment-author-thread {}
  #comments .contenedor-respuestas .avatar-image-container {}
  .contenedor-respuestas {}
  .comment-body-thread {}
  .comment-body-thread p {}
  .reply-action {}
  #replypost {}
<:/style>

¿Problemas? Pocos por no decir ninguno. Un detalle menor impide que cuando hay más de 200 comentarios, las funciones de "Responder" sólo se muestren en la ultima página, es decir, en esa donde se encuentran los comentarios más recientes pero, salvo condiciones muy particulares, es un detale que no me parce que tenga relevancia alguna.