js: add a preview button to see a rendered preview

When the button is clicked, the /preview endpoint is used to render a
preview text. The preview is inserted and the preview button is
replaced by an edit button to go back to edit mode. Alternatively, the
use can click on the preview to edit.

Some small CSS modifications are done to accomodate the
modification. Also, the preview is wrapped into `.isso-common
.text-wrapper .text` to not make the CSS more complex.

When in preview mode, the background is stripped/greyish in case it's not easy
to make a difference between preview and not preview (due to
unformatted text). We avoid to modify borders/shadow boxes because it
would make the design "jumpy".

isso/css/isso.css

@@ -31,12 +31,16 @@
     color: #757575;
 }
 
-.isso-comment {
+#isso-root .isso-comment {
     max-width: 68em;
     padding-top: 0.95em;
     margin: 0.95em auto;
 }
-.isso-comment:not(:first-of-type),
+#isso-root .preview .isso-comment {
+    padding-top: 0;
+    margin: 0;
+}
+#isso-root .isso-comment:not(:first-of-type),
 .isso-follow-up .isso-comment {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -89,7 +93,8 @@
     font-weight: bold;
     color: #555;
 }
-.isso-comment > div.text-wrapper > .textarea-wrapper .textarea {
+.isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
+.isso-comment > div.text-wrapper > .textarea-wrapper .preview {
     margin-top: 0.2em;
 }
 .isso-comment > div.text-wrapper > div.text p {
@@ -107,7 +112,8 @@
     font-size: 130%;
     font-weight: bold;
 }
-.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea {
+.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea,
+.isso-comment > div.text-wrapper > div.textarea-wrapper .preview {
     width: 100%;
     border: 1px solid #f0f0f0;
     border-radius: 2px;
@@ -163,7 +169,8 @@
 .isso-postbox > .form-wrapper > .auth-section .post-action {
     display: block;
 }
-.isso-postbox > .form-wrapper .textarea {
+.isso-postbox > .form-wrapper .textarea,
+.isso-postbox > .form-wrapper .preview {
     margin: 0 0 .3em;
     padding: .4em .8em;
     border-radius: 3px;
@@ -193,7 +200,7 @@
 .isso-postbox > .form-wrapper > .auth-section .post-action {
     display: inline-block;
     float: right;
-    margin: 0;
+    margin: 0 0 0 5px;
 }
 .isso-postbox > .form-wrapper > .auth-section .post-action > input {
     padding: calc(.3em - 1px);
@@ -211,6 +218,28 @@
 .isso-postbox > .form-wrapper > .auth-section .post-action > input:active {
     background-color: #BBB;
 }
+.isso-postbox > .form-wrapper .preview,
+.isso-postbox > .form-wrapper input[name="edit"],
+.isso-postbox.preview-mode > .form-wrapper input[name="preview"],
+.isso-postbox.preview-mode > .form-wrapper .textarea {
+    display: none;
+}
+.isso-postbox.preview-mode > .form-wrapper .preview {
+    display: block;
+}
+.isso-postbox.preview-mode > .form-wrapper input[name="edit"] {
+    display: inline;
+}
+.isso-postbox > .form-wrapper .preview {
+    background-color: #f8f8f8;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f8f8f8,
+        #f8f8f8 10px,
+        #fff 10px,
+        #fff 20px
+    );
+}
 @media screen and (max-width:600px) {
     .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
         display: block;
@@ -220,9 +249,4 @@
     .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
         width: 100%;
     }
-    .isso-postbox > .form-wrapper > .auth-section .post-action {
-        display: block;
-        float: none;
-        text-align: right;
-    }
 }

isso/js/app/api.js

@@ -191,9 +191,23 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) {
         return deferred.promise;
     };
 
+
     var feed = function(tid) {
         return endpoint + "/feed?" + qs({uri: tid || location});
-    }
+    };
+
+    var preview = function(text) {
+        var deferred = Q.defer();
+        curl("POST", endpoint + "/preview", JSON.stringify({text: text}),
+             function(rv) {
+                 if (rv.status === 200) {
+                     deferred.resolve(JSON.parse(rv.body).text);
+                 } else {
+                     deferred.reject(rv.body);
+                 }
+             });
+        return deferred.promise;
+    };
 
     return {
         endpoint: endpoint,
@@ -207,6 +221,7 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) {
         count: count,
         like: like,
         dislike: dislike,
-        feed: feed
+        feed: feed,
+        preview: preview
     };
 });

