tomasz.sowa/winix
1
0
Fork 0
Code Issues 5 Pull Requests Releases Activity

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

Browse Source 
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:
Tomasz Sowa
2024-07-20 15:13:27 +02:00
parent 89b37db48e
commit e63838faeb
27 changed files with 1075 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
winixd/html/index_head_adder.html
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]