*/
var COMPONENT = 'atto_table',
- EDITTEMPLATE = '' +
- '<form class="{{CSS.FORM}}">' +
- '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
- '<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>' +
- '<option value="rows">{{get_string "rows" component}}' + '</option>' +
- '<option value="both">{{get_string "both" component}}' + '</option>' +
- '</select>' +
- '<br/>' +
- '<div class="mdl-align">' +
- '<br/>' +
- '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
- '</div>' +
- '</form>',
+ DEFAULT = {
+ BORDERSTYLE: 'solid',
+ BORDERWIDTH: '1'
+ },
+ DIALOGUE = {
+ WIDTH: '450px'
+ },
TEMPLATE = '' +
'<form class="{{CSS.FORM}}">' +
'<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
'<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>' +
+ '<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="both">{{get_string "both" component}}' + '</option>' +
'</select>' +
'<br/>' +
- '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
- '<input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
- '<br/>' +
- '<label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label>' +
- '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns" ' +
- 'size="8" min="1" max="20"/>' +
- '<br/>' +
- '<div class="mdl-align">' +
+ '{{#if nonedit}}' +
+ '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
+ '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+ 'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
+ '<br/>' +
+ '<label for="{{elementid}}_atto_table_columns" ' +
+ 'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
+ '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+ 'size="8" min="1" max="20"/>' +
'<br/>' +
- '<button class="{{CSS.SUBMIT}}" type="submit">{{get_string "createtable" component}}</button>' +
+ '{{/if}}' +
+ '{{#if allowStyling}}' +
+ '<fieldset>' +
+ '<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">' +
+ '<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>' +
+ '<br>' +
+ '{{#if allowBorderStyles}}' +
+ '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+ '{{get_string "borderstyles" component}}</label>' +
+ '<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+ '{{#each borderStyles}}' +
+ '<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
+ '{{/each}}' +
+ '</select>' +
+ '<br>' +
+ '{{/if}}' +
+ '{{#if allowBorderSize}}' +
+ '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+ '{{get_string "bordersize" component}}</label>' +
+ '<input 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>' +
+ '{{/if}}' +
+ '{{#if allowBorderColour}}' +
+ '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+ '{{get_string "bordercolour" component}}</label>' +
+ '<div id="{{elementid}}_atto_table_bordercolour"' +
+ 'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+ '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
+ '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>' +
+
+ '{{get_string "transparent" component}}' +
+ '</label>' +
+ '{{#each availableColours}}' +
+ '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+ 'style="background-color:{{this}};color:{{this}}">' +
+
+ '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+ 'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+ '{{this}}' +
+ '</label>' +
+ '{{/each}}' +
+ '</div>' +
+ '<br>' +
+ '{{/if}}' +
+ '{{/if}}' +
+ '{{#if allowBackgroundColour}}' +
+ '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+ '{{get_string "backgroundcolour" component}}</label>' +
+ '<div id="{{elementid}}_atto_table_backgroundcolour"' +
+ 'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+ '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+ '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>' +
+
+ '{{get_string "transparent" component}}' +
+ '</label>' +
+
+ '{{#each availableColours}}' +
+ '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+ 'style="background-color:{{this}};color:{{this}}">'+
+
+ '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+ 'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+ '{{this}}' +
+ '</label>' +
+ '{{/each}}' +
+ '</div>' +
+ '<br>' +
+ '{{/if}}' +
+ '{{#if allowWidth}}' +
+ '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+ '{{get_string "width" component}}</label>' +
+ '<input id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/>' +
+ '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
+ '<br>' +
+ '{{/if}}' +
+ '</fieldset>' +
+ '{{/if}}' +
+ '<div class="mdl-align">' +
+ '<br/>' +
+ '{{#if edit}}' +
+ '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+ '{{/if}}' +
+ '{{#if nonedit}}' +
+ '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+ '{{/if}}' +
'</div>' +
'</form>',
CSS = {
ROWS: 'rows',
COLUMNS: 'columns',
SUBMIT: 'submit',
- FORM: 'atto_form'
+ FORM: 'atto_form',
+ BORDERS: 'borders',
+ BORDERSIZE: 'bordersize',
+ BORDERSIZEUNIT: 'px',
+ BORDERCOLOUR: 'bordercolour',
+ BORDERSTYLE: 'borderstyle',
+ BACKGROUNDCOLOUR: 'backgroundcolour',
+ WIDTH: 'customwidth',
+ WIDTHUNIT: '%',
+ AVAILABLECOLORS: 'availablecolors',
+ COLOURROW: 'colourrow'
},
SELECTORS = {
CAPTION: '.' + CSS.CAPTION,
ROWS: '.' + CSS.ROWS,
COLUMNS: '.' + CSS.COLUMNS,
SUBMIT: '.' + CSS.SUBMIT,
- FORM: '.atto_form'
+ BORDERS: '.' + CSS.BORDERS,
+ BORDERSIZE: '.' + CSS.BORDERSIZE,
+ BORDERCOLOURS: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]',
+ SELECTEDBORDERCOLOUR: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]:checked',
+ BORDERSTYLE: '.' + CSS.BORDERSTYLE,
+ BACKGROUNDCOLOURS: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]',
+ SELECTEDBACKGROUNDCOLOUR: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]:checked',
+ FORM: '.atto_form',
+ WIDTH: '.' + CSS.WIDTH,
+ AVAILABLECOLORS: '.' + CSS.AVAILABLECOLORS
};
Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
callback: this._displayTableEditor,
tags: 'table'
});
-
// Disable mozilla table controls.
if (Y.UA.gecko) {
document.execCommand("enableInlineTableEditing", false, false);
var dialogue = this.getDialogue({
headerContent: M.util.get_string('createtable', COMPONENT),
focusAfterHide: true,
- focusOnShowSelector: SELECTORS.CAPTION
+ focusOnShowSelector: SELECTORS.CAPTION,
+ width: DIALOGUE.WIDTH
});
// Set the dialogue content, and then show the dialogue.
- dialogue.set('bodyContent', this._getDialogueContent())
+ dialogue.set('bodyContent', this._getDialogueContent(false))
.show();
}
},
this.editor.contains(node);
},
- /**
- * Return the edit table dialogue content, attaching any required
- * events.
- *
- * @method _getEditDialogueContent
- * @private
- * @return {Node} The content to place in the dialogue.
- */
- _getEditDialogueContent: function() {
- var template = Y.Handlebars.compile(EDITTEMPLATE);
- this._content = Y.Node.create(template({
- CSS: CSS,
- elementid: this.get('host').get('elementid'),
- component: COMPONENT
- }));
-
- // Handle table setting.
- this._content.one('.submit').on('click', this._updateTable, this);
-
- return this._content;
- },
-
/**
* Return the dialogue content for the tool, attaching any required
* events.
* @private
* @return {Node} The content to place in the dialogue.
*/
- _getDialogueContent: function() {
+ _getDialogueContent: function(edit) {
var template = Y.Handlebars.compile(TEMPLATE);
+ var availableColours = this.get('availableColors');
+
this._content = Y.Node.create(template({
CSS: CSS,
elementid: this.get('host').get('elementid'),
- component: COMPONENT
+ component: COMPONENT,
+ edit: edit,
+ nonedit: !edit,
+ allowStyling: this.get('allowStyling'),
+ allowBorders: this.get('allowBorders'),
+ allowBorderStyles: this.get('allowBorderStyles'),
+ borderStyles: this.get('borderStyles'),
+ allowBorderSize: this.get('allowBorderSize'),
+ allowBorderColour: this.get('allowBorderColour'),
+ allowBackgroundColour: this.get('allowBackgroundColour'),
+ availableColours: availableColours,
+ allowWidth: this.get('allowWidth')
}));
// Handle table setting.
- this._content.one('.submit').on('click', this._setTable, this);
+ if (edit) {
+ this._content.one('.submit').on('click', this._updateTable, this);
+ } else {
+ this._content.one('.submit').on('click', this._setTable, this);
+ }
return this._content;
},
var caption,
captionposition,
headers,
+ borders,
+ bordersize,
+ borderstyle,
+ bordercolour,
+ backgroundcolour,
+ backgroundcolourvalue = '#FFFFFF',
+ borderSizeValue = '1',
+ borderStyleValue = 'solid',
+ borderhex = '#FFFFFF',
table,
+ width,
captionnode;
e.preventDefault();
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);
+ borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+ bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+ bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+ borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+ 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');
+ });
+
+ 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) {
_setTable: function(e) {
var caption,
captionposition,
+ borders,
+ bordertable = '',
+ bordercell = '',
+ bordersize,
+ borderstyle,
+ bordercolour,
+ borderSizeValue = '1',
+ borderStyleValue = 'solid',
+ borderhex = '#FFFFFF',
rows,
cols,
headers,
tablehtml,
+ backgroundcolour,
+ width,
i, j;
e.preventDefault();
caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
+ borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+ bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+ bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+ borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+ backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
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);
+ 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>' + nl;
+ tablehtml = '<br/>' + nl + '<table' + bordertable + '>' + nl;
var captionstyle = '';
if (captionposition.get('value')) {
i = 1;
tablehtml += '<thead>' + nl + '<tr>' + nl;
for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
- tablehtml += '<th scope="col"></th>' + nl;
+ tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
}
tablehtml += '</tr>' + nl + '</thead>' + nl;
}
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"></th>' + nl;
+ tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
} else {
- tablehtml += '<td></td>' + nl;
+ tablehtml += '<td ' + bordercell + '></td>' + nl;
}
}
tablehtml += '</tr>' + nl;
this.markUpdated();
},
+ /**
+ * Obtain values for the table borders
+ *
+ * @method _getBorderConfiguration
+ * @param {Node} node
+ * @private
+ * @return {Array} or {Boolean} Returns the settings, if presents, or else returns false
+ */
+ _getBorderConfiguration: function(node) {
+ // We need to make a clone of the node in order to avoid grabbing any
+ // of the computed styles from the DOM. We only want inline styles set by us.
+ var shadowNode = node.cloneNode(true);
+ var borderStyle = shadowNode.getStyle('borderStyle'),
+ borderColor = shadowNode.getStyle('borderColor'),
+ borderWidth = shadowNode.getStyle('borderWidth');
+
+ if (borderStyle || borderColor || borderWidth) {
+ var hexColour = Y.Color.toHex(borderColor);
+ var width = parseInt(borderWidth, 10);
+ return {
+ borderStyle: borderStyle,
+ borderColor: hexColour === "#" ? null : hexColour,
+ borderWidth: isNaN(width) ? null : width
+ };
+ }
+
+ return false;
+ },
+
/**
* Edit table (show the dialogue).
*
var dialogue = this.getDialogue({
headerContent: M.util.get_string('edittable', COMPONENT),
focusAfterHide: false,
- focusOnShowSelector: SELECTORS.CAPTION
+ focusOnShowSelector: SELECTORS.CAPTION,
+ width: DIALOGUE.WIDTH
});
// Set the dialogue content, and then show the dialogue.
- var node = this._getEditDialogueContent(),
+ var node = this._getDialogueContent(true),
captioninput = node.one(SELECTORS.CAPTION),
captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
headersinput = node.one(SELECTORS.HEADERS),
+ borderinput = node.one(SELECTORS.BORDERS),
+ borderstyle = node.one(SELECTORS.BORDERSTYLE),
+ bordercolours = node.all(SELECTORS.BORDERCOLOURS),
+ bordersize = node.one(SELECTORS.BORDERSIZE),
+ backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
+ width = node.one(SELECTORS.WIDTH),
table = this._lastTarget.ancestor('table'),
captionnode = table.one('caption');
captioninput.set('value', '');
}
+ if (width && table.getStyle('width').indexOf('px') === -1) {
+ width.set('value', parseInt(table.getStyle('width'), 10));
+ }
+
if (captionpositioninput && captionnode && captionnode.getAttribute('style')) {
captionpositioninput.set('value', captionnode.getStyle('caption-side'));
} else {
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 (matchedInput) {
+ matchedInput.set("checked", true);
+ }
+ }
+
+ if (this.get('allowBorders')) {
+ var borderValue = 'default',
+ borderConfiguration = this._getBorderConfiguration(table);
+
+ if (borderConfiguration) {
+ if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
+ borderValue = 'none';
+ } else {
+ borderValue = 'outer';
+ }
+ } else {
+ borderConfiguration = this._getBorderConfiguration(table.one('td'));
+ if (borderConfiguration) {
+ borderValue = 'all';
+ }
+ }
+
+ if (borderConfiguration) {
+ var borderStyle = borderConfiguration.borderStyle || DEFAULT.BORDERSTYLE;
+ var borderSize = borderConfiguration.borderWidth || DEFAULT.BORDERWIDTH;
+ borderstyle.set('value', borderStyle);
+ bordersize.set('value', borderSize);
+ borderinput.set('value', borderValue);
+
+ var hexColour = borderConfiguration.borderColor;
+ var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
+
+ if (matchedInput) {
+ matchedInput.set("checked", true);
+ }
+ }
+ }
+
var headersvalue = 'columns';
if (table.one('th[scope="row"]')) {
headersvalue = 'rows';
this.markUpdated();
}
+}, {
+ ATTRS: {
+ /**
+ * Whether or not to allow borders
+ *
+ * @attribute allowBorder
+ * @type Boolean
+ */
+ allowBorders: {
+ value: true
+ },
+
+ /**
+ * Whether or not to allow style of borders
+ *
+ * @attribute allowBorderStyle
+ * @type Boolean
+ */
+ allowBorderStyles: {
+ value: true
+ },
+
+ /**
+ * What border styles to allow
+ *
+ * @attribute borderStyles
+ * @type Array
+ */
+ borderStyles: {
+ value: [
+ 'solid',
+ 'dashed',
+ 'dotted'
+ ],
+ setter: function(value) {
+ if (value) {
+ return value.replace(/ /g,'').split(',');
+ } else {
+ // Not a valid value - revert to default value.
+ return Y.Attribute.INVALID_VALUE;
+ }
+ }
+ },
+
+ /**
+ * Whether or not to allow border size
+ *
+ * @attribute allowBorderSize
+ * @type Boolean
+ */
+ allowBorderSize: {
+ value: true
+ },
+
+ /**
+ * Whether or not to allow colourizing borders
+ *
+ * @attribute allowBorderColours
+ * @type Boolean
+ */
+ allowBorderColour: {
+ value: true
+ },
+
+ /**
+ * Whether or not to allow colourizing the background
+ *
+ * @attribute allowBackgroundColour
+ * @type Boolean
+ */
+ allowBackgroundColour: {
+ value: true
+ },
+
+ /**
+ * Whether or not to allow setting the table width
+ *
+ * @attribute allowWidth
+ * @type Boolean
+ */
+ allowWidth: {
+ value: true
+ },
+
+ /**
+ * Whether we allow styling
+ * @attribute allowStyling
+ * @type Boolean
+ */
+ allowStyling: {
+ readOnly: true,
+ getter: function() {
+ return this.get('allowBorders') || this.get('allowBackgroundColour') || this.get('allowWidth');
+ }
+ },
+
+ /**
+ * Available colors
+ * @attribute availableColors
+ * @type Array
+ */
+ availableColors: {
+ value: [
+ '#FFFFFF',
+ '#EF4540',
+ '#FFCF35',
+ '#98CA3E',
+ '#7D9FD3',
+ '#333333'
+ ],
+ readOnly: true
+ }
+ }
});
