improve frontend of emacs, ckeditor, tinymce, nicedit, meta and env functions

Improves in emacs:
- use htmx to send content to the controller
- show txt and formatted_txt content in the second panel
- show two tabs if "tabs" winix parameter is used
- add an option to show either one or two panels
- correctly resize the editor window (F11) when two panels are shown

Improves in ckeditor:
- use htmx to send content to the controller
- do not check automatically for ckeditor update

Improves in tinymce/nicedit/meta/env:
- use htmx to send content to the controller

while here:
- change PascalCase to snake_case in meta/env controllers
- update CodeMirror editor to 5.65.16
- udpate Showdown (markdown to html converter) to 2.1.0
This commit is contained in:
2024-07-20 15:13:27 +02:00
parent 89b37db48e
commit e63838faeb
27 changed files with 1075 additions and 496 deletions

View File

@@ -1,10 +1,22 @@
<div class="winix">
[if request.is_item]<h1>{edit}</h1>[else]<h1>{add}</h1>[end]
[frame "emacs"]
<h1 id="winix_header_id" [if winix_frame_is "emacs"]hx-swap-oob="true"[end]>
[if request.is_item]
{edit}
[else]
{add}
[end]
</h1>
[end]
<form class="uk-form-stacked" method="post" action="[doc_base_url][dir][if request.is_item][item.url]/[end]emacs">
<form
action="[doc_base_url][dir][if request.is_item][item.url]/[end]emacs/[if winix_function_param_is "tabs"]/tabs[end]"
method="post"
class="uk-form-stacked"
>
<div class="uk-margin">
<label class="uk-form-label" for="winix_title_id">{title}</label>
@@ -16,41 +28,59 @@
<div class="uk-margin">
<label class="uk-form-label" for="winix_url_id">{suggested_url}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]">
[frame "emacs"]
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]" [if winix_frame_is "emacs"]hx-swap-oob="true"[end]>
[end]
</div>
</div>
[include "fun_emacs_post.html"]
[if not user_logged]
<div class="uk-margin">
<label class="uk-form-label" for="winix_nick_id">{nick}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_nick_id" type="text" name="guestname" value="[item.guest_name]">
</div>
</div>
<div class="uk-margin winix-emacs-status">
[frame "emacs"]
<div class="uk-margin">
<label class="uk-form-label" for="winix_rebus_id">{rebus_how_is_it} [rebus_question]?</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_rebus_id" type="text" name="rebus">
[if not user_logged]
<div class="uk-margin">
<label class="uk-form-label" for="winix_nick_id">{nick}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_nick_id" type="text" name="guestname" value="[item.content.guest_name]">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="winix_rebus_id">{rebus_how_is_it} [rebus_question]?</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_rebus_id" type="text" name="rebus">
</div>
</div>
[include "antispam.html"]
[end]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
[# IMPROVEME put some kind of a status msg here]
<div class="uk-margin-medium-top">
<button
class="uk-button uk-button-primary uk-width-1-1 uk-width-1-2@s uk-width-1-3@m wx-button-spinner"
type="submit"
hx-on:click="event.preventDefault(); winix_update_from_codemirror(this, '[doc_base_url][dir][if request.is_item][item.url]/[end]emacs/frame:emacs', '.winix-emacs-status')"
>
<span class="wx-button-spinner-text">
[if request.is_item]{change}[else]{add}[end]
</span>
<div class="wx-button-spinner-spinner">
<div uk-spinner="ratio: 0.5"></div>
</div>
</button>
</div>
</div>
[include "antispam.html"]
[end]
[if winix_function_param_is "postredirect"]
<div class="uk-form-controls">
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
</div>
[end]
<div class="uk-margin uk-form-controls">
<input class="uk-button uk-button-primary" type="submit" value="[if request.is_item]{change}[else]{add}[end]">
</div>
</form>
</div>