/new page implemented

resources/new.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>NoteHub &mdash; New Page</title>
+  <meta charset="UTF-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <link href="/style.css" rel="stylesheet" type="text/css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js" type="text/javascript"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/1.0.1/js/md5.min.js" type="text/javascript"></script>
+  <script src="/js/publishing.js" type="text/javascript"></script>
+</head>
+
+<body onload="onLoad()">
+  <article id="preview" style="flex: none; -webkit-flex: none"></article>
+  <div class="hidden" id="dashed-line"></div>
+  <div class="central-element helvetica" style="margin-bottom: 3em">
+    <form action="/note" autocomplete="off" method="%METHOD%">
+      <input id="password" name="password" type="hidden">
+      <input id="session" name="session" type="hidden" value="%SESSION%" />
+      <input id="signature" name="signature" type="hidden" />
+      <textarea id="note" name="note">Loading...</textarea>
+      <fieldset class="hidden" id="input-elems">
+        <input class="ui-elem" id="plain-password" name="plain-password" placeholder="Password for editing" type="text">&nbsp;
+        <input class="button ui-elem" id="publish-button" type="submit" value="Publish">
+        <br>
+        <br>
+      </fieldset>
+    </form>
+  </div>
+</body>
+
+</html>

resources/public/js/publishing.js

@@ -1,41 +1,45 @@
-var $ = function(id){ return document.getElementById(id); }
+var $ = function(id) {
+  return document.getElementById(id);
+}
 var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)");
 var timer = null;
 var timerDelay = iosDetected ? 800 : 400;
-var show = function(elem) { elem.style.display = "block" }
+var show = function(elem) {
+  elem.style.display = "block"
+}
 var $note, $action, $preview, $plain_password, $input_elems, $dashed_line, $proposed_title, updatePreview;
 var backendTimer;
 
-function md2html(input){
+function md2html(input) {
   return marked(input);
 }
 
-function onLoad () {
+function onLoad() {
   $note = $("note");
-  $action = $("action");
+  $action = document.getElementsByTagName("form")[0].method;
   $preview = $("preview");
   $plain_password = $("plain-password");
   $proposed_title = $("proposed-title");
   $input_elems = $("input-elems");
   $dashed_line = $("dashed-line");
-  updatePreview = function(){
+  updatePreview = function() {
     clearTimeout(timer);
     var content = $note.value;
     var delay = Math.min(timerDelay, timerDelay * (content.length / 400));
-    timer = setTimeout(function(){
+    timer = setTimeout(function() {
       show($dashed_line);
       show($input_elems);
       $preview.innerHTML = md2html(content);
     }, delay);
   };
-  if($action){
-    if($action.value == "update") updatePreview(); else $note.value = "";
-    $note.onkeyup = updatePreview;
-    $("publish-button").onclick = function(e) {
-      if($plain_password.value != "") $("password").value = md5($plain_password.value);
-      $plain_password.value = null;
-      $("signature").value = md5($("session").value + $note.value);
-    }
-    if(iosDetected) $note.className += " ui-border"; else $note.focus();
+  if ($action.value == "update") updatePreview();
+  else $note.value = "";
+  $note.onkeyup = updatePreview;
+  $("publish-button").onclick = function(e) {
+    if ($plain_password.value != "") $("password").value = md5($plain_password.value);
+    $plain_password.value = null;
+    $("signature").value = md5($("session").value + $note.value);
   }
+  if (iosDetected) $note.className += " ui-border";
+  else $note.focus();
 }

resources/template.html

@@ -2,8 +2,8 @@
 <html>
 <head>
 	<title>NoteHub &mdash; %TITLE%</title>
-	<meta charset="UTF-8">
-	<meta content="width=device-width, initial-scale=1.0" name="viewport">
+	<meta charset="UTF-8" />
+	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
 	<link href="/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>