mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-18 22:08:20 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'MDL-52317' of https://github.com/NeillM/moodle

Browse Source
This commit is contained in:
Dan Poltawski 2016-10-03 16:09:25 +01:00
commit 4e0f7f98ec
5 changed files with 373 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
lib/editor/atto/plugins/image/styles.css
View File

@ -31,3 +31,36 @@
.atto_image_size label {
display: inline-block;
}
.atto_image_button_text-top {
vertical-align: text-top;
margin: 0 0.5em;
}
.atto_image_button_middle {
vertical-align: middle;
margin: 0 0.5em;
}
.atto_image_button_text-bottom {
vertical-align: text-bottom;
margin: 0 0.5em;
}
.atto_image_button_text-top.img-responsive,
.atto_image_button_middle.img-responsive,
.atto_image_button_text-bottom.img-responsive {
max-width: calc(100% - 1em);
}
.atto_image_button_left {
float: left;
margin: 0 0.5em 0 0;
max-width: calc(100% - 1em);
}
.atto_image_button_right {
float: right;
margin: 0 0 0 0.5em;
max-width: calc(100% - 1em);
}

186
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js vendored
View File

@ -48,7 +48,8 @@ var CSS = {
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview',
IMAGEPREVIEWBOX: 'atto_image_preview_box'
IMAGEPREVIEWBOX: 'atto_image_preview_box',
ALIGNSETTINGS: 'atto_image_button'
},
SELECTORS = {
INPUTURL: '.' + CSS.INPUTURL
@ -56,38 +57,34 @@ var CSS = {
ALIGNMENTS = [
// Vertical alignment.
{
name: 'text-top',
name: 'verticalAlign',
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
value: 'text-top',
margin: '0 0.5em'
}, {
name: 'middle',
name: 'verticalAlign',
str: 'alignment_middle',
value: 'vertical-align',
margin: '0 .5em'
value: 'middle',
margin: '0 0.5em'
}, {
name: 'text-bottom',
name: 'verticalAlign',
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em',
value: 'text-bottom',
margin: '0 0.5em',
isDefault: true
},
// Floats.
{
name: 'left',
name: 'float',
str: 'alignment_left',
value: 'float',
margin: '0 .5em 0 0'
value: 'left',
margin: '0 0.5em 0 0'
}, {
name: 'right',
name: 'float',
str: 'alignment_right',
value: 'float',
margin: '0 0 0 .5em'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
value: 'right',
margin: '0 0 0 0.5em'
}
],
@ -142,7 +139,7 @@ var CSS = {
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
@ -165,7 +162,7 @@ var CSS = {
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
'{{#if classlist}}class="{{classlist}}" {{/if}}' +
'{{#if id}}id="{{id}}" {{/if}}' +
'/>';
@ -234,6 +231,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _handleDragDrop
* @param {EventFacade} e
* @return mixed
* @private
*/
_handleDragDrop: function(e) {
@ -647,30 +645,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_applyImageProperties: function(form) {
var properties = this._getSelectedImageProperties(),
img = form.one('.' + CSS.IMAGEPREVIEW),
i,
css;
img = form.one('.' + CSS.IMAGEPREVIEW);
if (properties === false) {
img.setStyle('display', 'none');
// Set the default alignment.
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].isDefault === true) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
ALIGNMENTS.some(function(alignment) {
if (alignment.isDefault) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
return true;
}
}
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return false;
}, this);
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);
@ -717,25 +710,21 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i,
width,
height,
style,
css,
image,
margin;
image;
if (images) {
images = images.filter('img');
}
if (images && images.size()) {
image = images.item(0);
image = this._removeLegacyAlignment(images.item(0));
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = image.getAttribute('width');
if (!width.match(REGEX.ISPERCENT)) {
@ -752,18 +741,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (height !== 0) {
properties.height = height;
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
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;
}
}
}
this._getAlignmentPropeties(image, properties);
properties.src = image.getAttribute('src');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -775,6 +753,40 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Sets the alignment of a properties object.
*
* @method _getAlignmentPropeties
* @param {Node} image The image that the alignment properties should be found for
* @param {Object} properties The properties object that is created in _getSelectedImageProperties()
* @private
*/
_getAlignmentPropeties: function(image, properties) {
var complete = false,
defaultAlignment;
// Check for an alignment value.
complete = ALIGNMENTS.some(function(alignment) {
var classname = this._getAlignmentClass(alignment.value);
if (image.hasClass(classname)) {
properties.align = alignment.value;
Y.log('Found alignment ' + alignment.value, 'debug', 'atto_image-button');
return true;
}
if (alignment.isDefault) {
defaultAlignment = alignment.value;
}
return false;
}, this);
if (!complete && defaultAlignment) {
properties.align = defaultAlignment;
}
},
/**
* Update the form when the URL was changed. This includes updating the
* height, width, and image preview.
@ -804,14 +816,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt = form.one('.' + CSS.INPUTALT).get('value'),
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
imagehtml,
customstyle = '',
i,
css,
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
classlist = [],
host = this.get('host');
@ -831,22 +840,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
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 + ';';
}
}
}
if (constrain) {
classlist.push(CSS.RESPONSIVE);
}
// Add the alignment class for the image.
classlist.push(alignment);
if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
form.one('.' + CSS.INPUTWIDTH).focus();
return;
@ -863,8 +863,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment,
margin: margin,
customstyle: customstyle,
classlist: classlist.join(' ')
});
@ -880,6 +878,48 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
},
/**
* Removes any legacy styles added by previous versions of the atto image button.
*
* @method _removeLegacyAlignment
* @param {Y.Node} imageNode
* @return {Y.Node}
* @private
*/
_removeLegacyAlignment: function(imageNode) {
if (!imageNode.getStyle('margin')) {
// There is no margin therefore this cannot match any known alignments.
return imageNode;
}
ALIGNMENTS.some(function(alignment) {
if (imageNode.getStyle(alignment.name) !== alignment.value) {
// The name/value do not match. Skip.
return false;
}
var normalisedNode = Y.Node.create('<div>');
normalisedNode.setStyle('margin', alignment.margin);
if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
// The margin does not match.
return false;
}
Y.log('Legacy alignment found and removed.', 'info', 'atto_image-button');
imageNode.addClass(this._getAlignmentClass(alignment.value));
imageNode.setStyle(alignment.name, null);
imageNode.setStyle('margin', null);
return true;
}, this);
return imageNode;
},
_getAlignmentClass: function(alignment) {
return CSS.ALIGNSETTINGS + '_' + alignment;
},
/**
* Update the alt text warning live.
*

6
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js vendored
View File

File diff suppressed because one or more lines are too long

184
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js vendored
View File

@ -48,7 +48,8 @@ var CSS = {
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview',
IMAGEPREVIEWBOX: 'atto_image_preview_box'
IMAGEPREVIEWBOX: 'atto_image_preview_box',
ALIGNSETTINGS: 'atto_image_button'
},
SELECTORS = {
INPUTURL: '.' + CSS.INPUTURL
@ -56,38 +57,34 @@ var CSS = {
ALIGNMENTS = [
// Vertical alignment.
{
name: 'text-top',
name: 'verticalAlign',
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
value: 'text-top',
margin: '0 0.5em'
}, {
name: 'middle',
name: 'verticalAlign',
str: 'alignment_middle',
value: 'vertical-align',
margin: '0 .5em'
value: 'middle',
margin: '0 0.5em'
}, {
name: 'text-bottom',
name: 'verticalAlign',
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em',
value: 'text-bottom',
margin: '0 0.5em',
isDefault: true
},
// Floats.
{
name: 'left',
name: 'float',
str: 'alignment_left',
value: 'float',
margin: '0 .5em 0 0'
value: 'left',
margin: '0 0.5em 0 0'
}, {
name: 'right',
name: 'float',
str: 'alignment_right',
value: 'float',
margin: '0 0 0 .5em'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
value: 'right',
margin: '0 0 0 0.5em'
}
],
@ -142,7 +139,7 @@ var CSS = {
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
@ -165,7 +162,7 @@ var CSS = {
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
'{{#if classlist}}class="{{classlist}}" {{/if}}' +
'{{#if id}}id="{{id}}" {{/if}}' +
'/>';
@ -234,6 +231,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _handleDragDrop
* @param {EventFacade} e
* @return mixed
* @private
*/
_handleDragDrop: function(e) {
@ -647,30 +645,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_applyImageProperties: function(form) {
var properties = this._getSelectedImageProperties(),
img = form.one('.' + CSS.IMAGEPREVIEW),
i,
css;
img = form.one('.' + CSS.IMAGEPREVIEW);
if (properties === false) {
img.setStyle('display', 'none');
// Set the default alignment.
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].isDefault === true) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
ALIGNMENTS.some(function(alignment) {
if (alignment.isDefault) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
return true;
}
}
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return false;
}, this);
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);
@ -717,25 +710,21 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i,
width,
height,
style,
css,
image,
margin;
image;
if (images) {
images = images.filter('img');
}
if (images && images.size()) {
image = images.item(0);
image = this._removeLegacyAlignment(images.item(0));
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = image.getAttribute('width');
if (!width.match(REGEX.ISPERCENT)) {
@ -752,18 +741,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (height !== 0) {
properties.height = height;
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
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;
}
}
}
this._getAlignmentPropeties(image, properties);
properties.src = image.getAttribute('src');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -775,6 +753,39 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Sets the alignment of a properties object.
*
* @method _getAlignmentPropeties
* @param {Node} image The image that the alignment properties should be found for
* @param {Object} properties The properties object that is created in _getSelectedImageProperties()
* @private
*/
_getAlignmentPropeties: function(image, properties) {
var complete = false,
defaultAlignment;
// Check for an alignment value.
complete = ALIGNMENTS.some(function(alignment) {
var classname = this._getAlignmentClass(alignment.value);
if (image.hasClass(classname)) {
properties.align = alignment.value;
return true;
}
if (alignment.isDefault) {
defaultAlignment = alignment.value;
}
return false;
}, this);
if (!complete && defaultAlignment) {
properties.align = defaultAlignment;
}
},
/**
* Update the form when the URL was changed. This includes updating the
* height, width, and image preview.
@ -804,14 +815,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt = form.one('.' + CSS.INPUTALT).get('value'),
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
imagehtml,
customstyle = '',
i,
css,
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
classlist = [],
host = this.get('host');
@ -831,22 +839,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
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 + ';';
}
}
}
if (constrain) {
classlist.push(CSS.RESPONSIVE);
}
// Add the alignment class for the image.
classlist.push(alignment);
if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
form.one('.' + CSS.INPUTWIDTH).focus();
return;
@ -863,8 +862,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment,
margin: margin,
customstyle: customstyle,
classlist: classlist.join(' ')
});
@ -880,6 +877,47 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
},
/**
* Removes any legacy styles added by previous versions of the atto image button.
*
* @method _removeLegacyAlignment
* @param {Y.Node} imageNode
* @return {Y.Node}
* @private
*/
_removeLegacyAlignment: function(imageNode) {
if (!imageNode.getStyle('margin')) {
// There is no margin therefore this cannot match any known alignments.
return imageNode;
}
ALIGNMENTS.some(function(alignment) {
if (imageNode.getStyle(alignment.name) !== alignment.value) {
// The name/value do not match. Skip.
return false;
}
var normalisedNode = Y.Node.create('<div>');
normalisedNode.setStyle('margin', alignment.margin);
if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
// The margin does not match.
return false;
}
imageNode.addClass(this._getAlignmentClass(alignment.value));
imageNode.setStyle(alignment.name, null);
imageNode.setStyle('margin', null);
return true;
}, this);
return imageNode;
},
_getAlignmentClass: function(alignment) {
return CSS.ALIGNSETTINGS + '_' + alignment;
},
/**
* Update the alt text warning live.
*

186
lib/editor/atto/plugins/image/yui/src/button/js/button.js vendored
View File

@ -46,7 +46,8 @@ var CSS = {
INPUTCONSTRAIN: 'atto_image_constrain',
INPUTCUSTOMSTYLE: 'atto_image_customstyle',
IMAGEPREVIEW: 'atto_image_preview',
IMAGEPREVIEWBOX: 'atto_image_preview_box'
IMAGEPREVIEWBOX: 'atto_image_preview_box',
ALIGNSETTINGS: 'atto_image_button'
},
SELECTORS = {
INPUTURL: '.' + CSS.INPUTURL
@ -54,38 +55,34 @@ var CSS = {
ALIGNMENTS = [
// Vertical alignment.
{
name: 'text-top',
name: 'verticalAlign',
str: 'alignment_top',
value: 'vertical-align',
margin: '0 .5em'
value: 'text-top',
margin: '0 0.5em'
}, {
name: 'middle',
name: 'verticalAlign',
str: 'alignment_middle',
value: 'vertical-align',
margin: '0 .5em'
value: 'middle',
margin: '0 0.5em'
}, {
name: 'text-bottom',
name: 'verticalAlign',
str: 'alignment_bottom',
value: 'vertical-align',
margin: '0 .5em',
value: 'text-bottom',
margin: '0 0.5em',
isDefault: true
},
// Floats.
{
name: 'left',
name: 'float',
str: 'alignment_left',
value: 'float',
margin: '0 .5em 0 0'
value: 'left',
margin: '0 0.5em 0 0'
}, {
name: 'right',
name: 'float',
str: 'alignment_right',
value: 'float',
margin: '0 0 0 .5em'
}, {
name: 'customstyle',
str: 'customstyle',
value: 'style'
value: 'right',
margin: '0 0 0 0.5em'
}
],
@ -140,7 +137,7 @@ var CSS = {
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
// Hidden input to store custom styles.
@ -163,7 +160,7 @@ var CSS = {
'{{#if width}}width="{{width}}" {{/if}}' +
'{{#if height}}height="{{height}}" {{/if}}' +
'{{#if presentation}}role="presentation" {{/if}}' +
'style="{{alignment}}{{margin}}{{customstyle}}"' +
'{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
'{{#if classlist}}class="{{classlist}}" {{/if}}' +
'{{#if id}}id="{{id}}" {{/if}}' +
'/>';
@ -232,6 +229,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _handleDragDrop
* @param {EventFacade} e
* @return mixed
* @private
*/
_handleDragDrop: function(e) {
@ -645,30 +643,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_applyImageProperties: function(form) {
var properties = this._getSelectedImageProperties(),
img = form.one('.' + CSS.IMAGEPREVIEW),
i,
css;
img = form.one('.' + CSS.IMAGEPREVIEW);
if (properties === false) {
img.setStyle('display', 'none');
// Set the default alignment.
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].isDefault === true) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
ALIGNMENTS.some(function(alignment) {
if (alignment.isDefault) {
form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
return true;
}
}
// Remove the custom style option if this is a new image.
form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
return false;
}, this);
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);
@ -715,25 +708,21 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i,
width,
height,
style,
css,
image,
margin;
image;
if (images) {
images = images.filter('img');
}
if (images && images.size()) {
image = images.item(0);
image = this._removeLegacyAlignment(images.item(0));
this._selectedImage = image;
style = image.getAttribute('style');
properties.customstyle = style;
style = style.replace(/ /g, '');
width = image.getAttribute('width');
if (!width.match(REGEX.ISPERCENT)) {
@ -750,18 +739,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
if (height !== 0) {
properties.height = height;
}
for (i in ALIGNMENTS) {
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
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;
}
}
}
this._getAlignmentPropeties(image, properties);
properties.src = image.getAttribute('src');
properties.alt = image.getAttribute('alt') || '';
properties.presentation = (image.get('role') === 'presentation');
@ -773,6 +751,40 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Sets the alignment of a properties object.
*
* @method _getAlignmentPropeties
* @param {Node} image The image that the alignment properties should be found for
* @param {Object} properties The properties object that is created in _getSelectedImageProperties()
* @private
*/
_getAlignmentPropeties: function(image, properties) {
var complete = false,
defaultAlignment;
// Check for an alignment value.
complete = ALIGNMENTS.some(function(alignment) {
var classname = this._getAlignmentClass(alignment.value);
if (image.hasClass(classname)) {
properties.align = alignment.value;
Y.log('Found alignment ' + alignment.value, 'debug', 'atto_image-button');
return true;
}
if (alignment.isDefault) {
defaultAlignment = alignment.value;
}
return false;
}, this);
if (!complete && defaultAlignment) {
properties.align = defaultAlignment;
}
},
/**
* Update the form when the URL was changed. This includes updating the
* height, width, and image preview.
@ -802,14 +814,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
alt = form.one('.' + CSS.INPUTALT).get('value'),
width = form.one('.' + CSS.INPUTWIDTH).get('value'),
height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
margin = '',
alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
imagehtml,
customstyle = '',
i,
css,
customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
classlist = [],
host = this.get('host');
@ -829,22 +838,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
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 + ';';
}
}
}
if (constrain) {
classlist.push(CSS.RESPONSIVE);
}
// Add the alignment class for the image.
classlist.push(alignment);
if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
form.one('.' + CSS.INPUTWIDTH).focus();
return;
@ -861,8 +861,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
width: width,
height: height,
presentation: presentation,
alignment: alignment,
margin: margin,
customstyle: customstyle,
classlist: classlist.join(' ')
});
@ -878,6 +876,48 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
},
/**
* Removes any legacy styles added by previous versions of the atto image button.
*
* @method _removeLegacyAlignment
* @param {Y.Node} imageNode
* @return {Y.Node}
* @private
*/
_removeLegacyAlignment: function(imageNode) {
if (!imageNode.getStyle('margin')) {
// There is no margin therefore this cannot match any known alignments.
return imageNode;
}
ALIGNMENTS.some(function(alignment) {
if (imageNode.getStyle(alignment.name) !== alignment.value) {
// The name/value do not match. Skip.
return false;
}
var normalisedNode = Y.Node.create('<div>');
normalisedNode.setStyle('margin', alignment.margin);
if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
// The margin does not match.
return false;
}
Y.log('Legacy alignment found and removed.', 'info', 'atto_image-button');
imageNode.addClass(this._getAlignmentClass(alignment.value));
imageNode.setStyle(alignment.name, null);
imageNode.setStyle('margin', null);
return true;
}, this);
return imageNode;
},
_getAlignmentClass: function(alignment) {
return CSS.ALIGNSETTINGS + '_' + alignment;
},
/**
* Update the alt text warning live.
*