Issue #3246365 by lauriii, ankithashetty, Wim Leers: [drupalMedia] Show the... (fbd6924b) · Commits · project / drupal

core/modules/ckeditor5/css/drupalmedia.css

+34 −0

Original line number	Diff line number	Diff line
		@@ -75,3 +75,37 @@
		display: block;
		width: 240px;
		}

		.ck.ck-media-alternative-text-form {
		min-width: 300px;
		max-width: 600px;
		padding: 0;
		}
		.ck.ck-media-alternative-text-form .ck-labeled-field-view,
		.ck.ck-media-alternative-text-form .ck-media-alternative-text-form__default-alt-text {
		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
		}
		.ck.ck-media-alternative-text-form .ck-labeled-field-view .ck-input-text {
		width: 100%;
		}

		.ck.ck-media-alternative-text-form .ck-button {
		width: 50%;
		margin: var(--ck-spacing-large) 0 0 0;
		padding: var(--ck-spacing-standard);
		border: 0;
		border-top: 1px solid var(--ck-color-base-border);
		border-radius: 0;
		}

		.ck.ck-media-alternative-text-form .ck-button:last-of-type {
		border-right: 1px solid var(--ck-color-base-border);
		}

		.ck.ck .ck-media-alternative-text-form__default-alt-text-label {
		font-weight: bold;
		}
		.ck.ck .ck-media-alternative-text-form__default-alt-text-label,
		.ck.ck .ck-media-alternative-text-form__default-alt-text-value {
		white-space: normal;
		}

core/modules/ckeditor5/js/build/drupalMedia.js

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeediting.js

+4 −0

Original line number	Diff line number	Diff line
		@@ -8,6 +8,10 @@ import DrupalMediaMetadataRepository from '../drupalmediametadatarepository';
		import { isDrupalMedia } from '../utils';
		import { METADATA_ERROR } from './utils';

		/**
		* @module drupalMedia/mediaimagetextalternative/mediaimagetextalternativeediting
		*/

		/**
		* The media image text alternative editing plugin.
		*/

core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeui.js

+27 −3

Original line number	Diff line number	Diff line
		@@ -8,7 +8,7 @@ import {
		clickOutsideHandler,
		} from 'ckeditor5/src/ui';

		import { getSelectedDrupalMediaWidget } from '../utils';
		import { getSelectedDrupalMediaWidget, isDrupalMedia } from '../utils';
		import {
		getBalloonPositionData,
		repositionContextualBalloon,
		@@ -64,7 +64,7 @@ export default class MediaImageTextAlternativeUi extends Plugin {
		const view = new ButtonView(locale);

		view.set({
		label: Drupal.t('Override media image text alternative'),
		label: Drupal.t('Override media image alternative text'),
		icon: icons.lowVision,
		tooltip: true,
		});
		@@ -146,9 +146,11 @@ export default class MediaImageTextAlternativeUi extends Plugin {
		if (this._isVisible) {
		return;
		}

		const editor = this.editor;
		const command = editor.commands.get('mediaImageTextAlternative');
		const metadataRepository = editor.plugins.get(
		'DrupalMediaMetadataRepository',
		);
		const labeledInput = this._form.labeledInput;

		this._form.disableCssTransitions();
		@@ -168,6 +170,28 @@ export default class MediaImageTextAlternativeUi extends Plugin {
		labeledInput.fieldView.element.value = command.value \|\| '';
		labeledInput.fieldView.value = labeledInput.fieldView.element.value;

		this._form.defaultAltText = '';
		const modelElement = editor.model.document.selection.getSelectedElement();

		// Make sure that each time the panel shows up, the default alt text remains
		// in sync with the value from the metadata repository.
		if (isDrupalMedia(modelElement)) {
		metadataRepository
		.getMetadata(modelElement)
		.then((metadata) => {
		this._form.defaultAltText = metadata.imageSourceMetadata
		? metadata.imageSourceMetadata.alt
		: '';
		})
		.catch((e) => {
		// There isn't any UI indication for errors because this should be
		// always called after the Drupal Media has been upcast, which would
		// already display an error in the UI.
		// @see module:drupalMedia/mediaimagetextalternative/mediaimagetextalternativeediting~MediaImageTextAlternativeEditing
		console.warn(e.toString());
		});
		}

		this._form.labeledInput.fieldView.select();

		this._form.enableCssTransitions();

core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/ui/textalternativeformview.js

+66 −3

Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@ import {
		createLabeledInputText,
		injectCssTransitionDisabler,
		submitHandler,
		Template,
		} from 'ckeditor5/src/ui';
		import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
		import { icons } from 'ckeditor5/src/core';
		@@ -39,6 +40,22 @@ export default class TextAlternativeFormView extends View {
		*/
		this.labeledInput = this._createLabeledInputView();

		/**
		* The default alt text.
		*
		* @observable
		*
		* @member {string} #defaultAltText
		*/
		this.set('defaultAltText', undefined);

		/**
		* The default alt text view.
		*
		* @type {module:ui/template~Template}
		*/
		this.defaultAltTextView = this._createDefaultAltTextView();

		/**
		* A button used to submit the form.
		*/
		@@ -84,11 +101,16 @@ export default class TextAlternativeFormView extends View {
		tag: 'form',

		attributes: {
		class: ['ck', 'ck-text-alternative-form', 'ck-responsive-form'],
		class: ['ck', 'ck-media-alternative-text-form', 'ck-vertical-form'],
		tabindex: '-1',
		},

		children: [this.labeledInput, this.saveButtonView, this.cancelButtonView],
		children: [
		this.defaultAltTextView,
		this.labeledInput,
		this.saveButtonView,
		this.cancelButtonView,
		],
		});

		injectCssTransitionDisabler(this);
		@@ -163,8 +185,49 @@ export default class TextAlternativeFormView extends View {
		createLabeledInputText,
		);

		labeledInput.label = Drupal.t('Override text alternative');
		labeledInput.label = Drupal.t('Alternative text override');

		return labeledInput;
		}

		/**
		* Creates a default alt text view.
		*
		* @return {module:ui/template~Template}
		* A template for default alt text view.
		* @private
		*/
		_createDefaultAltTextView() {
		const bind = Template.bind(this, this);
		return new Template({
		tag: 'div',
		attributes: {
		class: [
		'ck-media-alternative-text-form__default-alt-text',
		bind.if('defaultAltText', 'ck-hidden', (value) => !value),
		],
		},
		children: [
		{
		tag: 'strong',
		attributes: {
		class: 'ck-media-alternative-text-form__default-alt-text-label',
		},
		children: [Drupal.t('Default alternative text:')],
		},
		' ',
		{
		tag: 'span',
		attributes: {
		class: 'ck-media-alternative-text-form__default-alt-text-value',
		},
		children: [
		{
		text: [bind.to('defaultAltText')],
		},
		],
		},
		],
		});
		}
		}