1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
{{if $app}}
<div id="personal-notes" class="generic-content-wrapper{{if $hidden}} d-none{{/if}}">
<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-np">
{{else}}
<div id="personal-notes" class="widget{{if $hidden}} d-none{{/if}}">
<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="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('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' : 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' : 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>
{{/if}}
</div>
|
