Issue #3265230 by bnjmnm, Wim Leers: Refactor ie11.filter.warnings.es6.js to... (0102c202) · Commits · project / drupal

core/modules/ckeditor5/ckeditor5.module

+5 −2

Original line number	Diff line number	Diff line
		@@ -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')) {

core/modules/ckeditor5/js/ie11.filter.warnings.es6.js

+47 −55

Original line number	Diff line number	Diff line
		@@ -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) {
		// 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 IE11 warning is needed.
		if (
		// if the ckeditor_stylesheets warning is needed.
		const switchToCKEditor5Complete =
		mutations[i].type === 'attributes' &&
		mutations[i].attributeName === 'disabled' &&
		!select.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();
		editorSelectObserver.disconnect();
		}
		}
		}
		});

		// 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);
		}
		},
		};

core/modules/ckeditor5/js/ie11.filter.warnings.js

+26 −26

Original line number	Diff line number	Diff line
		@@ -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();
		if (selectMessages.select('ie_11_warning')) {
		selectMessages.remove('ie_11_warning');
		}
		};

		var selectChangeHandler = function selectChangeHandler() {
		var editorSelectObserver = null;
		if (selectMessages.select('ie_11_error')) {
		selectMessages.remove('ie_11_error');
		}
		}
		};

		function whenSelectAttributeChanges(mutations) {
		updateWarningStatus();
		var editorSelectObserver = new MutationObserver(function (mutations) {
		for (var i = 0; i < mutations.length; i++) {
		if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'disabled' && !select.disabled) {
		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.disconnect();
		}
		}
		}

		editorSelectObserver = new MutationObserver(whenSelectAttributeChanges);
		});
		editorSelectObserver.observe(select, {
		attributes: true,
		attributeOldValue: true
		attributes: true
		});
		};

		updateWarningStatus();
		select.addEventListener('change', selectChangeHandler);
		}
		}
		};