try implementing async post via reply box

contrib/js/backlink.js

@@ -38,6 +38,7 @@ function DynReply(existingElem) {
     // wrap existing post form
     this.elem = existingElem;
     this.form = this.elem.querySelector("form");
+    this._error = document.getElementById("postform_msg");
     return;
   }
 
@@ -66,19 +67,25 @@ function DynReply(existingElem) {
   elem = document.createElement("input");
   elem.setAttribute("name", "name");
   elem.setAttribute("value", "Anonymous");
-  table_insert_row(tbody, document.createTextNode("Name"), [elem])
+  var err_elem = document.createElement("span");
+  err_elem.setAttribute("id", "postform_msg");
+  this._error = error_elem;
+  table_insert_row(tbody, document.createTextNode("Name"), [elem, err_elem])
   
   // subject
   elem = document.createElement("input");
   elem.setAttribute("name", "subject");
   elem.setAttribute("value", "");
+
   // submit
   var submit = document.createElement("input");
-  submit.setAttribute("type", "submit");
   submit.setAttribute("value", "reply");
   submit.setAttribute("class", "button");
+  submit.setAttribute("type", "button");
+  submit.setAttribute("id", "postform_submit");
   table_insert_row(tbody, document.createTextNode("Subject"), [elem, submit]);
 
+  
   // Comment
   elem = document.createElement("textarea");
   elem.setAttribute("id", "postform_message");
@@ -121,6 +128,7 @@ function DynReply(existingElem) {
   this.board = null;
   this.roothash = null;
   this.prefix = null;
+  this.url = null;
 }
 
 DynReply.prototype.moveTo = function(x,y) {
@@ -136,7 +144,7 @@ DynReply.prototype.update = function() {
       // update post form
       var ref = document.getElementById("postform_reference");
       ref.setAttribute("value", this.roothash);
-      this.form.action = this.prefix + "post/" + this.board;
+      this.url = this.prefix + "post/" + this.board + "?t=json";
     }
   }
 }
@@ -147,6 +155,33 @@ DynReply.prototype.show = function() {
   this.elem.style.display = 'inline';
 }
 