isso/js/app/i18n/bg.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Име/псевдоним (незадължително)",
     "postbox-email": "Ел. поща (незадължително)",
     "postbox-website": "Уебсайт (незадължително)",
+    "postbox-preview": "преглед",
+    "postbox-edit": "Редактиране",
     "postbox-submit": "Публикуване",
     "num-comments": "1 коментар\n{{ n }} коментара",
     "no-comments": "Все още няма коментари",

isso/js/app/i18n/cs.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Jméno (nepovinné)",
     "postbox-email": "E-mail (nepovinný)",
     "postbox-website": "Web (nepovinný)",
+    "postbox-preview": "Náhled",
+    "postbox-edit": "Upravit",
     "postbox-submit": "Publikovat",
     "num-comments": "Jeden komentář\n{{ n }} Komentářů",
     "no-comments": "Zatím bez komentářů",

isso/js/app/i18n/da.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Name (optional)",
     "postbox-email": "E-mail (optional)",
     "postbox-website": "Website (optional)",
+    "postbox-preview": "Eksempel",
+    "postbox-edit": "Rediger",
     "postbox-submit": "Submit",
 
     "num-comments": "One Comment\n{{ n }} Comments",

isso/js/app/i18n/de.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Name (optional)",
     "postbox-email": "Email (optional)",
     "postbox-website": "Website (optional)",
+    "postbox-preview": "Vorschau",
+    "postbox-edit": "Bearbeiten",
     "postbox-submit": "Abschicken",
     "num-comments": "1 Kommentar\n{{ n }} Kommentare",
     "no-comments": "Bisher keine Kommentare",

isso/js/app/i18n/el_GR.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Όνομα (προαιρετικό)",
     "postbox-email": "E-mail (προαιρετικό)",
     "postbox-website": "Ιστοσελίδα (προαιρετικό)",
+    "postbox-preview": "Πρεμιέρα",
+    "postbox-edit": "Επεξεργασία",
     "postbox-submit": "Υποβολή",
     "num-comments": "Ένα σχόλιο\n{{ n }} σχόλια",
     "no-comments": "Δεν υπάρχουν σχόλια",

isso/js/app/i18n/en.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Name (optional)",
     "postbox-email": "E-mail (optional)",
     "postbox-website": "Website (optional)",
+    "postbox-preview": "Preview",
+    "postbox-edit": "Edit",
     "postbox-submit": "Submit",
 
     "num-comments": "One Comment\n{{ n }} Comments",

isso/js/app/i18n/eo.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Nomo (malnepra)",
     "postbox-email": "Retadreso (malnepra)",
     "postbox-website": "Retejo (malnepra)",
+    "postbox-preview": "Antaŭrigardo",
+    "postbox-edit": "Redaktu",
     "postbox-submit": "Sendu",
     "num-comments": "{{ n }} komento\n{{ n }} komentoj",
     "no-comments": "Neniu komento ankoraŭ",

isso/js/app/i18n/es.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Nombre (opcional)",
     "postbox-email": "E-mail (opcional)",
     "postbox-website": "Sitio web (opcional)",
+    "postbox-preview": "Avance",
+    "postbox-edit": "Editar",
     "postbox-submit": "Enviar",
     "num-comments": "Un Comentario\n{{ n }} Comentarios",
     "no-comments": "Sin Comentarios Todavía",

