From 59530853de27a352a766cad3f78eeec45d858f50 Mon Sep 17 00:00:00 2001
From: loma-one <44441246+loma-one@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:59:06 +0200
Subject: [PATCH] Optimisation of the Composer Editor

As a result of the changes, the editor is started in a larger window. In addition, the authorisation settings for the article are hidden for the time being. These can be shown via a sandwitch menu if required.
The reload of the page is prevented so that articles already created in the editor are not lost.
ar.

The Composer Editor is another editor in Friendica that is particularly suitable for entering longer texts (e.g. at the local workstation). The special feature is that the editor is loaded in a separate window and therefore does not distract from the timeline.
The editor can still be used in mobile applications
---
 view/templates/item/compose.tpl | 66 ++++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/view/templates/item/compose.tpl b/view/templates/item/compose.tpl
index a161f34529..9cb8903ffc 100644
--- a/view/templates/item/compose.tpl
+++ b/view/templates/item/compose.tpl
@@ -21,53 +21,56 @@
 
 			<p class="comment-edit-bb-{{$id}} comment-icon-list">
 				<span>
-					<button type="button" class="btn btn-sm template-icon bb-img" aria-label="{{$l10n.edimg}}" title="{{$l10n.edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}" tabindex="7">
+					<button type="button" class="btn btn-sm template-icon bb-img" aria-label="{{$l10n.edimg}}" title="{{$l10n.edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}" tabindex="6">
 						<i class="fa fa-picture-o"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon bb-attach" aria-label="{{$l10n.edattach}}" title="{{$l10n.edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$l10n.prompttext}}');" tabindex="8">
+					<button type="button" class="btn btn-sm template-icon bb-attach" aria-label="{{$l10n.edattach}}" title="{{$l10n.edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$l10n.prompttext}}');" tabindex="7">
 						<i class="fa fa-paperclip"></i>
 					</button>
 				</span>
 				<span>
-					<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.edurl}}" title="{{$l10n.edurl}}" onclick="insertFormatting('url',{{$id}});" tabindex="9">
+					<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.edurl}}" title="{{$l10n.edurl}}" onclick="insertFormatting('url',{{$id}});" tabindex="8">
 						<i class="fa fa-link"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon underline" aria-label="{{$l10n.eduline}}" title="{{$l10n.eduline}}" onclick="insertFormatting('u',{{$id}});" tabindex="10">
+					<button type="button" class="btn btn-sm template-icon underline" aria-label="{{$l10n.eduline}}" title="{{$l10n.eduline}}" onclick="insertFormatting('u',{{$id}});" tabindex="9">
 						<i class="fa fa-underline"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon italic" aria-label="{{$l10n.editalic}}" title="{{$l10n.editalic}}" onclick="insertFormatting('i',{{$id}});" tabindex="11">
+					<button type="button" class="btn btn-sm template-icon italic" aria-label="{{$l10n.editalic}}" title="{{$l10n.editalic}}" onclick="insertFormatting('i',{{$id}});" tabindex="10">
 						<i class="fa fa-italic"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon bold" aria-label="{{$l10n.edbold}}" title="{{$l10n.edbold}}" onclick="insertFormatting('b',{{$id}});" tabindex="12">
+					<button type="button" class="btn btn-sm template-icon bold" aria-label="{{$l10n.edbold}}" title="{{$l10n.edbold}}" onclick="insertFormatting('b',{{$id}});" tabindex="11">
 						<i class="fa fa-bold"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon quote" aria-label="{{$l10n.edquote}}" title="{{$l10n.edquote}}" onclick="insertFormatting('quote',{{$id}});" tabindex="13">
+					<button type="button" class="btn btn-sm template-icon quote" aria-label="{{$l10n.edquote}}" title="{{$l10n.edquote}}" onclick="insertFormatting('quote',{{$id}});" tabindex="12">
 						<i class="fa fa-quote-left"></i>
 					</button>
