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

@@ -88,7 +88,8 @@ coreStyles_underline :
//config.allowedContent : true, // allowes all
disallowedContent : 'p(western)', // from copying from Office
extraAllowedContent : 'aside caption figure figcaption article footer header section div (*); ul(*); ol(*); h1(*); h2(*); h3(*); h4(*); h5(*); h6(*); p(*); table(*); tr(*); td(*);'
extraAllowedContent : 'aside caption figure figcaption article footer header section div (*); ul(*); ol(*); h1(*); h2(*); h3(*); h4(*); h5(*); h6(*); p(*); table(*); tr(*); td(*);',
versionCheck: false
});
@@ -167,7 +168,8 @@ coreStyles_underline :
//config.allowedContent : true, // allowes all
disallowedContent : 'p(western)', // from copying from Office
extraAllowedContent : 'aside caption figure figcaption article footer header section (*); ul(*); h1(*); h2(*); p(*)'
extraAllowedContent : 'aside caption figure figcaption article footer header section (*); ul(*); h1(*); h2(*); p(*)',
versionCheck: false
});

View File

@@ -1,7 +1,18 @@
<div class="winix">
[if request.is_item]<h1>{edit}</h1>[else]<h1>{add}</h1>[end]
[frame "ckeditor"]
<h1 id="winix_header_id" [if winix_frame_is "ckeditor"]hx-swap-oob="true"[end]>
[if request.is_item]
{edit}
[else]
{add}
[end]
</h1>
[end]
[# ckeditor needs javascript to work properly so we assume that the save method]
[# will be made only through ajax (htmx)]
<form class="uk-form-stacked">
[if one [mount_type_is "cms"] [any [mount_type_is "thread"] [thread_mount_arg_is "subject"]]]
@@ -15,22 +26,25 @@
<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 "ckeditor"]
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]" [if winix_frame_is "ckeditor"]hx-swap-oob="true"[end]>
[end]
</div>
</div>
[end]
<div class="uk-margin">
[if mount_type_is "cms"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_cms}</label>[end]
[if mount_type_is "thread"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_thread}</label>[end]
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
[# template fun_ls.html uses the name: itemcontent to refer to this textarea item]
[if mount_type_is "cms"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_cms}</label>[end]
[if mount_type_is "thread"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_thread}</label>[end]
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
[# template fun_ls.html uses the name: itemcontent to refer to this textarea item]
<div class="uk-form-controls">
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content" data-winix-post-name="itemcontent">[item.content.print_content]</div>
</div>
<div class="uk-form-controls">
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content">[item.content.print_content]</div>
<input type="hidden" id="winix_content_id" name="itemcontent" value="[item.content.content_raw]">
</div>
</div>
@@ -38,56 +52,51 @@
<input id="contenttype" type="hidden" name="contenttype" value="2">
</div>
[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 winix-ckeditor-status">
[frame "ckeditor"]
<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 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">
<div class="uk-form-controls uk-inline">
<button class="uk-button uk-button-primary winix_update_button"
data-winix-function-path="[doc_base_url][dir][if request.is_item][item.url]/[end]ckeditor"
data-winix-content-ckeditor-instances="winix-editor-content"
data-winix-content-inputs="winix_url_id,winix_title_id,contenttype"
data-winix-progressbar-id="winix-editor-progressbar"
data-winix-messages-status-success-id="winix-editor-messages-status-success"
data-winix-messages-status-error-id="winix-editor-messages-status-error"
<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="button"
hx-on:click="winix_update_from_ckeditor(this, '[doc_base_url][dir][if request.is_item][item.url]/[end]ckeditor/frame:ckeditor', '.winix-ckeditor-status')"
>
{ckeditor_update_button}
</button>
<div id="winix-editor-progressbar" class="uk-invisible uk-position-center-right-out uk-margin-small-left">
<img src="[doc_base_url_common]/progressbars/progressbar_fading_lines_16x16.gif" alt="{ckeditor_update_progressbar_img_alt}">
<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>
<div id="winix-editor-messages-status-success" class="winix-editor-messages-status-success">
</div>
<div id="winix-editor-messages-status-error" class="winix-editor-messages-status-error">
</div>
[end]
</div>
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
[include "ckeditor.html"]
[ckeditor_old_browsers_support]

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>

View File

@@ -15,31 +15,10 @@
[# CodeMirror doesn't work correctly inside fieldset tag -- horizontal scroll is broken]
<div class="uk-flex uk-child-width-1-2">
[if not [winix_function_param_is "tabs"]]
<textarea
style="height: 1000px"
class="uk-textareaa"
[if request.is_item]autofocus [end]
id="winix_content_id"
rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]300[else]300[end][end]"
cols="60" name="itemcontent">[item.content.content_raw]</textarea>
<div class="uk-flex uk-child-width-1-1" uk-height-match> [# uk-child-width-1-1 or uk-child-width-1-2 class will be added by js]
<div class="uk-margin-left" id="winix_output_preview">
</div>
</div>
[if false]
<ul uk-tab>
<li><a href="#">{upload_content_edit}</a></li>
<li><a href="#">{upload_content_preview}</a></li>
</ul>
<ul class="uk-switcher">
<li>
<textarea
style="height: 1000px"
class="uk-textarea"
@@ -47,15 +26,38 @@
id="winix_content_id"
rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]300[else]300[end][end]"
cols="60" name="itemcontent">[item.content.content_raw]</textarea>
</li>
<li>
<div class="uk-margin-left" id="winix_output_preview">
<div class="uk-margin-left" id="winix_output_preview" style="display: none;">
</div>
</li>
</ul>
[end]
</div>
[else]
<ul uk-tab>
<li><a href="#">{form_emacs_content_edit}</a></li>
<li><a href="#">{form_emacs_content_preview}</a></li>
</ul>
<ul class="uk-switcher">
<li>
<textarea
style="height: 1000px"
class="uk-textarea"
[if request.is_item]autofocus [end]
id="winix_content_id"
rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]300[else]300[end][end]"
cols="60" name="itemcontent">[item.content.content_raw]</textarea>
</li>
<li>
<div id="winix_output_preview">
</div>
</li>
</ul>
[end]
<input type="hidden" id="winix_content_parsed_id" value="" name="itemcontent_parsed">
@@ -64,22 +66,30 @@
<div class="uk-margin">
<label class="uk-form-label" for="winix_contenttype_id">{form_emacs_content_type}</label>
<select class="uk-select" name="contenttype" id="winix_contenttype_id">
<option[if item.content.type_is "text"] selected[end] value="0">{form_emacs_content_type_text}</option>
<option[if item.content.type_is "formatted text"] selected[end] value="1">{form_emacs_content_type_formatted_text}</option>
[if user_can_use_html]<option[if item.content.type_is "html"] selected[end] value="2">{form_emacs_content_type_html}</option>[end]
[if user_can_use_html]<option[if item.content.type_is "markdown"] selected[end] value="5">{form_emacs_content_type_markdown}</option>[end]
[if user_can_use_other]<option[if item.content.type_is "other"] selected[end] value="4">{form_emacs_content_type_other}</option>[end]
</select>
[if false]
[if user_can_use_bbcode]<option[if item.content.type_is "bbcode"] selected[end] value="3">{form_emacs_content_type_bbcode}</option>[end]
[end]
<label class="uk-form-label" for="winix_contenttype_id">{form_emacs_content_type}</label>
<select class="uk-select" name="contenttype" id="winix_contenttype_id">
<option[if item.content.type_is "text"] selected[end] value="0">{form_emacs_content_type_text}</option>
<option[if item.content.type_is "formatted text"] selected[end] value="1">{form_emacs_content_type_formatted_text}</option>
[if user_can_use_html]<option[if item.content.type_is "html"] selected[end] value="2">{form_emacs_content_type_html}</option>[end]
[if user_can_use_html]<option[if item.content.type_is "markdown"] selected[end] value="5">{form_emacs_content_type_markdown}</option>[end]
[if user_can_use_other]<option[if item.content.type_is "other"] selected[end] value="4">{form_emacs_content_type_other}</option>[end]
</select>
[if false]
[if user_can_use_bbcode]<option[if item.content.type_is "bbcode"] selected[end] value="3">{form_emacs_content_type_bbcode}</option>[end]
[end]
</div>
[if not [winix_function_param_is "tabs"]]
<div class="uk-margin">
<label class="uk-form-label" for="winix_viewtype_id">{form_emacs_view_type}</label>
<select class="uk-select" id="winix_viewtype_id">
<option value="1" selected>{form_emacs_view_type_one_panel}</option>
<option value="2">{form_emacs_view_type_two_panels}</option>
</select>
</div>
[end]

View File

@@ -62,13 +62,30 @@
<input type="hidden" name="userid" value="[env_user.user.id]">
<div class="uk-margin">
<input class="uk-button uk-button-primary" type="submit" value="{change}">
</div>
<div class="uk-margin winix-env-status">
[frame "env"]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
<div class="uk-margin-medium">
<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]env[if winix_function_param_is "a"]/a[end]/frame:env', '.winix-env-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>
[end]
</div>
</form>

View File

@@ -9,7 +9,11 @@
</h1>
<form class="uk-form-stacked" method="post" action="[doc_base_url][dir][if request.is_item][item.url]/[end]meta[if winix_function_param_is "a"]/a[end]">
<form
action="[doc_base_url][dir][if request.is_item][item.url]/[end]meta[if winix_function_param_is "a"]/a[end]"
method="post"
class="uk-form-stacked"
>
<div class="uk-margin">
<label class="uk-form-label" for="winix_content_id">
@@ -47,13 +51,32 @@
</div>
</div>
<div class="uk-margin">
<input class="uk-button uk-button-primary" type="submit" value="{change}">
</div>
<div class="uk-margin winix-meta-status">
[frame "meta"]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
<div class="uk-margin-medium">
<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]meta[if winix_function_param_is "a"]/a[end]/frame:meta', '.winix-meta-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>
[end]
</div>
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
</form>

