Skip to content
This repository was archived by the owner on Jun 21, 2022. It is now read-only.

Commit 2fe413e

Browse files
dboehmerdboehmer
authored
Merge pull request #174 from dboehmer/sync-md-preview-height
Add sync height and scroll position between md-input and md-preview
2 parents 76772d6 + 7515aeb commit 2fe413e

File tree

8 files changed

+96
-26
lines changed

8 files changed

+96
-26
lines changed

‎root/static/css/local_bootstrap_modifications.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,12 @@ markdown preview
8686
overflow: auto;
8787
background-color: rgb(240,240,240);
8888
border: 1px solid white;
89-
border-radius:4px;
90-
margin-left:1em;
89+
border-radius: 0.25rem;
90+
padding: 0.375rem 0.75rem;
91+
}
92+
93+
input.with-markdown-preview {
94+
height: 100%;
9195
}
9296

9397

‎root/static/js/script.js‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,38 @@ $(function() {
4141
});
4242

4343
// show Markdown preview right of <textarea> inputs with class .with-markdown-preview
44-
$('textarea.with-markdown-preview, input[type="text"].with-markdown-preview').each(function() {
45-
let $input = $(this);
46-
let $row = $('<div>', {class: 'row'}).insertBefore($input);
47-
let $preview = $('<div>', {class: 'markdown-preview'}).appendTo($row);
44+
document.querySelectorAll("textarea.with-markdown-preview, input[type=text].with-markdown-preview").forEach( elem => {
45+
let row = elem.parentNode.parentNode;
46+
let col = document.createElement("div");
47+
col.className = "col-sm-6";
48+
let preview = document.createElement("div");
49+
preview.className = "markdown-preview";
4850

49-
$input.detach().prependTo($row);
51+
col.append(preview)
52+
row.append(col);
5053

51-
$input.addClass('col');
52-
$preview.addClass('col');
54+
elem.addEventListener("input", e => {
55+
preview.innerHTML = marked(e.target.value);
56+
});
5357

54-
$input.on('change input', function() {
55-
$preview.html( marked( $input.val() ) );
56-
}).change();
58+
elem.dispatchEvent(new Event("input"));
59+
60+
if (elem.tagName === "TEXTAREA") {
61+
let obs = new ResizeObserver(() => {
62+
let height = elem.clientHeight;
63+
// Adding 2px to height to prevent infinity loop of resizing
64+
preview.style.height = `${height + 2}px`;
65+
});
66+
67+
obs.observe(elem);
68+
69+
const syncScrolling = (e, linkedElem) => {
70+
linkedElem.scrollTop = e.currentTarget.scrollTop;
71+
}
72+
73+
elem.addEventListener("scroll", e => syncScrolling(e, preview));
74+
preview.addEventListener("scroll", e => syncScrolling(e, elem));
75+
}
5776
});
5877

5978
});

‎root/templates/admin/faq/edit.tt‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,20 @@
99
<p>HTML anchor name: <input type="text" name="anchor" pattern="([-?/:@._~!$&'()*+,;=a-zA-Z0-9]|%[0-9a-fA-F]{2})*" value="[% faq.anchor | html %]"></p>
1010

1111
<h3>Question</h3>
12-
<input class="with-markdown-preview" type="text" name="question" value="[% faq.question_md | html %]">
12+
<div class="row mb-2">
13+
<div class="col-sm-6 mb-sm-0 mb-2">
14+
<input class="form-control with-markdown-preview" type="text" name="question" value="[% faq.question_md | html %]">
15+
</div>
16+
</div>
17+
1318

1419
<h3>Answer</h3>
15-
<textarea class="with-markdown-preview" name="answer">[% faq.answer_md | html %]</textarea>
20+
<div class="row mb-2">
21+
<div class="col-sm-6 mb-sm-0 mb-2">
22+
<textarea class="form-control with-markdown-preview" name="answer" rows="10">[% faq.answer_md | html %]</textarea>
23+
</div>
24+
</div>
25+
1626

1727
<p><input type="submit" value="[% faq.in_storage ? 'Update' : 'Create' %]"></p>
1828
</form>

‎root/templates/admin/terms/edit.tt‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@
55
Valid from:
66
<input type="date" required min="[% tomorrow.ymd %]" name="valid_from" value="[% terms.valid_from.ymd %]">
77
</p>
8-
9-
<textarea class="with-markdown-preview" name="content_md">[% terms.content_md | html %]</textarea>
8+
<div class="row mb-2">
9+
<div class="col-sm-6 mb-sm-0 mb-2">
10+
<textarea class="form-control with-markdown-preview" name="content_md" rows="10">[% terms.content_md | html %]</textarea>
11+
</div>
12+
</div>
13+
1014

