Merge pull request #416 from vincentbernat/feature/preview

js: add a preview button to see a rendered preview

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'))