Template:InteractiveComments2

// + INCLUDES
// dekiapi();

// + PARAMETERS
var par = {     
    number: __request.args.number ?? args.number ??  10,
    language: __request.args.language ?? args.language ?? ( wiki.language ? wiki.language() : (page.language .. site.language .. 'en-us') ),
    ajax_action: String.tolower( __request.args.ajax_action ?? args.ajax_action ?? 'load')   
   };

if ((par.ajax_action=='load') || (par.ajax_action=='reload_gestorcomentarios')) {

var comments = page.comments;
var ncomments = #comments;
var nm = par.number;
var us = user;
var uname = us.name;
var utimezone = us.timezone;

if (par.number=='all') {
   let nm = ncomments;
 }
 else
  { if (nm>=ncomments) { let par ..= { number: 'all' }; } }

// + CONSTANTS
//var NO_AVATAR = Site.Api..'/files/966/=NoAvatar.jpg';
var NO_AVATAR = '';
var LANGUAGE_ES /*= {
  see_all: 'Ver Todos',
  see_more: 'Ver mas...',
  at: 'a',

  add_msg: 'Añadir mensaje:',
  edit_msg: 'Edición del mensaje:',
  msg_reply: 'Respuesta al mensaje:',

  write_msg: 'Escribe el mensaje a añadir.',
  question_delete_message: 'Seguro que quiere eliminar este mensaje?',
  error_msg_edit_mode_unknown: 'Modo de edición desconocido',

  add_msg_button: 'Adjuntar Mensaje',
  cancel_msg_button: 'Cancelar',
  reply_msg_button: 'Responder',
  edit_msg_button: 'Editar',
  delete_msg_button: 'Borrrar',
  save_msg_button: 'Guardar Cambios'

 }*/;
var LANGUAGE_EN = {
  see_all: 'Show all',
  see_more: 'Show more...',
  at: 'at',

  add_msg: 'Add message:',
  edit_msg: 'Edit message:',
  msg_reply: 'Message answer:',

  write_msg: 'Write message text here.',
  question_delete_message: 'Do you want to delete the message?',
  error_msg_edit_mode_unknown: 'ERROR: Unknown edit mode',

  add_msg_button: 'Add message',
  cancel_msg_button: 'Cancel',
  reply_msg_button: 'Reply',
  edit_msg_button: 'Edit',
  delete_msg_button: 'Delete',
  save_msg_button: 'Save changes'
 };

var TXTS = { 'es-es': LANGUAGE_ES, 'en-us': LANGUAGE_EN , 'en': LANGUAGE_EN };
var lg = par.language;

/** It needs a closing DIV */
var HTML_COMMENT = "<div id='gc_[cindex]' class='gc_comment'><div id='gc_content_[cindex]' class='gc_content[cnew]'>"..
"<table width='100%' class='gc_table'><tr id='gc_tr_[cindex]'><td style='width: 35px; text-align: center' valign='top'>"..
"<a name='comment[cindex]'>[uavatar]<BR />#[cindex]</a></td><td valign='top'>"..
"<span class='gc_title'><a href=[uuri] rel='internal' id='gc_author_[cindex]'>[uname]</a> "..TXTS[lg].at.." [cdate]</span>"..
"<div id='gc_text_[cindex]' class='gc_text'>[ctext]</div></td></tr></table></div>";
  // -- !!!! It need's a closing DIV, but i can't put it in the CONSTANT becouse it depends on the "recursive" calls !!!!

// + VARS
var cache_avatars = {};
var avatar,source,n,a;

// + DYNAMIC HTML CONTENT
<div id="gc_comentarios" width="100%">

 var xcomments = [];
 var rxcomments = [];
 var tc = {};
 foreach (var k in comments) {
   let tc = [k .. { index: k.number, /* Previous v10: Num.Int(String.SubStr(String.Split(k.uri,'#')[1],7)), */
                    parent: (k.text[0]=='#'?String.SubStr(k.text,1,String.IndexOf(k.text,':')-1):null)
                  }];
   let xcomments ..= tc;
   let rxcomments = tc .. rxcomments;
  }
 var max_iterations = ncomments*3; // Crec que seria n*2 pero em curo amb salud
 var serie = Num.Series(0,max_iterations);

// -- Push on the stack on reverse order;
var stack = [];
var roots = {};
var lastpage = false;

// -- Let's serach for the last par.number message roots
var trobat;
var previous; 
var last_new_idx = (nm<ncomments?rxcomments[nm-1].index:50000);
foreach(var k in rxcomments where __index<nm ) {
     let trobat = k;
      // -- Let's search for the root of this comment
     if (trobat.parent) {
       foreach(var tonto in serie) {
         let previous = trobat; 
         foreach(var m in rxcomments) { if (m.index==trobat.parent) { let trobat = m; break; } }
         if (!trobat.parent) { break; }
         if (trobat.index==previous.index) { break; } // -- Ophanated child
        }
      }

      if (!roots[trobat.index]) {
       let roots ..= { (trobat.index):true };
       let stack ..= [ (trobat .. {root: true})  ];
      }
  }

 if (par.number=='all') {
    <a href="#" id='gc_ver_mas' number=(nm) style='display: none'>TXTS[lg].see_more</a>
    "   ";
    <a href="#" id='gc_ver_todos' style='display: none'>TXTS[lg].see_all</a><br />
  }
  else
  {
    <a href="#" id='gc_ver_mas' number=(nm)>TXTS[lg].see_more</a>
    "   ";
    <a href="#" id='gc_ver_todos'>TXTS[lg].see_all</a><br />
  }

 var author;
 var ccomment;
 var htmlout = "";
 var thtmlout = "";

 foreach (var i in serie) {    
     if (#stack==0) { break; }    
     // -- Pop on the stack
     let ccomment = stack[#stack-1];
     let stack = List.Splice(stack,#stack-1,1);
     // -- End Pop

     if ( ccomment.index==-400) { let htmlout ..="</div>"; }
      else
       {
        if (ccomment['root']) { let htmlout ..='<hr />'; }

        let author = ccomment.author;
         // -- Let Search for the avatar and save it to the cache.
        let un = author.name;
/*
        if (!Map.Contains(cache_avatars,un)) {          
          let avatar = wiki.getuser(un).homepage.files['avatar.jpg'].api ?? author.gravatar;
          let cache_avatars ..= {(un): ("<img src='"..avatar.."' width='30px' valing='top' />") };
         }
*/
         // -- Let fill the comment template
        let thtmlout = String.Replace(HTML_COMMENT,'[cindex]',ccomment.index);
        let thtmlout = String.Replace(thtmlout,'[cnew]',(ccomment.index>=last_new_idx?'_new':''));
//        let thtmlout = String.Replace(thtmlout,'[uavatar]',cache_avatars[un]);
        let thtmlout = String.Replace(thtmlout,'[uavatar]',("<img src='"..author.gravatar.."' width='30px' valing='top' />"));
        let thtmlout = String.Replace(thtmlout,'[uuri]',author.uri);
        let thtmlout = String.Replace(thtmlout,'[uname]',un);
        let thtmlout = String.Replace(thtmlout,'[cdate]',date.format(date.changetimezone(ccomment.date,utimezone),"dd/MM/yyyy - HH:mm"));
//        let thtmlout = String.Replace(thtmlout,'[cdate]',date.format(date.addhours(ccomment.date,2),"dd/MM/yyyy - HH:mm"));
        // -- Date.Format it's a really time comsuming task
//        let thtmlout = String.Replace(thtmlout,'[cdate]',date.addhours(ccomment.date,2));
        let thtmlout = String.Replace(thtmlout,'[ctext]',ccomment.text); 

          // -- Let concatenate the comment template to the whole comments html out
        let htmlout ..= thtmlout;

         // -- Let's do the "recursive" thing (iterating).
        let stack ..= [{ index: -400 }];
        let stack ..= List.Select(rxcomments,'$.parent=='..ccomment.index);
       }
     }
  web.html(htmlout);

 </div>

if (par.ajax_action=='load') {

// + STATIC HTML CONTENT

// -- Sending messages Form
<form id="gc_messageform" onsubmit="$('#gc_messagetext').val('');" style='display: inline'>
 <span id="messageheaderspan1">TXTS[lg].add_msg</span>
 <BR />
 <textarea id="gc_messagetext" class='gc_messagetext_class' rows='10'>TXTS[lg].write_msg</textarea>
 <br />
 <input type="button" id="gc_sendmessage" value=(TXTS[lg].add_msg_button) /> 
</form>

// -- Reply & Edit Messages Form
<div id='gc_f_load_messageform' style='display: none; position: absolute;'>
 <form id="gc_f_messageform" onsubmit="$('#gc_f_messagetext').val('');">
  <span id="messageheaderspan2">TXTS[lg].msg_reply</span>
  <BR />
  <textarea id="gc_f_messagetext" class='gc_messagetext_class' rows='10' ></textarea>
  <br />
  <input type="button" id="gc_f_sendmessage" value=(TXTS[lg].add_msg_button) /> 
  <input type="button" id="gc_f_cancelmessage" value=(TXTS[lg].cancel_msg_button) /> 
 </form>
</div>

// -- Button Bars
<div id='gc_button_bar' style='display: none; position: absolute;' >
  <a id='gc_reply'><span class='icon'><img src='/skins/common/icons/icon-trans.gif' class='move' alt='' /><span class='text'>TXTS[lg].reply_msg_button</span></span></a>
  "  ";
  <a id='gc_edit'><span class='icon'><img src='/skins/common/icons/icon-trans.gif' class='edit' alt='' /><span class='text'>TXTS[lg].edit_msg_button</span></span></a>
  "  ";
  <a id='gc_delete'><span class='icon'><img src='/skins/common/icons/icon-trans.gif' class='delete' alt='' /><span class='text'>TXTS[lg].delete_msg_button</span></span></a>
</div>

 // ++ GLOBAL EVENT BINDINGS 
  // -- Let Search for the avatar and save it to the cache.
let un = uname; 
/*
if (!Map.Contains(cache_avatars,un)) {
   let avatar = wiki.getuser(un).homepage.files['avatar.jpg'].api ?? us.gravatar;
   let cache_avatars ..= {(un): ("<img src='"..avatar.."' width='30px' valing='top' />") };
  }
*/
  // --- jhc - Javascript HTML Comment
 var jhc = HTML_COMMENT.."</div>";
// let jhc = String.Replace(jhc,'[uavatar]',cache_avatars[uname]);
 let jhc = String.Replace(jhc,'[uavatar]',("<img src='"..us.gravatar.."' width='30px' valing='top' />"));
 let jhc = String.Replace(jhc,'[uuri]',us.uri);
 let jhc = String.Replace(jhc,'[uname]',uname);

<script type='text/javascript' src='/@api/deki/files/5984/=interactive_comments.js'></script>
<script type='text/javascript'>"
var HTML_COMMENT = \""..jhc.."\";
var user_name = Deki.UserName;
var is_admin = "..us.admin..";
var TXTS = "..json.emit(TXTS[lg])..";
GestorComentariosControls();
"</script>

 // ++ CSS DEFINITION
<style type="text/css">"
div.gc_comment {
 padding-left: 40px;
 font-style: italic;
 color: #778899;
}

table.gc_table {
 border: 0px !important;
 padding: 0px !important;
 margin: 0px !important;
}

div.gc_content {
 font-style: italic;
 border: 1px solid white;
 color: #778899;
}

div.gc_content_new {
 font-style: italic;
 border: 1px solid white;
 background-color: #bbbbbb;
 color: #778899;
}

span.gc_title {
 font-style: italic;
 font-size: 10px;
 color: black;
}

div.gc_text {
 white-space: pre-line;
 line-height: auto;
 margin-top: 10px;
 padding: 4px;
 border: 1px dashed #000;
 background-color: #fafafa;
 overflow: visible;
 font-style: normal;
 color: black;
 width: 95%;
}

.gc_messagetext_class {
 width: 600px;
}
"</style>

 } // -- if (par.ajax_action=='load') ...
} // -- if ((par.ajax_action=='load') || (par.ajax_action=='reload_gestorcomentarios')) ..