@syncfusion/ej2-spreadsheet
Version:
Feature-rich JavaScript Spreadsheet (Excel) control with built-in support for selection, editing, formatting, importing and exporting to Excel
871 lines • 195 kB
JavaScript
import { Ribbon as RibbonComponent } from '../../ribbon/index';
import { ribbon, beforeRibbonCreate, removeDataValidation, clearViewer, initiateFilterUI, readonlyAlert, removeElements, isLockedCells, showAggregate } from '../common/index';
import { initiateDataValidation, invalidData, setUndoRedo, renderCFDlg, focus, freeze, toggleProtect } from '../common/index';
import { dialog, reapplyFilter, enableFileMenuItems, protectCellFormat, protectWorkbook } from '../common/index';
import { insertChart, chartDesignTab, unProtectWorkbook } from '../common/index';
import { destroyComponent, performUndoRedo, completeAction, applySort, hideRibbonTabs } from '../common/index';
import { enableToolbarItems, ribbonClick, paste, locale, initiateCustomSort, getFilteredColumn } from '../common/index';
import { tabSwitch, getUpdateUsingRaf, updateToggleItem, initiateHyperlink, editHyperlink, clearFilter } from '../common/index';
import { addRibbonTabs, addToolbarItems, hideFileMenuItems, addFileMenuItems, hideToolbarItems, enableRibbonTabs } from '../common/index';
import { Toolbar, Menu } from '@syncfusion/ej2-navigations';
import { ColorPicker } from '@syncfusion/ej2-inputs';
import { ListView } from '@syncfusion/ej2-lists';
import { extend, isNullOrUndefined, getComponent, closest, detach, selectAll, select, EventHandler, createElement, Browser } from '@syncfusion/ej2-base';
import { attributes } from '@syncfusion/ej2-base';
import { getCellIndexes, getFormatFromType, getTypeFromFormat, getColumn } from '../../workbook/index';
import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
import { calculatePosition } from '@syncfusion/ej2-popups';
import { applyNumberFormatting, getDataRange, getFormattedCellObject, getRangeIndexes, getSwapRange, isLocked, isReadOnlyCells, mergedRange, setMerge, unMerge, updateSortCollection, workbookFormulaOperation } from '../../workbook/common/index';
import { activeCellChanged, textDecorationUpdate, isNumber, exportDialog } from '../../workbook/common/index';
import { clearCFRule } from '../../workbook/common/index';
import { getCell, setCellFormat, selectionComplete } from '../../workbook/index';
import { Button } from '@syncfusion/ej2-buttons';
import { ColorPicker as RibbonColorPicker } from './color-picker';
import { insertDesignChart, removeDesignChart, isMouseMove } from '../common/index';
import { refreshRibbonIcons, beginAction, setCFRule } from '../../workbook/common/index';
import { findToolDlg, localizedFormatAction, convertToDefaultFormat, isImported } from '../../workbook/index';
/**
* Represents Ribbon for Spreadsheet.
*/
var Ribbon = /** @class */ (function () {
function Ribbon(parent) {
this.border = '1px solid #000000';
this.fontNameIndex = 5;
this.numPopupWidth = 0;
this.preTabIdx = 1;
this.spanElements = []; // To keep track of dynamically added elements in conditional formatting.
this.iconSetGroupElement = [];
this.iconSetElements = [];
this.iconWrapElements = [];
this.parent = parent;
this.addEventListener();
new RibbonColorPicker(parent);
}
Ribbon.prototype.getModuleName = function () {
return 'ribbon';
};
Ribbon.prototype.ribbonOperation = function (args) {
if (args && args.onPropertyChange) {
this.onPropertyChanged(args.prop);
}
else {
this.initialize();
}
};
Ribbon.prototype.initialize = function (onPropertyChange) {
this.parent.notify(beforeRibbonCreate, {});
if (this.parent.isMobileView()) {
this.createMobileView();
}
else {
var refEle = onPropertyChange && (this.parent.element.querySelector('.e-formula-bar-panel') ||
document.getElementById(this.parent.element.id + '_sheet_panel'));
this.createRibbon(refEle);
}
};
Ribbon.prototype.getRibbonMenuItems = function () {
var l10n = this.parent.serviceLocator.getService(locale);
var id = this.parent.element.id;
var menuItems = [{
text: this.parent.isMobileView() ? '' : l10n.getConstant('File'),
iconCss: this.parent.isMobileView() ? 'e-icons e-file-menu-icon' : null, id: id + "_File",
items: [
{ text: l10n.getConstant('New'), id: id + "_New", iconCss: 'e-new e-icons' },
{ text: l10n.getConstant('Open'), id: id + "_Open", iconCss: 'e-open e-icons' },
{
text: l10n.getConstant('SaveAs'), iconCss: 'e-save e-icons', id: id + "_Save_As",
items: [
{ text: l10n.getConstant('ExcelXlsx'), id: id + "_Xlsx", iconCss: 'e-xlsx e-icons' },
{ text: l10n.getConstant('ExcelXls'), id: id + "_Xls", iconCss: 'e-xls e-icons' },
{ text: l10n.getConstant('CSV'), id: id + "_Csv", iconCss: 'e-csv e-icons' },
{ text: l10n.getConstant('PDF'), id: id + "_Pdf", iconCss: 'e-pdf e-icons' }
]
},
{ text: l10n.getConstant('Print'), id: id + "_Print", iconCss: 'e-print e-icons' }
]
}];
return menuItems;
};
Ribbon.prototype.getRibbonItems = function () {
var _this = this;
var id = this.parent.element.id;
var l10n = this.parent.serviceLocator.getService(locale);
var items = [{
header: { text: l10n.getConstant('Home') },
content: [
{ prefixIcon: 'e-undo-icon', tooltipText: l10n.getConstant('Undo') + " (Ctrl+Z)",
htmlAttributes: { 'aria-label': l10n.getConstant('Undo') }, id: id + '_undo', disabled: true },
{ prefixIcon: 'e-redo-icon', tooltipText: l10n.getConstant('Redo') + " (Ctrl+Y)",
htmlAttributes: { 'aria-label': l10n.getConstant('Redo') }, id: id + '_redo', disabled: true },
{ type: 'Separator', id: id + '_separator_1' },
{ prefixIcon: 'e-cut-icon', tooltipText: l10n.getConstant('Cut') + " (Ctrl+X)",
htmlAttributes: { 'aria-label': l10n.getConstant('Cut') }, id: id + '_cut' },
{ prefixIcon: 'e-copy-icon', tooltipText: l10n.getConstant('Copy') + " (Ctrl+C)",
htmlAttributes: { 'aria-label': l10n.getConstant('Copy') }, id: id + '_copy' },
{ tooltipText: l10n.getConstant('Paste') + " (Ctrl+V)", template: this.getPasteBtn(id, l10n), id: id + '_paste',
disabled: true }, { type: 'Separator', id: id + '_separator_2' },
{ template: this.getNumFormatDDB(id, l10n), tooltipText: l10n.getConstant('NumberFormat'), id: id + '_number_format' },
{ type: 'Separator', id: id + '_separator_3' },
{ template: this.getFontNameDDB(id), tooltipText: l10n.getConstant('Font'), id: id + '_font_name' },
{ type: 'Separator', id: id + '_separator_4' },
{ template: this.getFontSizeDDB(id), tooltipText: l10n.getConstant('FontSize'), id: id + '_font_size' },
{ type: 'Separator', id: id + '_separator_5' },
{ template: this.getBtn(id, 'bold', l10n.getConstant('Bold')), tooltipText: l10n.getConstant('Bold') + " (Ctrl+B)",
id: id + '_bold' },
{ template: this.getBtn(id, 'italic', l10n.getConstant('Italic')), tooltipText: l10n.getConstant('Italic') + " (Ctrl+I)",
id: id + '_italic' },
{ template: this.getBtn(id, 'line-through', l10n.getConstant('Strikethrough')),
tooltipText: l10n.getConstant('Strikethrough') + " (Ctrl+5)",
id: id + '_line-through' },
{ template: this.getBtn(id, 'underline', l10n.getConstant('Underline')), tooltipText: l10n.getConstant('Underline') + " (Ctrl+U)",
id: id + '_underline' },
{ template: document.getElementById(id + "_font_color_picker"), tooltipText: l10n.getConstant('TextColor'),
id: id + '_font_color_picker' }, { type: 'Separator', id: id + '_separator_6' },
{ template: document.getElementById(id + "_fill_color_picker"), tooltipText: l10n.getConstant('FillColor'),
id: id + '_fill_color_picker' },
{ template: this.getBordersDBB(id), tooltipText: l10n.getConstant('Borders'), id: id + '_borders' },
{ template: this.getMergeSplitBtn(id), tooltipText: l10n.getConstant('MergeCells'), id: id + '_merge_cells',
disabled: true },
{ type: 'Separator', id: id + '_separator_7' },
{ template: this.getTextAlignDDB(id), tooltipText: l10n.getConstant('HorizontalAlignment'), id: id + '_text_align' },
{ template: this.getVerticalAlignDDB(id), tooltipText: l10n.getConstant('VerticalAlignment'), id: id + '_vertical_align' },
{ template: this.getBtn(id, 'wrap', l10n.getConstant('WrapText'), false), tooltipText: "" + l10n.getConstant('WrapText'), id: id + '_wrap' }
]
},
{
header: { text: l10n.getConstant('Insert') }, content: [
{
prefixIcon: 'e-hyperlink-icon', text: l10n.getConstant('Link'),
id: id + '_hyperlink', tooltipText: l10n.getConstant('Link'), click: function () { _this.getHyperlinkDlg(); }
},
{
prefixIcon: 'e-image-icon', text: l10n.getConstant('Image'),
id: id + '_image', tooltipText: l10n.getConstant('Image'), click: function () { select('#' + id + '_imageUpload', _this.parent.element).click(); }
}
]
},
{
header: { text: l10n.getConstant('Formulas') }, content: [
{
prefixIcon: 'e-insert-function', tooltipText: l10n.getConstant('InsertFunction'), text: l10n.getConstant('InsertFunction'),
id: id + '_insert_function'
},
{ type: 'Separator', id: id + '_separator_14' },
{
template: this.createCalcOptions(id, l10n), tooltipText: l10n.getConstant('CalcOptionsTip'), id: id + '_calc_types'
},
{ type: 'Separator', id: id + '_separator_15' },
{
prefixIcon: 'e-calculate-sheet', tooltipText: l10n.getConstant('CalcSheetTip'), text: l10n.getConstant('CalcActiveSheet'),
id: id + '_calc_current_sheet', click: function () {
_this.parent.notify(workbookFormulaOperation, { action: 'ClearDependentCellCollection' });
_this.parent.calculateNow('Sheet');
},
disabled: this.parent.calculationMode === 'Automatic'
},
{
prefixIcon: 'e-calculation', tooltipText: l10n.getConstant('CalcWorkbookTip'), text: l10n.getConstant('CalcWorkbook'),
id: id + '_calc_entire_sheets', click: function () {
_this.parent.notify(workbookFormulaOperation, { action: 'ClearDependentCellCollection' });
_this.parent.calculateNow('Workbook');
},
disabled: this.parent.calculationMode === 'Automatic'
}
]
},
{
header: { text: l10n.getConstant('Data') }, content: [
{
prefixIcon: 'e-protect-icon', text: l10n.getConstant('ProtectSheet'), id: id + '_protect',
tooltipText: l10n.getConstant('ProtectSheet')
},
{
prefixIcon: 'e-password-protect-icon', text: l10n.getConstant('ProtectWorkbook'), id: id + '_protectworkbook',
tooltipText: l10n.getConstant('ProtectWorkbook')
},
{ type: 'Separator', id: id + '_separator_8' },
{
template: this.datavalidationDDB(id), tooltipText: l10n.getConstant('DataValidation'),
id: id + '_datavalidation'
}
]
},
{
header: { text: l10n.getConstant('View') }, content: [
{
prefixIcon: 'e-hide-headers', text: this.getLocaleText('Headers'), id: id + '_headers',
tooltipText: this.getLocaleText('Headers')
}, { type: 'Separator', id: id + '_separator_9' },
{
prefixIcon: 'e-hide-gridlines', text: this.getLocaleText('GridLines'), id: id + '_gridlines',
tooltipText: this.getLocaleText('GridLines')
},
{ type: 'Separator', id: id + '_separator_13' },
{ prefixIcon: 'e-freeze-pane', text: l10n.getConstant('FreezePanes'), id: id + '_freezepanes', tooltipText: l10n.getConstant('FreezePanes'), disabled: !this.parent.allowFreezePane },
{ prefixIcon: 'e-freeze-row', text: l10n.getConstant('FreezeRows'), id: id + '_freezerows', tooltipText: l10n.getConstant('FreezeRows'), disabled: !this.parent.allowFreezePane },
{ prefixIcon: 'e-freeze-column', text: l10n.getConstant('FreezeColumns'), id: id + '_freezecolumns', tooltipText: l10n.getConstant('FreezeColumns'), disabled: !this.parent.allowFreezePane }
]
}];
if (this.parent.allowConditionalFormat) {
items.find(function (x) { return x.header && x.header.text === l10n.getConstant('Home'); }).content.push({ type: 'Separator', id: id + '_separator_10' }, { template: this.getCFDBB(id), tooltipText: l10n.getConstant('ConditionalFormatting'), id: id + '_conditionalformatting' });
}
if (this.parent.allowChart) {
items.find(function (x) { return x.header && x.header.text === l10n.getConstant('Insert'); }).content.push({ type: 'Separator', id: id + '_separator_11' }, {
template: this.getChartDDB(id, true), text: l10n.getConstant('Chart'),
tooltipText: l10n.getConstant('Chart'), id: id + '_chart'
});
}
if (this.parent.allowCellFormatting) {
items.find(function (x) { return x.header && x.header.text === l10n.getConstant('Home'); }).content.push({ type: 'Separator', id: id + '_separator_12' }, { template: this.getClearDDB(id), tooltipText: l10n.getConstant('Clear'), id: id + '_clear' });
}
if (this.parent.allowSorting || this.parent.allowFiltering) {
items.find(function (x) { return x.header && x.header.text === l10n.getConstant('Home'); }).content.push({ template: this.getSortFilterDDB(id), tooltipText: l10n.getConstant('SortAndFilter'), id: id + '_sorting' });
}
if (this.parent.allowFindAndReplace) {
items.find(function (x) { return x.header && x.header.text === l10n.getConstant('Home'); }).content.push({
template: this.getFindBtn(id), prefixIcon: 'e-tbar-search-icon tb-icons',
tooltipText: l10n.getConstant('FindReplaceTooltip'), id: id + '_find'
});
}
return items;
};
Ribbon.prototype.createCalcOptions = function (id, l10n) {
var typeBtn = createElement('button', { id: id + '_calc_types', attrs: { 'type': 'button' }, className: 'e-calc-types' });
var typeBtnText = createElement('span', { className: 'e-calc-types-text' });
typeBtnText.innerText = l10n.getConstant('CalcOptions');
typeBtn.appendChild(typeBtnText);
this.calcTypeOptions = new DropDownButton({
items: [
{ id: id + '_Automatic', text: l10n.getConstant('Automatic'), iconCss: this.parent.calculationMode === 'Automatic' ? 'e-icons e-selected-icon' : '' },
{ id: id + '_Manual', text: l10n.getConstant('Manual'), iconCss: this.parent.calculationMode === 'Manual' ? 'e-icons e-selected-icon' : '' }
],
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
iconCss: 'e-calculation e-icons',
cssClass: 'e-flat e-calc-types'
});
this.calcTypeOptions.select = this.selectCalcOptions.bind(this);
this.calcTypeOptions.appendTo(typeBtn);
return typeBtn;
};
Ribbon.prototype.selectCalcOptions = function (args) {
if (args.item.id === this.parent.element.id + '_Automatic') {
this.calcTypeOptions.items[0].iconCss = 'e-icons e-selected-icon';
this.calcTypeOptions.items[1].iconCss = '';
if (this.parent.calculationMode === 'Manual') {
this.parent.notify(workbookFormulaOperation, { action: 'ClearDependentCellCollection' });
}
this.parent.setProperties({ calculationMode: 'Automatic' }, true);
this.updateFormulaButtons();
this.parent.calculateNow('Workbook');
}
else {
this.calcTypeOptions.items[0].iconCss = '';
this.calcTypeOptions.items[1].iconCss = 'e-icons e-selected-icon';
this.parent.setProperties({ calculationMode: 'Manual' }, true);
this.updateFormulaButtons();
}
};
Ribbon.prototype.updateFormulaButtons = function () {
var l10n = this.parent.serviceLocator.getService(locale);
this.parent.notify(enableToolbarItems, [{
tab: l10n.getConstant('Formulas'), items: [this.parent.element.id + '_calc_current_sheet'],
enable: this.parent.calculationMode === 'Manual'
}]);
this.parent.notify(enableToolbarItems, [{
tab: l10n.getConstant('Formulas'), items: [this.parent.element.id + '_calc_entire_sheets'],
enable: this.parent.calculationMode === 'Manual'
}]);
};
Ribbon.prototype.getPasteBtn = function (id, l10n) {
var _this = this;
var btn = this.parent.element.appendChild(this.parent.createElement('button', { id: id + '_paste', attrs: { 'type': 'button' } }));
this.pasteSplitBtn = new SplitButton({
iconCss: 'e-icons e-paste-icon',
items: [
{ text: l10n.getConstant('All'), id: 'All' },
{ text: l10n.getConstant('Values'), id: 'Values' },
{ text: l10n.getConstant('Formats'), id: 'Formats' }
],
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
select: function (args) {
_this.pasteSplitBtn.element.setAttribute('aria-label', l10n.getConstant('Paste') + ' ' + args.item.text);
_this.parent.notify(paste, { type: args.item.id, isAction: true, isInternal: true });
},
click: function () {
btn.setAttribute('aria-label', l10n.getConstant('Paste'));
_this.parent.notify(paste, { isAction: true, isInternal: true });
},
beforeOpen: function (args) {
args.element.setAttribute('aria-label', l10n.getConstant('Paste'));
}
});
this.pasteSplitBtn.createElement = this.parent.createElement;
this.pasteSplitBtn.appendTo(btn);
return btn.parentElement;
};
Ribbon.prototype.getHyperlinkDlg = function () {
var activeSheet = this.parent.getActiveSheet();
var indexes = getRangeIndexes(activeSheet.activeCell);
var cell = getCell(indexes[0], indexes[1], activeSheet);
if (cell && cell.hyperlink) {
this.parent.notify(editHyperlink, null);
}
else {
this.parent.notify(initiateHyperlink, null);
}
};
Ribbon.prototype.passwordProtectDlg = function () {
if (this.parent.password.length > 0) {
this.parent.notify(unProtectWorkbook, null);
}
else {
if (document.getElementById(this.parent.element.id + '_protectworkbook').classList.contains('e-active')) {
document.getElementById(this.parent.element.id + '_protectworkbook').classList.remove('e-active');
if (this.parent.showSheetTabs) {
this.parent.element.querySelector('.e-add-sheet-tab').removeAttribute('disabled');
}
}
else {
this.parent.notify(protectWorkbook, null);
}
}
};
Ribbon.prototype.getLocaleText = function (str) {
var text;
var l10n = this.parent.serviceLocator.getService(locale);
var sheet = this.parent.getActiveSheet();
if (sheet['show' + str]) {
text = l10n.getConstant('Hide' + str);
}
else {
text = l10n.getConstant('Show' + str);
}
return text;
};
Ribbon.prototype.getLocaleProtectText = function (str, setClass) {
var text;
var l10n = this.parent.serviceLocator.getService(locale);
var sheet = this.parent.getActiveSheet();
if (sheet.isProtected) {
if (setClass) {
this.parent.getMainContent().classList.remove('e-hide-' + str.toLowerCase());
}
text = l10n.getConstant('Unprotect' + str);
}
else {
if (setClass) {
this.parent.getMainContent().classList.add('e-hide-' + str.toLowerCase());
}
text = l10n.getConstant('Protect' + str);
}
return text;
};
Ribbon.prototype.getLocaleProtectWorkbook = function (str, setClass) {
var text;
var l10n = this.parent.serviceLocator.getService(locale);
if (this.parent.isProtected) {
if (setClass) {
this.parent.getMainContent().classList.remove('e-hide-' + str.toLowerCase());
}
text = l10n.getConstant(str);
}
else {
if (setClass) {
this.parent.getMainContent().classList.add('e-hide-' + str.toLowerCase());
}
text = l10n.getConstant(str);
}
return text;
};
Ribbon.prototype.insertDesignChart = function (args) {
var _this = this;
var l10n = this.parent.serviceLocator.getService(locale);
var tabIdx = this.ribbon.items.length - 1;
var chartTabHeader = l10n.getConstant('ChartDesign');
if (this.parent.allowChart && this.ribbon.items[tabIdx] && this.ribbon.items[tabIdx].header.text !==
chartTabHeader) {
this.preTabIdx = this.ribbon.selectedTab;
var id = this.parent.element.id;
var items = [{
header: { text: chartTabHeader },
content: [
{
template: this.getAddChartEleDBB(id),
tooltipText: l10n.getConstant('AddChartElement'), id: id + 'add_chart_ element_chart'
},
{ type: 'Separator' },
{
prefixIcon: 'e-switch-row-column-icon', text: l10n.getConstant('SwitchRowColumn'),
tooltipText: l10n.getConstant('SwitchRowColumn'),
id: id + 'switch_row_column_chart', click: function () {
_this.parent.notify(chartDesignTab, { switchRowColumn: true, triggerEvent: true });
}
},
{ type: 'Separator' },
{ template: this.getChartThemeDDB(id), tooltipText: l10n.getConstant('ChartTheme'), id: id + '_chart_theme' },
{ type: 'Separator' },
{ template: this.getChartDDB(id, false), tooltipText: l10n.getConstant('ChartType'), id: id + '_chart_type' }
]
}];
this.addRibbonTabs({ items: items });
this.ribbon.tabObj.select(this.ribbon.items.length);
}
else if (args.refreshChartTheme) {
var theme = void 0;
var overlay = this.parent.element.querySelector('.e-ss-overlay-active');
if (overlay) {
var chart = overlay.querySelector('.e-chart');
if (chart) {
theme = getComponent(chart, 'chart').theme;
}
else {
chart = overlay.querySelector('.e-accumulationchart');
if (chart) {
theme = getComponent(chart, 'accumulationchart').theme;
}
}
}
var chartThemeEle = document.getElementById(this.parent.element.id + '_chart_theme');
if (theme && chartThemeEle) {
var chartThemeDdb = getComponent(chartThemeEle, DropDownButton);
if (chartThemeDdb) {
theme = l10n.getConstant(theme);
for (var i = 0; i < chartThemeDdb.items.length; i++) {
if (chartThemeDdb.items[i].iconCss !== '') {
chartThemeDdb.items[i].iconCss = '';
}
if (chartThemeDdb.items[i].text === theme) {
chartThemeDdb.items[i].iconCss = 'e-icons e-selected-icon';
}
}
chartThemeDdb.element.firstChild.textContent = theme;
chartThemeDdb.setProperties({ 'items': chartThemeDdb.items }, true);
chartThemeDdb.element.setAttribute('aria-label', theme);
}
}
}
};
Ribbon.prototype.removeDesignChart = function () {
var l10n = this.parent.serviceLocator.getService(locale);
var tabIdx = this.ribbon.items.length - 1;
if (this.ribbon.items[tabIdx] && this.ribbon.items[tabIdx].header.text ===
l10n.getConstant('ChartDesign')) {
this.ribbon.tabObj.select(this.preTabIdx + 1);
this.parent.hideRibbonTabs([l10n.getConstant('ChartDesign')], true);
if (document.getElementsByClassName('e-addchart-ddb').length > 0) {
document.getElementsByClassName('e-addchart-ddb')[0].remove();
}
if (document.getElementsByClassName('e-chart-type-ddb').length > 0) {
document.getElementsByClassName('e-chart-type-ddb')[0].remove();
}
if (document.getElementsByClassName('e-charttheme-ddb').length > 0) {
document.getElementsByClassName('e-charttheme-ddb')[0].remove();
}
delete this.ribbon.items[tabIdx].content[0];
this.ribbon.items.length = this.ribbon.items.length - 1;
}
};
Ribbon.prototype.createRibbon = function (refEle) {
var ribbonElement = this.parent.createElement('div', {
id: this.parent.element.id + "_ribbon",
className: this.parent.enableRtl ? 'e-rtl' : ''
});
this.ribbon = new RibbonComponent({
selectedTab: 0,
enableRtl: this.parent.enableRtl,
menuItems: this.getRibbonMenuItems(),
items: this.getRibbonItems(),
fileMenuItemSelect: this.fileMenuItemSelect.bind(this),
beforeOpen: this.fileMenuBeforeOpen.bind(this),
beforeClose: this.fileMenuBeforeClose.bind(this),
clicked: this.toolbarClicked.bind(this),
created: this.ribbonCreated.bind(this),
selecting: this.tabSelecting.bind(this),
expandCollapse: this.expandCollapseHandler.bind(this),
beforeFileMenuItemRender: this.beforeRenderHandler.bind(this),
spreadInstance: (this.parent && this.parent.isReact) ? this.parent : null
});
this.ribbon.createElement = this.parent.createElement;
if (refEle) {
this.parent.element.insertBefore(ribbonElement, refEle);
}
else {
this.parent.element.appendChild(ribbonElement);
}
this.ribbon.appendTo(ribbonElement);
};
Ribbon.prototype.tabSelecting = function (args) {
if (args.selectingIndex !== this.ribbon.selectedTab) {
var l10n = this.parent.serviceLocator.getService(locale);
if (this.ribbon.items[args.selectingIndex] && this.ribbon.items[args.selectingIndex].header.text ===
l10n.getConstant('Insert')) {
var ribbonContent = this.ribbon.items[args.selectingIndex].content;
for (var i = ribbonContent.length - 1; i >= 0; i--) {
if (ribbonContent[i].id === this.parent.element.id + '_chart') {
var chartBtn = ribbonContent[i].template;
if (chartBtn && !chartBtn.classList.contains('e-dropdown-btn')) {
this.createChartDdb(document.getElementById(this.parent.element.id + '_chart-btn'), true);
}
break;
}
}
}
if (this.ribbon.items[args.selectedIndex] && this.ribbon.items[args.selectedIndex].header.text ===
l10n.getConstant('Insert')) {
var ribbonContent = this.ribbon.items[args.selectedIndex].content;
for (var i = ribbonContent.length - 1; i >= 0; i--) {
if (ribbonContent[i].id === this.parent.element.id + '_chart') {
var chartBtn = ribbonContent[i].template;
if (chartBtn && chartBtn.classList.contains('e-dropdown-btn')) {
this.destroyComponent(chartBtn, 'dropdown-btn');
}
break;
}
}
}
this.refreshRibbonContent(args.selectingIndex);
this.parent.notify(tabSwitch, { activeTab: args.selectingIndex });
}
};
Ribbon.prototype.beforeRenderHandler = function (args) {
var l10n = this.parent.serviceLocator.getService(locale);
if (args.item.text === l10n.getConstant('Open') && (!this.parent.openUrl || !this.parent.allowOpen)) {
args.element.classList.add('e-disabled');
}
if (args.item.text === l10n.getConstant('SaveAs') && (!this.parent.saveUrl || !this.parent.allowSave)) {
args.element.classList.add('e-disabled');
}
if (args.item.text === l10n.getConstant('Print') && !this.parent.allowPrint) {
args.element.classList.add('e-disabled');
}
};
Ribbon.prototype.getChartThemeDDB = function (id) {
var _this = this;
var l10n = this.parent.serviceLocator.getService(locale);
var chartThemeBtn = this.parent.createElement('button', { id: id + '_chart_theme', attrs: { 'type': 'button' }, className: 'e-ss-ddb' });
chartThemeBtn.appendChild(this.parent.createElement('span', { className: 'e-tbar-btn-text' }));
var theme = 'Material';
var overlay = this.parent.element.querySelector('.e-ss-overlay-active');
if (overlay) {
var chart = overlay.querySelector('.e-chart');
if (chart) {
theme = getComponent(chart, 'chart').theme;
}
else {
chart = overlay.querySelector('.e-accumulationchart');
if (chart) {
theme = getComponent(chart, 'accumulationchart').theme;
}
}
}
var chartThemeDDB = new DropDownButton({
items: this.getChartThemeDdbItems(theme),
content: l10n.getConstant(theme),
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
select: function (args) {
_this.parent.notify(selectionComplete, { type: 'mousedown' });
if (!args.element || !args.element.querySelector('.e-selected-icon')) {
chartThemeDDB.content = args.item.text;
chartThemeDDB.refresh();
_this.parent.notify(chartDesignTab, { chartTheme: args.item.id, triggerEvent: true });
chartThemeDDB.setProperties({ items: _this.getChartThemeDdbItems(args.item.id) }, true);
}
},
cssClass: 'e-flat e-charttheme-ddb',
beforeOpen: function (args) {
_this.tBarDdbBeforeOpen(args.element, args.items, _this.parent.serviceLocator.getService(locale).getConstant('Chart'));
}
});
chartThemeDDB.createElement = this.parent.createElement;
chartThemeDDB.appendTo(chartThemeBtn);
return chartThemeBtn;
};
Ribbon.prototype.getNumFormatDDB = function (id, l10n) {
var _this = this;
var numFormatBtn = this.parent.createElement('button', { id: id + '_number_format', attrs: { 'type': 'button' }, className: 'e-ss-ddb' });
var numFormatText = this.parent.createElement('span', { className: 'e-tbar-btn-text' });
numFormatText.innerText = l10n.getConstant('General');
numFormatBtn.appendChild(numFormatText);
var eventArgs = { action: 'getLocalizedFormats' };
this.parent.notify(localizedFormatAction, eventArgs);
var defaultFormats = eventArgs.defaultFormats;
var localizedFormats = eventArgs.localizedFormats;
this.numFormatDDB = new DropDownButton({
items: this.getNumFormatDdbItems(id),
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
select: function (args) {
var l10n = _this.parent.serviceLocator.getService(locale);
if (args.item.text === l10n.getConstant('Custom')) {
_this.renderCustomFormatDialog(defaultFormats, localizedFormats);
}
else {
var type = args.item.id.split(_this.parent.element.id + '_')[1];
var format = getFormatFromType(type);
_this.applyNumFormat(format);
var sheet = _this.parent.getActiveSheet();
_this.refreshNumFormatSelection(getTypeFromFormat(format, true), sheet, l10n, format);
var cellIndex = getCellIndexes(sheet.activeCell);
_this.refreshTextAlign(sheet, getCell(cellIndex[0], cellIndex[1], sheet, false, true), type, cellIndex);
_this.numFormatDDB.element.setAttribute('aria-label', type);
if (_this.parent.showAggregate) {
_this.parent.notify(showAggregate, {});
}
}
},
open: function (args) { return _this.numDDBOpen(args); },
beforeItemRender: function (args) { return _this.previewNumFormat(args); },
cssClass: 'e-flat e-numformat-ddb',
beforeOpen: function (args) {
_this.tBarDdbBeforeOpen(args.element, args.items, _this.parent.serviceLocator.getService(locale).getConstant('NumberFormat'));
}
});
this.numFormatDDB.createElement = this.parent.createElement;
this.numFormatDDB.appendTo(numFormatBtn);
return numFormatBtn;
};
Ribbon.prototype.getFontSizeDDB = function (id) {
var _this = this;
this.fontSizeDdb = new DropDownButton({
cssClass: 'e-font-size-ddb',
content: '11',
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
items: [{ text: '8' }, { text: '9' }, { text: '10' }, { text: '11' }, { text: '12' }, { text: '14' }, { text: '16' },
{ text: '18' }, { text: '20' }, { text: '22' }, { text: '24' }, { text: '26' }, { text: '28' }, { text: '36' },
{ text: '48' }, { text: '72' }],
beforeOpen: function (args) {
_this.tBarDdbBeforeOpen(args.element, args.items, _this.parent.serviceLocator.getService(locale).getConstant('FontSize'));
_this.refreshSelected(_this.fontSizeDdb, args.element, 'content', 'text');
},
select: function (args) {
var eventArgs = { style: { fontSize: args.item.text + "pt" }, onActionUpdate: true };
_this.parent.notify(setCellFormat, eventArgs);
if (!eventArgs.cancel) {
_this.fontSizeDdb.content = eventArgs.style.fontSize.split('pt')[0];
_this.fontSizeDdb.dataBind();
}
_this.fontSizeDdb.element.setAttribute('aria-label', args.item.text);
}
});
this.fontSizeDdb.createElement = this.parent.createElement;
this.fontSizeDdb.appendTo(this.parent.createElement('button', { id: id + '_font_size', attrs: { 'type': 'button' }, className: 'e-ss-ddb' }));
return this.fontSizeDdb.element;
};
Ribbon.prototype.getChartDDB = function (id, isChart) {
var l10n = this.parent.serviceLocator.getService(locale);
var chartBtn;
if (isChart) {
chartBtn = this.parent.createElement('button', { id: id + '_chart-btn', attrs: { 'type': 'button' } });
var chartBtnSpan = this.parent.createElement('span', { id: id + '_chart' });
chartBtnSpan.innerText = l10n.getConstant('Chart');
chartBtn.appendChild(chartBtnSpan);
}
else {
chartBtn = this.parent.createElement('button', { id: id + '_chart-type-btn', attrs: { 'type': 'button' } });
var chartBtnSpan = this.parent.createElement('span', { id: id + '_chart_type' });
chartBtnSpan.innerText = l10n.getConstant('ChartType');
chartBtn.appendChild(chartBtnSpan);
this.createChartDdb(chartBtn, false);
}
return chartBtn;
};
Ribbon.prototype.closeDropdownPopup = function (e) {
if ((e.altKey && e.keyCode === 38) || e.keyCode === 27) {
var dropdownObj = this[1];
if (dropdownObj) {
dropdownObj.toggle();
focus(dropdownObj.element);
}
}
};
Ribbon.prototype.createChartDdb = function (chartBtn, isChart) {
var _this = this;
var l10n = this.parent.serviceLocator.getService(locale);
var menuClass = isChart ? 'e-chart-menu' : 'e-chart-type-menu';
var ul = this.parent.createElement('ul', { id: "" + this.parent.element.id + (isChart ? '_chart_menu' : '_chart_type_menu') });
var chartMenu;
var chartDdb = new DropDownButton({
iconCss: "e-icons " + (isChart ? 'e-chart-icon' : 'e-chart-type-icon'),
cssClass: isChart ? 'e-chart-ddb' : 'e-chart-type-ddb',
target: ul,
createPopupOnClick: true,
enableRtl: this.parent.enableRtl,
beforeOpen: function (args) {
chartMenu = _this.createChartMenu(ul, menuClass, l10n, chartDdb);
_this.tBarDdbBeforeOpen(args.element, chartMenu.items, _this.parent.serviceLocator.getService(locale).getConstant('Chart'));
EventHandler.add(ul, 'keydown', _this.closeDropdownPopup, [_this, chartDdb]);
},
open: function (args) {
_this.openHandler(args.element, ul);
},
beforeClose: function (args) {
if (args.event && closest(args.event.target, '.' + menuClass)) {
args.cancel = true;
}
else {
EventHandler.remove(ul, 'keydown', _this.closeDropdownPopup);
chartMenu.destroy();
}
}
});
chartDdb.createElement = this.parent.createElement;
chartDdb.appendTo(chartBtn);
};
Ribbon.prototype.createChartMenu = function (ul, cssClass, l10n, chartDdb) {
var _this = this;
var chartMenu = new Menu({
cssClass: cssClass,
enableRtl: this.parent.enableRtl,
items: [
{
iconCss: 'e-icons e-column', text: l10n.getConstant('Column'),
items: [{ id: 'column_chart' }]
},
{
iconCss: 'e-icons e-bar', text: l10n.getConstant('Bar'),
items: [{ id: 'bar_chart' }]
},
{
iconCss: 'e-icons e-area', text: l10n.getConstant('Area'),
items: [{ id: 'area_chart' }]
},
{
iconCss: 'e-icons e-pie-doughnut', text: l10n.getConstant('PieAndDoughnut'),
items: [{ id: 'pie_doughnut_chart' }]
},
{
iconCss: 'e-icons e-line', text: l10n.getConstant('Line'),
items: [{ id: 'line_chart' }]
},
// {
// iconCss: 'e-icons e-radar', text: l10n.getConstant('Radar'),
// items: [{ id: 'radar_chart' }]
// },
{
iconCss: 'e-icons e-scatter', text: l10n.getConstant('Scatter'),
items: [{ id: 'scatter_chart' }]
}
],
orientation: 'Vertical',
beforeOpen: function (args) {
var wrapperCls;
if (args.parentItem.text === l10n.getConstant('Column')) {
args.element.firstChild.appendChild(column);
wrapperCls = 'e-column-chart';
}
else if (args.parentItem.text === l10n.getConstant('Bar')) {
args.element.firstChild.appendChild(bar);
wrapperCls = 'e-bar-chart';
}
else if (args.parentItem.text === l10n.getConstant('Area')) {
args.element.firstChild.appendChild(area);
wrapperCls = 'e-area-chart';
}
else if (args.parentItem.text === l10n.getConstant('Line')) {
args.element.firstChild.appendChild(line);
wrapperCls = 'e-line-chart';
}
else if (args.parentItem.text === l10n.getConstant('PieAndDoughnut')) {
args.element.firstChild.appendChild(pie);
wrapperCls = 'e-pie-doughnut-chart';
}
else if (args.parentItem.text === l10n.getConstant('Radar')) {
args.element.firstChild.appendChild(radar);
wrapperCls = 'e-radar-chart';
}
else if (args.parentItem.text === l10n.getConstant('Scatter')) {
args.element.firstChild.appendChild(scatter);
wrapperCls = 'e-scatter-chart';
}
if (wrapperCls) {
args.element.parentElement.classList.add(wrapperCls);
EventHandler.add(args.element, 'keydown', _this.menuIconKeyDown.bind(_this, wrapperCls + " .e-menu-icon", 0));
}
},
select: function (args) { return _this.chartSelected(args, chartDdb); },
beforeItemRender: function (args) {
if (!args.item.text) {
args.element.removeAttribute('tabindex');
}
},
beforeClose: function (args) {
if (args.event && args.event.keyCode === 37) {
args.cancel = true;
}
else {
EventHandler.remove(args.element, 'keydown', _this.menuIconKeyDown);
}
}
});
var column = this.parent.createElement('div', { id: 'column_main', className: 'e-column-main' });
var column1Text = this.parent.createElement('div', { id: 'column1_text', className: 'e-column1-text' });
column1Text.innerText = l10n.getConstant('Column');
var column1Cont = this.parent.createElement('div', { id: 'column1_cont', className: 'e-column1-cont' });
var column2Cont = this.parent.createElement('div', { id: 'column2_cont', className: 'e-column2-cont' });
column.appendChild(column1Text);
column.appendChild(column1Cont);
//column.appendChild(column2Text);
//column.appendChild(column2Cont);
var cultureText = l10n.getConstant('ClusteredColumn');
var clusteredColumn = this.parent.createElement('span', { id: 'clusteredColumn', className: 'e-clusteredcolumn e-column-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedColumn');
var stackedColumn = this.parent.createElement('span', { id: 'stackedColumn', className: 'e-stackedcolumn e-column-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedColumn100');
var stackedColumn100 = this.parent.createElement('span', { id: 'stackedColumn100', className: 'e-stackedcolumn100 e-column-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
var clusteredColumn3D = this.parent.createElement('span', { id: 'clusteredColumn3D', className: 'e-clusteredColumn3D e-column-icon' });
var stackedColumn3D = this.parent.createElement('span', { id: 'stackedColumn3D', className: 'e-stackedColumn3D e-column-icon' });
var stackedColumn1003D = this.parent.createElement('span', { id: 'stackedColumn1003D', className: 'e-stackedColumn1003D e-column-icon' });
column1Cont.appendChild(clusteredColumn);
column1Cont.appendChild(stackedColumn);
column1Cont.appendChild(stackedColumn100);
column2Cont.appendChild(clusteredColumn3D);
column2Cont.appendChild(stackedColumn3D);
column2Cont.appendChild(stackedColumn1003D);
var bar = this.parent.createElement('div', { id: 'bar_main', className: 'e-bar-main' });
var bar1Text = this.parent.createElement('div', { id: 'bar1_text', className: 'e-bar1-text' });
bar1Text.innerText = l10n.getConstant('Bar');
var bar1Cont = this.parent.createElement('div', { id: 'bar1_cont', className: 'e-bar1-cont' });
var bar2Cont = this.parent.createElement('div', { id: 'bar2_cont', className: 'e-bar2-cont' });
bar.appendChild(bar1Text);
bar.appendChild(bar1Cont);
//bar.appendChild(bar2Text);
//bar.appendChild(bar2Cont);
cultureText = l10n.getConstant('ClusteredBar');
var clusteredBar = this.parent.createElement('span', { id: 'clusteredBar', className: 'e-clusteredbar e-bar-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedBar');
var stackedBar = this.parent.createElement('span', { id: 'stackedBar', className: 'e-stackedbar e-bar-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedBar100');
var stackedBar100 = this.parent.createElement('span', { id: 'stackedBar100', className: 'e-stackedbar100 e-bar-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
var clusteredBar3D = this.parent.createElement('span', { id: 'clusteredBar3D', className: 'e-clusteredBar3D e-bar-icon' });
var stackedBar3D = this.parent.createElement('span', { id: 'stackedBar3D', className: 'e-stackedBar3D e-bar-icon' });
var stackedBar1003D = this.parent.createElement('span', { id: 'stackedBar1003D', className: 'e-stackedBar1003D e-bar-icon' });
bar1Cont.appendChild(clusteredBar);
bar1Cont.appendChild(stackedBar);
bar1Cont.appendChild(stackedBar100);
bar2Cont.appendChild(clusteredBar3D);
bar2Cont.appendChild(stackedBar3D);
bar2Cont.appendChild(stackedBar1003D);
var area = this.parent.createElement('div', { id: 'area_main', className: 'e-area-main' });
var areaText = this.parent.createElement('div', { id: 'area_text', className: 'e-area-text' });
areaText.innerText = l10n.getConstant('Area');
var areaCont = this.parent.createElement('div', { id: 'area_cont', className: 'e-area-cont' });
area.appendChild(areaText);
area.appendChild(areaCont);
cultureText = l10n.getConstant('Area');
var defArea = this.parent.createElement('span', { id: 'area', className: 'e-area e-area-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedArea');
var stackedArea = this.parent.createElement('span', { id: 'stackedArea', className: 'e-stackedarea e-area-icon e-menu-icon e-icons',
attrs: { title: cultureText, 'aria-label': cultureText, tabindex: '-1' } });
cultureText = l10n.getConstant('StackedArea100');
var stackedArea100 = this.parent.createElement('span', { id: 'stackedArea100', cla