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

MDL-72884 atto_image: improve svg support in editor dialogue.

Browse Source 
Where the dimensions of an image are not present, we should use
sensible defaults so that the dialogue is still usable.
This commit is contained in:
Paul Holden
2021-10-21 23:58:32 +01:00
parent 261bc97b3e
commit 544ee202ca
4 changed files with 45 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
Vendored
+14 -13
View File
@@ -92,7 +92,10 @@ var CSS = {
margin: '0 0 0 0.5em'
}
],
DEFAULTS = {
WIDTH: 160,
HEIGHT: 160,
},
REGEX = {
ISPERCENT: /\d+%/
},
@@ -550,22 +553,23 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
image.onload = function() {
var input, currentwidth, currentheight, widthRatio, heightRatio;
// Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).
self._rawImageDimensions = {
width: this.width,
height: this.height
width: this.width || DEFAULTS.WIDTH,
height: this.height || DEFAULTS.HEIGHT,
};
input = self._form.one('.' + CSS.INPUTWIDTH);
currentwidth = input.get('value');
if (currentwidth === '') {
input.set('value', this.width);
currentwidth = "" + this.width;
input.set('value', self._rawImageDimensions.width);
currentwidth = "" + self._rawImageDimensions.width;
}
input = self._form.one('.' + CSS.INPUTHEIGHT);
currentheight = input.get('value');
if (currentheight === '') {
input.set('value', this.height);
currentheight = "" + this.height;
input.set('value', self._rawImageDimensions.height);
currentheight = "" + self._rawImageDimensions.height;
}
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.setAttribute('src', this.src);
@@ -576,13 +580,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.INPUTCONSTRAIN);
if (currentwidth.match(REGEX.ISPERCENT) && currentheight.match(REGEX.ISPERCENT)) {
input.set('checked', currentwidth === currentheight);
} else if (this.width === 0 || this.height === 0) {
// If we don't have both dimensions of the image, we can't auto-size it, so disable control.
input.set('disabled', 'disabled');
} else {
if (this.width === 0) {
this.width = 1;
}
if (this.height === 0) {
this.height = 1;
}
// This is the same as comparing to 3 decimal places.
widthRatio = Math.round(1000 * parseInt(currentwidth, 10) / this.width);
heightRatio = Math.round(1000 * parseInt(currentheight, 10) / this.height);
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
Vendored
+14 -13
View File
@@ -92,7 +92,10 @@ var CSS = {
margin: '0 0 0 0.5em'
}
],
DEFAULTS = {
WIDTH: 160,
HEIGHT: 160,
},
REGEX = {
ISPERCENT: /\d+%/
},
@@ -550,22 +553,23 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
image.onload = function() {
var input, currentwidth, currentheight, widthRatio, heightRatio;
// Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).
self._rawImageDimensions = {
width: this.width,
height: this.height
width: this.width || DEFAULTS.WIDTH,
height: this.height || DEFAULTS.HEIGHT,
};
input = self._form.one('.' + CSS.INPUTWIDTH);
currentwidth = input.get('value');
if (currentwidth === '') {
input.set('value', this.width);
currentwidth = "" + this.width;
input.set('value', self._rawImageDimensions.width);
currentwidth = "" + self._rawImageDimensions.width;
}
input = self._form.one('.' + CSS.INPUTHEIGHT);
currentheight = input.get('value');
if (currentheight === '') {
input.set('value', this.height);
currentheight = "" + this.height;
input.set('value', self._rawImageDimensions.height);
currentheight = "" + self._rawImageDimensions.height;
}
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.setAttribute('src', this.src);
@@ -576,13 +580,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.INPUTCONSTRAIN);
if (currentwidth.match(REGEX.ISPERCENT) && currentheight.match(REGEX.ISPERCENT)) {
input.set('checked', currentwidth === currentheight);
} else if (this.width === 0 || this.height === 0) {
// If we don't have both dimensions of the image, we can't auto-size it, so disable control.
input.set('disabled', 'disabled');
} else {
if (this.width === 0) {
this.width = 1;
}
if (this.height === 0) {
this.height = 1;
}
// This is the same as comparing to 3 decimal places.
widthRatio = Math.round(1000 * parseInt(currentwidth, 10) / this.width);
heightRatio = Math.round(1000 * parseInt(currentheight, 10) / this.height);
lib/editor/atto/plugins/image/yui/src/button/js/button.js
Vendored
+14 -13
View File
@@ -90,7 +90,10 @@ var CSS = {
margin: '0 0 0 0.5em'
}
],
DEFAULTS = {
WIDTH: 160,
HEIGHT: 160,
},
REGEX = {
ISPERCENT: /\d+%/
},
@@ -548,22 +551,23 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
image.onload = function() {
var input, currentwidth, currentheight, widthRatio, heightRatio;
// Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).
self._rawImageDimensions = {
width: this.width,
height: this.height
width: this.width || DEFAULTS.WIDTH,
height: this.height || DEFAULTS.HEIGHT,
};
input = self._form.one('.' + CSS.INPUTWIDTH);
currentwidth = input.get('value');
if (currentwidth === '') {
input.set('value', this.width);
currentwidth = "" + this.width;
input.set('value', self._rawImageDimensions.width);
currentwidth = "" + self._rawImageDimensions.width;
}
input = self._form.one('.' + CSS.INPUTHEIGHT);
currentheight = input.get('value');
if (currentheight === '') {
input.set('value', this.height);
currentheight = "" + this.height;
input.set('value', self._rawImageDimensions.height);
currentheight = "" + self._rawImageDimensions.height;
}
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.setAttribute('src', this.src);
@@ -574,13 +578,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.INPUTCONSTRAIN);
if (currentwidth.match(REGEX.ISPERCENT) && currentheight.match(REGEX.ISPERCENT)) {
input.set('checked', currentwidth === currentheight);
} else if (this.width === 0 || this.height === 0) {
// If we don't have both dimensions of the image, we can't auto-size it, so disable control.
input.set('disabled', 'disabled');
} else {
if (this.width === 0) {
this.width = 1;
}
if (this.height === 0) {
this.height = 1;
}
// This is the same as comparing to 3 decimal places.
widthRatio = Math.round(1000 * parseInt(currentwidth, 10) / this.width);
heightRatio = Math.round(1000 * parseInt(currentheight, 10) / this.height);