@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
189 lines (188 loc) • 8.13 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { RibbonGroupBase } from '../ribbon-interfaces';
import { RibbonItemType, ItemOrientation } from '@syncfusion/ej2-ribbon';
export var TABLE_OPERATIONS_GROUP_ID = '_table_operations_group';
export var SELECT_DROPDOWN_ID = '_select_dropdown';
export var DELETE_DROPDOWN_ID = '_delete_dropdown';
export var INSERT_DROPDOWN_ID = '_insert_dropdown';
/**
* Represents the Table Operations Group in Table Layout tab
* @private
*/
var TableOperationsGroup = /** @class */ (function (_super) {
__extends(TableOperationsGroup, _super);
/**
* Constructor for the TableOperationsGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function TableOperationsGroup(container) {
return _super.call(this, container) || this;
}
/**
* Gets the ribbon group model for Table Operations
* @returns {RibbonGroupModel} The ribbon group model
*/
TableOperationsGroup.prototype.getGroupModel = function () {
return {
id: this.ribbonId + TABLE_OPERATIONS_GROUP_ID,
header: this.localObj.getConstant('Rows & Columns'),
orientation: ItemOrientation.Row,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Rows & Columns'),
collections: [
{
items: [
this.getSelectDropDown(),
this.getDeleteDropDown(),
this.getInsertDropDown()
]
}
]
};
};
/**
* Gets the Select dropdown model
* @returns {RibbonItemModel} The ribbon item model
*/
TableOperationsGroup.prototype.getSelectDropDown = function () {
var _this = this;
return {
type: RibbonItemType.DropDown,
id: this.ribbonId + SELECT_DROPDOWN_ID,
keyTip: 'K',
dropDownSettings: {
content: this.localObj.getConstant('Select'),
iconCss: 'e-icons e-de-ctnr-mouse-pointer',
items: [
{ text: this.localObj.getConstant('Table'), id: this.ribbonId + '_select_table', iconCss: 'e-icons e-de-ctnr-table-2' },
{ text: this.localObj.getConstant('Row'), id: this.ribbonId + '_select_row', iconCss: 'e-icons e-de-ctnr-freeze-row' },
{ text: this.localObj.getConstant('Column'), id: this.ribbonId + '_select_column', iconCss: 'e-icons e-de-ctnr-freeze-column' },
{ text: this.localObj.getConstant('Cell'), id: this.ribbonId + '_select_cell', iconCss: 'e-icons e-de-ctnr-table-cell' }
],
select: function (args) {
_this.handleTableSelection(args.item.text);
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Select the table')
}
};
};
/**
* Gets the Delete dropdown model
* @returns {RibbonItemModel} The ribbon item model
*/
TableOperationsGroup.prototype.getDeleteDropDown = function () {
var _this = this;
return {
type: RibbonItemType.DropDown,
id: DELETE_DROPDOWN_ID,
keyTip: 'H',
dropDownSettings: {
content: this.localObj.getConstant('Delete'),
iconCss: 'e-icons e-de-ctnr-table-delete',
items: [
{ text: this.localObj.getConstant('Table'), id: this.ribbonId + '_delete_table', iconCss: 'e-icons e-de-ctnr-table-delete' },
{ text: this.localObj.getConstant('Row'), id: this.ribbonId + '_delete_row', iconCss: 'e-icons e-de-ctnr-deleterows' },
{ text: this.localObj.getConstant('Column'), id: this.ribbonId + '_delete_column', iconCss: 'e-icons e-de-ctnr-deletecolumns' }
],
select: function (args) {
_this.handleTableDeletion(args.item.text);
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Delete the table')
}
};
};
/**
* Gets the Insert dropdown model
* @returns {RibbonItemModel} The ribbon item model
*/
TableOperationsGroup.prototype.getInsertDropDown = function () {
var _this = this;
return {
type: RibbonItemType.DropDown,
id: INSERT_DROPDOWN_ID,
keyTip: 'N',
dropDownSettings: {
content: this.localObj.getConstant('Insert'),
iconCss: 'e-icons e-de-ctnr-table',
items: [
{ text: this.localObj.getConstant('Row Above'), id: this.ribbonId + '_insert_row_above', iconCss: 'e-icons e-de-ctnr-insertabove' },
{ text: this.localObj.getConstant('Row Below'), id: this.ribbonId + '_insert_row_below', iconCss: 'e-icons e-de-ctnr-insertbelow' },
{ text: this.localObj.getConstant('Column Left'), id: this.ribbonId + '_insert_column_left', iconCss: 'e-icons e-de-ctnr-insertleft' },
{ text: this.localObj.getConstant('Column Right'), id: this.ribbonId + '_insert_column_right', iconCss: 'e-icons e-de-ctnr-insertright' }
],
select: function (args) {
_this.handleTableInsertion(args.item.text);
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Insert rows and columns')
}
};
};
TableOperationsGroup.prototype.handleTableSelection = function (action) {
var selection = this.documentEditor.selection;
switch (action) {
case this.localObj.getConstant('Table'):
selection.selectTable();
break;
case this.localObj.getConstant('Row'):
selection.selectRow();
break;
case this.localObj.getConstant('Column'):
selection.selectColumn();
break;
case this.localObj.getConstant('Cell'):
selection.selectCell();
break;
}
};
TableOperationsGroup.prototype.handleTableDeletion = function (action) {
var editor = this.documentEditor.editorModule;
switch (action) {
case this.localObj.getConstant('Table'):
editor.deleteTable();
break;
case this.localObj.getConstant('Row'):
editor.deleteRow();
break;
case this.localObj.getConstant('Column'):
editor.deleteColumn();
break;
}
};
TableOperationsGroup.prototype.handleTableInsertion = function (action) {
var editor = this.documentEditor.editorModule;
switch (action) {
case this.localObj.getConstant('Row Above'):
editor.insertRow(true);
break;
case this.localObj.getConstant('Row Below'):
editor.insertRow(false);
break;
case this.localObj.getConstant('Column Left'):
editor.insertColumn(true);
break;
case this.localObj.getConstant('Column Right'):
editor.insertColumn(false);
break;
}
};
return TableOperationsGroup;
}(RibbonGroupBase));
export { TableOperationsGroup };