isso/js/app/i18n/fa.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "اسم (اختیاری)",
     "postbox-email": "ایمیل (اختیاری)",
     "postbox-website": "سایت (اختیاری)",
+    "postbox-preview": "پیشنمایش",
+    "postbox-edit": "ویرایش",
     "postbox-submit": "ارسال",
 
     "num-comments": "یک نظر\n{{ n }} نظر",

isso/js/app/i18n/fi.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Nimi (valinnainen)",
     "postbox-email": "Sähköposti (valinnainen)",
     "postbox-website": "Web-sivu (valinnainen)",
+    "postbox-preview": "Esikatselu",
+    "postbox-edit": "Muokkaa",
     "postbox-submit": "Lähetä",
 
     "num-comments": "Yksi kommentti\n{{ n }} kommenttia",

isso/js/app/i18n/fr.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Nom (optionnel)",
     "postbox-email": "Courriel (optionnel)",
     "postbox-website": "Site web (optionnel)",
+    "postbox-preview": "Aperçu",
+    "postbox-edit": "Éditer",
     "postbox-submit": "Soumettre",
     "num-comments": "{{ n }} commentaire\n{{ n }} commentaires",
     "no-comments": "Aucun commentaire pour l'instant",

isso/js/app/i18n/hr.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Ime (neobavezno)",
     "postbox-email": "E-mail (neobavezno)",
     "postbox-website": "Web stranica (neobavezno)",
+    "postbox-preview": "Pregled",
+    "postbox-edit": "Uredi",
     "postbox-submit": "Pošalji",
     "num-comments": "Jedan komentar\n{{ n }} komentara",
     "no-comments": "Još nema komentara",

isso/js/app/i18n/hu.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Név (nem kötelező)",
     "postbox-email": "Email (nem kötelező)",
     "postbox-website": "Website (nem kötelező)",
+    "postbox-preview": "Előnézet",
+    "postbox-edit": "Szerekesztés",
     "postbox-submit": "Elküld",
     "num-comments": "Egy hozzászólás\n{{ n }} hozzászólás",
     "no-comments": "Eddig nincs hozzászólás",

isso/js/app/i18n/it.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Nome (opzionale)",
     "postbox-email": "E-mail (opzionale)",
     "postbox-website": "Sito web (opzionale)",
+    "postbox-preview": "Anteprima",
+    "postbox-edit": "Modifica",
     "postbox-submit": "Invia",
     "num-comments": "Un Commento\n{{ n }} Commenti",
     "no-comments": "Ancora Nessun Commento",

isso/js/app/i18n/nl.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Naam (optioneel)",
     "postbox-email": "E-mail (optioneel)",
     "postbox-website": "Website (optioneel)",
+    "postbox-preview": "Voorbeeld",
+    "postbox-edit": "Bewerken",
     "postbox-submit": "Versturen",
     "num-comments": "Één reactie\n{{ n }} reacties",
     "no-comments": "Nog geen reacties",

isso/js/app/i18n/pl.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Imię/nick (opcjonalnie)",
     "postbox-email": "E-mail (opcjonalnie)",
     "postbox-website": "Strona (opcjonalnie)",
+    "postbox-preview": "Visualizar",
+    "postbox-edit": "Edytuj",
     "postbox-submit": "Wyślij",
     "num-comments": "Jeden komentarz\n{{ n }} komentarzy",
     "no-comments": "Jeszcze nie ma komentarzy",

isso/js/app/i18n/ru.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Имя (необязательно)",
     "postbox-email": "Email (необязательно)",
     "postbox-website": "Сайт (необязательно)",
+    "postbox-preview": "анонс",
+    "postbox-edit": "Правка",
     "postbox-submit": "Отправить",
     "num-comments": "{{ n }} комментарий\n{{ n }} комментария\n{{ n }} комментариев",
     "no-comments": "Пока нет комментариев",

