Unverified Commit 0102c202 authored by lauriii's avatar lauriii
Browse files

Issue #3265230 by bnjmnm, Wim Leers: Refactor ie11.filter.warnings.es6.js to...

Issue #3265230 by bnjmnm, Wim Leers: Refactor ie11.filter.warnings.es6.js to simpler structure & other improvements

(cherry picked from commit 9d5f1c16)
parent 242896c6
......@@ -292,8 +292,11 @@ function _update_ckeditor5_html_filter(array $form, FormStateInterface $form_sta
}
// If switching to CKEditor 5 from another editor and there are errors in that
// switch, add an error class to the editor select, otherwise remove.
$response->addCommand(new InvokeCommand('[data-drupal-selector="edit-editor-editor"]', !$form_state->get('ckeditor5_is_active') && $form_state->get('ckeditor5_is_selected') && !empty($form_state->getErrors()) ? 'addClass' : 'removeClass', ['error']));
// switch, add an error class and attribute to the editor select, otherwise
// remove.
$ckeditor5_selected_but_errors = !$form_state->get('ckeditor5_is_active') && $form_state->get('ckeditor5_is_selected') && !empty($form_state->getErrors());
$response->addCommand(new InvokeCommand('[data-drupal-selector="edit-editor-editor"]', $ckeditor5_selected_but_errors ? 'addClass' : 'removeClass', ['error']));
$response->addCommand(new InvokeCommand('[data-drupal-selector="edit-editor-editor"]', $ckeditor5_selected_but_errors ? 'attr' : 'removeAttr', ['data-error-switching-to-ckeditor5', TRUE]));
if (!function_exists('_add_attachments_to_editor_update_response')) {
......
......@@ -15,10 +15,8 @@
'(-ms-high-contrast: active), (-ms-high-contrast: none)',
);
const editorSelect = once(
'editor-select',
document.querySelector(
'#filter-format-edit-form #edit-editor-editor, #filter-format-add-form #edit-editor-editor',
),
'editor-ie11-warning',
'[data-drupal-selector="filter-format-edit-form"] [data-drupal-selector="edit-editor-editor"], [data-drupal-selector="filter-format-add-form"] [data-drupal-selector="edit-editor-editor"]',
);
if (typeof editorSelect[0] !== 'undefined') {
......@@ -33,15 +31,16 @@
);
/**
* Adds an IE11 compatibility warning to the message container.
* Adds IE11 compatibility warnings to the message container.
*/
const ck5Warning = () => {
const addIE11Warning = () => {
selectMessages.add(
Drupal.t(
'CKEditor 5 is not compatible with Internet Explorer. Text fields using CKEditor 5 will fall back to plain HTML editing without CKEditor for users of Internet Explorer.',
),
{
type: 'warning',
id: 'ie_11_warning',
},
);
if (isIE11) {
......@@ -56,6 +55,7 @@
),
{
type: 'error',
id: 'ie_11_error',
},
);
editorSettings.hidden = true;
......@@ -63,68 +63,60 @@
};
/**
* Adds a warning if the selected editor is ckeditor5, otherwise clears
* the message container.
* Adds a warning if the selected editor is CKEditor 5, otherwise clears
* any existing IE11 warnings.
*/
const updateWarningStatus = () => {
if (
select.value === 'ckeditor5' &&
!select.classList.contains('error')
!select.hasAttribute('data-error-switching-to-ckeditor5')
) {
ck5Warning();
addIE11Warning();
} else {
editorSettings.hidden = false;
selectMessages.clear();
if (selectMessages.select('ie_11_warning')) {
selectMessages.remove('ie_11_warning');
}
if (selectMessages.select('ie_11_error')) {
selectMessages.remove('ie_11_error');
}
}
};
const selectChangeHandler = () => {
// Declare the observer first so the observer callback can access it.
let editorSelectObserver = null;
updateWarningStatus();
/**
* MutationObserver callback for the editor select.
*
* This listens for the removal 'disabled' attribute on the <select>,
* which means the AJAX callback has completed and the form is in a
* state suitable for seeing if the IE11 warning is needed.
*
* @param {Array} mutations
* The element's mutations.
*/
function whenSelectAttributeChanges(mutations) {
for (let i = 0; i < mutations.length; i++) {
// When the select input is no longer disabled, the AJAX request
// is complete and the UI is in a state where it can be determined
// if the IE11 warning is needed.
if (
mutations[i].type === 'attributes' &&
mutations[i].attributeName === 'disabled' &&
!select.disabled
) {
updateWarningStatus();
editorSelectObserver.disconnect();
}
// This observer listens for two different attribute changes that, when
// they occur, may require adding or removing the IE11 warnings.
// - If the disabled attribute was removed, which is potentially due to
// an AJAX update having completed.
// - If the data-error-switching-to-ckeditor5 attribute was removed,
// which means a switch to CKEditor 5 that was previously blocked due
// to validation errors has resumed and completed.
const editorSelectObserver = new MutationObserver((mutations) => {
for (let i = 0; i < mutations.length; i++) {
// When the select input is no longer disabled, the AJAX request
// is complete and the UI is in a state where it can be determined
// if the ckeditor_stylesheets warning is needed.
const switchToCKEditor5Complete =
mutations[i].type === 'attributes' &&
mutations[i].attributeName === 'disabled' &&
!select.disabled;
const fixedErrorsPreventingSwitchToCKEditor5 =
mutations[i].type === 'attributes' &&
mutations[i].attributeName ===
'data-error-switching-to-ckeditor5' &&
!select.hasAttribute('data-error-switching-to-ckeditor5');
if (
switchToCKEditor5Complete ||
fixedErrorsPreventingSwitchToCKEditor5
) {
updateWarningStatus();
}
}
});
// An observer is used because during the select change event, it is
// not yet known if validation prevented the switch to CKEditor 5.
// The IE11 warning should only appear if the switch wasn't prevented
// by validation.
editorSelectObserver = new MutationObserver(
whenSelectAttributeChanges,
);
editorSelectObserver.observe(select, {
attributes: true,
attributeOldValue: true,
});
};
updateWarningStatus();
// Listen to text format selection changes.
select.addEventListener('change', selectChangeHandler);
editorSelectObserver.observe(select, {
attributes: true,
});
}
},
};
......
......@@ -9,7 +9,7 @@
Drupal.behaviors.ckEditor5warn = {
attach: function attach() {
var isIE11 = Modernizr.mq('(-ms-high-contrast: active), (-ms-high-contrast: none)');
var editorSelect = once('editor-select', document.querySelector('#filter-format-edit-form #edit-editor-editor, #filter-format-add-form #edit-editor-editor'));
var editorSelect = once('editor-ie11-warning', '[data-drupal-selector="filter-format-edit-form"] [data-drupal-selector="edit-editor-editor"], [data-drupal-selector="filter-format-add-form"] [data-drupal-selector="edit-editor-editor"]');
if (typeof editorSelect[0] !== 'undefined') {
var select = editorSelect[0];
......@@ -18,51 +18,51 @@
var selectMessages = new Drupal.Message(selectMessageContainer);
var editorSettings = document.querySelector('#editor-settings-wrapper');
var ck5Warning = function ck5Warning() {
var addIE11Warning = function addIE11Warning() {
selectMessages.add(Drupal.t('CKEditor 5 is not compatible with Internet Explorer. Text fields using CKEditor 5 will fall back to plain HTML editing without CKEditor for users of Internet Explorer.'), {
type: 'warning'
type: 'warning',
id: 'ie_11_warning'
});
if (isIE11) {
selectMessages.add(Drupal.t('Text editor toolbar settings are not available in Internet Explorer. They will be available in other <a href="@supported-browsers">supported browsers</a>.', {
'@supported-browsers': 'https://www.drupal.org/docs/system-requirements/browser-requirements'
}), {
type: 'error'
type: 'error',
id: 'ie_11_error'
});
editorSettings.hidden = true;
}
};
var updateWarningStatus = function updateWarningStatus() {
if (select.value === 'ckeditor5' && !select.classList.contains('error')) {
ck5Warning();
if (select.value === 'ckeditor5' && !select.hasAttribute('data-error-switching-to-ckeditor5')) {
addIE11Warning();
} else {
editorSettings.hidden = false;
selectMessages.clear();
}
};
var selectChangeHandler = function selectChangeHandler() {
var editorSelectObserver = null;
if (selectMessages.select('ie_11_warning')) {
selectMessages.remove('ie_11_warning');
}
function whenSelectAttributeChanges(mutations) {
for (var i = 0; i < mutations.length; i++) {
if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'disabled' && !select.disabled) {
updateWarningStatus();
editorSelectObserver.disconnect();
}
if (selectMessages.select('ie_11_error')) {
selectMessages.remove('ie_11_error');
}
}
editorSelectObserver = new MutationObserver(whenSelectAttributeChanges);
editorSelectObserver.observe(select, {
attributes: true,
attributeOldValue: true
});
};
updateWarningStatus();
select.addEventListener('change', selectChangeHandler);
var editorSelectObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++) {
var switchToCKEditor5Complete = mutations[i].type === 'attributes' && mutations[i].attributeName === 'disabled' && !select.disabled;
var fixedErrorsPreventingSwitchToCKEditor5 = mutations[i].type === 'attributes' && mutations[i].attributeName === 'data-error-switching-to-ckeditor5' && !select.hasAttribute('data-error-switching-to-ckeditor5');
if (switchToCKEditor5Complete || fixedErrorsPreventingSwitchToCKEditor5) {
updateWarningStatus();
}
}
});
editorSelectObserver.observe(select, {
attributes: true
});
}
}
};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment