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

MDL-44826 Atto: Image alignment options

Browse Source 
If an image has custom alignment or margins - don't overwrite
them unless a new alignment option is chosen.
This commit is contained in:
Damyon Wiese
2014-04-15 12:23:31 +08:00
parent 2e8cbbb3ac
commit d28af3d4aa
6 changed files with 127 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/plugins/image/lang/en/atto_image.php
+1
View File
@@ -31,6 +31,7 @@ $string['alignment_top'] = 'Top';
$string['browserepositories'] = 'Browse repositories...';
$string['constrain'] = 'Keep ratio';
$string['createimage'] = 'Insert image';
$string['customstyle'] = 'Custom style';
$string['enteralt'] = 'Describe this image for someone who cannot see it';
$string['enterurl'] = 'Enter URL';
$string['height'] = 'Height';
lib/editor/atto/plugins/image/lib.php
+1
View File
@@ -40,6 +40,7 @@ function atto_image_strings_for_js() {
'browserepositories',
'constrain',
'createimage',
'customstyle',
'enterurl',
'enteralt',
'height',
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
Vendored
+41 -10
View File
@@ -45,6 +45,7 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
@@ -77,6 +78,10 @@ var CSS = {
str: 'alignment_right',
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@@ -128,6 +133,8 @@ var COMPONENTNAME = 'atto_image',
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
'<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
'<br/>' +
// Add the image preview.
@@ -145,7 +152,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}"' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -419,11 +426,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (properties === false) {
img.setStyle('display', 'none');
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return;
}
if (properties.align) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
// Remove the custom style option if we have a standard alignment.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
} else {
form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
}
if (properties.customstyle) {
form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -461,7 +477,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt :null,
width: null,
height: null,
align: null,
align: '',
display: 'inline',
presentation: false
},
@@ -479,6 +495,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = parseInt(image.getAttribute('width'), 10);
height = parseInt(image.getAttribute('height'), 10);
@@ -490,9 +508,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
if (style.indexOf(css) !== -1) {
margin = 'margin:' + ALIGNMENTS[i].margin + ';';
margin = margin.replace(/ /g, '');
// Must match alignment and margins - otherwise custom style is selected.
if (style.indexOf(margin) !== -1) {
properties.align = css;
break;
}
}
}
properties.src = image.getAttribute('src');
@@ -539,6 +562,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
@@ -561,10 +585,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
if (alignment === 'style:customstyle;') {
alignment = '';
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
} else {
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
}
}
}
@@ -576,7 +606,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
height: height,
presentation: presentation,
alignment: alignment,
margin: margin
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
Vendored
+2 -2
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
+41 -10
View File
@@ -45,6 +45,7 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
@@ -77,6 +78,10 @@ var CSS = {
str: 'alignment_right',
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@@ -128,6 +133,8 @@ var COMPONENTNAME = 'atto_image',
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
'<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
'<br/>' +
// Add the image preview.
@@ -145,7 +152,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}"' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -419,11 +426,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (properties === false) {
img.setStyle('display', 'none');
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return;
}
if (properties.align) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
// Remove the custom style option if we have a standard alignment.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
} else {
form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
}
if (properties.customstyle) {
form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -461,7 +477,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt :null,
width: null,
height: null,
align: null,
align: '',
display: 'inline',
presentation: false
},
@@ -479,6 +495,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = parseInt(image.getAttribute('width'), 10);
height = parseInt(image.getAttribute('height'), 10);
@@ -490,9 +508,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
if (style.indexOf(css) !== -1) {
margin = 'margin:' + ALIGNMENTS[i].margin + ';';
margin = margin.replace(/ /g, '');
// Must match alignment and margins - otherwise custom style is selected.
if (style.indexOf(margin) !== -1) {
properties.align = css;
break;
}
}
}
properties.src = image.getAttribute('src');
@@ -539,6 +562,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
@@ -561,10 +585,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
if (alignment === 'style:customstyle;') {
alignment = '';
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
} else {
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
}
}
}
@@ -576,7 +606,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
height: height,
presentation: presentation,
alignment: alignment,
margin: margin
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);
lib/editor/atto/plugins/image/yui/src/button/js/button.js
Vendored
+41 -10
View File
@@ -43,6 +43,7 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
@@ -75,6 +76,10 @@ var CSS = {
str: 'alignment_right',
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@@ -126,6 +131,8 @@ var COMPONENTNAME = 'atto_image',
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
'<input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/>' +
'<br/>' +
// Add the image preview.
@@ -143,7 +150,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}"' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -417,11 +424,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (properties === false) {
img.setStyle('display', 'none');
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return;
}
if (properties.align) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
// Remove the custom style option if we have a standard alignment.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
} else {
form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
}
if (properties.customstyle) {
form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -459,7 +475,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt :null,
width: null,
height: null,
align: null,
align: '',
display: 'inline',
presentation: false
},
@@ -477,6 +493,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = parseInt(image.getAttribute('width'), 10);
height = parseInt(image.getAttribute('height'), 10);
@@ -488,9 +506,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
if (style.indexOf(css) !== -1) {
margin = 'margin:' + ALIGNMENTS[i].margin + ';';
margin = margin.replace(/ /g, '');
// Must match alignment and margins - otherwise custom style is selected.
if (style.indexOf(margin) !== -1) {
properties.align = css;
break;
}
}
}
properties.src = image.getAttribute('src');
@@ -537,6 +560,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
@@ -559,10 +583,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
if (alignment === 'style:customstyle;') {
alignment = '';
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
} else {
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (alignment === css) {
margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
}
}
}
@@ -574,7 +604,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
height: height,
presentation: presentation,
alignment: alignment,
margin: margin
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);