View File

@@ -1,9 +1,19 @@
<div class="winix">
[if request.is_item]<h1>{edit}</h1>[else]<h1>{add}</h1>[end]
[frame "nicedit"]
<h1 id="winix_header_id" [if winix_frame_is "nicedit"]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]nicedit">
[# nicedit needs javascript to work properly so we assume that the save method]
[# will be made only through ajax (htmx)]
<form class="uk-form-stacked">
[if one [mount_type_is "cms"] [any [mount_type_is "thread"] [thread_mount_arg_is "subject"]]]
<div class="uk-margin">
@@ -16,7 +26,9 @@
<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 "nicedit"]
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]" [if winix_frame_is "nicedit"]hx-swap-oob="true"[end]>
[end]
</div>
</div>
[end]
@@ -27,7 +39,7 @@
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
<div class="uk-form-controls">
<textarea class="uk-textarea" rows="[if mount_type_is "cms"]30[else]10[end]" cols="60" name="itemcontent" id="winix_nicedit">[item.content.content_raw]</textarea>
<textarea class="uk-textarea" rows="[if mount_type_is "cms"]30[else]10[end]" cols="60" name="itemcontent" id="winix_content_id">[item.content.content_raw]</textarea>
</div>
</div>
@@ -36,34 +48,52 @@
</div>
<script type="text/javascript">
new nicEditor(\{fullPanel:true, iconsPath:'[doc_base_url_common]/nicedit/0.9_r25/nicEditorIcons.gif', uploadURI:'[doc_base_url][dir]upload/' \}).panelInstance('winix_nicedit');
new nicEditor(\{fullPanel:true, iconsPath:'[doc_base_url_common]/nicedit/0.9_r25/nicEditorIcons.gif', uploadURI:'[doc_base_url][dir]upload/' \}).panelInstance('winix_content_id');
</script>
<div class="uk-margin winix-nicedit-status">
[frame "nicedit"]
[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>
[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]
<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]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
<div class="uk-margin">
<input class="uk-button uk-button-primary" type="submit" value="[if request.is_item]{change}[else]{add}[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="button"
hx-on:click="winix_update_from_nicedit(this, '[doc_base_url][dir][if request.is_item][item.url]/[end]nicedit/frame:nicedit', '.winix-nicedit-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>
[end]
</div>
</form>

