L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-78096 tiny_media: Deprecate the alignment

Browse Source
This commit is contained in:
meirzamoodle
2024-04-03 11:41:09 +07:00
parent 4da813d35e
commit ef5969e794
9 changed files with 27 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/tiny/plugins/media/amd/build/image.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/editor/tiny/plugins/media/amd/build/image.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/editor/tiny/plugins/media/amd/build/selectors.min.js
Vendored
+1 -1
View File
@@ -1,3 +1,3 @@
define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser"},elements:{form:"form.tiny_image_form",alignment:".tiny_image_alignment",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box"},styles:{responsive:"img-fluid"},alignments:[{name:"verticalAlign",value:"align-top",margin:"0 0.5em",legacyValues:["atto_image_button_text-top"]},{name:"verticalAlign",value:"align-middle",margin:"0 0.5em",legacyValues:["atto_image_button_middle"]},{name:"verticalAlign",value:"align-bottom",margin:"0 0.5em",isDefault:!0,legacyValues:["atto_image_button_text-bottom"]}]},EMBED:{actions:{submit:".tiny_media_submit",mediaBrowser:".openmediabrowser"},elements:{form:"form.tiny_media_form",source:".tiny_media_source",track:".tiny_media_track",mediaSource:".tiny_media_media_source",linkSource:".tiny_media_link_source",linkSize:".tiny_media_link_size",posterSource:".tiny_media_poster_source",posterSize:".tiny_media_poster_size",displayOptions:".tiny_media_display_options",name:".tiny_media_name_entry",title:".tiny_media_title_entry",url:".tiny_media_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackKind:".tiny_media_track_kind_entry",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",advancedSettings:".tiny_media_advancedsettings",linkTab:'li[data-medium-type="link"]',videoTab:'li[data-medium-type="video"]',audioTab:'li[data-medium-type="audio"]',linkPane:'.tab-pane[data-medium-type="link"]',videoPane:'.tab-pane[data-medium-type="video"]',audioPane:'.tab-pane[data-medium-type="audio"]',trackSubtitlesTab:'li[data-track-kind="subtitles"]',trackCaptionsTab:'li[data-track-kind="captions"]',trackDescriptionsTab:'li[data-track-kind="descriptions"]',trackChaptersTab:'li[data-track-kind="chapters"]',trackMetadataTab:'li[data-track-kind="metadata"]',trackSubtitlesPane:'.tab-pane[data-track-kind="subtitles"]',trackCaptionsPane:'.tab-pane[data-track-kind="captions"]',trackDescriptionsPane:'.tab-pane[data-track-kind="descriptions"]',trackChaptersPane:'.tab-pane[data-track-kind="chapters"]',trackMetadataPane:'.tab-pane[data-track-kind="metadata"]'},mediaTypes:{link:"LINK",video:"VIDEO",audio:"AUDIO"},trackKinds:{subtitles:"SUBTITLES",captions:"CAPTIONS",descriptions:"DESCRIPTIONS",chapters:"CHAPTERS",metadata:"METADATA"}}},_exports.default}));
define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser"},elements:{form:"form.tiny_image_form",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box"},styles:{responsive:"img-fluid"}},EMBED:{actions:{submit:".tiny_media_submit",mediaBrowser:".openmediabrowser"},elements:{form:"form.tiny_media_form",source:".tiny_media_source",track:".tiny_media_track",mediaSource:".tiny_media_media_source",linkSource:".tiny_media_link_source",linkSize:".tiny_media_link_size",posterSource:".tiny_media_poster_source",posterSize:".tiny_media_poster_size",displayOptions:".tiny_media_display_options",name:".tiny_media_name_entry",title:".tiny_media_title_entry",url:".tiny_media_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackKind:".tiny_media_track_kind_entry",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",advancedSettings:".tiny_media_advancedsettings",linkTab:'li[data-medium-type="link"]',videoTab:'li[data-medium-type="video"]',audioTab:'li[data-medium-type="audio"]',linkPane:'.tab-pane[data-medium-type="link"]',videoPane:'.tab-pane[data-medium-type="video"]',audioPane:'.tab-pane[data-medium-type="audio"]',trackSubtitlesTab:'li[data-track-kind="subtitles"]',trackCaptionsTab:'li[data-track-kind="captions"]',trackDescriptionsTab:'li[data-track-kind="descriptions"]',trackChaptersTab:'li[data-track-kind="chapters"]',trackMetadataTab:'li[data-track-kind="metadata"]',trackSubtitlesPane:'.tab-pane[data-track-kind="subtitles"]',trackCaptionsPane:'.tab-pane[data-track-kind="captions"]',trackDescriptionsPane:'.tab-pane[data-track-kind="descriptions"]',trackChaptersPane:'.tab-pane[data-track-kind="chapters"]',trackMetadataPane:'.tab-pane[data-track-kind="metadata"]'},mediaTypes:{link:"LINK",video:"VIDEO",audio:"AUDIO"},trackKinds:{subtitles:"SUBTITLES",captions:"CAPTIONS",descriptions:"DESCRIPTIONS",chapters:"CHAPTERS",metadata:"METADATA"}}},_exports.default}));
//# sourceMappingURL=selectors.min.js.map
lib/editor/tiny/plugins/media/amd/build/selectors.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/editor/tiny/plugins/media/amd/src/image.js
+1 -115
View File
@@ -22,13 +22,12 @@
*/
import Templates from 'core/templates';
import {getString, getStrings} from 'core/str';
import {getString} from 'core/str';
import Pending from 'core/pending';
import {displayFilepicker} from 'editor_tiny/utils';
import Selectors from './selectors';
import ImageModal from './imagemodal';
import {getImagePermissions} from './options';
import {component} from "./common";
import {getFilePicker} from 'editor_tiny/options';
export default class MediaImage {
@@ -43,7 +42,6 @@ export default class MediaImage {
editor = null;
currentModal = null;
selectedImage = null;
imageAlignment = null;
constructor(editor) {
const permissions = getImagePermissions(editor);
@@ -71,57 +69,10 @@ export default class MediaImage {
await this.registerEventListeners();
}
async getAlignmentTitles() {
if (!this.alignmentTitles) {
const [top, middle, bottom] = await getStrings([
'alignment_top',
'alignment_middle',
'alignment_bottom',
].map((key) => ({key, component})));
this.alignmentTitles = {
top,
middle,
bottom,
};
}
return this.alignmentTitles;
}
async getImageAlignment(selected = '') {
const titles = await this.getAlignmentTitles();
const alignments = [
{
text: titles.top,
value: 'align-top',
},
{
text: titles.middle,
value: 'align-middle',
},
{
text: titles.bottom,
value: 'align-bottom',
},
];
if (selected) {
alignments.forEach((alignment, index, array) => {
if (alignment.value === selected) {
array[index].selected = true;
}
});
}
return alignments;
}
async getTemplateContext(data) {
return {
elementid: this.editor.id,
showfilepicker: this.canShowFilePicker,
alignoptions: await this.getImageAlignment(),
...data,
};
}
@@ -133,9 +84,6 @@ export default class MediaImage {
}
const properties = {...selectedImageProperties};
if (properties.align) {
properties.alignoptions = await this.getImageAlignment(properties.align);
}
if (properties.src) {
properties.haspreview = true;
@@ -263,10 +211,6 @@ export default class MediaImage {
});
}
getAlignmentClass(alignment) {
return alignment;
}
updateWarning() {
const urlError = this.hasErrorUrlField();
const imageAltError = this.hasErrorAltField();
@@ -287,10 +231,6 @@ export default class MediaImage {
classList.push(Selectors.IMAGE.styles.responsive);
}
// Add the alignment class for the image.
const alignment = this.getAlignmentClass(this.form.querySelector(Selectors.IMAGE.elements.alignment).value);
classList.push(alignment);
return {
url: this.form.querySelector(Selectors.IMAGE.elements.url).value,
alt: this.form.querySelector(Selectors.IMAGE.elements.alt).value,
@@ -460,7 +400,6 @@ export default class MediaImage {
alt: null,
width: null,
height: null,
align: '',
presentation: false,
};
@@ -481,7 +420,6 @@ export default class MediaImage {
};
// Get the current selection.
this.removeLegacyAlignment(image);
this.selectedImage = image;
properties.customStyle = image.style.cssText;
@@ -496,11 +434,6 @@ export default class MediaImage {
properties.height = height;
}
const alignment = this.getAlignmentProperties(image, properties);
if (alignment) {
properties.align = alignment.value;
}
properties.src = image.getAttribute('src');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.getAttribute('role') === 'presentation');
@@ -508,53 +441,6 @@ export default class MediaImage {
return properties;
}
removeLegacyAlignment(imageNode) {
if (!imageNode.style.margin) {
// There is no margin therefore this cannot match any known alignments.
return imageNode;
}
Selectors.IMAGE.alignments.some(alignment => {
if (imageNode.style[alignment.name] !== alignment.value) {
// The name/value do not match. Skip.
return false;
}
const normalisedNode = document.createElement('div');
normalisedNode.style.margin = alignment.margin;
if (imageNode.style.margin !== normalisedNode.style.margin) {
// The margin does not match.
return false;
}
imageNode.classList.add(this.getAlignmentClass(alignment.value));
imageNode.style[alignment.name] = null;
imageNode.style.margin = null;
return true;
});
return imageNode;
}
getAlignmentProperties(image) {
const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {
if (image.classList.contains(this.getAlignmentClass(alignment.value))) {
return true;
}
if (alignment.legacyValues) {
return alignment.legacyValues.some((legacyValue) => image.classList.contains(legacyValue));
}
return false;
});
if (currentAlignment) {
return currentAlignment;
}
return Selectors.IMAGE.alignments.find((alignment) => alignment.isDefault);
}
getSelectedImage() {
const imgElm = this.editor.selection.getNode();
const figureElm = this.editor.dom.getParent(imgElm, 'figure.image');
lib/editor/tiny/plugins/media/amd/src/selectors.js
-29
View File
@@ -29,7 +29,6 @@ export default {
},
elements: {
form: 'form.tiny_image_form',
alignment: '.tiny_image_alignment',
alignSettings: '.tiny_image_button',
alt: '.tiny_image_altentry',
altWarning: '.tiny_image_altwarning',
@@ -47,34 +46,6 @@ export default {
styles: {
responsive: 'img-fluid',
},
alignments: [
// Vertical alignment.
{
name: 'verticalAlign',
value: 'align-top',
margin: '0 0.5em',
legacyValues: [
'atto_image_button_text-top',
],
},
{
name: 'verticalAlign',
value: 'align-middle',
margin: '0 0.5em',
legacyValues: [
'atto_image_button_middle',
],
},
{
name: 'verticalAlign',
value: 'align-bottom',
margin: '0 0.5em',
isDefault: true,
legacyValues: [
'atto_image_button_text-bottom',
],
},
],
},
EMBED: {
actions: {
lib/editor/tiny/plugins/media/lang/en/deprecated.txt
+6
View File
@@ -0,0 +1,6 @@
alignment,tiny_media
alignment_bottom,tiny_media
alignment_left,tiny_media
alignment_middle,tiny_media
alignment_right,tiny_media
alignment_top,tiny_media
lib/editor/tiny/plugins/media/lang/en/tiny_media.php
+8 -6
View File
@@ -30,12 +30,6 @@ $string['addsource_help'] = 'You are recommended to provide an alternative media
$string['addsource'] = 'Add alternative source';
$string['addsubtitlestrack'] = 'Add subtitle track';
$string['advancedsettings'] = 'Advanced settings';
$string['alignment_bottom'] = 'Bottom';
$string['alignment_left'] = 'Left';
$string['alignment_middle'] = 'Middle';
$string['alignment_right'] = 'Right';
$string['alignment_top'] = 'Top';
$string['alignment'] = 'Alignment';
$string['audio'] = 'Audio';
$string['audiosourcelabel'] = 'Audio source URL';
$string['autoplay'] = 'Play automatically';
@@ -103,3 +97,11 @@ $string['videoheight'] = 'Video height';
$string['videosourcelabel'] = 'Video source URL';
$string['videowidth'] = 'Video width';
$string['width'] = 'Width';
// Deprecated since Moodle 4.4.
$string['alignment'] = 'Alignment';
$string['alignment_bottom'] = 'Bottom';
$string['alignment_left'] = 'Left';
$string['alignment_middle'] = 'Middle';
$string['alignment_right'] = 'Right';
$string['alignment_top'] = 'Top';
lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
+8 -9
View File
@@ -21,7 +21,14 @@
Example context (json):
{
"elementid": "exampleId",
"src": "https://moodle.org/logo.png",
"alt": "Image description",
"presentation": true,
"width": 600,
"height": 400,
"customStyle": "",
"haspreview": true
}
}}
{{< core/modal }}
@@ -85,14 +92,6 @@
</div>
</div>
</div>
<div class="d-flex flex-wrap align-items-center mb-1">
<label for="{{elementid}}_tiny_image_alignment" class="mb-0">{{#str}} alignment, tiny_media {{/str}}</label>
<select class="custom-select tiny_image_alignment ml-2" id="{{elementid}}_tiny_image_alignment">
{{#alignoptions}}
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{{text}}}</option>
{{/alignoptions}}
</select>
</div>
<input type="hidden" class="tiny_image_customstyle" value="{{customStyle}}"/>
<br/>
<div class="mdl-align">