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

MDL-76277 tiny_media: Limit image alignment to vertical align

Browse Source 
Atto mixed vertical and horizontal alignment into a single selection,
which does not make any sense. It also used CSS classes in such a way
that those styles will break if/when Atto is removed.

This commit:
* removes the horizontal alignment from the dropdown - these are easily
  achieved using the existing Tiny UI
* addresses a bug where existing styles (like horizontal alignment) were
  not preserved when editing the image
* fixes a bug where the CSS selector was used instead of a CSS class
  name
* recognises legacy TinyMCE class names and replaces these
* switches from using random class names to using Bootstrap class
  utility classes for vertical alignment.
This commit is contained in:
Andrew Nicols
2022-11-16 21:54:33 +08:00
parent 7c3188b2ca
commit a68d9d5410
8 changed files with 46 additions and 52 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:"text-top",margin:"0 0.5em"},{name:"verticalAlign",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",value:"left",margin:"0 0.5em 0 0"},{name:"float",value:"right",margin:"0 0 0 0.5em"}]},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",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}));
//# 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
+19 -22
View File
@@ -75,20 +75,16 @@ export const MediaImage = class {
async getAlignmentTitles() {
if (!this.alignmentTitles) {
const [top, middle, bottom, left, right] = await getStrings([
const [top, middle, bottom] = await getStrings([
'alignment_top',
'alignment_middle',
'alignment_bottom',
'alignment_left',
'alignment_right',
].map((key) => ({key, component})));
this.alignmentTitles = {
top,
middle,
bottom,
left,
right,
};
}
@@ -100,23 +96,15 @@ export const MediaImage = class {
const alignments = [
{
text: titles.top,
value: 'text-top'
value: 'align-top',
},
{
text: titles.middle,
value: 'middle'
value: 'align-middle',
},
{
text: titles.bottom,
value: 'text-bottom'
},
{
text: titles.left,
value: 'left'
},
{
text: titles.right,
value: 'right'
value: 'align-bottom',
},
];
@@ -132,11 +120,12 @@ export const MediaImage = class {
}
async getTemplateContext(data) {
return Object.assign({}, {
return {
elementid: this.editor.id,
showfilepicker: this.canShowFilePicker,
alignoptions: await this.getImageAlignment(),
}, data);
...data,
};
}
async getCurrentImageData() {
@@ -145,7 +134,7 @@ export const MediaImage = class {
return {};
}
const properties = Object.assign({}, selectedImageProperties);
const properties = {...selectedImageProperties};
if (properties.align) {
properties.alignoptions = await this.getImageAlignment(properties.align);
}
@@ -277,7 +266,7 @@ export const MediaImage = class {
}
getAlignmentClass(alignment) {
return `${Selectors.IMAGE.elements.alignSettings}_${alignment}`;
return alignment;
}
updateWarning() {
@@ -492,7 +481,7 @@ export const MediaImage = class {
this.removeLegacyAlignment(image);
this.selectedImage = image;
properties.customstyle = image.style;
properties.customStyle = image.style.cssText;
const width = getImageWidth(image);
if (width !== 0) {
@@ -546,7 +535,15 @@ export const MediaImage = class {
getAlignmentProperties(image) {
const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {
return image.classList.contains(this.getAlignmentClass(alignment.value));
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;
lib/editor/tiny/plugins/media/amd/src/selectors.js
+21 -24
View File
@@ -51,33 +51,30 @@ export default {
// Vertical alignment.
{
name: 'verticalAlign',
value: 'text-top',
margin: '0 0.5em'
},
{
name: 'verticalAlign',
value: 'middle',
margin: '0 0.5em'
},
{
name: 'verticalAlign',
value: 'text-bottom',
value: 'align-top',
margin: '0 0.5em',
isDefault: true
},
// Floats.
{
name: 'float',
value: 'left',
margin: '0 0.5em 0 0'
legacyValues: [
'atto_image_button_text-top',
],
},
{
name: 'float',
value: 'right',
margin: '0 0 0 0.5em'
}
]
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/templates/image.mustache
+1 -1
View File
@@ -28,7 +28,7 @@
}}{{#width}} width="{{.}}"{{/width}}{{!
}}{{#height}} height="{{.}}"{{/height}}{{!
}}{{#presentation}} role="presentation"{{/presentation}}{{!
}}{{#customstyle}} style="{{.}}"{{/customstyle}}{{!
}}{{#customStyle}} style="{{.}}"{{/customStyle}}{{!
}}{{#classlist}} class="{{.}}"{{/classlist}}{{!
}}{{#id}} id="{{.}}"{{/id}}{{!
}}/>
lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache
+1 -1
View File
@@ -93,7 +93,7 @@
{{/alignoptions}}
</select>
</div>
<input type="hidden" class="tiny_image_customstyle" value="{{customstyle}}"/>
<input type="hidden" class="tiny_image_customstyle" value="{{customStyle}}"/>
<br/>
<div class="mdl-align">
<div class="tiny_image_preview_box">