aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'view/tpl')
-rw-r--r--view/tpl/notes.tpl103
1 files changed, 94 insertions, 9 deletions
diff --git a/view/tpl/notes.tpl b/view/tpl/notes.tpl
index 0ae0604ef..22a249fd9 100644
--- a/view/tpl/notes.tpl
+++ b/view/tpl/notes.tpl
@@ -1,37 +1,122 @@
{{if $app}}
<div id="personal-notes" class="generic-content-wrapper{{if $hidden}} d-none{{/if}}">
- <div class="section-title-wrapper">
+ <div class="section-title-wrapper clearfix">
+ <div class="float-end rounded border border-secondary p-1 text-muted small note-mode" title="Double click into note for edit mode">Read mode</div>
<h2>{{$banner}}</h2>
</div>
- <div class="section-content-wrapper">
+ <div class="section-content-wrapper-np">
{{else}}
<div id="personal-notes" class="widget{{if $hidden}} d-none{{/if}}">
- <h3>{{$banner}}</h3>
+ <div class="float-end rounded border border-secondary mb-1 ps-1 pe-1 text-muted small note-mode" title="Double click note for edit mode">Read mode</div>
+ <h3 class="float-start">{{$banner}}</h3>
{{/if}}
- <textarea name="note_text" id="note-text" class="{{if $app}}form-control border-0{{/if}}">{{$text}}</textarea>
+ <textarea name="note_text" id="note-text" class="form-control{{if $app}} border-0{{else}} p-1{{/if}}" style="display: none;">{{$text}}</textarea>
+ <div id="note-text-html" class="{{if !$app}}border rounded p-1{{/if}}">{{$html}}</div>
<script>
var noteSaveTimer = null;
var noteText = $('#note-text');
+ var noteTextHTML = $('#note-text-html');
+ var noteMode = $('.note-mode');
+ var noteEditing = false;
+
+ noteText.bbco_autocomplete('bbcode');
$(document).on('focusout',"#note-text",function(e){
if(noteSaveTimer)
clearTimeout(noteSaveTimer);
+
+ noteEditing = false;
notePostFinal();
noteSaveTimer = null;
+ setNoteMode(noteMode, 'saving');
});
- $(document).on('focusin',"#note-text",function(e){
- noteSaveTimer = setTimeout(noteSaveChanges,10000);
+ $(document).on('dblclick',"#note-text-html",function(e){
+ noteEditing = 1;
+ noteText.show().focusin();
+ noteText.height(noteTextHTML.outerHeight());
+ noteText.scrollTop(noteTextHTML.scrollTop());
+ noteTextHTML.hide();
+ setNoteMode(noteMode, 'edit');
+
+ $(document).one('click', function(e) {
+ if (e.target.id !== 'note-text') {
+ noteTextHTML.show();
+ noteTextHTML.height(noteText.outerHeight());
+ noteTextHTML.scrollTop(noteText.scrollTop());
+ noteText.hide();
+ setNoteMode(noteMode, 'read');
+ }
+ });
+
+ $(document).one('click', '#note-text', function(e){
+ noteEditing = 2;
+ setNoteMode(noteMode, 'editing');
+ noteSaveTimer = setTimeout(noteSaveChanges,10000);
+ });
+
});
+
+
function notePostFinal() {
- $.post('notes/sync', { 'note_text' : $('#note-text').val() });
+ $.post(
+ 'notes/sync',
+ {
+ 'note_text' : noteText.val()
+ },
+ function (data) {
+ noteTextHTML.html(data.html);
+ noteTextHTML.show();
+ noteTextHTML.height(noteText.outerHeight());
+ noteTextHTML.scrollTop(noteText.scrollTop());
+ noteText.hide();
+ setNoteMode(noteMode, 'saved');
+ }
+ );
}
function noteSaveChanges() {
- $.post('notes', { 'note_text' : $('#note-text').val() });
- noteSaveTimer = setTimeout(noteSaveChanges,10000);
+ $.post('notes', { 'note_text' : noteText.val() });
+ noteSaveTimer = setTimeout(noteSaveChanges, 10000);
}
+
+ function setNoteMode (obj, mode) {
+ switch(mode) {
+ case 'edit':
+ obj.removeClass('border-secondary border-success text-muted text-success')
+ obj.addClass('border-danger text-danger')
+ obj.html('Edit mode');
+ break;
+ case 'editing':
+ obj.removeClass('border-secondary border-success text-muted text-success')
+ obj.addClass('border-danger text-danger')
+ obj.html('Editing...');
+ break;
+ case 'saving':
+ obj.removeClass('border-secondary border-danger text-muted text-danger')
+ obj.addClass('border-success text-success')
+ obj.html('Saving...');
+ break;
+ case 'saved':
+ obj.removeClass('border-secondary border-danger text-muted text-danger')
+ obj.addClass('border-success text-success')
+ obj.html('Saved');
+ setTimeout(function () {
+ if(noteEditing) {
+ setNoteMode(noteMode, noteEditing === 1 ? 'edit' : 'editing');
+ }
+ else {
+ setNoteMode(noteMode, 'read');
+ }
+ }, 3000);
+ break;
+ case 'read':
+ default:
+ obj.removeClass('border-success border-danger text-success text-danger').addClass('border-secondary text-muted').html('Read mode');
+ }
+ }
+
</script>
{{if $app}}
</div>