isso/js/app/i18n/sv.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Namn (frivilligt)",
     "postbox-email": "E-mail (frivilligt)",
     "postbox-website": "Hemsida (frivilligt)",
+    "postbox-preview": "Förhandsvisning",
+    "postbox-edit": "Redigera",
     "postbox-submit": "Skicka",
     "num-comments": "En kommentar\n{{ n }} kommentarer",
     "no-comments": "Inga kommentarer än",

isso/js/app/i18n/vi.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "Tên (tùy chọn)",
     "postbox-email": "E-mail (tùy chọn)",
     "postbox-website": "Website (tùy chọn)",
+    "postbox-preview": "Xem trước",
+    "postbox-edit": "Sửa",
     "postbox-submit": "Gửi",
 
     "num-comments": "Một bình luận\n{{ n }} bình luận",

isso/js/app/i18n/zh_CN.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "名字 (可选)",
     "postbox-email": "E-mail (可选)",
     "postbox-website": "网站 (可选)",
+    "postbox-preview": "预习",
+    "postbox-edit": "编辑",
     "postbox-submit": "提交",
 
     "num-comments": "1 条评论\n{{ n }} 条评论",

isso/js/app/i18n/zh_TW.js

@@ -3,6 +3,8 @@ define({
     "postbox-author": "名稱 (非必填)",
     "postbox-email": "電子信箱 (非必填)",
     "postbox-website": "個人網站 (非必填)",
+    "postbox-preview": "預習",
+    "postbox-edit": "編輯",
     "postbox-submit": "送出",
 
     "num-comments": "1 則留言\n{{ n }} 則留言",

isso/js/app/isso.js

@@ -11,7 +11,8 @@ define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n",
             el = $.htmlify(jade.render("postbox", {
             "author":  JSON.parse(localStorage.getItem("author")),
             "email":   JSON.parse(localStorage.getItem("email")),
-            "website": JSON.parse(localStorage.getItem("website"))
+            "website": JSON.parse(localStorage.getItem("website")),
+            "preview": ''
         }));
 
         // callback on success (e.g. to toggle the reply button)
@@ -51,9 +52,27 @@ define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n",
             $("[name='author']", el).placeholder.replace(/ \(.*\)/, "");
         }
 
+        // preview function
+        $("[name='preview']", el).on("click", function() {
+            api.preview(utils.text($(".textarea", el).innerHTML)).then(
+                function(html) {
+                    $(".preview .text", el).innerHTML = html;
+                    el.classList.add('preview-mode');
+                });
+        });
+
+        // edit function
+        var edit = function() {
+            $(".preview .text", el).innerHTML = '';
+            el.classList.remove('preview-mode');
+        };
+        $("[name='edit']", el).on("click", edit);
+        $(".preview", el).on("click", edit);
+
         // submit form, initialize optional fields with `null` and reset form.
         // If replied to a comment, remove form completely.
         $("[type=submit]", el).on("click", function() {
+            edit();
             if (! el.validate()) {
                 return;
             }

isso/js/app/text/postbox.jade

@@ -3,6 +3,10 @@ div(class='isso-postbox')
         div(class='textarea-wrapper')
             div(class='textarea placeholder' contenteditable='true')
                 = i18n('postbox-text')
+            div(class='preview')
+                div(class='isso-comment')
+                    div(class='text-wrapper')
+                        div(class='text')
         section(class='auth-section')
             p(class='input-wrapper')
                 input(type='text' name='author' placeholder=i18n('postbox-author')
@@ -15,3 +19,9 @@ div(class='isso-postbox')
                       value=website != null ? '#{website}' : '')
             p(class='post-action')
                 input(type='submit' value=i18n('postbox-submit'))
+            p(class='post-action')
+                input(type='button' name='preview'
+                      value=i18n('postbox-preview'))
+            p(class='post-action')
+                input(type='button' name='edit'
+                      value=i18n('postbox-edit'))