UNPKG

@syncfusion/ej2-filemanager

Version:
615 lines (614 loc) 28.1 kB
/* eslint-disable @typescript-eslint/no-explicit-any */ import { Toolbar as BaseToolbar } from '@syncfusion/ej2-navigations'; import { select, isNullOrUndefined as isNOU, closest, selectAll } from '@syncfusion/ej2-base'; import { createDialog } from '../pop-up/dialog'; import * as events from '../base/constant'; import * as CLS from '../base/classes'; import { refresh, getPathObject, getLocaleText, getCssClass, sortbyClickHandler } from '../common/utility'; import { createDeniedDialog, updateLayout } from '../common/utility'; import { GetDetails } from '../common/operations'; import { DropDownButton } from '@syncfusion/ej2-splitbuttons'; import { cutFiles, copyFiles, pasteHandler, hasEditAccess } from '../common/index'; import { doDownload, createNewFolder, uploadItem } from '../common/index'; /** * Toolbar module */ var Toolbar = /** @class */ (function () { /** * Constructor for the Toolbar module * * @hidden * @param {IFileManager} parent - specifies the parent element. * @private */ function Toolbar(parent) { this.default = ['Delete', 'Rename', 'Download', 'Cut', 'Copy', 'Paste']; this.single = ['Delete', 'Rename', 'Download', 'Cut', 'Copy']; this.multiple = ['Delete', 'Download', 'Cut', 'Copy', 'Refresh']; this.selection = ['NewFolder', 'Upload', 'SortBy', 'Refresh']; this.parent = parent; this.render(); this.addEventListener(); } Toolbar.prototype.render = function () { var _this = this; this.items = this.toolbarItemData(this.getItems(this.parent.toolbarSettings.items.map(function (item) { return item.trim(); }))); var eventArgs = { items: this.items }; this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) { _this.items = toolbarCreateArgs.items; _this.toolbarObj = new BaseToolbar({ items: _this.items, created: _this.toolbarCreateHandler.bind(_this), overflowMode: 'Popup', clicked: _this.onClicked.bind(_this), enableHtmlSanitizer: _this.parent.enableHtmlSanitizer, enableRtl: _this.parent.enableRtl }); _this.toolbarObj.isStringTemplate = true; _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent; _this.toolbarObj.appendTo('#' + _this.parent.element.id + CLS.TOOLBAR_ID); }); }; Toolbar.prototype.getItemIndex = function (item) { var itemId = this.getId(item); for (var i = 0; i < this.items.length; i++) { if (this.items[i].id === itemId) { return i; } } return -1; }; Toolbar.prototype.getItems = function (items) { var currItems = items.slice(); if (this.parent.isDevice && this.parent.allowMultiSelection) { currItems.push('SelectAll'); } if (this.parent.toolbarItems.length > 0) { currItems = this.parent.toolbarItems.map(function (item) { return item.name; }); } return currItems; }; /* istanbul ignore next */ Toolbar.prototype.onClicked = function (args) { var _this = this; if (isNOU(args.item) || !args.item.id) { return; } var tool = args.item.id.substr((this.parent.element.id + '_tb_').length); var details; if (tool === 'refresh' || tool === 'newfolder' || tool === 'upload') { details = [getPathObject(this.parent)]; this.parent.itemData = details; } else { this.parent.notify(events.selectedData, {}); details = this.parent.itemData; } var eventArgs = { cancel: false, fileDetails: details, item: args.item }; this.parent.trigger('toolbarClick', eventArgs, function (toolbarClickArgs) { var sItems; var target; if (!toolbarClickArgs.cancel) { switch (tool) { case 'sortby': target = closest(args.originalEvent.target, '.' + CLS.TB_ITEM); if (target && target.classList.contains('e-toolbar-popup')) { args.cancel = true; } break; case 'newfolder': createNewFolder(_this.parent); break; case 'cut': cutFiles(_this.parent); break; case 'copy': copyFiles(_this.parent); break; case 'delete': for (var i = 0; i < details.length; i++) { if (!hasEditAccess(details[i])) { createDeniedDialog(_this.parent, details[i], events.permissionEdit); return; } } createDialog(_this.parent, 'Delete'); break; case 'details': _this.parent.notify(events.detailsInit, {}); sItems = _this.parent.selectedItems; if (_this.parent.activeModule === 'navigationpane') { sItems = []; } GetDetails(_this.parent, sItems, _this.parent.path, 'details'); break; case 'paste': _this.parent.folderPath = ''; pasteHandler(_this.parent); break; case 'refresh': refresh(_this.parent); break; case 'download': doDownload(_this.parent); break; case 'rename': if (!hasEditAccess(details[0])) { createDeniedDialog(_this.parent, details[0], events.permissionEdit); } else { _this.parent.notify(events.renameInit, {}); createDialog(_this.parent, 'Rename'); } break; case 'upload': uploadItem(_this.parent); break; case 'selectall': _this.parent.notify(events.selectAllInit, {}); break; case 'selection': _this.parent.notify(events.clearAllInit, {}); break; } } }); }; Toolbar.prototype.toolbarCreateHandler = function () { var _this = this; if (!isNOU(select('#' + this.getId('SortBy'), this.parent.element))) { var items = [ { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'), iconCss: this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '' }, { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size'), iconCss: this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '' }, { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified'), iconCss: this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '' }, { separator: true }, { id: this.getPupupId('ascending'), text: getLocaleText(this.parent, 'Ascending'), iconCss: this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '' }, { id: this.getPupupId('descending'), text: getLocaleText(this.parent, 'Descending'), iconCss: this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : '' }, { id: this.getPupupId('none'), text: getLocaleText(this.parent, 'None'), iconCss: this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : '' } ]; this.buttonObj = new DropDownButton({ items: items, cssClass: getCssClass(this.parent, CLS.ROOT_POPUP), select: sortbyClickHandler.bind(this, this.parent), enableHtmlSanitizer: this.parent.enableHtmlSanitizer, enableRtl: this.parent.enableRtl, iconCss: CLS.ICON_SHORTBY }); this.buttonObj.isStringTemplate = true; this.buttonObj.appendTo('#' + this.getId('SortBy')); } if (!isNOU(select('#' + this.getId('View'), this.parent.element))) { var gridSpan_1 = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>'; var largeIconSpan_1 = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>'; var layoutItems = [ { id: this.getPupupId('large'), text: getLocaleText(this.parent, 'View-LargeIcons'), iconCss: this.parent.view === 'Details' ? '' : CLS.TB_OPTION_TICK }, { id: this.getPupupId('details'), text: getLocaleText(this.parent, 'View-Details'), iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : '' } ]; this.layoutBtnObj = new DropDownButton({ iconCss: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE, cssClass: getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP), items: layoutItems, select: this.layoutChange.bind(this), enableRtl: this.parent.enableRtl, content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>', beforeItemRender: function (args) { var tickIcon = args.item.iconCss; var viewText = args.item.text === getLocaleText(_this.parent, 'View-LargeIcons'); var iconClass = tickIcon ? ' e-menu-icon ' + tickIcon : ''; args.element.innerHTML = '<span class="' + iconClass + '"></span>' + (viewText ? largeIconSpan_1 : gridSpan_1) + args.item.text; var span = args.element.firstChild; if (span && span.className === '') { args.element.removeChild(span); } } }); this.layoutBtnObj.isStringTemplate = true; this.layoutBtnObj.appendTo('#' + this.getId('View')); } this.hideItems(this.default, true); this.hideStatus(); if (this.parent.portals && this.toolbarObj.portals) { this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals); this.parent['renderReactTemplates'](); } var btnElement = selectAll('.e-btn', this.toolbarObj.element); var _loop_1 = function (btnCount) { /* istanbul ignore next */ btnElement[btnCount].onkeydown = function (e) { if (e.keyCode === 13 && !e.target.classList.contains('e-fe-popup')) { e.preventDefault(); } }; btnElement[btnCount].onkeyup = function (e) { if (e.keyCode === 13 && !e.target.classList.contains('e-fe-popup')) { btnElement[btnCount].click(); } }; }; for (var btnCount = 0; btnCount < btnElement.length; btnCount++) { _loop_1(btnCount); } this.parent.refreshLayout(); }; Toolbar.prototype.updateSortByButton = function () { if (this.buttonObj) { var items = this.buttonObj.items; for (var itemCount = 0; itemCount < items.length; itemCount++) { if (items[itemCount].id === this.getPupupId('name')) { items[itemCount].iconCss = this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : ''; } else if (items[itemCount].id === this.getPupupId('size')) { items[itemCount].iconCss = this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : ''; } else if (items[itemCount].id === this.getPupupId('date')) { if (this.parent.sortBy === 'dateModified' || this.parent.sortBy === 'dateCreated') { items[itemCount].iconCss = this.parent.sortBy === this.parent.sortBy ? CLS.TB_OPTION_DOT : ''; } else { items[itemCount].iconCss = this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : ''; } } else if (items[itemCount].id === this.getPupupId('ascending')) { items[itemCount].iconCss = this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : ''; } else if (items[itemCount].id === this.getPupupId('descending')) { items[itemCount].iconCss = this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : ''; } else if (items[itemCount].id === this.getPupupId('none')) { items[itemCount].iconCss = this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : ''; } } } }; Toolbar.prototype.getPupupId = function (id) { return this.parent.element.id + '_ddl_' + id.toLowerCase(); }; Toolbar.prototype.layoutChange = function (args) { if (this.parent.view === 'Details') { if (args.item.id === this.getPupupId('large')) { updateLayout(this.parent, 'LargeIcons'); } } else { if (args.item.id === this.getPupupId('details')) { updateLayout(this.parent, 'Details'); } } }; Toolbar.prototype.toolbarItemData = function (data) { var items = []; var mode = 'Both'; if (this.parent.isMobile) { mode = 'Overflow'; } for (var i = 0; i < data.length; i++) { var item = void 0; var propItem = void 0; if (this.parent.toolbarItems.length > 0) { propItem = this.getItemModel(this.parent.toolbarItems[parseInt(i.toString(), 10)]); } var itemId = this.getId(data[i]); var itemText = getLocaleText(this.parent, data[i]); var itemTooltip = getLocaleText(this.parent, 'Tooltip-' + data[i]); switch (data[i]) { case '|': item = { type: 'Separator' }; break; case 'Upload': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_UPLOAD, showTextOn: mode }; break; case 'SortBy': { var spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>'; if (propItem && propItem.text) { spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + propItem.text + '</span>'; } item = { id: itemId, tooltipText: itemTooltip, template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1">' + spanElement + '</button>' }; break; } case 'Refresh': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_REFRESH, showTextOn: mode }; break; case 'Selection': item = { id: itemId, text: itemText, tooltipText: itemTooltip, suffixIcon: CLS.ICON_CLEAR, overflow: 'Show', align: 'Right' }; break; case 'View': { var viewText = void 0; if (propItem && propItem.text) { viewText = propItem.text; } else { viewText = getLocaleText(this.parent, 'View'); } item = { id: itemId, tooltipText: itemTooltip, prefixIcon: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE, overflow: 'Show', align: 'Right', text: itemText, showTextOn: 'Overflow', template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1" aria-label=' + viewText + '></button>' }; break; } case 'Details': item = { id: itemId, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DETAILS, overflow: 'Show', align: 'Right', text: itemText, showTextOn: 'Overflow' }; break; case 'NewFolder': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_NEWFOLDER, showTextOn: mode }; break; case 'Cut': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_CUT, showTextOn: mode }; break; case 'Copy': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_COPY, showTextOn: mode }; break; case 'Paste': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_PASTE, showTextOn: mode }; break; case 'Delete': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DELETE, showTextOn: mode }; break; case 'Rename': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_RENAME, showTextOn: mode }; break; case 'Download': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DOWNLOAD, showTextOn: mode }; break; case 'SelectAll': item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_SELECTALL, showTextOn: mode }; break; default: item = { id: itemId, text: itemText, tooltipText: itemTooltip, template: '' }; break; } if (this.parent.toolbarItems.length > 0 && propItem) { var mergedItems = Object.assign({}, item, propItem); items.push(mergedItems); } else { items.push(item); } } return items; }; Toolbar.prototype.getItemModel = function (propItem) { var item = {}; if (propItem.id) { item.id = propItem.id; } if (propItem.text) { item.text = propItem.text; } if (propItem.tooltipText) { item.tooltipText = propItem.tooltipText; } if (propItem.prefixIcon) { item.prefixIcon = propItem.prefixIcon; } if (propItem.cssClass) { item.cssClass = propItem.cssClass; } if (propItem.showTextOn !== 'Both') { item.showTextOn = propItem.showTextOn; } if (propItem.template) { item.template = propItem.template; } if (propItem.disabled) { item.disabled = propItem.disabled; } if (propItem.width !== 'auto') { item.width = propItem.width; } if (propItem.suffixIcon) { item.suffixIcon = propItem.suffixIcon; } if (propItem.align !== 'Left') { item.align = propItem.align; } if (propItem.overflow !== 'None') { item.overflow = propItem.overflow; } if (propItem.htmlAttributes) { item.htmlAttributes = propItem.htmlAttributes; } if (propItem.type !== 'Button') { item.type = propItem.type; } if (propItem.visible !== true) { item.visible = propItem.visible; } if (propItem.showAlwaysInPopup) { item.showAlwaysInPopup = propItem.showAlwaysInPopup; } if (propItem.tabIndex !== -1) { item.tabIndex = propItem.tabIndex; } return item; }; Toolbar.prototype.getId = function (id) { return this.parent.element.id + '_tb_' + id.toLowerCase(); }; Toolbar.prototype.addEventListener = function () { this.parent.on(events.modelChanged, this.onPropertyChanged, this); this.parent.on(events.selectionChanged, this.onSelectionChanged, this); this.parent.on(events.layoutChange, this.onLayoutChange, this); this.parent.on(events.showPaste, this.showPaste, this); this.parent.on(events.hidePaste, this.hidePaste, this); this.parent.on(events.destroy, this.destroy, this); this.parent.on(events.sortByChange, this.updateSortByButton, this); }; Toolbar.prototype.reRenderToolbar = function (e) { var _this = this; var itemsToProcess = []; if (this.parent.toolbarItems.length > 0) { itemsToProcess = this.parent.toolbarItems.map(function (item) { return item.name; }); } else if (e.newProp.toolbarSettings.items !== undefined) { itemsToProcess = e.newProp.toolbarSettings.items.map(function (item) { return item.trim(); }); } if (itemsToProcess.length > 0) { this.items = this.toolbarItemData(this.getItems(itemsToProcess)); var eventArgs = { items: this.items }; this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) { if (_this.buttonObj) { _this.buttonObj.destroy(); } if (_this.layoutBtnObj) { _this.layoutBtnObj.destroy(); } _this.items = toolbarCreateArgs.items; _this.toolbarObj.items = _this.items; _this.toolbarObj.dataBind(); _this.toolbarCreateHandler(); }); } }; Toolbar.prototype.onSelectionChanged = function () { this.hideStatus(); this.hideItems(this.single, true); this.hideItems(this.selection, false); if (this.parent.selectedItems.length === 1) { this.hideItems(this.single, false); this.hideItems(this.selection, true); } else if (this.parent.selectedItems.length > 1) { this.hideItems(this.multiple, false); this.hideItems(this.selection, true); } var ele = select('#' + this.getId('Selection'), this.toolbarObj.element); if (this.parent.selectedItems.length > 0 && ele && !this.parent.enableVirtualization) { var txt = void 0; if (this.parent.selectedItems.length === 1) { txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Item-Selection'); } else { txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Items-Selection'); } select('.e-tbar-btn-text', ele).textContent = txt; this.toolbarObj.hideItem(ele.parentElement, false); } }; Toolbar.prototype.hideItems = function (tools, toHide) { for (var i = 0; i < tools.length; i++) { var ele = select('#' + this.getId(tools[i]), this.parent.element); if (ele) { this.toolbarObj.hideItem(ele.parentElement, toHide); } } }; Toolbar.prototype.hideStatus = function () { var ele = select('#' + this.getId('Selection'), this.toolbarObj.element); if (ele) { this.toolbarObj.hideItem(ele.parentElement, true); } }; Toolbar.prototype.showPaste = function () { this.hideItems(['Paste'], false); }; Toolbar.prototype.hidePaste = function () { this.hideItems(['Paste'], true); }; Toolbar.prototype.onLayoutChange = function () { if (this.layoutBtnObj) { this.layoutBtnObj.iconCss = this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE; var items = this.layoutBtnObj.items; for (var itemCount = 0; itemCount < items.length; itemCount++) { if (items[itemCount].id === this.getPupupId('large')) { items[itemCount].iconCss = this.parent.view === 'LargeIcons' ? CLS.TB_OPTION_TICK : ''; } else if (items[itemCount].id === this.getPupupId('details')) { items[itemCount].iconCss = this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : ''; } } } }; Toolbar.prototype.removeEventListener = function () { this.parent.off(events.modelChanged, this.onPropertyChanged); this.parent.off(events.selectionChanged, this.onSelectionChanged); this.parent.off(events.layoutChange, this.onLayoutChange); this.parent.off(events.showPaste, this.showPaste); this.parent.off(events.hidePaste, this.hidePaste); this.parent.off(events.destroy, this.destroy); this.parent.off(events.sortByChange, this.updateSortByButton); }; /** * For internal use only - Get the module name. * * @returns {string} - returns module name. * @private */ Toolbar.prototype.getModuleName = function () { return 'toolbar'; }; Toolbar.prototype.onPropertyChanged = function (e) { if (e.module !== this.getModuleName() && e.module !== 'common') { /* istanbul ignore next */ return; } for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) { var prop = _a[_i]; switch (prop) { case 'cssClass': if (this.buttonObj) { this.buttonObj.cssClass = getCssClass(this.parent, CLS.ROOT_POPUP); } if (this.layoutBtnObj) { this.layoutBtnObj.cssClass = getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP); } break; case 'height': case 'width': this.toolbarObj.refreshOverflow(); break; case 'toolbarSettings': case 'toolbarItems': this.reRenderToolbar(e); break; } } }; Toolbar.prototype.destroy = function () { if (this.parent.isDestroyed) { return; } this.removeEventListener(); if (this.buttonObj) { this.buttonObj.destroy(); } if (this.layoutBtnObj) { this.layoutBtnObj.destroy(); } this.toolbarObj.destroy(); this.parent.refreshLayout(); }; Toolbar.prototype.enableItems = function (items, isEnable) { for (var i = 0; i < items.length; i++) { var ele = select('#' + this.getId(items[i]), this.parent.element); if (ele) { this.toolbarObj.enableItems(ele.parentElement, isEnable); } } }; return Toolbar; }()); export { Toolbar };