Merge pull request #416 from vincentbernat/feature/preview
js: add a preview button to see a rendered preview
This commit is contained in:
Benoît Latinier
GitHub
commit
ad6e868ba5
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
};
|
||||
});
|
||||
|
||||
@ -3,6 +3,8 @@ define({
|
||||
"postbox-author": "Име/псевдоним (незадължително)",
|
||||
"postbox-email": "Ел. поща (незадължително)",
|
||||
"postbox-website": "Уебсайт (незадължително)",
|
||||
"postbox-preview": "преглед",
|
||||
"postbox-edit": "Редактиране",
|
||||
"postbox-submit": "Публикуване",
|
||||
"num-comments": "1 коментар\n{{ n }} коментара",
|
||||
"no-comments": "Все още няма коментари",
|
||||
|
||||
@ -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ářů",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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": "Δεν υπάρχουν σχόλια",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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ŭ",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -3,6 +3,8 @@ define({
|
||||
"postbox-author": "اسم (اختیاری)",
|
||||
"postbox-email": "ایمیل (اختیاری)",
|
||||
"postbox-website": "سایت (اختیاری)",
|
||||
"postbox-preview": "پیشنمایش",
|
||||
"postbox-edit": "ویرایش",
|
||||
"postbox-submit": "ارسال",
|
||||
|
||||
"num-comments": "یک نظر\n{{ n }} نظر",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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": "Пока нет комментариев",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -3,6 +3,8 @@ define({
|
||||
"postbox-author": "名字 (可选)",
|
||||
"postbox-email": "E-mail (可选)",
|
||||
"postbox-website": "网站 (可选)",
|
||||
"postbox-preview": "预习",
|
||||
"postbox-edit": "编辑",
|
||||
"postbox-submit": "提交",
|
||||
|
||||
"num-comments": "1 条评论\n{{ n }} 条评论",
|
||||
|
||||
@ -3,6 +3,8 @@ define({
|
||||
"postbox-author": "名稱 (非必填)",
|
||||
"postbox-email": "電子信箱 (非必填)",
|
||||
"postbox-website": "個人網站 (非必填)",
|
||||
"postbox-preview": "預習",
|
||||
"postbox-edit": "編輯",
|
||||
"postbox-submit": "送出",
|
||||
|
||||
"num-comments": "1 則留言\n{{ n }} 則留言",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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'))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user