Skip to content

Commit

Permalink
MDL-44826 Atto: Image alignment options
Browse files Browse the repository at this point in the history 
If an image has custom alignment or margins - don't overwrite
them unless a new alignment option is chosen.
  • Loading branch information
Damyon Wiese committed Apr 15, 2014
1 parent 2e8cbbb commit d28af3d
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 32 deletions.
1 change: 1 addition & 0 deletions lib/editor/atto/plugins/image/lang/en/atto_image.php
View file
Expand Up @@ -31,6 +31,7 @@
$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';
Expand Down
1 change: 1 addition & 0 deletions lib/editor/atto/plugins/image/lib.php
View file
Expand Up @@ -40,6 +40,7 @@ function atto_image_strings_for_js() {
'browserepositories',
'constrain',
'createimage',
'customstyle',
'enterurl',
'enteralt',
'height',
Expand Down
51 changes: 41 additions & 10 deletions ...r/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
View file
Expand Up @@ -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 = [
Expand Down Expand Up @@ -77,6 +78,10 @@ var CSS = {
str: 'alignment_right',
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];

Expand Down Expand Up @@ -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.
Expand All @@ -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, [], {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
},
Expand All @@ -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);

Expand All @@ -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');
Expand Down Expand Up @@ -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');

Expand All @@ -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 + ';';
}
}
}

Expand All @@ -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);
Expand Down

0 comments on commit d28af3d

Please sign in to comment.