-					<button id="button_emojipicker" type="button" class="btn btn-sm template-icon emojis" aria-label="{{$l10n.edemojis}}" title="{{$l10n.edemojis}}" tabindex="14">
+					<button id="button_emojipicker" type="button" class="btn btn-sm template-icon emojis" aria-label="{{$l10n.edemojis}}" title="{{$l10n.edemojis}}" tabindex="13">
 						<i class="fa fa-smile-o"></i>
 					</button>
-					<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.contentwarn}}" title="{{$l10n.contentwarn}}" onclick="insertFormatting('abstract',{{$id}});" tabindex="9">
+					<button type="button" class="btn btn-sm template-icon bb-url" aria-label="{{$l10n.contentwarn}}" title="{{$l10n.contentwarn}}" onclick="insertFormatting('abstract',{{$id}});" tabindex="14">
 						<i class="fa fa-eye"></i>
 					</button>
 				</span>
 			</p>
 			<div id="dropzone-{{$id}}" class="dropzone" style="overflow:scroll">
 				<p>
-					<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
+					<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="18" tabindex="3" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
 				</p>
 			</div>
 			<p class="comment-edit-submit-wrapper">
 {{if $type == 'post'}}
 				<span role="presentation" class="form-inline">
-					<input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}"/>
-					<button type="button" class="btn btn-sm template-icon" id="profile-location"
+					<button type="button" name="permissions" class="btn btn-sm template-icon" id="toggle-permissions" title="{{$l10n.toggle_permissions_tooltip}}" onclick="togglePermissions()" style="margin-right: 10px;" tabindex="5">
+						<i class="fa fa-ellipsis-h"></i> {{$l10n.toggle_permissions}}
+					</button>
+					<input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}" tabindex="6"/>
+                    			<button type="button" class="btn btn-sm template-icon" id="profile-location"
 						data-title-set="{{$l10n.location_set}}"
 						data-title-disabled="{{$l10n.location_disabled}}"
 						data-title-unavailable="{{$l10n.location_unavailable}}"
 						data-title-clear="{{$l10n.location_clear}}"
 						title="{{$l10n.location_set}}"
-						tabindex="6">
+						tabindex="7">
 						<i class="fa fa-map-marker" aria-hidden="true"></i>
 					</button>
 				</span>
@@ -76,12 +79,13 @@
 					<img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" />
 				</span>
 				<span role="presentation" id="character-counter" class="grey text-info"></span>
-				<button type="button" class="btn btn-default" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
-				<button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
+				<button type="button" class="btn btn-default" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="8"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
+				<button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="9"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
 			</p>
 
 			<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
 
+			<div id="permissions-section" style="display: none;">
 {{if $type == 'post'}}
 			<h3>{{$l10n.visibility_title}}</h3>
 			{{$acl_selector nofilter}}
@@ -98,8 +102,9 @@
 			<input type="hidden" name="circle_deny" value="{{$circle_deny}}"/>
 			<input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
 {{/if}}
-		</form>
-	</div>
+            </div>
+        </form>
+    </div>
 </div>
 <script>
 	dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
@@ -118,4 +123,31 @@
 			textarea.style.height = (textarea.scrollHeight) + "px";
 		});
 	});
+
+    function togglePermissions() {
+        var permissionsSection = document.getElementById('permissions-section');
+        if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
+            permissionsSection.style.display = 'block';
+        } else {
+            permissionsSection.style.display = 'none';
+        }
+    }
+
+    // Warn the user before leaving the page
+    var formSubmitting = false;
+
+    function setFormSubmitting() {
+        formSubmitting = true;
+    }
+
+    window.addEventListener("beforeunload", function (event) {
+        if (!formSubmitting) {
+            var confirmationMessage = 'Sind Sie sicher, dass Sie die Seite neu laden möchten? Alle ungespeicherten Änderungen gehen verloren.';
+            event.returnValue = confirmationMessage;
+            return confirmationMessage;
+        }
+    });
+
+    // Set the formSubmitting flag when the form is submitted
+    document.getElementById('comment-edit-form-{{$id}}').addEventListener('submit', setFormSubmitting);
 </script>