bbcode for notes app

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>