Merge branch 'MDL-44826-master' of git://github.com/damyon/moodle

This commit is contained in:
Sam Hemelryk 2014-04-15 16:42:12 +12:00
commit 00719eefd7
6 changed files with 181 additions and 111 deletions

View file

@ -23,19 +23,15 @@
*/
$string['alignment'] = 'Alignment';
$string['alignment_baseline'] = 'Default (baseline)';
$string['alignment_bottom'] = 'Bottom';
$string['alignment_left'] = 'Left';
$string['alignment_middle'] = 'Middle';
$string['alignment_right'] = 'Right';
$string['alignment_sub'] = 'Subscript';
$string['alignment_super'] = 'Superscript';
$string['alignment_textbottom'] = 'Text bottom';
$string['alignment_texttop'] = 'Text top';
$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';

View file

@ -32,19 +32,15 @@ function atto_image_strings_for_js() {
$strings = array(
'alignment',
'alignment_baseline',
'alignment_bottom',
'alignment_left',
'alignment_middle',
'alignment_right',
'alignment_sub',
'alignment_super',
'alignment_textbottom',
'alignment_texttop',
'alignment_top',
'browserepositories',
'constrain',
'createimage',
'customstyle',
'enterurl',
'enteralt',
'height',

View file

@ -45,53 +45,43 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
// Vertical alignment.
{
name: 'baseline',
str: 'alignment_baseline',
value: 'vertical-align'
}, {
name: 'sub',
str: 'alignment_sub',
value: 'vertical-align'
}, {
name: 'super',
str: 'alignment_super',
value: 'vertical-align'
}, {
name: 'top',
str: 'alignment_top',
value: 'vertical-align'
}, {
name: 'text-top',
str: 'alignment_texttop',
value: 'vertical-align'
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'middle',
str: 'alignment_middle',
value: 'vertical-align'
}, {
name: 'bottom',
str: 'alignment_bottom',
value: 'vertical-align'
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'text-bottom',
str: 'alignment_textbottom',
value: 'vertical-align'
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em'
},
// Floats.
{
name: 'left',
str: 'alignment_left',
value: 'float'
value: 'float',
margin: '0 .5em 0 0'
}, {
name: 'right',
str: 'alignment_right',
value: 'float'
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@ -143,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.
@ -160,7 +152,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'{{#if alignment}}style="{{alignment}}" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@ -434,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);
@ -476,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
},
@ -494,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);
@ -505,11 +508,16 @@ 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) {
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');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -551,8 +559,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
e.preventDefault();
@ -574,6 +585,19 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
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 + ';';
}
}
}
template = Y.Handlebars.compile(IMAGETEMPLATE);
imagehtml = template({
url: url,
@ -581,7 +605,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment
alignment: alignment,
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);

File diff suppressed because one or more lines are too long

View file

@ -45,53 +45,43 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
// Vertical alignment.
{
name: 'baseline',
str: 'alignment_baseline',
value: 'vertical-align'
}, {
name: 'sub',
str: 'alignment_sub',
value: 'vertical-align'
}, {
name: 'super',
str: 'alignment_super',
value: 'vertical-align'
}, {
name: 'top',
str: 'alignment_top',
value: 'vertical-align'
}, {
name: 'text-top',
str: 'alignment_texttop',
value: 'vertical-align'
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'middle',
str: 'alignment_middle',
value: 'vertical-align'
}, {
name: 'bottom',
str: 'alignment_bottom',
value: 'vertical-align'
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'text-bottom',
str: 'alignment_textbottom',
value: 'vertical-align'
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em'
},
// Floats.
{
name: 'left',
str: 'alignment_left',
value: 'float'
value: 'float',
margin: '0 .5em 0 0'
}, {
name: 'right',
str: 'alignment_right',
value: 'float'
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@ -143,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.
@ -160,7 +152,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'{{#if alignment}}style="{{alignment}}" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@ -434,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);
@ -476,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
},
@ -494,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);
@ -505,11 +508,16 @@ 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) {
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');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -551,8 +559,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
e.preventDefault();
@ -574,6 +585,19 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
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 + ';';
}
}
}
template = Y.Handlebars.compile(IMAGETEMPLATE);
imagehtml = template({
url: url,
@ -581,7 +605,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment
alignment: alignment,
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);

View file

@ -43,53 +43,43 @@ var CSS = {
IMAGEBROWSER: 'openimagebrowser',
IMAGEPRESENTATION: 'atto_image_presentation',
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview'
},
ALIGNMENTS = [
// Vertical alignment.
{
name: 'baseline',
str: 'alignment_baseline',
value: 'vertical-align'
}, {
name: 'sub',
str: 'alignment_sub',
value: 'vertical-align'
}, {
name: 'super',
str: 'alignment_super',
value: 'vertical-align'
}, {
name: 'top',
str: 'alignment_top',
value: 'vertical-align'
}, {
name: 'text-top',
str: 'alignment_texttop',
value: 'vertical-align'
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'middle',
str: 'alignment_middle',
value: 'vertical-align'
}, {
name: 'bottom',
str: 'alignment_bottom',
value: 'vertical-align'
value: 'vertical-align',
margin: '0 .5em'
}, {
name: 'text-bottom',
str: 'alignment_textbottom',
value: 'vertical-align'
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em'
},
// Floats.
{
name: 'left',
str: 'alignment_left',
value: 'float'
value: 'float',
margin: '0 .5em 0 0'
}, {
name: 'right',
str: 'alignment_right',
value: 'float'
value: 'float',
margin: '0 0 .5em 0'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
}
];
@ -141,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.
@ -158,7 +150,7 @@ var COMPONENTNAME = 'atto_image',
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'{{#if alignment}}style="{{alignment}}" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'/>';
Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@ -432,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);
@ -474,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
},
@ -492,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);
@ -503,11 +506,16 @@ 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) {
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');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -549,8 +557,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
imagehtml,
customstyle = '',
i,
host = this.get('host');
e.preventDefault();
@ -572,6 +583,19 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
} else {
host.setSelection(this._currentSelection);
}
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 + ';';
}
}
}
template = Y.Handlebars.compile(IMAGETEMPLATE);
imagehtml = template({
url: url,
@ -579,7 +603,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment
alignment: alignment,
margin: margin,
customstyle: customstyle
});
this.get('host').insertContentAtFocusPoint(imagehtml);