+DynReply.prototype.hide = function() {
+  console.log("hide dynreply");
+  this.elem.style.display = "none";
+}
+
+DynReply.prototype.post = function(cb, err_cb) {
+  if (this.url && this.form) {
+    var data = new FormData(this.form);
+    var ajax = new XMLHttpRequest();
+    ajax.onreadystatechange = function(ev) {
+      if (ajax.readyState == XMLHttpRequest.DONE) {
+        var j = null;
+        try {
+          j = JSON.parse(ajax.responseText);
+          cb(j);
+        } catch (e) {
+          if(err_cb) {
+            err_cb(e);
+          }
+        }
+      }
+    }
+    ajax.open("POST", this.url);
+    ajax.send(data);
+  }
+}
+
 DynReply.prototype.updateCaptcha = function() {
   if (this.prefix) {
     var captcha_img = document.getElementById("captcha_img");
@@ -175,6 +210,22 @@ DynReply.prototype.setRoot = function(roothash) {
   }
 }
 
+DynReply.prototype.showError = function(msg) {
+  console.log("error in dynreply: "+msg);
+  this._error.setAttribute("class", "error");
+  this._error.value = document.createTextNode(msg);
+}
+
+DynReply.prototype.showMessage = function(msg) {
+  this._error.setAttribute("class", "message");
+  this._error.value = document.createTextNode(msg);
+  setTimeout(function() {
+    // clear it
+    this._error.innerHTML = "";
+  }, 2000);
+}
+
+
 // reply box function
 function nntpchan_reply(parent, shorthash) {
   if (parent) {
@@ -261,9 +312,11 @@ function inject_hover_for_element(elem) {
 function init(prefix) {
   // inject posthover ...
   inject_hover_for_element(document);
-  // dynamic post reply draggable
+  // initialize replyto widget
   var rpl = getReplyTo();
   rpl.setPrefix(prefix);
+
+  // position replyto widget
   var e = rpl.elem;
   e.setAttribute("draggable", "true");
   var mouseDownX, mouseDownY;
@@ -286,5 +339,24 @@ function init(prefix) {
     originalX = x;
     originalY = y;
   }, false);
+
+  // add replyto post handlers
+  e = document.getElementById("postform_submit");
+  e.onclick = function() {
+    var f = document.querySelector("form");
+    // do ajax request to post data
+    var r = getReplyTo();
+    r.post(function(j) {
+      if(j.error) {
+        // an error happened
+        r.showError(h.error);
+      } else {
+        // we're good
+        r.showMessage("posted as "+j.message_id);
+      }
+    }, function(err) {
+      alert(err);
+    });
+  }
 }
 

contrib/static/nntpchan.js

@@ -15,18 +15,23 @@ var dynreply;function getReplyTo(){if(!dynreply){var e=document.getElementById("
 return dynreply;}
 function table_insert_row(table,header,items){var tr=document.createElement("tr");var th=document.createElement("th");th.appendChild(header);tr.appendChild(th);for(var idx=0;idx<items.length;idx++){var elem=document.createElement("td");elem.appendChild(items[idx]);tr.appendChild(elem);}
 table.appendChild(tr);}
-function DynReply(existingElem){if(existingElem){this.elem=existingElem;this.form=this.elem.querySelector("form");return;}
+function DynReply(existingElem){if(existingElem){this.elem=existingElem;this.form=this.elem.querySelector("form");this._error=document.getElementById("postform_msg");return;}
-var elem=document.createElement("div");elem.setAttribute("id","postform_container");this.elem=elem;this.form=document.createElement("form");this.form.enctype="multipart/form-data";this.form.name="post";this.form.method="post";elem=document.createElement("input");elem.setAttribute("id","postform_reference");elem.name="reference";elem.type="hidden";this.form.appendChild(elem);var table=document.createElement("table");table.setAttribute("class","postform");var tbody=document.createElement("tbody");elem=document.createElement("input");elem.setAttribute("name","name");elem.setAttribute("value","Anonymous");table_insert_row(tbody,document.createTextNode("Name"),[elem])
+var elem=document.createElement("div");elem.setAttribute("id","postform_container");this.elem=elem;this.form=document.createElement("form");this.form.enctype="multipart/form-data";this.form.name="post";this.form.method="post";elem=document.createElement("input");elem.setAttribute("id","postform_reference");elem.name="reference";elem.type="hidden";this.form.appendChild(elem);var table=document.createElement("table");table.setAttribute("class","postform");var tbody=document.createElement("tbody");elem=document.createElement("input");elem.setAttribute("name","name");elem.setAttribute("value","Anonymous");var err_elem=document.createElement("span");err_elem.setAttribute("id","postform_msg");this._error=error_elem;table_insert_row(tbody,document.createTextNode("Name"),[elem,err_elem])
-elem=document.createElement("input");elem.setAttribute("name","subject");elem.setAttribute("value","");var submit=document.createElement("input");submit.setAttribute("type","submit");submit.setAttribute("value","reply");submit.setAttribute("class","button");table_insert_row(tbody,document.createTextNode("Subject"),[elem,submit]);elem=document.createElement("textarea");elem.setAttribute("id","postform_message");elem.setAttribute("name","message");elem.setAttribute("cols","40");elem.setAttribute("rows","5");table_insert_row(tbody,document.createTextNode("Comment"),[elem]);elem=document.createElement("input");elem.setAttribute("class","postform_attachment");elem.setAttribute("id","postform_attachments");elem.setAttribute("type","file");elem.setAttribute("name","attachment_uploaded");elem.setAttribute("multiple","multiple");table_insert_row(tbody,document.createTextNode("Files"),[elem]);elem=document.createElement("input");elem.setAttribute("type","checkbox");elem.setAttribute("name","dubs");table_insert_row(tbody,document.createTextNode("Get Dubs"),[elem]);elem=document.createElement("img");elem.setAttribute("id","captcha_img");elem.alt="captcha";table_insert_row(tbody,document.createTextNode("Captcha"),[elem]);elem=document.createElement("input");elem.name="captcha";elem.autocomplete="off";table_insert_row(tbody,document.createTextNode("Name"),[elem])
+elem=document.createElement("input");elem.setAttribute("name","subject");elem.setAttribute("value","");var submit=document.createElement("input");submit.setAttribute("value","reply");submit.setAttribute("class","button");submit.setAttribute("type","button");submit.setAttribute("id","postform_submit");table_insert_row(tbody,document.createTextNode("Subject"),[elem,submit]);elem=document.createElement("textarea");elem.setAttribute("id","postform_message");elem.setAttribute("name","message");elem.setAttribute("cols","40");elem.setAttribute("rows","5");table_insert_row(tbody,document.createTextNode("Comment"),[elem]);elem=document.createElement("input");elem.setAttribute("class","postform_attachment");elem.setAttribute("id","postform_attachments");elem.setAttribute("type","file");elem.setAttribute("name","attachment_uploaded");elem.setAttribute("multiple","multiple");table_insert_row(tbody,document.createTextNode("Files"),[elem]);elem=document.createElement("input");elem.setAttribute("type","checkbox");elem.setAttribute("name","dubs");table_insert_row(tbody,document.createTextNode("Get Dubs"),[elem]);elem=document.createElement("img");elem.setAttribute("id","captcha_img");elem.alt="captcha";table_insert_row(tbody,document.createTextNode("Captcha"),[elem]);elem=document.createElement("input");elem.name="captcha";elem.autocomplete="off";table_insert_row(tbody,document.createTextNode("Name"),[elem])
-table.appendChild(tbody);this.form.appendChild(table);this.elem.appendChild(this.form);document.body.appendChild(this.elem);this.board=null;this.roothash=null;this.prefix=null;}
+table.appendChild(tbody);this.form.appendChild(table);this.elem.appendChild(this.form);document.body.appendChild(this.elem);this.board=null;this.roothash=null;this.prefix=null;this.url=null;}
 DynReply.prototype.moveTo=function(x,y){x=window.screenX-x;this.elem.setAttribute("style","top: "+y+"px; right: "+x+"px;");}
-DynReply.prototype.update=function(){if(this.prefix){this.updateCaptcha();if(this.board&&this.roothash){var ref=document.getElementById("postform_reference");ref.setAttribute("value",this.roothash);this.form.action=this.prefix+"post/"+this.board;}}}
+DynReply.prototype.update=function(){if(this.prefix){this.updateCaptcha();if(this.board&&this.roothash){var ref=document.getElementById("postform_reference");ref.setAttribute("value",this.roothash);this.url=this.prefix+"post/"+this.board+"?t=json";}}}
 DynReply.prototype.show=function(){console.log("show dynreply");this.update();this.elem.style.display='inline';}
+DynReply.prototype.hide=function(){console.log("hide dynreply");this.elem.style.display="none";}
+DynReply.prototype.post=function(cb,err_cb){if(this.url&&this.form){var data=new FormData(this.form);var ajax=new XMLHttpRequest();ajax.onreadystatechange=function(ev){if(ajax.readyState==XMLHttpRequest.DONE){var j=null;try{j=JSON.parse(ajax.responseText);cb(j);}catch(e){if(err_cb){err_cb(e);}}}}
+ajax.open("POST",this.url);ajax.send(data);}}
 DynReply.prototype.updateCaptcha=function(){if(this.prefix){var captcha_img=document.getElementById("captcha_img");captcha_img.src=this.prefix+"captcha/img";}}
 DynReply.prototype.setPrefix=function(prefix){this.prefix=prefix;}
 DynReply.prototype.hide=function(){this.elem.style.display='none';}
 DynReply.prototype.setBoard=function(boardname){if(boardname){this.board=boardname;}}
 DynReply.prototype.setRoot=function(roothash){if(roothash){this.roothash=roothash;}}
+DynReply.prototype.showError=function(msg){console.log("error in dynreply: "+msg);this._error.setAttribute("class","error");this._error.value=document.createTextNode(msg);}
+DynReply.prototype.showMessage=function(msg){this._error.setAttribute("class","message");this._error.value=document.createTextNode(msg);setTimeout(function(){this._error.innerHTML="";},2000);}
 function nntpchan_reply(parent,shorthash){if(parent){var boardname=parent.getAttribute("boardname");var roothash=parent.getAttribute("root");var replyto=getReplyTo();replyto.setBoard(boardname);replyto.setRoot(roothash);replyto.show();}
 var elem=document.getElementById("postform_message");if(elem)
 {elem.value+=">>"+shorthash.substr(0,10)+"\n";}}
@@ -38,7 +43,7 @@ parent.appendChild(wrapper);parent.backlink=false;},function(msg){var wrapper=do
 parent.backlink=true;}};parent.backlink=true;}
 function inject_hover_for_element(elem){var elems=elem.getElementsByClassName("backlink");var ls=[];var l=elems.length;for(var idx=0;idx<l;idx++){var e=elems[idx];ls.push(e);}
 for(var elem in ls){inject_hover(prefix,ls[elem]);}}
-function init(prefix){inject_hover_for_element(document);var rpl=getReplyTo();rpl.setPrefix(prefix);var e=rpl.elem;e.setAttribute("draggable","true");var mouseDownX,mouseDownY;var originalX=window.screenX-150;var originalY=10;rpl.moveTo(originalX,originalY);e.addEventListener("dragstart",function(ev){mouseDownX=ev.clientX;mouseDownY=ev.clientY;},false);e.addEventListener("dragend",function(ev){var x=originalX+ev.clientX-mouseDownX;var y=originalY+ev.clientY-mouseDownY;x-=window.screenLeft;y-=window.screenTop;rpl.moveTo(x,y);originalX=x;originalY=y;},false);}
+function init(prefix){inject_hover_for_element(document);var rpl=getReplyTo();rpl.setPrefix(prefix);var e=rpl.elem;e.setAttribute("draggable","true");var mouseDownX,mouseDownY;var originalX=window.screenX-150;var originalY=10;rpl.moveTo(originalX,originalY);e.addEventListener("dragstart",function(ev){mouseDownX=ev.clientX;mouseDownY=ev.clientY;},false);e.addEventListener("dragend",function(ev){var x=originalX+ev.clientX-mouseDownX;var y=originalY+ev.clientY-mouseDownY;x-=window.screenLeft;y-=window.screenTop;rpl.moveTo(x,y);originalX=x;originalY=y;},false);e=document.getElementById("postform_submit");e.onclick=function(){var f=document.querySelector("form");var r=getReplyTo();r.post(function(j){if(j.error){r.showError(h.error);}else{r.showMessage("posted as "+j.message_id);}},function(err){alert(err);});}}
 /* ./contrib/js/banner.js */
 var banner_count=3;function nntpchan_inject_banners(elem,prefix){var n=Math.floor(Math.random()*banner_count);var banner=prefix+"static/banner_"+n+".jpg";var e=document.createElement("img");e.src=banner;e.id="nntpchan_banner";elem.appendChild(e);}
 /* ./contrib/js/expand-image.js */

contrib/templates/default/postform.mustache

@@ -22,6 +22,9 @@
            <td>
              <input type="text" name="name" value="" />
            </td>
+           <td>
+             <span id="postform_msg"></span>
+           </td>
          </tr>
          <tr>
            <th>
@@ -29,7 +32,7 @@
            </th>
            <td>
              <input type="text" name="subject" value="" />
-             <input type="submit" value="{{button}}" class="button" />
+             <input type="submit" value="{{button}}" class="button" id="postform_submit" />
            </td>
          </tr>
          <tr>