From b0264bc807454765a1d7df96b4dfe9e8f9ab74cb Mon Sep 17 00:00:00 2001 From: Vincent Bernat Date: Fri, 20 Apr 2018 21:27:50 +0200 Subject: [PATCH] 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 | 46 ++++++++++++++++++++++++++--------- isso/js/app/api.js | 19 +++++++++++++-- isso/js/app/i18n/bg.js | 2 ++ isso/js/app/i18n/cs.js | 2 ++ isso/js/app/i18n/da.js | 2 ++ isso/js/app/i18n/de.js | 2 ++ isso/js/app/i18n/el_GR.js | 2 ++ isso/js/app/i18n/en.js | 2 ++ isso/js/app/i18n/eo.js | 2 ++ isso/js/app/i18n/es.js | 2 ++ isso/js/app/i18n/fa.js | 2 ++ isso/js/app/i18n/fi.js | 2 ++ isso/js/app/i18n/fr.js | 2 ++ isso/js/app/i18n/hr.js | 2 ++ isso/js/app/i18n/hu.js | 2 ++ isso/js/app/i18n/it.js | 2 ++ isso/js/app/i18n/nl.js | 2 ++ isso/js/app/i18n/pl.js | 2 ++ isso/js/app/i18n/ru.js | 2 ++ isso/js/app/i18n/sv.js | 2 ++ isso/js/app/i18n/vi.js | 2 ++ isso/js/app/i18n/zh_CN.js | 2 ++ isso/js/app/i18n/zh_TW.js | 2 ++ isso/js/app/isso.js | 21 +++++++++++++++- isso/js/app/text/postbox.jade | 10 ++++++++ 25 files changed, 124 insertions(+), 14 deletions(-) diff --git a/isso/css/isso.css b/isso/css/isso.css index 02f2a93..c0716f8 100644 --- a/isso/css/isso.css +++ b/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; - } } diff --git a/isso/js/app/api.js b/isso/js/app/api.js index 30cca9c..1496892 100644 --- a/isso/js/app/api.js +++ b/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 }; }); diff --git a/isso/js/app/i18n/bg.js b/isso/js/app/i18n/bg.js index 45ac24b..a13ff09 100644 --- a/isso/js/app/i18n/bg.js +++ b/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": "Все още няма коментари", diff --git a/isso/js/app/i18n/cs.js b/isso/js/app/i18n/cs.js index 77e6401..11dfcbb 100644 --- a/isso/js/app/i18n/cs.js +++ b/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ářů", diff --git a/isso/js/app/i18n/da.js b/isso/js/app/i18n/da.js index eb64fc4..d97cd4c 100644 --- a/isso/js/app/i18n/da.js +++ b/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", diff --git a/isso/js/app/i18n/de.js b/isso/js/app/i18n/de.js index f7def26..04e1739 100644 --- a/isso/js/app/i18n/de.js +++ b/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", diff --git a/isso/js/app/i18n/el_GR.js b/isso/js/app/i18n/el_GR.js index 5155a2d..db181cc 100644 --- a/isso/js/app/i18n/el_GR.js +++ b/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": "Δεν υπάρχουν σχόλια", diff --git a/isso/js/app/i18n/en.js b/isso/js/app/i18n/en.js index d3968b8..fd110fe 100644 --- a/isso/js/app/i18n/en.js +++ b/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", diff --git a/isso/js/app/i18n/eo.js b/isso/js/app/i18n/eo.js index 76150f3..e9ee6c6 100644 --- a/isso/js/app/i18n/eo.js +++ b/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ŭ", diff --git a/isso/js/app/i18n/es.js b/isso/js/app/i18n/es.js index c25d6cd..565ef14 100644 --- a/isso/js/app/i18n/es.js +++ b/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", diff --git a/isso/js/app/i18n/fa.js b/isso/js/app/i18n/fa.js index c323778..9b6da58 100644 --- a/isso/js/app/i18n/fa.js +++ b/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 }} نظر", diff --git a/isso/js/app/i18n/fi.js b/isso/js/app/i18n/fi.js index 80b6316..4def698 100644 --- a/isso/js/app/i18n/fi.js +++ b/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", diff --git a/isso/js/app/i18n/fr.js b/isso/js/app/i18n/fr.js index f65cc6a..32e0ed6 100644 --- a/isso/js/app/i18n/fr.js +++ b/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", diff --git a/isso/js/app/i18n/hr.js b/isso/js/app/i18n/hr.js index 1ae6452..84c31f9 100644 --- a/isso/js/app/i18n/hr.js +++ b/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", diff --git a/isso/js/app/i18n/hu.js b/isso/js/app/i18n/hu.js index e0bf7d6..e06c513 100644 --- a/isso/js/app/i18n/hu.js +++ b/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", diff --git a/isso/js/app/i18n/it.js b/isso/js/app/i18n/it.js index 31eeb2c..f193f95 100644 --- a/isso/js/app/i18n/it.js +++ b/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", diff --git a/isso/js/app/i18n/nl.js b/isso/js/app/i18n/nl.js index 04164b6..107a882 100644 --- a/isso/js/app/i18n/nl.js +++ b/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", diff --git a/isso/js/app/i18n/pl.js b/isso/js/app/i18n/pl.js index d9afe7d..bba7bac 100644 --- a/isso/js/app/i18n/pl.js +++ b/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", diff --git a/isso/js/app/i18n/ru.js b/isso/js/app/i18n/ru.js index a5af03e..662e825 100644 --- a/isso/js/app/i18n/ru.js +++ b/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": "Пока нет комментариев", diff --git a/isso/js/app/i18n/sv.js b/isso/js/app/i18n/sv.js index cafbdda..a1b50a3 100644 --- a/isso/js/app/i18n/sv.js +++ b/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", diff --git a/isso/js/app/i18n/vi.js b/isso/js/app/i18n/vi.js index 72a3092..6b54d23 100644 --- a/isso/js/app/i18n/vi.js +++ b/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", diff --git a/isso/js/app/i18n/zh_CN.js b/isso/js/app/i18n/zh_CN.js index 9c33957..1bd1801 100644 --- a/isso/js/app/i18n/zh_CN.js +++ b/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 }} 条评论", diff --git a/isso/js/app/i18n/zh_TW.js b/isso/js/app/i18n/zh_TW.js index 68ad370..7bdf7e5 100644 --- a/isso/js/app/i18n/zh_TW.js +++ b/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 }} 則留言", diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js index e779a76..1d3fc5d 100644 --- a/isso/js/app/isso.js +++ b/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; } diff --git a/isso/js/app/text/postbox.jade b/isso/js/app/text/postbox.jade index 0a85ae1..908326b 100644 --- a/isso/js/app/text/postbox.jade +++ b/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'))