Add support for "Ctrl + Enter" and "Meta (Cmd) + Enter" submit on multi-line fields

This commit is contained in:
Molkobain
2022-10-01 16:16:25 +02:00
parent 2dccedf8d7
commit 5e0698b7f3
5 changed files with 61 additions and 16 deletions

View File

@@ -2278,7 +2278,7 @@ JS
{$sValidationSpan}{$sReloadSpan}
HTML;
$oPage->add_ready_script(
<<<EOF
<<<JS
$('#$iId').closest('.field_input_text').find('.fullscreen_button').on('click', function(oEvent){
var oOriginField = $('#$iId').closest('.field_input_text');
var oClonedField = oOriginField.clone();
@@ -2291,7 +2291,14 @@ HTML;
oOriginField.find('textarea').triggerHandler('change');
});
});
EOF
// Submit host form on "Ctrl + Enter" or "Meta (Cmd) + Enter" keyboard shortcut
$('#$iId').on('keyup', function (oEvent) {
if ((oEvent.ctrlKey || oEvent.metaKey) && oEvent.key === 'Enter') {
$(this).closest('form').trigger('submit');
}
});
JS
);
break;

View File

@@ -58,6 +58,8 @@ $(function()
if((this.options.cancel_url !== null) && (this.options.cancel_url !== ''))
this.options.cancel_rule.url = this.options.cancel_url;
this._bindEvents();
this._super();
},
@@ -79,6 +81,16 @@ $(function()
{
this._super( key, value );
},
_bindEvents: function() {
const me = this;
// Submit event from the form should be treated as a click on the submit button
// as it processes things before sending the request
this.element.on('submit', function(oEvent) {
me._onSubmitClick(oEvent);
});
},
// - Callback when some fields have been touched
_onFieldsTouched: function(oEvent)
{

View File

@@ -125,8 +125,10 @@
{# CKEditor files for HTML WYSIWYG #}
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/ckeditor.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/adapters/jquery.js'|add_itop_version }}"></script>
{# Hilighter for code snippets created with CKEditor #}
{# - Hilighter for code snippets created with CKEditor #}
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js'|add_itop_version }}"></script>
{# - Custom settings #}
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor.on-init.js'|add_itop_version }}"></script>
{# Date-time picker for Bootstrap #}
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js'|add_itop_version }}"></script>
{# Typeahead files for autocomplete #}

View File

@@ -6,6 +6,18 @@
// WARNING: This code cannot be placed directly within the page as CKEditor could not be loaded yet.
// As it can be loaded from an XHR call (several times), we need to ensure it will be called when necessary (see PHP WebResourcesHelper)
CKEDITOR.on('instanceReady', function (oEvent) {
// Keyboard listener
oEvent.editor.on('key', function(oKeyEvent){
const oKeyboardEvent = oKeyEvent.data.domEvent.$;
// Submit value on "Ctrl + Enter" or "Meta (Cmd) + Enter" keyboard shortcut
if ((oKeyboardEvent.ctrlKey || oKeyboardEvent.metaKey) && oKeyboardEvent.key === 'Enter') {
$('#'+ oEvent.editor.name).closest('form').trigger('submit');
}
});
});
// For disabling the CKEditor at init time when the corresponding textarea is disabled !
if ((CKEDITOR !== undefined) && (CKEDITOR.plugins.registered['disabler'] === undefined)) {
CKEDITOR.plugins.add( 'disabler',

View File

@@ -84,20 +84,32 @@ $(function() {
// Handlers for the CKEditor itself
CKEDITOR.on('instanceReady', function (oEvent) {
// Handle only the current CKEditor instance
if (oEvent.editor.name === me.options.text_input_id) {
// Update depending elements on change
// Note: That when images are uploaded, the "change" event is triggered before the image upload is complete, meaning that we don't have the <img> tag yet.
me._GetCKEditorInstance().on('change', function () {
const bWasDraftBefore = me.is_draft;
const bIsDraftNow = !me._IsInputEmpty();
if (bWasDraftBefore !== bIsDraftNow) {
me.is_draft = bIsDraftNow;
me._UpdateEditingVisualHint();
// Note: We must not call me._UpdateSubmitButtonState() as it will be updated by the disable_submission/enable_submission events
}
});
if (oEvent.editor.name !== me.options.text_input_id) {
return;
}
// Update depending elements on change
// Note: That when images are uploaded, the "change" event is triggered before the image upload is complete, meaning that we don't have the <img> tag yet.
me._GetCKEditorInstance().on('change', function () {
const bWasDraftBefore = me.is_draft;
const bIsDraftNow = !me._IsInputEmpty();
if (bWasDraftBefore !== bIsDraftNow) {
me.is_draft = bIsDraftNow;
me._UpdateEditingVisualHint();
// Note: We must not call me._UpdateSubmitButtonState() as it will be updated by the disable_submission/enable_submission events
}
});
// Dispatch submission to the right pipeline on submit
$(me.element).on('submit', function (oSubmitEvent) {
oSubmitEvent.preventDefault();
if (me._IsSubmitAutonomous()) {
me._RequestSubmission();
} else {
me._GetGeneralFormElement().trigger('submit');
}
});
});
if (false === this._IsSubmitAutonomous()) {