1115
<p><input type="submit" value="[% terms.in_storage ? 'Update' : 'Create' %]"></p>
1216
</form>

‎root/templates/dish/edit.tt‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,19 @@
2525
</p>
2626

2727
<h3>Preparation</h3>
28-
<textarea class="with-markdown-preview" name="preparation" cols="80" rows="10">[% dish.preparation | html %]</textarea>
28+
<div class="row mb-2">
29+
<div class="col-sm-6 mb-sm-0 mb-2">
30+
<textarea class="form-control with-markdown-preview" name="preparation" rows="10">[% dish.preparation | html %]</textarea>
31+
</div>
32+
</div>
33+
2934

3035
<h3>Description</h3>
31-
<textarea class="with-markdown-preview" name="description" cols="80" rows="10">[% dish.description | html %]</textarea>
36+
<div class="row mb-2">
37+
<div class="col-sm-6 mb-sm-0 mb-2">
38+
<textarea class="form-control with-markdown-preview" name="description" rows="10">[% dish.description | html %]</textarea>
39+
</div>
40+
</div>
3241

3342
<p><input type="submit" value="Update Dish"></p>
3443

‎root/templates/organization/show.tt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313

1414
<h3>Description</h3>
1515
<form method="post" action="[% update_url %]">
16-
<p><textarea class="with-markdown-preview" name="description_md">[% organization.description_md | html %]</textarea></p>
16+
<div class="row mb-2">
17+
<div class="col-sm-6 mb-sm-0 mb-2">
18+
<textarea class="form-control with-markdown-preview" name="description_md" rows="10">[% organization.description_md | html %]</textarea>
19+
</div>
20+
</div>
1721
<p><input type="submit" value="Update"></p>
1822
</form>
1923
[% ELSE %]

‎root/templates/project/settings.tt‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
[% escape_title( "Project settings", project.name ) %]
22

3-
<form method="post" action="[% update_url %]">
4-
<textarea class="with-markdown-preview" name="description" cols="80" rows="10">[% project.description | html %]</textarea>
5-
6-
<input type="submit" value="Update description">
7-
</form>
3+
<div class="card mb-4">
4+
<div class="card-header">
5+
<h3>Description</h3>
6+
</div>
7+
<div class="card-body">
8+
<div class="row">
9+
<form method="post" action="[% update_url %]" class="col">
10+
<div class="row mb-2">
11+
<div class="col-sm-6 mb-sm-0 mb-2">
12+
<textarea class="form-control with-markdown-preview" name="description" rows="10">[% project.description | html %]</textarea>
13+
</div>
14+
</div>
15+
<input type="submit" value="Update description">
16+
</form>
17+
</div>
18+
</div>
19+
</div>
820

921
<form action="[% rename_url %]" method="post">
1022
<div class="card">

‎root/templates/recipe/edit.tt‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,21 @@
4747
<div class="form-group row">
4848
<label for="preparation" class="col-sm-2 col-form-label">Preparation</label>
4949
<div class="col-sm-10">
50-
<textarea class="form-control with-markdown-preview" name="preparation" id="preparation" cols="80" rows="10">[% recipe.preparation | html %]</textarea>
50+
<div class="row">
51+
<div class="col-sm-6 mb-sm-0 mb-2">
52+
<textarea class="form-control with-markdown-preview" name="preparation" id="preparation" rows="10">[% recipe.preparation | html %]</textarea>
53+
</div>
54+
</div>
5155
</div>
5256
</div>
5357
<div class="form-group row">
5458
<label for="preparation" class="col-sm-2 col-form-label">Description</label>
5559
<div class="col-sm-10">
56-
<textarea class="form-control with-markdown-preview" name="description" id="description" cols="80" rows="10">[% recipe.description | html %]</textarea>
60+
<div class="row">
61+
<div class="col-sm-6 mb-sm-0 mb-2">
62+
<textarea class="form-control with-markdown-preview" name="description" id="description" rows="10">[% recipe.description | html %]</textarea>
63+
</div>
64+
</div>
5765
</div>
5866
</div>
5967
<div class="form-group row py-3">

0 commit comments

Comments
 (0)