paul
/
rocket-pinboard
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a Markdown edit help popover for the textarea 

Also add an edit help button during editing to toggle the popover.
The popover is placed next to the textarea and is removed when
exiting edit mode.
This commit is contained in:
Paul van Tilburg 2017-12-30 16:16:59 +01:00
parent dc9a9efe59
commit 95e217a84d
2 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/js/wishlists.js
View File

@ -102,11 +102,15 @@ function revertListChanges(listElem) {
}
function disableListEditMode(listElem) {
$('.list-data', listElem).hide();
$('.list-data', listElem).hide()
.popover('hide');
$('.list-html', listElem).show();
$('.list-cancel-button', listElem).hide();
$('.list-edit-button', listElem).show();
$('.list-edit-help', listElem).hide();
$('.list-save-button', listElem).hide();
$('.list-edit-help', listElem).removeClass('active')
.popover('hide');
}
function enableListEditMode(listElem) {
@ -114,6 +118,7 @@ function enableListEditMode(listElem) {
$('.list-html', listElem).hide();
$('.list-cancel-button', listElem).show();
$('.list-edit-button', listElem).hide();
$('.list-edit-help', listElem).show();
$('.list-save-button', listElem).show();
}
@ -130,6 +135,13 @@ $(function() {
enableListEditMode(listElem);
});
$('.list-edit-help').on('click', function() {
var listElem = $(this).parents(".list");
var listDataElem = $('.list-data', listElem);
$(this).toggleClass('active')
listDataElem.popover('toggle');
});
$('.list-save-button').on('click', function() {
var listElem = $(this).parents(".list");
console.debug("Saving the changes for list " + listElem.data("list-id"));
@ -142,4 +154,8 @@ $(function() {
});
initLists();
$('textarea').popover({
html: true,
trigger: 'manual'
});
});

30
templates/index.html.tera
View File

@ -20,10 +20,10 @@
<div class="card-header">
<h1 class= "mb-0">
<span id="list-name">{{ list.name }}</span>
<button class="btn btn-dark btn-sm float-right list-edit-button">
<button class="btn btn-dark btn-sm float-right mt-2 list-edit-button">
Bewerk
</button>
<div class="btn-group float-right" role="group" aria-label="Edit buttons">
<div class="btn-group mt-2 float-right" role="group" aria-label="Edit buttons">
<button class="btn btn-light btn-sm list-cancel-button">
Annuleren
</button>
@ -31,16 +31,38 @@
Opslaan
</button>
</div>
<button class="btn btn-light btn-sm float-right mr-2 mt-2 list-edit-help">?</button>
</h1>
</div>
<div class="card-body">
<div class="card-text list-html"></div>
<div class="card-text">
<textarea class="form-control list-data" rows="15"></textarea>
<textarea class="form-control list-data" rows="16"
data-title="Opmaakhulp"
data-content="<pre class='mb-0'>
## Kop 2
### Kop 3
#### Kop 4
_Schuingedrukt_
*Vetgedruk*
~Doorgestreept~
* Item 1
* Item 2
* [ ] Wil ik graag
* [ ] Wil ik ook graag
* [x] Heb ik al!
[Linktekst](http://google.nl)
---
Horizontale lijn<pre>"></textarea>
</div>
</div>
<div class="card-footer">
<p class="card-text"><small class="list-updated-at"></small></p>
<p class="card-text"><i><small class="list-updated-at"></small></i></p>
</div>
</div>
{% endfor %}