L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'MDL-51880-master' of git://github.com/ryanwyllie/moodle

Browse Source
This commit is contained in:
Andrew Nicols
2015-10-28 11:37:17 +08:00
parent e360ff5db6 f45937e17d
commit 7dea2c1707
8 changed files with 617 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/plugins/table/lang/en/atto_table.php
+14 -3
View File
@@ -45,15 +45,22 @@ $string['borders'] = 'Borders';
$string['bordersize'] = 'Size of borders';
$string['borderstyles'] = 'Style of borders';
$string['borderstyles_desc'] = 'Allowed border styles, separated by commas';
$string['borderstyles_default'] = 'solid,dashed,dotted';
$string['caption'] = 'Caption';
$string['captionposition'] = 'Caption position';
$string['columns'] = 'Columns';
$string['createtable'] = 'Create table';
$string['deletecolumn'] = 'Delete column';
$string['deleterow'] = 'Delete row';
$string['dashed'] = 'Dashed';
$string['dotted'] = 'Dotted';
$string['double'] = 'Double';
$string['edittable'] = 'Edit table';
$string['groove'] = 'Groove';
$string['headers'] = 'Define headers on';
$string['hidden'] = 'Hidden';
$string['inherit'] = 'Inherit';
$string['initial'] = 'Initial';
$string['inset'] = 'Inset';
$string['movecolumnleft'] = 'Move column left';
$string['movecolumnright'] = 'Move column right';
$string['moverowdown'] = 'Move row down';
@@ -63,10 +70,14 @@ $string['none'] = 'None';
$string['numberofcolumns'] = 'Number of columns';
$string['numberofrows'] = 'Number of rows';
$string['outer'] = 'Around table';
$string['outset'] = 'Outset';
$string['pluginname'] = 'Table';
$string['ridge'] = 'Ridge';
$string['rows'] = 'Rows';
$string['settings'] = 'Table settings';
$string['updatetable'] = 'Update table';
$string['width'] = 'Table width (in %)';
$string['solid'] = 'Solid';
$string['themedefault'] = 'Theme default';
$string['transparent'] = 'Transparent';
$string['unset'] = 'Unset';
$string['updatetable'] = 'Update table';
$string['width'] = 'Table width (in %)';
lib/editor/atto/plugins/table/lib.php
+13 -2
View File
@@ -60,8 +60,19 @@ function atto_table_strings_for_js() {
'width',
'outer',
'noborder',
'transparent',
'themedefault'),
'inherit',
'themedefault',
'initial',
'unset',
'hidden',
'dotted',
'dashed',
'solid',
'double',
'groove',
'ridge',
'inset',
'outset'),
'atto_table');
$PAGE->requires->strings_for_js(array('top',
lib/editor/atto/plugins/table/settings.php
+12 -10
View File
@@ -50,16 +50,18 @@ if ($ADMIN->fulltree) {
$name = new lang_string('borderstyles', 'atto_table');
$desc = new lang_string('borderstyles_desc', 'atto_table');
$default = ['none' => 'none',
'hidden' => 'hidden',
'dotted' => 'dotted',
'dashed' => 'dashed',
'solid' => 'solid',
'double' => 'double',
'groove' => 'groove',
'ridge' => 'ridge',
'inset' => 'inset',
'outset' => 'outset'];
$default = array('initial' => new lang_string('initial', 'atto_table'),
'unset' => new lang_string('unset', 'atto_table'),
'none' => new lang_string('none', 'atto_table'),
'hidden' => new lang_string('hidden', 'atto_table'),
'dotted' => new lang_string('dotted', 'atto_table'),
'dashed' => new lang_string('dashed', 'atto_table'),
'solid' => new lang_string('solid', 'atto_table'),
'double' => new lang_string('double', 'atto_table'),
'groove' => new lang_string('groove', 'atto_table'),
'ridge' => new lang_string('ridge', 'atto_table'),
'inset' => new lang_string('inset', 'atto_table'),
'outset' => new lang_string('outset', 'atto_table'));
$setting = new admin_setting_configmultiselect('atto_table/borderstyles',
$name,
lib/editor/atto/plugins/table/tests/behat/table.feature
+106 -19
View File
@@ -35,6 +35,71 @@ Feature: Atto tables
And I press "Save changes"
Then ".blog_entry table caption" "css_element" should be visible
@javascript
Scenario: Check table setting defaults on new table
Given the following config values are set as admin:
| config | value | plugin |
| allowborders | 1 | atto_table |
| allowborderstyles | 1 | atto_table |
| allowbordersize | 1 | atto_table |
| allowbordercolour | 1 | atto_table |
| allowbackgroundcolour | 1 | atto_table |
| allowwidth | 1 | atto_table |
And I log in as "admin"
And I follow "Profile" in the user menu
And I follow "Blog entries"
And I follow "Add a new entry"
And I set the field "Entry title" to "How to make a table"
And I set the field "Blog entry body" to "Table test"
And I select the text in the "Blog entry body" Atto editor
And I click on "Show more buttons" "button"
When I click on "Table" "button"
Then the ".moodle-dialogue-base .atto_form .borderstyle" "css_element" should be disabled
And the ".moodle-dialogue-base .atto_form .bordersize" "css_element" should be disabled
And the "borderColour" "radio" should be disabled
And the field "borders" matches value "default"
And the field "Theme default" matches value "1"
And the field "Table width (in %)" matches value ""
@javascript
Scenario: Edit a table restores settings
Given the following config values are set as admin:
| config | value | plugin |
| allowborders | 1 | atto_table |
| allowborderstyles | 1 | atto_table |
| allowbordersize | 1 | atto_table |
| allowbordercolour | 1 | atto_table |
| allowbackgroundcolour | 1 | atto_table |
| allowwidth | 1 | atto_table |
And I log in as "admin"
And I follow "Profile" in the user menu
And I follow "Blog entries"
And I follow "Add a new entry"
And I set the field "Entry title" to "How to make a table"
And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
And I select the text in the "Blog entry body" Atto editor
And I click on "Show more buttons" "button"
And I click on "Table" "button"
And I click on "Edit table" "link"
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "Dashed"
And I set the field "Size of borders" to "2"
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
And I press "Update table"
And I select the text in the "Blog entry body" Atto editor
And I click on "Table" "button"
When I click on "Edit table" "link"
# Check that the background colour is set correctly.
Then the field with xpath "//label/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
And the field "Table width (in %)" matches value "100"
And the field "Borders" matches value "Around table"
And the field "Style of borders" matches value "dashed"
And the field "Size of borders" matches value "2"
# Check that the border colour is set correctly.
And the field with xpath "//label/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
@javascript
Scenario: Create a table with background colour and width with border settings off
Given the following config values are set as admin:
@@ -67,7 +132,8 @@ Feature: Atto tables
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"background-color:#FFFFFF;width:100%;\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
@javascript
Scenario: Edit a table with background colour and width with border settings off
@@ -102,7 +168,8 @@ Feature: Atto tables
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"width:100%;background-color:rgb(255,255,255);\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
@javascript
Scenario: Create a table with background colour and width with borders on
@@ -137,7 +204,8 @@ Feature: Atto tables
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:1px solid #FFFFFF;background-color:#FFFFFF;width:100%;\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
@javascript
Scenario: Edit a table with background colour and width with borders on
@@ -167,13 +235,14 @@ Feature: Atto tables
Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Borders" to "Around each cell"
And I press "Update table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:1px solid rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
@javascript
Scenario: Create a table with background colour and width with borders and border styling on
@@ -203,13 +272,15 @@ Feature: Atto tables
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I press "Create table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:1px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "border-style:dashed;"
@javascript
Scenario: Edit a table with background colour and width with borders and border styling on
@@ -240,13 +311,15 @@ Feature: Atto tables
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I press "Update table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:1px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "border-style:dashed;"
@javascript
Scenario: Create a table with background colour and width with borders, border styling, and border size on
@@ -276,14 +349,17 @@ Feature: Atto tables
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I set the field "Size of borders" to "2"
And I press "Create table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:2px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "border-style:dashed;"
And I should see "border-width:2px;"
@javascript
Scenario: Edit a table with background colour and width with borders, border styling, and border size on
@@ -314,14 +390,17 @@ Feature: Atto tables
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I set the field "Size of borders" to "2"
And I press "Update table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:2px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "border-style:dashed;"
And I should see "border-width:2px;"
@javascript
Scenario: Create a table with all settings on
@@ -351,7 +430,7 @@ Feature: Atto tables
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I set the field "Size of borders" to "2"
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
And I press "Create table"
@@ -359,7 +438,11 @@ Feature: Atto tables
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:2px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "dashed"
And I should see "2px"
And I should see "rgb(255,255,255)"
@javascript
Scenario: Edit a table with background colour and width with borders, border styling, and border size on
@@ -387,15 +470,19 @@ Feature: Atto tables
Then ".moodle-dialogue-base .atto_form .bordercolour" "css_element" should exist
Then ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element" should exist
Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
And I set the field "Table width (in %)" to "100"
And I set the field "Borders" to "Around table"
And I set the field "Style of borders" to "dashed"
And I set the field "Style of borders" to "Dashed"
And I set the field "Size of borders" to "2"
And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
And I press "Update table"
And I press "Save changes"
And I follow "Edit"
And I click on "Show more buttons" "button"
And I click on "HTML" "button"
Then I should see "style=\"border:2px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
Then I should see "background-color:rgb(255,255,255);"
And I should see "width:100%;"
And I should see "dashed"
And I should see "2px"
And I should see "rgb(255,255,255)"
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
Vendored
+156 -121
View File
@@ -35,7 +35,7 @@ YUI.add('moodle-atto_table-button', function (Y, NAME) {
var COMPONENT = 'atto_table',
DEFAULT = {
BORDERSTYLE: 'solid',
BORDERSTYLE: 'inherit',
BORDERWIDTH: '1'
},
DIALOGUE = {
@@ -78,9 +78,8 @@ var COMPONENT = 'atto_table',
'<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
'{{#if allowBorders}}' +
'<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
'<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<option value="default">{{get_string "themedefault" component}}' + '</option>' +
'<option value="none">{{get_string "noborder" component}}' + '</option>' +
'<option value="outer">{{get_string "outer" component}}' + '</option>' +
'<option value="all">{{get_string "all" component}}' + '</option>' +
'</select>' +
@@ -88,9 +87,10 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderStyles}}' +
'<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
'{{get_string "borderstyles" component}}</label>' +
'<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<option value="inherit">{{get_string "inherit" component}}</option>' +
'{{#each borderStyles}}' +
'<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
'<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
'{{/each}}' +
'</select>' +
'<br>' +
@@ -98,7 +98,7 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderSize}}' +
'<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
'{{get_string "bordersize" component}}</label>' +
'<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'type="number" value="1" size="8" min="1" max="50"/>' +
'<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
'<br>' +
@@ -112,10 +112,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
'type="radio" name="borderColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="borderColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
'<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
@@ -140,10 +140,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="backgroundColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
@@ -289,6 +289,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Set the dialogue content, and then show the dialogue.
dialogue.set('bodyContent', this._getDialogueContent(false))
.show();
this._updateAvailableSettings();
}
},
@@ -334,7 +336,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_getDialogueContent: function(edit) {
var template = Y.Handlebars.compile(TEMPLATE);
var availableColours = this.get('availableColors');
var allowBorders = this.get('allowBorders');
this._content = Y.Node.create(template({
CSS: CSS,
@@ -343,13 +345,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
edit: edit,
nonedit: !edit,
allowStyling: this.get('allowStyling'),
allowBorders: this.get('allowBorders'),
allowBorders: allowBorders,
allowBorderStyles: this.get('allowBorderStyles'),
borderStyles: this.get('borderStyles'),
allowBorderSize: this.get('allowBorderSize'),
allowBorderColour: this.get('allowBorderColour'),
allowBackgroundColour: this.get('allowBackgroundColour'),
availableColours: availableColours,
availableColours: this.get('availableColors'),
allowWidth: this.get('allowWidth')
}));
@@ -360,9 +362,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._content.one('.submit').on('click', this._setTable, this);
}
if (allowBorders) {
this._content.one('[name="borders"]').on('change', this._updateAvailableSettings, this);
}
return this._content;
},
/**
* Disables options within the dialogue if they shouldn't be available.
* E.g.
* If borders are set to "Theme default" then the border size, style and
* colour options are disabled.
*
* @method _updateAvailableSettings
* @private
*/
_updateAvailableSettings: function() {
var tableForm = this._content,
enableBorders = tableForm.one('[name="borders"]'),
borderStyle = tableForm.one('[name="borderstyles"]'),
borderSize = tableForm.one('[name="bordersize"]'),
borderColour = tableForm.all('[name="borderColour"]'),
disabledValue = 'removeAttribute';
if (enableBorders.get('value') === 'default') {
disabledValue = 'setAttribute';
}
if (borderStyle) {
borderStyle[disabledValue]('disabled');
}
if (borderSize) {
borderSize[disabledValue]('disabled');
}
if (borderColour) {
borderColour[disabledValue]('disabled');
}
},
/**
* Given the current selection, return a table cell suitable for table editing
* purposes, i.e. the first table cell selected, or the first cell in the table
@@ -436,10 +477,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderstyle,
bordercolour,
backgroundcolour,
backgroundcolourvalue = '#FFFFFF',
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
table,
width,
captionnode;
@@ -461,51 +498,16 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (backgroundcolour) {
backgroundcolourvalue = backgroundcolour.get('value');
}
table = this._lastTarget.ancestor('table');
// Clear the inline border styling
table.removeAttribute('style');
table.all('td, th').each(function() {
this.removeAttribute('style');
this._setAppearance(table, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
if (borders) {
if (borders.get('value') === 'outer') {
table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
} else if (borders.get('value') === 'all') {
table.all('td, th').each(function() {
this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
});
} else if (borders.get('value') === 'none') {
table.setStyle('border', 'none');
}
}
if (width && width.get('value')) {
table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
}
if (backgroundcolourvalue !== '') {
table.setStyle('background-color', backgroundcolourvalue);
}
captionnode = table.one('caption');
if (!captionnode) {
captionnode = Y.Node.create('<caption></caption>');
@@ -589,14 +591,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var caption,
captionposition,
borders,
bordertable = '',
bordercell = '',
bordersize,
borderstyle,
bordercolour,
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
rows,
cols,
headers,
@@ -624,52 +621,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (borders) {
if (borders.get('value') === 'outer') {
bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
} else if (borders.get('value') === 'all') {
bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
}
}
if (backgroundcolour) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) +
'background-color: ' + backgroundcolour.get('value') + ';"';
} else {
bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
}
}
if (width && width.get('value')) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
width.get('value') + CSS.WIDTHUNIT + ';"';
} else {
bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
}
}
// Set the selection.
this.get('host').setSelection(this._currentSelection);
// 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' + bordertable + '>' + nl;
var tableId = Y.guid();
tablehtml = '<br/>' + nl + '<table id="' + tableId + '">' + nl;
var captionstyle = '';
if (captionposition.get('value')) {
@@ -681,7 +639,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
i = 1;
tablehtml += '<thead>' + nl + '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="col"></th>' + nl;
}
tablehtml += '</tr>' + nl + '</thead>' + nl;
}
@@ -690,9 +648,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
tablehtml += '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="row"></th>' + nl;
} else {
tablehtml += '<td ' + bordercell + '></td>' + nl;
tablehtml += '<td ></td>' + nl;
}
}
tablehtml += '</tr>' + nl;
@@ -702,6 +660,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.get('host').insertContentAtFocusPoint(tablehtml);
var tableNode = Y.one('#' + tableId);
this._setAppearance(tableNode, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
tableNode.removeAttribute('id');
// Mark the content as updated.
this.markUpdated();
},
@@ -1148,6 +1117,73 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Set the appropriate styles on the given table node according to
* the provided configuration.
*
* @method _setAppearance
* @param {Node} The table node to be modified.
* @param {Object} Configuration object (associative array) containing the form nodes for
* border styling.
* @private
*/
_setAppearance: function(tableNode, configuration) {
var borderhex,
borderSizeValue,
borderStyleValue,
backgroundcolourvalue;
if (configuration.borderColour) {
borderhex = configuration.borderColour.get('value');
}
if (configuration.borderSize) {
borderSizeValue = configuration.borderSize.get('value');
}
if (configuration.borderStyle) {
borderStyleValue = configuration.borderStyle.get('value');
}
if (configuration.backgroundColour) {
backgroundcolourvalue = configuration.backgroundColour.get('value');
}
// Clear the inline border styling
tableNode.removeAttribute('style');
tableNode.all('td, th').each(function(cell) {
cell.removeAttribute('style');
}, this);
if (configuration.borders) {
if (configuration.borders.get('value') === 'outer') {
tableNode.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
tableNode.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
tableNode.setStyle('borderColor', borderhex);
}
} else if (configuration.borders.get('value') === 'all') {
tableNode.all('td, th').each(function(cell) {
cell.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
cell.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
cell.setStyle('borderColor', borderhex);
}
}, this);
}
}
if (backgroundcolourvalue !== 'none') {
tableNode.setStyle('background-color', backgroundcolourvalue);
}
if (configuration.width && configuration.width.get('value')) {
tableNode.setStyle('width', configuration.width.get('value') + CSS.WIDTHUNIT);
}
},
/**
* Edit table (show the dialogue).
*
@@ -1174,7 +1210,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
width = node.one(SELECTORS.WIDTH),
table = this._lastTarget.ancestor('table'),
captionnode = table.one('caption');
captionnode = table.one('caption'),
hexColour,
matchedInput;
if (captionnode) {
captioninput.set('value', captionnode.getHTML());
@@ -1193,9 +1231,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
captionpositioninput.set('value', '');
}
if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
var hexColour = Y.Color.toHex(table.getStyle('background-color'));
var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (table.getStyle('background-color') && this.get('allowBackgroundColour')) {
hexColour = Y.Color.toHex(table.getStyle('background-color'));
matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1207,11 +1245,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderConfiguration = this._getBorderConfiguration(table);
if (borderConfiguration) {
if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
borderValue = 'none';
} else {
borderValue = 'outer';
}
borderValue = 'outer';
} else {
borderConfiguration = this._getBorderConfiguration(table.one('td'));
if (borderConfiguration) {
@@ -1226,8 +1260,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
bordersize.set('value', borderSize);
borderinput.set('value', borderValue);
var hexColour = borderConfiguration.borderColor;
var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
hexColour = borderConfiguration.borderColor;
matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1244,6 +1278,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
headersinput.set('value', headersvalue);
dialogue.set('bodyContent', node).show();
this._updateAvailableSettings();
},
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
Vendored
+156 -121
View File
@@ -35,7 +35,7 @@ YUI.add('moodle-atto_table-button', function (Y, NAME) {
var COMPONENT = 'atto_table',
DEFAULT = {
BORDERSTYLE: 'solid',
BORDERSTYLE: 'inherit',
BORDERWIDTH: '1'
},
DIALOGUE = {
@@ -78,9 +78,8 @@ var COMPONENT = 'atto_table',
'<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
'{{#if allowBorders}}' +
'<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
'<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<option value="default">{{get_string "themedefault" component}}' + '</option>' +
'<option value="none">{{get_string "noborder" component}}' + '</option>' +
'<option value="outer">{{get_string "outer" component}}' + '</option>' +
'<option value="all">{{get_string "all" component}}' + '</option>' +
'</select>' +
@@ -88,9 +87,10 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderStyles}}' +
'<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
'{{get_string "borderstyles" component}}</label>' +
'<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<option value="inherit">{{get_string "inherit" component}}</option>' +
'{{#each borderStyles}}' +
'<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
'<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
'{{/each}}' +
'</select>' +
'<br>' +
@@ -98,7 +98,7 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderSize}}' +
'<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
'{{get_string "bordersize" component}}</label>' +
'<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'type="number" value="1" size="8" min="1" max="50"/>' +
'<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
'<br>' +
@@ -112,10 +112,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
'type="radio" name="borderColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="borderColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
'<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
@@ -140,10 +140,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="backgroundColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
@@ -289,6 +289,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Set the dialogue content, and then show the dialogue.
dialogue.set('bodyContent', this._getDialogueContent(false))
.show();
this._updateAvailableSettings();
}
},
@@ -334,7 +336,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_getDialogueContent: function(edit) {
var template = Y.Handlebars.compile(TEMPLATE);
var availableColours = this.get('availableColors');
var allowBorders = this.get('allowBorders');
this._content = Y.Node.create(template({
CSS: CSS,
@@ -343,13 +345,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
edit: edit,
nonedit: !edit,
allowStyling: this.get('allowStyling'),
allowBorders: this.get('allowBorders'),
allowBorders: allowBorders,
allowBorderStyles: this.get('allowBorderStyles'),
borderStyles: this.get('borderStyles'),
allowBorderSize: this.get('allowBorderSize'),
allowBorderColour: this.get('allowBorderColour'),
allowBackgroundColour: this.get('allowBackgroundColour'),
availableColours: availableColours,
availableColours: this.get('availableColors'),
allowWidth: this.get('allowWidth')
}));
@@ -360,9 +362,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._content.one('.submit').on('click', this._setTable, this);
}
if (allowBorders) {
this._content.one('[name="borders"]').on('change', this._updateAvailableSettings, this);
}
return this._content;
},
/**
* Disables options within the dialogue if they shouldn't be available.
* E.g.
* If borders are set to "Theme default" then the border size, style and
* colour options are disabled.
*
* @method _updateAvailableSettings
* @private
*/
_updateAvailableSettings: function() {
var tableForm = this._content,
enableBorders = tableForm.one('[name="borders"]'),
borderStyle = tableForm.one('[name="borderstyles"]'),
borderSize = tableForm.one('[name="bordersize"]'),
borderColour = tableForm.all('[name="borderColour"]'),
disabledValue = 'removeAttribute';
if (enableBorders.get('value') === 'default') {
disabledValue = 'setAttribute';
}
if (borderStyle) {
borderStyle[disabledValue]('disabled');
}
if (borderSize) {
borderSize[disabledValue]('disabled');
}
if (borderColour) {
borderColour[disabledValue]('disabled');
}
},
/**
* Given the current selection, return a table cell suitable for table editing
* purposes, i.e. the first table cell selected, or the first cell in the table
@@ -436,10 +477,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderstyle,
bordercolour,
backgroundcolour,
backgroundcolourvalue = '#FFFFFF',
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
table,
width,
captionnode;
@@ -461,51 +498,16 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (backgroundcolour) {
backgroundcolourvalue = backgroundcolour.get('value');
}
table = this._lastTarget.ancestor('table');
// Clear the inline border styling
table.removeAttribute('style');
table.all('td, th').each(function() {
this.removeAttribute('style');
this._setAppearance(table, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
if (borders) {
if (borders.get('value') === 'outer') {
table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
} else if (borders.get('value') === 'all') {
table.all('td, th').each(function() {
this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
});
} else if (borders.get('value') === 'none') {
table.setStyle('border', 'none');
}
}
if (width && width.get('value')) {
table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
}
if (backgroundcolourvalue !== '') {
table.setStyle('background-color', backgroundcolourvalue);
}
captionnode = table.one('caption');
if (!captionnode) {
captionnode = Y.Node.create('<caption></caption>');
@@ -589,14 +591,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var caption,
captionposition,
borders,
bordertable = '',
bordercell = '',
bordersize,
borderstyle,
bordercolour,
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
rows,
cols,
headers,
@@ -624,52 +621,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (borders) {
if (borders.get('value') === 'outer') {
bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
} else if (borders.get('value') === 'all') {
bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
}
}
if (backgroundcolour) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) +
'background-color: ' + backgroundcolour.get('value') + ';"';
} else {
bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
}
}
if (width && width.get('value')) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
width.get('value') + CSS.WIDTHUNIT + ';"';
} else {
bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
}
}
// Set the selection.
this.get('host').setSelection(this._currentSelection);
// 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' + bordertable + '>' + nl;
var tableId = Y.guid();
tablehtml = '<br/>' + nl + '<table id="' + tableId + '">' + nl;
var captionstyle = '';
if (captionposition.get('value')) {
@@ -681,7 +639,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
i = 1;
tablehtml += '<thead>' + nl + '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="col"></th>' + nl;
}
tablehtml += '</tr>' + nl + '</thead>' + nl;
}
@@ -690,9 +648,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
tablehtml += '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="row"></th>' + nl;
} else {
tablehtml += '<td ' + bordercell + '></td>' + nl;
tablehtml += '<td ></td>' + nl;
}
}
tablehtml += '</tr>' + nl;
@@ -702,6 +660,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.get('host').insertContentAtFocusPoint(tablehtml);
var tableNode = Y.one('#' + tableId);
this._setAppearance(tableNode, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
tableNode.removeAttribute('id');
// Mark the content as updated.
this.markUpdated();
},
@@ -1148,6 +1117,73 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Set the appropriate styles on the given table node according to
* the provided configuration.
*
* @method _setAppearance
* @param {Node} The table node to be modified.
* @param {Object} Configuration object (associative array) containing the form nodes for
* border styling.
* @private
*/
_setAppearance: function(tableNode, configuration) {
var borderhex,
borderSizeValue,
borderStyleValue,
backgroundcolourvalue;
if (configuration.borderColour) {
borderhex = configuration.borderColour.get('value');
}
if (configuration.borderSize) {
borderSizeValue = configuration.borderSize.get('value');
}
if (configuration.borderStyle) {
borderStyleValue = configuration.borderStyle.get('value');
}
if (configuration.backgroundColour) {
backgroundcolourvalue = configuration.backgroundColour.get('value');
}
// Clear the inline border styling
tableNode.removeAttribute('style');
tableNode.all('td, th').each(function(cell) {
cell.removeAttribute('style');
}, this);
if (configuration.borders) {
if (configuration.borders.get('value') === 'outer') {
tableNode.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
tableNode.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
tableNode.setStyle('borderColor', borderhex);
}
} else if (configuration.borders.get('value') === 'all') {
tableNode.all('td, th').each(function(cell) {
cell.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
cell.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
cell.setStyle('borderColor', borderhex);
}
}, this);
}
}
if (backgroundcolourvalue !== 'none') {
tableNode.setStyle('background-color', backgroundcolourvalue);
}
if (configuration.width && configuration.width.get('value')) {
tableNode.setStyle('width', configuration.width.get('value') + CSS.WIDTHUNIT);
}
},
/**
* Edit table (show the dialogue).
*
@@ -1174,7 +1210,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
width = node.one(SELECTORS.WIDTH),
table = this._lastTarget.ancestor('table'),
captionnode = table.one('caption');
captionnode = table.one('caption'),
hexColour,
matchedInput;
if (captionnode) {
captioninput.set('value', captionnode.getHTML());
@@ -1193,9 +1231,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
captionpositioninput.set('value', '');
}
if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
var hexColour = Y.Color.toHex(table.getStyle('background-color'));
var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (table.getStyle('background-color') && this.get('allowBackgroundColour')) {
hexColour = Y.Color.toHex(table.getStyle('background-color'));
matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1207,11 +1245,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderConfiguration = this._getBorderConfiguration(table);
if (borderConfiguration) {
if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
borderValue = 'none';
} else {
borderValue = 'outer';
}
borderValue = 'outer';
} else {
borderConfiguration = this._getBorderConfiguration(table.one('td'));
if (borderConfiguration) {
@@ -1226,8 +1260,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
bordersize.set('value', borderSize);
borderinput.set('value', borderValue);
var hexColour = borderConfiguration.borderColor;
var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
hexColour = borderConfiguration.borderColor;
matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1244,6 +1278,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
headersinput.set('value', headersvalue);
dialogue.set('bodyContent', node).show();
this._updateAvailableSettings();
},
lib/editor/atto/plugins/table/yui/src/button/js/button.js
Vendored
+156 -121
View File
@@ -33,7 +33,7 @@
var COMPONENT = 'atto_table',
DEFAULT = {
BORDERSTYLE: 'solid',
BORDERSTYLE: 'inherit',
BORDERWIDTH: '1'
},
DIALOGUE = {
@@ -76,9 +76,8 @@ var COMPONENT = 'atto_table',
'<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
'{{#if allowBorders}}' +
'<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
'<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<select name="borders" class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
'<option value="default">{{get_string "themedefault" component}}' + '</option>' +
'<option value="none">{{get_string "noborder" component}}' + '</option>' +
'<option value="outer">{{get_string "outer" component}}' + '</option>' +
'<option value="all">{{get_string "all" component}}' + '</option>' +
'</select>' +
@@ -86,9 +85,10 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderStyles}}' +
'<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
'{{get_string "borderstyles" component}}</label>' +
'<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<select name="borderstyles" class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
'<option value="inherit">{{get_string "inherit" component}}</option>' +
'{{#each borderStyles}}' +
'<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
'<option value="' + '{{this}}' + '">' + '{{get_string this ../component}}' + '</option>' +
'{{/each}}' +
'</select>' +
'<br>' +
@@ -96,7 +96,7 @@ var COMPONENT = 'atto_table',
'{{#if allowBorderSize}}' +
'<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
'{{get_string "bordersize" component}}</label>' +
'<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'<input name="bordersize" id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
'type="number" value="1" size="8" min="1" max="50"/>' +
'<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
'<br>' +
@@ -110,10 +110,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
'type="radio" name="borderColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="borderColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
'<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
@@ -138,10 +138,10 @@ var COMPONENT = 'atto_table',
'style="background-color:transparent;color:transparent">' +
'<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
'title="{{get_string "transparent" component}}"></input>' +
'type="radio" name="backgroundColour" value="none" checked="checked"'+
'title="{{get_string "themedefault" component}}"></input>' +
'{{get_string "transparent" component}}' +
'{{get_string "themedefault" component}}' +
'</label>' +
'{{#each availableColours}}' +
@@ -287,6 +287,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Set the dialogue content, and then show the dialogue.
dialogue.set('bodyContent', this._getDialogueContent(false))
.show();
this._updateAvailableSettings();
}
},
@@ -332,7 +334,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_getDialogueContent: function(edit) {
var template = Y.Handlebars.compile(TEMPLATE);
var availableColours = this.get('availableColors');
var allowBorders = this.get('allowBorders');
this._content = Y.Node.create(template({
CSS: CSS,
@@ -341,13 +343,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
edit: edit,
nonedit: !edit,
allowStyling: this.get('allowStyling'),
allowBorders: this.get('allowBorders'),
allowBorders: allowBorders,
allowBorderStyles: this.get('allowBorderStyles'),
borderStyles: this.get('borderStyles'),
allowBorderSize: this.get('allowBorderSize'),
allowBorderColour: this.get('allowBorderColour'),
allowBackgroundColour: this.get('allowBackgroundColour'),
availableColours: availableColours,
availableColours: this.get('availableColors'),
allowWidth: this.get('allowWidth')
}));
@@ -358,9 +360,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._content.one('.submit').on('click', this._setTable, this);
}
if (allowBorders) {
this._content.one('[name="borders"]').on('change', this._updateAvailableSettings, this);
}
return this._content;
},
/**
* Disables options within the dialogue if they shouldn't be available.
* E.g.
* If borders are set to "Theme default" then the border size, style and
* colour options are disabled.
*
* @method _updateAvailableSettings
* @private
*/
_updateAvailableSettings: function() {
var tableForm = this._content,
enableBorders = tableForm.one('[name="borders"]'),
borderStyle = tableForm.one('[name="borderstyles"]'),
borderSize = tableForm.one('[name="bordersize"]'),
borderColour = tableForm.all('[name="borderColour"]'),
disabledValue = 'removeAttribute';
if (enableBorders.get('value') === 'default') {
disabledValue = 'setAttribute';
}
if (borderStyle) {
borderStyle[disabledValue]('disabled');
}
if (borderSize) {
borderSize[disabledValue]('disabled');
}
if (borderColour) {
borderColour[disabledValue]('disabled');
}
},
/**
* Given the current selection, return a table cell suitable for table editing
* purposes, i.e. the first table cell selected, or the first cell in the table
@@ -434,10 +475,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderstyle,
bordercolour,
backgroundcolour,
backgroundcolourvalue = '#FFFFFF',
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
table,
width,
captionnode;
@@ -459,51 +496,16 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (backgroundcolour) {
backgroundcolourvalue = backgroundcolour.get('value');
}
table = this._lastTarget.ancestor('table');
// Clear the inline border styling
table.removeAttribute('style');
table.all('td, th').each(function() {
this.removeAttribute('style');
this._setAppearance(table, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
if (borders) {
if (borders.get('value') === 'outer') {
table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
} else if (borders.get('value') === 'all') {
table.all('td, th').each(function() {
this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex);
});
} else if (borders.get('value') === 'none') {
table.setStyle('border', 'none');
}
}
if (width && width.get('value')) {
table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
}
if (backgroundcolourvalue !== '') {
table.setStyle('background-color', backgroundcolourvalue);
}
captionnode = table.one('caption');
if (!captionnode) {
captionnode = Y.Node.create('<caption></caption>');
@@ -587,14 +589,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var caption,
captionposition,
borders,
bordertable = '',
bordercell = '',
bordersize,
borderstyle,
bordercolour,
borderSizeValue = '1',
borderStyleValue = 'solid',
borderhex = '#FFFFFF',
rows,
cols,
headers,
@@ -622,52 +619,13 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
if (bordercolour) {
borderhex = bordercolour.get('value');
}
if (bordersize) {
borderSizeValue = bordersize.get('value');
}
if (borderstyle) {
borderStyleValue = borderstyle.get('value');
}
if (borders) {
if (borders.get('value') === 'outer') {
bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
} else if (borders.get('value') === 'all') {
bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
borderStyleValue + ' ' + borderhex + ';"';
}
}
if (backgroundcolour) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) +
'background-color: ' + backgroundcolour.get('value') + ';"';
} else {
bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
}
}
if (width && width.get('value')) {
if (bordertable !== '') {
bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
width.get('value') + CSS.WIDTHUNIT + ';"';
} else {
bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
}
}
// Set the selection.
this.get('host').setSelection(this._currentSelection);
// 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' + bordertable + '>' + nl;
var tableId = Y.guid();
tablehtml = '<br/>' + nl + '<table id="' + tableId + '">' + nl;
var captionstyle = '';
if (captionposition.get('value')) {
@@ -679,7 +637,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
i = 1;
tablehtml += '<thead>' + nl + '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="col"></th>' + nl;
}
tablehtml += '</tr>' + nl + '</thead>' + nl;
}
@@ -688,9 +646,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
tablehtml += '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
tablehtml += '<th scope="row"></th>' + nl;
} else {
tablehtml += '<td ' + bordercell + '></td>' + nl;
tablehtml += '<td ></td>' + nl;
}
}
tablehtml += '</tr>' + nl;
@@ -700,6 +658,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.get('host').insertContentAtFocusPoint(tablehtml);
var tableNode = Y.one('#' + tableId);
this._setAppearance(tableNode, {
width: width,
borders: borders,
borderColour: bordercolour,
borderSize: bordersize,
borderStyle: borderstyle,
backgroundColour: backgroundcolour
});
tableNode.removeAttribute('id');
// Mark the content as updated.
this.markUpdated();
},
@@ -1146,6 +1115,73 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
return false;
},
/**
* Set the appropriate styles on the given table node according to
* the provided configuration.
*
* @method _setAppearance
* @param {Node} The table node to be modified.
* @param {Object} Configuration object (associative array) containing the form nodes for
* border styling.
* @private
*/
_setAppearance: function(tableNode, configuration) {
var borderhex,
borderSizeValue,
borderStyleValue,
backgroundcolourvalue;
if (configuration.borderColour) {
borderhex = configuration.borderColour.get('value');
}
if (configuration.borderSize) {
borderSizeValue = configuration.borderSize.get('value');
}
if (configuration.borderStyle) {
borderStyleValue = configuration.borderStyle.get('value');
}
if (configuration.backgroundColour) {
backgroundcolourvalue = configuration.backgroundColour.get('value');
}
// Clear the inline border styling
tableNode.removeAttribute('style');
tableNode.all('td, th').each(function(cell) {
cell.removeAttribute('style');
}, this);
if (configuration.borders) {
if (configuration.borders.get('value') === 'outer') {
tableNode.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
tableNode.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
tableNode.setStyle('borderColor', borderhex);
}
} else if (configuration.borders.get('value') === 'all') {
tableNode.all('td, th').each(function(cell) {
cell.setStyle('borderWidth', borderSizeValue + CSS.BORDERSIZEUNIT);
cell.setStyle('borderStyle', borderStyleValue);
if (borderhex !== 'none') {
cell.setStyle('borderColor', borderhex);
}
}, this);
}
}
if (backgroundcolourvalue !== 'none') {
tableNode.setStyle('background-color', backgroundcolourvalue);
}
if (configuration.width && configuration.width.get('value')) {
tableNode.setStyle('width', configuration.width.get('value') + CSS.WIDTHUNIT);
}
},
/**
* Edit table (show the dialogue).
*
@@ -1172,7 +1208,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
width = node.one(SELECTORS.WIDTH),
table = this._lastTarget.ancestor('table'),
captionnode = table.one('caption');
captionnode = table.one('caption'),
hexColour,
matchedInput;
if (captionnode) {
captioninput.set('value', captionnode.getHTML());
@@ -1191,9 +1229,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
captionpositioninput.set('value', '');
}
if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
var hexColour = Y.Color.toHex(table.getStyle('background-color'));
var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (table.getStyle('background-color') && this.get('allowBackgroundColour')) {
hexColour = Y.Color.toHex(table.getStyle('background-color'));
matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1205,11 +1243,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
borderConfiguration = this._getBorderConfiguration(table);
if (borderConfiguration) {
if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
borderValue = 'none';
} else {
borderValue = 'outer';
}
borderValue = 'outer';
} else {
borderConfiguration = this._getBorderConfiguration(table.one('td'));
if (borderConfiguration) {
@@ -1224,8 +1258,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
bordersize.set('value', borderSize);
borderinput.set('value', borderValue);
var hexColour = borderConfiguration.borderColor;
var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
hexColour = borderConfiguration.borderColor;
matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
if (matchedInput) {
matchedInput.set("checked", true);
@@ -1242,6 +1276,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
headersinput.set('value', headersvalue);
dialogue.set('bodyContent', node).show();
this._updateAvailableSettings();
},