View File

@@ -1,7 +1,18 @@
<div class="winix">
[if request.is_item]<h1>{edit}</h1>[else]<h1>{add}</h1>[end]
[frame "tinymce"]
<h1 id="winix_header_id" [if winix_frame_is "tinymce"]hx-swap-oob="true"[end]>
[if request.is_item]
{edit}
[else]
{add}
[end]
</h1>
[end]
[# tinymce needs javascript to work properly so we assume that the save method]
[# will be made only through ajax (htmx)]
<form class="uk-form-stacked">
[if one [mount_type_is "cms"] [any [mount_type_is "thread"] [thread_mount_arg_is "subject"]]]
@@ -15,7 +26,9 @@
<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 "tinymce"]
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]" [if winix_frame_is "tinymce"]hx-swap-oob="true"[end]>
[end]
</div>
</div>
[end]
@@ -26,7 +39,8 @@
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
<div class="uk-form-controls">
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content" data-winix-post-name="itemcontent">[item.content.print_content]</div>
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content">[item.content.print_content]</div>
<input type="hidden" id="winix_content_id" name="itemcontent" value="[item.content.content_raw]">
</div>
</div>
@@ -34,54 +48,50 @@
<input id="contenttype" type="hidden" name="contenttype" value="2">
</div>
[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 winix-tinymce-status">
[frame "tinymce"]
<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>
[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]
[include "antispam.html"]
[end]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
<div class="uk-margin">
<div class="uk-form-controls uk-inline">
[# IMPROVEME put some kind of a status msg here]
<button class="uk-button uk-button-primary winix_update_button"
data-winix-function-path="[doc_base_url][dir][if request.is_item][item.url]/[end]tinymce"
data-winix-content-tinymce-instances="winix-editor-content"
data-winix-content-inputs="winix_url_id,winix_title_id,contenttype"
data-winix-progressbar-id="winix-editor-progressbar"
data-winix-messages-status-success-id="winix-editor-messages-status-success"
data-winix-messages-status-error-id="winix-editor-messages-status-error"
<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="button"
hx-on:click="winix_update_from_tinymce(this, '[doc_base_url][dir][if request.is_item][item.url]/[end]tinymce/frame:tinymce', '.winix-tinymce-status')"
>
{tinymce_update_button}
</button>
<div id="winix-editor-progressbar" class="uk-invisible uk-position-center-right-out uk-margin-small-left">
<img src="[doc_base_url_common]/progressbars/progressbar_fading_lines_16x16.gif" alt="{tinymce_update_progressbar_img_alt}">
<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>
<div id="winix-editor-messages-status-success" class="winix-editor-messages-status-success">
</div>
<div id="winix-editor-messages-status-error" class="winix-editor-messages-status-error">
</div>
[end]
</div>

View File

@@ -55,72 +55,95 @@
[end]
[if or [winix_function_is "emacs"] [winix_function_is "ckeditor"] [winix_function_is "tinymce"] [winix_function_is "nicedit"] [winix_function_is "env"] [winix_function_is "meta"]]
<style>
.wx-button-spinner .wx-button-spinner-text \{
display: block;
\}
.wx-button-spinner .wx-button-spinner-spinner \{
display: none;
\}
.htmx-request.wx-button-spinner .wx-button-spinner-text \{
display: none;
\}
.htmx-request.wx-button-spinner .wx-button-spinner-spinner \{
display: block;
\}
</style>
[if or [winix_function_is "emacs"] [winix_function_is "env"] [winix_function_is "meta"]]
<script type="text/javascript" src="[doc_base_url_common]/codemirror/5.64.0/lib/codemirror.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/lib/codemirror.css" type="text/css">
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/css/css.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/javascript/javascript.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/xml/xml.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/markdown/markdown.js"></script>
[if false]
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/theme/base16-light.css" type="text/css">
[end]
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/display/fullscreen.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/addon/display/fullscreen.css" type="text/css">
[if false]
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/search/search.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/addon/search/matchesonscrollbar.css" type="text/css">
<script>
function winix_update_from_editors(el, post_url, target)
\{
htmx.ajax('POST', post_url, \{source: el, target: target\} );
\}
</script>
[end]
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/fold/xml-fold.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/edit/matchtags.js"></script>
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/selection/active-line.js"></script>
[if or [winix_function_is "emacs"] [winix_function_is "env"] [winix_function_is "meta"]]
<script type="text/javascript" src="[doc_base_url_common]/codemirror/5.65.16/lib/codemirror.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.65.16/lib/codemirror.css" type="text/css">
<script src="[doc_base_url_common]/codemirror/5.65.16/mode/css/css.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/mode/javascript/javascript.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/mode/xml/xml.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/mode/htmlmixed/htmlmixed.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/mode/markdown/markdown.js"></script>
[if false]
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.65.16/theme/base16-light.css" type="text/css">
[end]
<script src="[doc_base_url_common]/codemirror/5.65.16/addon/display/fullscreen.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.65.16/addon/display/fullscreen.css" type="text/css">
[if false]
<script src="[doc_base_url_common]/codemirror/5.65.16/addon/search/search.js"></script>
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.65.16/addon/search/matchesonscrollbar.css" type="text/css">
[end]
<script src="[doc_base_url_common]/codemirror/5.65.16/addon/fold/xml-fold.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/addon/edit/matchtags.js"></script>
<script src="[doc_base_url_common]/codemirror/5.65.16/addon/selection/active-line.js"></script>
[# markdown to html converter ]
[# https://github.com/showdownjs/showdown ]
<script src="[doc_base_url_common]/showdown/1.9.1/dist/showdown.min.js"></script>
<script src="[doc_base_url_common]/showdown/2.1.0/dist/showdown.min.js"></script>
<style>
<style>
.CodeMirror-matchingtag \{
font-weight: bold;
background: none;
\}
.CodeMirror-matchingtag \{
font-weight: bold;
background: none;
\}
.CodeMirror-activeline-background \{
background: #f3f3f3;
\}
.CodeMirror-activeline-background \{
background: #f3f3f3;
\}
.CodeMirror \{
border: 1px solid #dedede;
\}
</style>
.CodeMirror \{
border: 1px solid #dedede;
\}
</style>
<script type="text/javascript">
var winix_code_mirror_editor = null;
var winix_showdown_converter = null;
var winix_converter_output = null;
var winix_content_parsed = null;
var winix_emacs_mode = 0;
let winix_code_mirror_editor = null;
let winix_showdown_converter = null;
let winix_converter_output = null;
let winix_content_parsed = null;
let winix_emacs_mode = 0;
let winix_view_mode = 1; /* one panel */
function winix_initialize_editor()
\{
var text_area = document.getElementById("winix_content_id");
var winix_contenttype = document.getElementById("winix_contenttype_id");
var onchange_delay = null;
let text_area = document.getElementById("winix_content_id");
let winix_contenttype = document.getElementById("winix_contenttype_id");
let winix_viewtype = document.getElementById("winix_viewtype_id");
let onchange_delay = null;
winix_content_parsed = document.getElementById("winix_content_parsed_id");
@@ -137,8 +160,8 @@
tabSize: 4,
indentWithTabs: true,
extraKeys: \{
"F11": function(cm) \{ cm.setOption("fullScreen", !cm.getOption("fullScreen")); \},
"Esc": function(cm) \{ if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); \}
"F11": winix_change_cm_to_fullscreen,
"Esc": winix_change_cm_to_normal_screen
\},
lineNumbers: true,
lineWiseCopyCut: false,
@@ -168,24 +191,172 @@
\});
\}
if( winix_viewtype )
\{
[if not [winix_function_param_is "tabs"]]
winix_viewtype.addEventListener("change", function(e) \{
winix_view_mode = parseInt(this.value);
winix_refresh_panels_view(false);
\});
[end]
\}
\}
function winix_change_cm_to_fullscreen(cm)
\{
let is_fullscreen = cm.getOption("fullScreen");
cm.setOption("fullScreen", !is_fullscreen);
winix_refresh_panels_view(!is_fullscreen);
\}
function winix_change_cm_to_normal_screen(cm)
\{
let is_fullscreen = cm.getOption("fullScreen");
if( is_fullscreen)
\{
cm.setOption("fullScreen", false);
winix_refresh_panels_view(false);
\}
\}
function winix_refresh_panels_view(force_one_panel)
\{
[if not [winix_function_param_is "tabs"]]
if( winix_converter_output )
\{
if( !force_one_panel && winix_view_mode == 2 )
\{
console.log('Changing to two panels mode');
winix_converter_output.parentElement.classList.remove('uk-child-width-1-1');
winix_converter_output.parentElement.classList.add('uk-child-width-1-2');
winix_converter_output.style.display = 'block';
\}
else
\{
console.log('Changing to one panel mode');
winix_converter_output.style.display = 'none';
winix_converter_output.parentElement.classList.remove('uk-child-width-1-2');
winix_converter_output.parentElement.classList.add('uk-child-width-1-1');
\}
\}
[end]
\}
function winix_esc_to_html(c)
\{
let html='';
switch(c)
\{
case '\0':
html += '&#0;';
break;
case '<':
html += '&lt;';
break;
case '>':
html += '&gt;';
break;
case '&':
html += '&amp;';
break;
case '"':
html += '&quot;';
break;
case '\'':
html += '&apos;';
break;
case '\n':
html += '&#10;';
break;
case '\r':
html += '&#13;';
break;
default:
html += c;
break;
\}
return html;
\}
function winix_convert_from_txt_to_html(str)
\{
let i=0;
let html='';
for(; i < str.length ; ++i)
\{
html += winix_esc_to_html(str\[i\]);
\}
return html;
\}
function winix_convert_from_formatted_txt_to_html(str)
\{
let i=0;
let html='<p>';
let was_nl=0;
// skipping first new line characters
for(; i < str.length && (str\[i\]=='\r' || str\[i\]=='\n') ; ++i)
\{
\}
for(; i < str.length ; ++i)
\{
if( str\[i\] == '\r' )
continue;
if( str\[i\] == '\n' )
\{
++was_nl;
\}
else
\{
if( was_nl == 1 )
html += '<br>\n';
else
if( was_nl > 1 )
html += '</p>\n<p>';
was_nl = 0;
\}
html += winix_esc_to_html(str\[i\]);
\}
html += '</p>';
return html;
\}
function winix_codemirror_preview()
\{
if( winix_code_mirror_editor !== null )
\{
if( winix_emacs_mode == 2 )
let sourceMarkup = winix_code_mirror_editor.getValue();
if( winix_emacs_mode == 2 ) // html
\{
let sourceMarkup = winix_code_mirror_editor.getValue();
winix_converter_output.innerHTML = sourceMarkup;
if( winix_converter_output !== null )
winix_converter_output.innerHTML = sourceMarkup;
if( winix_content_parsed !== null )
winix_content_parsed.value = "";
\}
else
if( winix_emacs_mode == 5 )
if( winix_emacs_mode == 5 ) // markdown
\{
let sourceMarkup = winix_code_mirror_editor.getValue();
let htmlMarkup = winix_showdown_converter.makeHtml(sourceMarkup);
if( winix_converter_output !== null )
@@ -195,10 +366,29 @@
winix_content_parsed.value = htmlMarkup;
\}
else
if( winix_emacs_mode == 1 ) // formatted text
\{
[# IMPROVEME add support for text and formated text ]
winix_converter_output.innerHTML = "";
if( winix_converter_output !== null )
winix_converter_output.innerHTML = winix_convert_from_formatted_txt_to_html(sourceMarkup);
if( winix_content_parsed !== null )
winix_content_parsed.value = "";
\}
else
if( winix_emacs_mode == 0 ) // text
\{
if( winix_converter_output !== null )
winix_converter_output.innerHTML = winix_convert_from_txt_to_html(sourceMarkup);
if( winix_content_parsed !== null )
winix_content_parsed.value = "";
\}
else
\{
if( winix_converter_output !== null )
winix_converter_output.innerHTML = "";
if( winix_content_parsed !== null )
winix_content_parsed.value = "";
@@ -206,7 +396,6 @@
\}
\}
function winix_get_codemirror_mode(mode)
\{
switch(mode)
@@ -231,25 +420,25 @@
if( winix_code_mirror_editor !== null )
\{
let codeMirrorMode = winix_get_codemirror_mode(winix_emacs_mode);
console.log("changing mode to: " + codeMirrorMode);
console.log("Changing mode to: " + codeMirrorMode);
winix_code_mirror_editor.setOption("mode", codeMirrorMode);
winix_codemirror_preview();
\}
\}
[if false]
this will probably be used to change the mode in the fly
winix_code_mirror_editor.setOption("mode", "");
function winix_update_from_codemirror(el, post_url, target)
\{
if( winix_code_mirror_editor )
\{
winix_codemirror_preview();
let editor_data = winix_code_mirror_editor.getValue();
winix_code_mirror_editor.save(); // save content to the textarea
winix_update_from_editors(el, post_url, target);
\}
\}
before saving (update button by ajax) this method should be used:
cm.save()
Copy the content of the editor into the textarea.
[end]
window.addEventListener("load", winix_initialize_editor, false);
</script>
[end]
@@ -262,8 +451,25 @@ cm.save()
[def winix_has_jquery true]
<script type="text/javascript" src="[doc_base_url_common]/jquery/3.7.1/jquery-3.7.1.min.js"></script>
[end]
<script type="text/javascript" src="[doc_base_url_common]/winix/update_button.js"></script>
<script>
function winix_update_from_ckeditor(el, post_url, target)
\{
if( typeof CKEDITOR !== 'undefined' )
\{
let div_id = 'winix-editor-content';
let editor_data = CKEDITOR.instances\[div_id\].getData();
let itemcontent = document.getElementById('winix_content_id');
if( itemcontent )
\{
itemcontent.value = editor_data;
winix_update_from_editors(el, post_url, target);
\}
\}
\}
</script>
[end]
@@ -277,13 +483,46 @@ cm.save()
[def winix_has_jquery true]
<script type="text/javascript" src="[doc_base_url_common]/jquery/3.7.1/jquery-3.7.1.min.js"></script>
[end]
<script type="text/javascript" src="[doc_base_url_common]/winix/update_button.js"></script>
<script>
function winix_update_from_tinymce(el, post_url, target)
\{
if( typeof tinymce !== 'undefined' )
\{
let div_id = 'winix-editor-content';
let editor_data = tinymce.get(div_id).getContent();
let itemcontent = document.getElementById('winix_content_id');
if( itemcontent )
\{
itemcontent.value = editor_data;
winix_update_from_editors(el, post_url, target);
\}
\}
\}
</script>
[end]
[if winix_function_is "nicedit"]
[# the path is set in the fun_nicedit.html too for downloading a gif file]
<script type="text/javascript" src="[doc_base_url_common]/nicedit/0.9_r25/nicEdit.js"></script>
<script>
function winix_update_from_nicedit(el, post_url, target)
\{
let nicedit = nicEditors.findEditor('winix_content_id');
let itemcontent = document.getElementById('winix_content_id');
if( nicedit && itemcontent )
\{
let editor_data = nicedit.getContent();
itemcontent.value = editor_data;
winix_update_from_editors(el, post_url, target);
\}
\}
</script>
[end]