MDL-50801 atto_table: Allow caption position to be set

lib/editor/atto/plugins/table/lang/en/atto_table.php

@@ -26,6 +26,7 @@ $string['addcolumnafter'] = 'Insert column after';
 $string['addrowafter'] = 'Insert row after';
 $string['both'] = 'Both';
 $string['caption'] = 'Caption';
+$string['captionposition'] = 'Caption position';
 $string['columns'] = 'Columns';
 $string['createtable'] = 'Create table';
 $string['deletecolumn'] = 'Delete column';

lib/editor/atto/plugins/table/lib.php

@@ -47,7 +47,12 @@ function atto_table_strings_for_js() {
                                           'moverowdown',
                                           'moverowup',
                                           'deleterow',
-                                          'deletecolumn'),
+                                          'deletecolumn',
+                                          'captionposition'),
                                     'atto_table');
+
+    $PAGE->requires->strings_for_js(array('top',
+                                          'bottom'),
+                                    'editor');
 }
 

lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js

@@ -40,6 +40,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -58,6 +65,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -79,6 +93,7 @@ var COMPONENT = 'atto_table',
         '</form>',
     CSS = {
         CAPTION: 'caption',
+        CAPTIONPOSITION: 'captionposition',
         HEADERS: 'headers',
         ROWS: 'rows',
         COLUMNS: 'columns',
@@ -87,6 +102,7 @@ var COMPONENT = 'atto_table',
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
+        CAPTIONPOSITION: '.' + CSS.CAPTIONPOSITION,
         HEADERS: '.' + CSS.HEADERS,
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
@@ -312,6 +328,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _updateTable: function(e) {
         var caption,
+            captionposition,
             headers,
             table,
             captionnode;
@@ -324,16 +341,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         // Add/update the caption.
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
 
         table = this._lastTarget.ancestor('table');
 
         captionnode = table.one('caption');
         if (!captionnode) {
-            captionnode = Y.Node.create('<caption></caption');
+            captionnode = Y.Node.create('<caption></caption>');
             table.insert(captionnode, 0);
         }
         captionnode.setHTML(caption.get('value'));
+        captionnode.setStyle('caption-side', captionposition.get('value'));
+        if (!captionnode.getAttribute('style')) {
+            captionnode.removeAttribute('style');
+        }
 
         // Add the row headers.
         if (headers.get('value') === 'rows' || headers.get('value') === 'both') {
@@ -405,6 +427,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _setTable: function(e) {
         var caption,
+            captionposition,
             rows,
             cols,
             headers,
@@ -419,6 +442,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }).hide();
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
@@ -429,8 +453,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
         tablehtml = '<br/>' + nl + '<table>' + nl;
-        tablehtml += '<caption>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
 
+        var captionstyle = '';
+        if (captionposition.get('value')) {
+            captionstyle = ' style="caption-side: ' + captionposition.get('value') + '"';
+        }
+        tablehtml += '<caption' + captionstyle + '>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
         i = 0;
         if (headers.get('value') === 'columns' || headers.get('value') === 'both') {
             i = 1;
@@ -890,6 +918,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Set the dialogue content, and then show the dialogue.
         var node = this._getEditDialogueContent(),
             captioninput = node.one(SELECTORS.CAPTION),
+            captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
@@ -900,6 +929,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (captionpositioninput && captionnode.getAttribute('style')) {
+            captionpositioninput.set('value', captionnode.getStyle('caption-side'));
+        } else {
+            // Default to none.
+            captionpositioninput.set('value', '');
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';

lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js

@@ -40,6 +40,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -58,6 +65,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -79,6 +93,7 @@ var COMPONENT = 'atto_table',
         '</form>',
     CSS = {
         CAPTION: 'caption',
+        CAPTIONPOSITION: 'captionposition',
         HEADERS: 'headers',
         ROWS: 'rows',
         COLUMNS: 'columns',
@@ -87,6 +102,7 @@ var COMPONENT = 'atto_table',
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
+        CAPTIONPOSITION: '.' + CSS.CAPTIONPOSITION,
         HEADERS: '.' + CSS.HEADERS,
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
@@ -312,6 +328,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _updateTable: function(e) {
         var caption,
+            captionposition,
             headers,
             table,
             captionnode;
@@ -324,16 +341,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         // Add/update the caption.
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
 
         table = this._lastTarget.ancestor('table');
 
         captionnode = table.one('caption');
         if (!captionnode) {
-            captionnode = Y.Node.create('<caption></caption');
+            captionnode = Y.Node.create('<caption></caption>');
             table.insert(captionnode, 0);
         }
         captionnode.setHTML(caption.get('value'));
+        captionnode.setStyle('caption-side', captionposition.get('value'));
+        if (!captionnode.getAttribute('style')) {
+            captionnode.removeAttribute('style');
+        }
 
         // Add the row headers.
         if (headers.get('value') === 'rows' || headers.get('value') === 'both') {
@@ -405,6 +427,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _setTable: function(e) {
         var caption,
+            captionposition,
             rows,
             cols,
             headers,
@@ -419,6 +442,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }).hide();
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
@@ -429,8 +453,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
         tablehtml = '<br/>' + nl + '<table>' + nl;
-        tablehtml += '<caption>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
 
+        var captionstyle = '';
+        if (captionposition.get('value')) {
+            captionstyle = ' style="caption-side: ' + captionposition.get('value') + '"';
+        }
+        tablehtml += '<caption' + captionstyle + '>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
         i = 0;
         if (headers.get('value') === 'columns' || headers.get('value') === 'both') {
             i = 1;
@@ -890,6 +918,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Set the dialogue content, and then show the dialogue.
         var node = this._getEditDialogueContent(),
             captioninput = node.one(SELECTORS.CAPTION),
+            captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
@@ -900,6 +929,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (captionpositioninput && captionnode.getAttribute('style')) {
+            captionpositioninput.set('value', captionnode.getStyle('caption-side'));
+        } else {
+            // Default to none.
+            captionpositioninput.set('value', '');
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';

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

@@ -38,6 +38,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -56,6 +63,13 @@ var COMPONENT = 'atto_table',
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
+                '<option value=""></option>' +
+                '<option value="top">{{get_string "top" "editor"}}</option>' +
+                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
+            '</select>' +
+            '<br/>' +
             '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
             '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
                 '<option value="columns">{{get_string "columns" component}}' + '</option>' +
@@ -77,6 +91,7 @@ var COMPONENT = 'atto_table',
         '</form>',
     CSS = {
         CAPTION: 'caption',
+        CAPTIONPOSITION: 'captionposition',
         HEADERS: 'headers',
         ROWS: 'rows',
         COLUMNS: 'columns',
@@ -85,6 +100,7 @@ var COMPONENT = 'atto_table',
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
+        CAPTIONPOSITION: '.' + CSS.CAPTIONPOSITION,
         HEADERS: '.' + CSS.HEADERS,
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
@@ -310,6 +326,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _updateTable: function(e) {
         var caption,
+            captionposition,
             headers,
             table,
             captionnode;
@@ -322,16 +339,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         // Add/update the caption.
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
 
         table = this._lastTarget.ancestor('table');
 
         captionnode = table.one('caption');
         if (!captionnode) {
-            captionnode = Y.Node.create('<caption></caption');
+            captionnode = Y.Node.create('<caption></caption>');
             table.insert(captionnode, 0);
         }
         captionnode.setHTML(caption.get('value'));
+        captionnode.setStyle('caption-side', captionposition.get('value'));
+        if (!captionnode.getAttribute('style')) {
+            captionnode.removeAttribute('style');
+        }
 
         // Add the row headers.
         if (headers.get('value') === 'rows' || headers.get('value') === 'both') {
@@ -403,6 +425,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _setTable: function(e) {
         var caption,
+            captionposition,
             rows,
             cols,
             headers,
@@ -417,6 +440,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }).hide();
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
+        captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
@@ -427,8 +451,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
         tablehtml = '<br/>' + nl + '<table>' + nl;
-        tablehtml += '<caption>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
 
+        var captionstyle = '';
+        if (captionposition.get('value')) {
+            captionstyle = ' style="caption-side: ' + captionposition.get('value') + '"';
+        }
+        tablehtml += '<caption' + captionstyle + '>' + Y.Escape.html(caption.get('value')) + '</caption>' + nl;
         i = 0;
         if (headers.get('value') === 'columns' || headers.get('value') === 'both') {
             i = 1;
@@ -888,6 +916,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         // Set the dialogue content, and then show the dialogue.
         var node = this._getEditDialogueContent(),
             captioninput = node.one(SELECTORS.CAPTION),
+            captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
@@ -898,6 +927,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (captionpositioninput && captionnode.getAttribute('style')) {
+            captionpositioninput.set('value', captionnode.getStyle('caption-side'));
+        } else {
+            // Default to none.
+            captionpositioninput.set('value', '');
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';