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

lib/editor/atto/plugins/image/lang/en/atto_image.php

@@ -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';

lib/editor/atto/plugins/image/lib.php

@@ -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',

lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js

@@ -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',
+            str: 'alignment_top',
-            value: 'vertical-align'
+            value: 'vertical-align',
+            margin: '0 .5em'
         }, {
             name: 'middle',
             str: 'alignment_middle',
-            value: 'vertical-align'
+            value: 'vertical-align',
-        }, {
+            margin: '0 .5em'
-            name: 'bottom',
-            str: 'alignment_bottom',
-            value: 'vertical-align'
         }, {
             name: 'text-bottom',
-            str: 'alignment_textbottom',
+            str: 'alignment_bottom',
-            value: 'vertical-align'
+            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,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) {
+                if (style.indexOf(css) !== -1) {
-                    properties.align = css;
+                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    break;
+                    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');
@@ -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);

lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js

@@ -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',
+            str: 'alignment_top',
-            value: 'vertical-align'
+            value: 'vertical-align',
+            margin: '0 .5em'
         }, {
             name: 'middle',
             str: 'alignment_middle',
-            value: 'vertical-align'
+            value: 'vertical-align',
-        }, {
+            margin: '0 .5em'
-            name: 'bottom',
-            str: 'alignment_bottom',
-            value: 'vertical-align'
         }, {
             name: 'text-bottom',
-            str: 'alignment_textbottom',
+            str: 'alignment_bottom',
-            value: 'vertical-align'
+            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,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) {
+                if (style.indexOf(css) !== -1) {
-                    properties.align = css;
+                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    break;
+                    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');
@@ -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);

lib/editor/atto/plugins/image/yui/src/button/js/button.js

@@ -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',
+            str: 'alignment_top',
-            value: 'vertical-align'
+            value: 'vertical-align',
+            margin: '0 .5em'
         }, {
             name: 'middle',
             str: 'alignment_middle',
-            value: 'vertical-align'
+            value: 'vertical-align',
-        }, {
+            margin: '0 .5em'
-            name: 'bottom',
-            str: 'alignment_bottom',
-            value: 'vertical-align'
         }, {
             name: 'text-bottom',
-            str: 'alignment_textbottom',
+            str: 'alignment_bottom',
-            value: 'vertical-align'
+            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,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) {
+                if (style.indexOf(css) !== -1) {
-                    properties.align = css;
+                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    break;
+                    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');
@@ -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);