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

diff --git a/view/templates/item/compose.tpl b/view/templates/item/compose.tpl
index a161f34529092bff271b8ba100b693f32d64a6e0..9cb8903ffc0a99d7a9aa06c4a560ab5f24c332c8 100644 (file)
--- 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>