@syncfusion/ej2-filemanager 20.1.52-10460 → 20.1.52-10461
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +412 -410
- package/README.md +69 -69
- package/dist/ej2-filemanager.min.js +1 -0
- package/dist/ej2-filemanager.umd.min.js +1 -10
- package/dist/ej2-filemanager.umd.min.js.map +1 -1
- package/dist/es6/ej2-filemanager.es2015.js +57 -54
- package/dist/es6/ej2-filemanager.es2015.js.map +1 -1
- package/dist/es6/ej2-filemanager.es5.js +174 -171
- package/dist/es6/ej2-filemanager.es5.js.map +1 -1
- package/dist/global/ej2-filemanager.min.js +1 -10
- package/dist/global/ej2-filemanager.min.js.map +1 -1
- package/dist/global/index.d.ts +0 -9
- package/dist/ts/file-manager/actions/breadcrumb-bar.ts +427 -0
- package/dist/ts/file-manager/actions/toolbar.ts +498 -0
- package/dist/ts/file-manager/base/classes.ts +225 -0
- package/dist/ts/file-manager/base/constant.ts +137 -0
- package/dist/ts/file-manager/base/file-manager.ts +1659 -0
- package/dist/ts/file-manager/base/interface.ts +652 -0
- package/dist/ts/file-manager/common/operations.ts +614 -0
- package/dist/ts/file-manager/common/utility.ts +1503 -0
- package/dist/ts/file-manager/layout/details-view.ts +1837 -0
- package/dist/ts/file-manager/layout/large-icons-view.ts +1587 -0
- package/dist/ts/file-manager/layout/navigation-pane.ts +879 -0
- package/dist/ts/file-manager/models/ajax-settings.ts +39 -0
- package/dist/ts/file-manager/models/column.ts +197 -0
- package/dist/ts/file-manager/models/contextMenu-settings.ts +44 -0
- package/dist/ts/file-manager/models/default-locale.ts +102 -0
- package/dist/ts/file-manager/models/details-view-settings.ts +48 -0
- package/dist/ts/file-manager/models/navigation-pane-settings.ts +42 -0
- package/dist/ts/file-manager/models/search-settings.ts +48 -0
- package/dist/ts/file-manager/models/toolbar-settings.ts +25 -0
- package/dist/ts/file-manager/models/upload-settings.ts +51 -0
- package/dist/ts/file-manager/pop-up/context-menu.ts +614 -0
- package/dist/ts/file-manager/pop-up/dialog.ts +996 -0
- package/helpers/e2e/filemanagerHelper.js +183 -166
- package/license +9 -9
- package/package.json +72 -72
- package/src/file-manager/base/file-manager-model.d.ts +329 -329
- package/src/file-manager/base/file-manager.js +19 -19
- package/src/file-manager/models/ajax-settings-model.d.ts +21 -21
- package/src/file-manager/models/ajax-settings.js +19 -19
- package/src/file-manager/models/column-model.d.ts +98 -98
- package/src/file-manager/models/column.js +19 -19
- package/src/file-manager/models/contextMenu-settings-model.d.ts +21 -21
- package/src/file-manager/models/contextMenu-settings.js +19 -19
- package/src/file-manager/models/details-view-settings-model.d.ts +19 -19
- package/src/file-manager/models/details-view-settings.js +19 -19
- package/src/file-manager/models/navigation-pane-settings-model.d.ts +25 -25
- package/src/file-manager/models/navigation-pane-settings.js +19 -19
- package/src/file-manager/models/search-settings-model.d.ts +26 -26
- package/src/file-manager/models/search-settings.js +19 -19
- package/src/file-manager/models/toolbar-settings-model.d.ts +11 -11
- package/src/file-manager/models/toolbar-settings.js +19 -19
- package/src/file-manager/models/upload-settings-model.d.ts +31 -31
- package/src/file-manager/models/upload-settings.js +19 -19
- package/src/file-manager/pop-up/context-menu.js +3 -0
- package/styles/compatibility/bootstrap.css +1 -0
- package/styles/compatibility/bootstrap.scss +12 -0
- package/styles/compatibility/bootstrap4.css +1 -0
- package/styles/compatibility/bootstrap4.scss +12 -0
- package/styles/compatibility/fabric.css +1 -0
- package/styles/compatibility/fabric.scss +12 -0
- package/styles/compatibility/highcontrast.css +1 -0
- package/styles/compatibility/highcontrast.scss +12 -0
- package/styles/compatibility/material.css +1 -0
- package/styles/compatibility/material.scss +12 -0
- package/styles/file-manager/_all.scss +2 -2
- package/styles/file-manager/_bds-definition.scss +236 -0
- package/styles/file-manager/_bigger.scss +759 -0
- package/styles/file-manager/_bootstrap-dark-definition.scss +244 -240
- package/styles/file-manager/_bootstrap-definition.scss +245 -241
- package/styles/file-manager/_bootstrap4-definition.scss +246 -242
- package/styles/file-manager/_bootstrap5-definition.scss +242 -237
- package/styles/file-manager/_bootstrap5.3-definition.scss +242 -0
- package/styles/file-manager/_fabric-dark-definition.scss +242 -238
- package/styles/file-manager/_fabric-definition.scss +244 -240
- package/styles/file-manager/_fluent-definition.scss +249 -246
- package/styles/file-manager/_fluent2-definition.scss +255 -0
- package/styles/file-manager/_fusionnew-definition.scss +241 -0
- package/styles/file-manager/_highcontrast-definition.scss +244 -240
- package/styles/file-manager/_highcontrast-light-definition.scss +244 -240
- package/styles/file-manager/_layout.scss +1252 -1815
- package/styles/file-manager/_material-dark-definition.scss +245 -240
- package/styles/file-manager/_material-definition.scss +245 -240
- package/styles/file-manager/_material3-definition.scss +235 -0
- package/styles/file-manager/_tailwind-definition.scss +236 -232
- package/styles/file-manager/_theme.scss +418 -397
- package/styles/file-manager/icons/_bds.scss +235 -0
- package/styles/file-manager/icons/_bootstrap-dark.scss +235 -235
- package/styles/file-manager/icons/_bootstrap.scss +235 -236
- package/styles/file-manager/icons/_bootstrap4.scss +235 -236
- package/styles/file-manager/icons/_bootstrap5.3.scss +235 -0
- package/styles/file-manager/icons/_bootstrap5.scss +235 -235
- package/styles/file-manager/icons/_fabric-dark.scss +229 -230
- package/styles/file-manager/icons/_fabric.scss +229 -230
- package/styles/file-manager/icons/_fluent.scss +235 -235
- package/styles/file-manager/icons/_fluent2.scss +235 -0
- package/styles/file-manager/icons/_fusionnew.scss +235 -0
- package/styles/file-manager/icons/_highcontrast-light.scss +235 -235
- package/styles/file-manager/icons/_highcontrast.scss +229 -229
- package/styles/file-manager/icons/_material-dark.scss +235 -235
- package/styles/file-manager/icons/_material.scss +235 -235
- package/styles/file-manager/icons/_material3.scss +235 -0
- package/styles/file-manager/icons/_tailwind.scss +235 -235
- package/.eslintrc.json +0 -244
- package/styles/bootstrap-dark.css +0 -1920
- package/styles/bootstrap-dark.scss +0 -1
- package/styles/bootstrap.css +0 -1899
- package/styles/bootstrap.scss +0 -1
- package/styles/bootstrap4.css +0 -1935
- package/styles/bootstrap4.scss +0 -1
- package/styles/bootstrap5-dark.css +0 -1982
- package/styles/bootstrap5-dark.scss +0 -1
- package/styles/bootstrap5.css +0 -1982
- package/styles/bootstrap5.scss +0 -1
- package/styles/fabric-dark.css +0 -1891
- package/styles/fabric-dark.scss +0 -1
- package/styles/fabric.css +0 -1891
- package/styles/fabric.scss +0 -1
- package/styles/file-manager/_bootstrap5-dark-definition.scss +0 -1
- package/styles/file-manager/_fluent-dark-definition.scss +0 -1
- package/styles/file-manager/_tailwind-dark-definition.scss +0 -1
- package/styles/file-manager/bootstrap-dark.css +0 -1920
- package/styles/file-manager/bootstrap-dark.scss +0 -16
- package/styles/file-manager/bootstrap.css +0 -1899
- package/styles/file-manager/bootstrap.scss +0 -16
- package/styles/file-manager/bootstrap4.css +0 -1935
- package/styles/file-manager/bootstrap4.scss +0 -16
- package/styles/file-manager/bootstrap5-dark.css +0 -1982
- package/styles/file-manager/bootstrap5-dark.scss +0 -16
- package/styles/file-manager/bootstrap5.css +0 -1982
- package/styles/file-manager/bootstrap5.scss +0 -16
- package/styles/file-manager/fabric-dark.css +0 -1891
- package/styles/file-manager/fabric-dark.scss +0 -16
- package/styles/file-manager/fabric.css +0 -1891
- package/styles/file-manager/fabric.scss +0 -16
- package/styles/file-manager/fluent-dark.css +0 -1901
- package/styles/file-manager/fluent-dark.scss +0 -16
- package/styles/file-manager/fluent.css +0 -1900
- package/styles/file-manager/fluent.scss +0 -16
- package/styles/file-manager/highcontrast-light.css +0 -1897
- package/styles/file-manager/highcontrast-light.scss +0 -16
- package/styles/file-manager/highcontrast.css +0 -1897
- package/styles/file-manager/highcontrast.scss +0 -16
- package/styles/file-manager/icons/_bootstrap5-dark.scss +0 -1
- package/styles/file-manager/icons/_fluent-dark.scss +0 -1
- package/styles/file-manager/icons/_tailwind-dark.scss +0 -1
- package/styles/file-manager/material-dark.css +0 -1945
- package/styles/file-manager/material-dark.scss +0 -16
- package/styles/file-manager/material.css +0 -1932
- package/styles/file-manager/material.scss +0 -16
- package/styles/file-manager/tailwind-dark.css +0 -1969
- package/styles/file-manager/tailwind-dark.scss +0 -16
- package/styles/file-manager/tailwind.css +0 -1969
- package/styles/file-manager/tailwind.scss +0 -16
- package/styles/fluent-dark.css +0 -1901
- package/styles/fluent-dark.scss +0 -1
- package/styles/fluent.css +0 -1900
- package/styles/fluent.scss +0 -1
- package/styles/highcontrast-light.css +0 -1897
- package/styles/highcontrast-light.scss +0 -1
- package/styles/highcontrast.css +0 -1897
- package/styles/highcontrast.scss +0 -1
- package/styles/material-dark.css +0 -1945
- package/styles/material-dark.scss +0 -1
- package/styles/material.css +0 -1932
- package/styles/material.scss +0 -1
- package/styles/tailwind-dark.css +0 -1969
- package/styles/tailwind-dark.scss +0 -1
- package/styles/tailwind.css +0 -1969
- package/styles/tailwind.scss +0 -1
- package/tslint.json +0 -111
@@ -0,0 +1,614 @@
|
|
1
|
+
import { ContextMenu as Menu, BeforeOpenCloseMenuEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';
|
2
|
+
import { IFileManager, MenuClickEventArgs, MenuOpenEventArgs, NotifyArgs } from '../base/interface';
|
3
|
+
import { isNullOrUndefined as isNOU, KeyboardEventArgs, createElement, closest, KeyboardEvents } from '@syncfusion/ej2-base';
|
4
|
+
import { getValue, select } from '@syncfusion/ej2-base';
|
5
|
+
import { MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
|
6
|
+
import { Download, GetDetails } from './../common/operations';
|
7
|
+
import { createDialog } from './dialog';
|
8
|
+
import { cutFiles, copyFiles, refresh, getPathObject, getLocaleText, updateLayout, getFullPath } from './../common/utility';
|
9
|
+
import { getCssClass, sortbyClickHandler, pasteHandler } from './../common/utility';
|
10
|
+
import { createDeniedDialog, createNewFolder, uploadItem, hasEditAccess, hasDownloadAccess } from './../common/utility';
|
11
|
+
import * as events from './../base/constant';
|
12
|
+
import * as CLS from '../base/classes';
|
13
|
+
|
14
|
+
/**
|
15
|
+
* ContextMenu module
|
16
|
+
*/
|
17
|
+
export class ContextMenu {
|
18
|
+
private parent: IFileManager;
|
19
|
+
private targetElement: HTMLElement;
|
20
|
+
public contextMenu: Menu;
|
21
|
+
public menuTarget: HTMLElement;
|
22
|
+
private keyConfigs: { [key: string]: string };
|
23
|
+
private keyboardModule: KeyboardEvents;
|
24
|
+
private menuType: string;
|
25
|
+
private currentItems: MenuItemModel[] = [];
|
26
|
+
private currentElement: HTMLElement = null;
|
27
|
+
private disabledItems: string[] = [];
|
28
|
+
private targetNodeElement: HTMLElement;
|
29
|
+
// eslint-disable-next-line
|
30
|
+
public menuItemData: object;
|
31
|
+
/**
|
32
|
+
* Constructor for the ContextMenu module
|
33
|
+
*
|
34
|
+
* @param {IFileManager} parent - Specifies the parent element.
|
35
|
+
* @hidden
|
36
|
+
*/
|
37
|
+
constructor(parent?: IFileManager) {
|
38
|
+
this.parent = parent;
|
39
|
+
this.render();
|
40
|
+
}
|
41
|
+
|
42
|
+
private render(): void {
|
43
|
+
this.keyConfigs = {
|
44
|
+
downarrow: 'downarrow',
|
45
|
+
uparrow: 'uparrown'
|
46
|
+
};
|
47
|
+
this.contextMenu = new Menu({
|
48
|
+
enableRtl: this.parent.enableRtl,
|
49
|
+
locale: this.parent.locale,
|
50
|
+
target: '#' + this.parent.element.id,
|
51
|
+
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
|
52
|
+
beforeItemRender: this.onBeforeItemRender.bind(this),
|
53
|
+
select: this.onSelect.bind(this),
|
54
|
+
beforeOpen: this.onBeforeOpen.bind(this),
|
55
|
+
beforeClose: this.onBeforeClose.bind(this),
|
56
|
+
cssClass: getCssClass(this.parent, CLS.ROOT_POPUP)
|
57
|
+
});
|
58
|
+
this.contextMenu.isStringTemplate = true;
|
59
|
+
this.contextMenu.appendTo('#' + this.parent.element.id + CLS.CONTEXT_MENU_ID);
|
60
|
+
this.addEventListener();
|
61
|
+
}
|
62
|
+
|
63
|
+
/* istanbul ignore next */
|
64
|
+
public onBeforeItemRender(args: MenuEventArgs): void {
|
65
|
+
if (args.item.id === this.getMenuId('largeiconsview')) {
|
66
|
+
const iconSpan: HTMLElement = createElement('span');
|
67
|
+
const element: HTMLElement = args.element;
|
68
|
+
element.insertBefore(iconSpan, this.parent.view === 'LargeIcons' ? element.childNodes[1] : element.childNodes[0]);
|
69
|
+
iconSpan.setAttribute('class', CLS.ICON_LARGE + ' ' + CLS.MENU_ICON);
|
70
|
+
}
|
71
|
+
if (args.item.id === this.getMenuId('detailsview')) {
|
72
|
+
const iconSpan: HTMLElement = createElement('span');
|
73
|
+
const element: HTMLElement = args.element;
|
74
|
+
element.insertBefore(iconSpan, this.parent.view === 'Details' ? element.childNodes[1] : element.childNodes[0]);
|
75
|
+
iconSpan.setAttribute('class', CLS.ICON_GRID + ' ' + CLS.MENU_ICON);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
public onBeforeClose(): void {
|
80
|
+
this.menuTarget = null;
|
81
|
+
}
|
82
|
+
|
83
|
+
/* istanbul ignore next */
|
84
|
+
public onBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
|
85
|
+
this.disabledItems = [];
|
86
|
+
let selected: boolean = false;
|
87
|
+
let uid: string;
|
88
|
+
// eslint-disable-next-line
|
89
|
+
let data: { [key: string]: Object };
|
90
|
+
let treeFolder: boolean = false;
|
91
|
+
let target: Element = args.event.target as Element;
|
92
|
+
this.menuTarget = this.targetNodeElement = <HTMLElement>target;
|
93
|
+
this.currentElement = args.element;
|
94
|
+
if (target.classList.contains('e-spinner-pane')) {
|
95
|
+
target = this.parent.navigationpaneModule.activeNode.getElementsByClassName(CLS.FULLROW)[0];
|
96
|
+
this.menuTarget = this.targetNodeElement = <HTMLElement>target;
|
97
|
+
}
|
98
|
+
this.targetElement = this.parent.view === 'Details' ? closest(target, 'tr.e-row') as HTMLElement : target as HTMLElement;
|
99
|
+
const view: string = this.getTargetView(target);
|
100
|
+
this.updateActiveModule();
|
101
|
+
/* istanbul ignore next */
|
102
|
+
if (target.classList.contains(CLS.TREE_VIEW) || closest(target, 'th') ||
|
103
|
+
(closest(target, '#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID)) ||
|
104
|
+
(closest(target, '#' + this.parent.element.id + CLS.TOOLBAR_ID))) {
|
105
|
+
args.cancel = true;
|
106
|
+
// eslint:disable-next-line
|
107
|
+
} else if (!(this.parent.view === 'LargeIcons') && this.targetElement &&
|
108
|
+
this.targetElement.classList.contains('e-emptyrow')) {
|
109
|
+
this.setLayoutItem(target);
|
110
|
+
/* istanbul ignore next */
|
111
|
+
} else if (closest(target, '.' + CLS.EMPTY)) {
|
112
|
+
this.setLayoutItem(target);
|
113
|
+
// eslint:disable-next-line
|
114
|
+
} else if (!target.classList.contains(CLS.MENU_ITEM) &&
|
115
|
+
!target.classList.contains(CLS.MENU_ICON) && !target.classList.contains(CLS.SUBMENU_ICON)) {
|
116
|
+
/* istanbul ignore next */
|
117
|
+
// eslint:disable-next-line
|
118
|
+
if (this.parent.view === 'LargeIcons' && !isNOU(closest(target, 'li')) && !closest(target, '#' + this.parent.element.id + CLS.TREE_ID)) {
|
119
|
+
const eveArgs: KeyboardEventArgs = { ctrlKey: true, shiftKey: true } as KeyboardEventArgs;
|
120
|
+
if (!closest(target, 'li').classList.contains('e-active')) {
|
121
|
+
this.parent.largeiconsviewModule.doSelection(target, eveArgs);
|
122
|
+
}
|
123
|
+
// eslint-disable-next-line
|
124
|
+
data = this.parent.visitedData as { [key: string]: Object };
|
125
|
+
selected = true;
|
126
|
+
} else if (!isNOU(closest(target, 'tr.e-row'))) {
|
127
|
+
uid = this.targetElement.getAttribute('data-uid');
|
128
|
+
// eslint-disable-next-line
|
129
|
+
data = this.parent.detailsviewModule.gridObj.getRowObjectFromUID(uid).data as { [key: string]: Object };
|
130
|
+
if (isNOU(this.targetElement.getAttribute('aria-selected'))) {
|
131
|
+
/* istanbul ignore next */
|
132
|
+
this.parent.detailsviewModule.gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10)]);
|
133
|
+
}
|
134
|
+
selected = true;
|
135
|
+
/* istanbul ignore next */
|
136
|
+
} else if (closest(target, '#' + this.parent.element.id + CLS.TREE_ID)) {
|
137
|
+
uid = closest(target, 'li').getAttribute('data-uid');
|
138
|
+
if (!isNOU(uid)) {
|
139
|
+
this.parent.navigationpaneModule.treeObj.selectedNodes = [uid];
|
140
|
+
}
|
141
|
+
treeFolder = true;
|
142
|
+
}
|
143
|
+
/* istanbul ignore next */
|
144
|
+
if (selected) {
|
145
|
+
if (getValue('isFile', data) === true) {
|
146
|
+
this.setFileItem();
|
147
|
+
} else {
|
148
|
+
this.setFolderItem(false);
|
149
|
+
}
|
150
|
+
/* istanbul ignore next */
|
151
|
+
} else if (treeFolder) {
|
152
|
+
this.setFolderItem(true);
|
153
|
+
if (uid === this.parent.pathId[0]) {
|
154
|
+
this.disabledItems.push('Delete', 'Rename', 'Cut', 'Copy');
|
155
|
+
}
|
156
|
+
/* istanbul ignore next */
|
157
|
+
// eslint:disable-next-line
|
158
|
+
} else if (view === 'TreeView' || view === 'GridView' || view === 'LargeIcon') {
|
159
|
+
this.setLayoutItem(target);
|
160
|
+
/* istanbul ignore next */
|
161
|
+
} else {
|
162
|
+
args.cancel = true;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
const pasteEle: Element = select('#' + this.getMenuId('Paste'), this.contextMenu.element);
|
166
|
+
if (!args.cancel && !this.parent.enablePaste &&
|
167
|
+
pasteEle && !pasteEle.classList.contains('e-disabled')) {
|
168
|
+
this.disabledItems.push('Paste');
|
169
|
+
}
|
170
|
+
if (args.cancel) {
|
171
|
+
this.menuTarget = this.currentElement = null;
|
172
|
+
return;
|
173
|
+
}
|
174
|
+
this.contextMenu.dataBind();
|
175
|
+
let isSubMenu: boolean = false;
|
176
|
+
if (target.classList.contains(CLS.MENU_ITEM) ||
|
177
|
+
target.classList.contains(CLS.MENU_ICON) || target.classList.contains(CLS.SUBMENU_ICON)) {
|
178
|
+
isSubMenu = true;
|
179
|
+
}
|
180
|
+
this.menuItemData = isSubMenu ? this.menuItemData : this.getMenuItemData();
|
181
|
+
const eventArgs: MenuOpenEventArgs = {
|
182
|
+
fileDetails: [this.menuItemData],
|
183
|
+
element: args.element,
|
184
|
+
target: target,
|
185
|
+
items: isSubMenu ? args.items : this.contextMenu.items,
|
186
|
+
menuModule: this.contextMenu,
|
187
|
+
cancel: false,
|
188
|
+
menuType: this.menuType,
|
189
|
+
isSubMenu: isSubMenu
|
190
|
+
};
|
191
|
+
this.currentItems = eventArgs.items;
|
192
|
+
this.parent.trigger('menuOpen', eventArgs, (menuOpenArgs: MenuOpenEventArgs) => {
|
193
|
+
if (!isSubMenu) {
|
194
|
+
this.contextMenu.dataBind();
|
195
|
+
this.contextMenu.items = menuOpenArgs.items;
|
196
|
+
this.contextMenu.dataBind();
|
197
|
+
}
|
198
|
+
this.enableItems(this.disabledItems, false, true);
|
199
|
+
args.cancel = menuOpenArgs.cancel;
|
200
|
+
if (menuOpenArgs.cancel) {
|
201
|
+
this.menuTarget = this.targetNodeElement = this.currentElement = null;
|
202
|
+
}
|
203
|
+
});
|
204
|
+
}
|
205
|
+
|
206
|
+
private updateActiveModule(): void {
|
207
|
+
this.parent.activeModule = closest(this.menuTarget, '#' + this.parent.element.id + CLS.TREE_ID) ?
|
208
|
+
'navigationpane' : closest(this.menuTarget, '#' + this.parent.element.id + CLS.GRID_ID) ?
|
209
|
+
'detailsview' : closest(this.menuTarget, '#' + this.parent.element.id + CLS.LARGEICON_ID) ?
|
210
|
+
'largeiconsview' : this.parent.activeModule;
|
211
|
+
}
|
212
|
+
|
213
|
+
/* istanbul ignore next */
|
214
|
+
/**
|
215
|
+
*
|
216
|
+
* @param {Element} target - specifies the target element.
|
217
|
+
* @returns {string} -returns the target view.
|
218
|
+
* @hidden
|
219
|
+
*/
|
220
|
+
public getTargetView(target: Element): string {
|
221
|
+
return target.classList.contains(CLS.TREE_VIEW) ?
|
222
|
+
'TreeView' : target.classList.contains(CLS.GRID_VIEW) ?
|
223
|
+
'GridView' : target.classList.contains(CLS.ICON_VIEW) ?
|
224
|
+
'LargeIcon' : target.classList.contains(CLS.LARGE_ICONS) ?
|
225
|
+
'LargeIcon' : '';
|
226
|
+
}
|
227
|
+
|
228
|
+
public getItemIndex(item: string): number {
|
229
|
+
const itemId: string = this.getMenuId(item);
|
230
|
+
for (let i: number = 0; i < this.currentItems.length; i++) {
|
231
|
+
if ((this.currentItems[i].id === itemId) || (this.currentItems[i].id === item)) {
|
232
|
+
return i;
|
233
|
+
}
|
234
|
+
}
|
235
|
+
return -1;
|
236
|
+
}
|
237
|
+
|
238
|
+
public disableItem(items: string[]): void {
|
239
|
+
if (items.length !== 0) {
|
240
|
+
this.disabledItems = this.disabledItems.concat(items);
|
241
|
+
}
|
242
|
+
}
|
243
|
+
|
244
|
+
private enableItems(items: string[], enable?: boolean, isUniqueId?: boolean): void {
|
245
|
+
for (let i: number = 0; i < items.length; i++) {
|
246
|
+
if (this.checkValidItem(items[i]) === 1) {
|
247
|
+
this.contextMenu.enableItems([this.getMenuId(items[i])], enable, isUniqueId);
|
248
|
+
} else if (this.checkValidItem(items[i]) === 2) {
|
249
|
+
this.contextMenu.enableItems([items[i]], enable, isUniqueId);
|
250
|
+
}
|
251
|
+
}
|
252
|
+
}
|
253
|
+
|
254
|
+
private setFolderItem(isTree: boolean): void {
|
255
|
+
this.menuType = 'folder';
|
256
|
+
this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.folder.map((item: string) => item.trim()));
|
257
|
+
this.contextMenu.dataBind();
|
258
|
+
if (isTree) {
|
259
|
+
this.disabledItems.push('Open');
|
260
|
+
} else if (this.parent.selectedItems.length !== 1) {
|
261
|
+
this.disabledItems.push('Rename', 'Paste');
|
262
|
+
}
|
263
|
+
}
|
264
|
+
|
265
|
+
private setFileItem(): void {
|
266
|
+
this.menuType = 'file';
|
267
|
+
this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.file.map((item: string) => item.trim()));
|
268
|
+
this.contextMenu.dataBind();
|
269
|
+
if (this.parent.selectedItems.length !== 1) {
|
270
|
+
this.disabledItems.push('Rename');
|
271
|
+
}
|
272
|
+
}
|
273
|
+
|
274
|
+
private setLayoutItem(target: Element): void {
|
275
|
+
this.menuType = 'layout';
|
276
|
+
this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.layout.map((item: string) => item.trim()));
|
277
|
+
this.contextMenu.dataBind();
|
278
|
+
if (!this.parent.allowMultiSelection || ((this.parent.view === 'LargeIcons' &&
|
279
|
+
(closest(target, '#' + this.parent.element.id + CLS.LARGEICON_ID).getElementsByClassName(CLS.EMPTY).length !== 0))
|
280
|
+
|| (this.parent.view === 'Details' &&
|
281
|
+
(closest(target, '#' + this.parent.element.id + CLS.GRID_ID).getElementsByClassName(CLS.EMPTY).length !== 0)))) {
|
282
|
+
this.disabledItems.push('SelectAll');
|
283
|
+
}
|
284
|
+
if (this.parent.selectedNodes.length === 0) {
|
285
|
+
this.disabledItems.push('Paste');
|
286
|
+
}
|
287
|
+
this.contextMenu.dataBind();
|
288
|
+
}
|
289
|
+
|
290
|
+
private checkValidItem(nameEle: string): number {
|
291
|
+
if (!isNOU(select('#' + this.getMenuId(nameEle), this.currentElement))) {
|
292
|
+
return 1;
|
293
|
+
} else if (!isNOU(select('#' + nameEle, this.currentElement))) {
|
294
|
+
return 2;
|
295
|
+
} else {
|
296
|
+
return -1;
|
297
|
+
}
|
298
|
+
}
|
299
|
+
|
300
|
+
// eslint-disable-next-line
|
301
|
+
private getMenuItemData(): object {
|
302
|
+
if (this.menuType === 'layout') {
|
303
|
+
return getPathObject(this.parent);
|
304
|
+
} else {
|
305
|
+
// eslint-disable-next-line
|
306
|
+
const args: { [key: string]: Object; } = { target: this.menuTarget };
|
307
|
+
this.parent.notify(events.menuItemData, args);
|
308
|
+
return this.parent.itemData[0];
|
309
|
+
}
|
310
|
+
}
|
311
|
+
|
312
|
+
/* istanbul ignore next */
|
313
|
+
private onSelect(args: MenuEventArgs): void {
|
314
|
+
if (isNOU(args.item) || !args.item.id) { return; }
|
315
|
+
const itemText: string = args.item.id.substr((this.parent.element.id + '_cm_').length);
|
316
|
+
// eslint-disable-next-line
|
317
|
+
let details: Object[];
|
318
|
+
if (itemText === 'refresh' || itemText === 'newfolder' || itemText === 'upload') {
|
319
|
+
details = [getPathObject(this.parent)];
|
320
|
+
this.parent.itemData = details;
|
321
|
+
} else {
|
322
|
+
this.parent.notify(events.selectedData, {});
|
323
|
+
if (this.parent.activeModule === 'navigationpane' && itemText === 'open') {
|
324
|
+
details = [this.menuItemData];
|
325
|
+
} else {
|
326
|
+
details = this.parent.itemData;
|
327
|
+
}
|
328
|
+
}
|
329
|
+
const eventArgs: MenuClickEventArgs = {
|
330
|
+
cancel: false,
|
331
|
+
element: args.element,
|
332
|
+
fileDetails: details,
|
333
|
+
item: args.item
|
334
|
+
};
|
335
|
+
this.parent.trigger('menuClick', eventArgs, (menuClickArgs: MenuClickEventArgs) => {
|
336
|
+
let sItems: string[];
|
337
|
+
if (!menuClickArgs.cancel) {
|
338
|
+
// eslint:disable-next-line
|
339
|
+
switch (itemText) {
|
340
|
+
case 'cut':
|
341
|
+
cutFiles(this.parent);
|
342
|
+
break;
|
343
|
+
case 'copy':
|
344
|
+
copyFiles(this.parent);
|
345
|
+
break;
|
346
|
+
case 'paste':
|
347
|
+
if (this.menuType === 'folder') {
|
348
|
+
if ((this.parent.activeModule === 'largeiconsview') || (this.parent.activeModule === 'detailsview')) {
|
349
|
+
this.parent.folderPath = getFullPath(this.parent, this.menuItemData, this.parent.path);
|
350
|
+
} else {
|
351
|
+
this.parent.folderPath = '';
|
352
|
+
}
|
353
|
+
} else {
|
354
|
+
this.parent.folderPath = '';
|
355
|
+
}
|
356
|
+
pasteHandler(this.parent);
|
357
|
+
break;
|
358
|
+
case 'delete':
|
359
|
+
for (let j: number = 0; j < details.length; j++) {
|
360
|
+
if (!hasEditAccess(details[j])) {
|
361
|
+
createDeniedDialog(this.parent, details[j], events.permissionEdit);
|
362
|
+
return;
|
363
|
+
}
|
364
|
+
}
|
365
|
+
createDialog(this.parent, 'Delete');
|
366
|
+
break;
|
367
|
+
/* istanbul ignore next */
|
368
|
+
case 'download':
|
369
|
+
for (let i: number = 0; i < details.length; i++) {
|
370
|
+
if (!hasDownloadAccess(details[i])) {
|
371
|
+
createDeniedDialog(this.parent, details[i], events.permissionDownload);
|
372
|
+
return;
|
373
|
+
}
|
374
|
+
}
|
375
|
+
if (this.parent.activeModule === 'navigationpane') {
|
376
|
+
this.parent.notify(events.downloadInit, {});
|
377
|
+
} else if (this.parent.selectedItems.length > 0) {
|
378
|
+
Download(this.parent, this.parent.path, this.parent.selectedItems);
|
379
|
+
}
|
380
|
+
break;
|
381
|
+
case 'rename':
|
382
|
+
if (!hasEditAccess(details[0])) {
|
383
|
+
createDeniedDialog(this.parent, details[0], events.permissionEdit);
|
384
|
+
} else {
|
385
|
+
this.parent.notify(events.renameInit, {});
|
386
|
+
createDialog(this.parent, 'Rename');
|
387
|
+
}
|
388
|
+
break;
|
389
|
+
case 'selectall':
|
390
|
+
/* istanbul ignore next */
|
391
|
+
this.parent.notify(events.selectAllInit, {});
|
392
|
+
break;
|
393
|
+
case 'refresh':
|
394
|
+
refresh(this.parent);
|
395
|
+
break;
|
396
|
+
case 'open':
|
397
|
+
if (this.parent.visitedItem) {
|
398
|
+
this.parent.notify(events.openInit, { target: this.parent.visitedItem });
|
399
|
+
} else if (this.parent.activeModule === 'navigationpane') {
|
400
|
+
this.parent.navigationpaneModule.openFileOnContextMenuClick(closest(this.targetNodeElement, 'li') as HTMLLIElement);
|
401
|
+
}
|
402
|
+
break;
|
403
|
+
case 'details':
|
404
|
+
this.parent.notify(events.detailsInit, {});
|
405
|
+
sItems = this.parent.selectedItems;
|
406
|
+
if (this.parent.activeModule === 'navigationpane') {
|
407
|
+
sItems = [];
|
408
|
+
}
|
409
|
+
GetDetails(this.parent, sItems, this.parent.path, 'details');
|
410
|
+
break;
|
411
|
+
case 'newfolder':
|
412
|
+
createNewFolder(this.parent);
|
413
|
+
break;
|
414
|
+
case 'upload':
|
415
|
+
uploadItem(this.parent);
|
416
|
+
break;
|
417
|
+
/* istanbul ignore next */
|
418
|
+
case 'name':
|
419
|
+
/* istanbul ignore next */
|
420
|
+
// eslint-disable-next-line no-fallthrough
|
421
|
+
case 'size':
|
422
|
+
/* istanbul ignore next */
|
423
|
+
// eslint-disable-next-line no-fallthrough
|
424
|
+
case 'date':
|
425
|
+
/* istanbul ignore next */
|
426
|
+
// eslint-disable-next-line no-fallthrough
|
427
|
+
case 'ascending':
|
428
|
+
/* istanbul ignore next */
|
429
|
+
// eslint-disable-next-line no-fallthrough
|
430
|
+
case 'descending':
|
431
|
+
/* istanbul ignore next */
|
432
|
+
sortbyClickHandler(this.parent, args);
|
433
|
+
break;
|
434
|
+
/* istanbul ignore next */
|
435
|
+
case 'none':
|
436
|
+
/* istanbul ignore next */
|
437
|
+
sortbyClickHandler(this.parent, args);
|
438
|
+
break;
|
439
|
+
/* istanbul ignore next */
|
440
|
+
// eslint:disable-next-line
|
441
|
+
case 'largeiconsview':
|
442
|
+
updateLayout(this.parent, 'LargeIcons');
|
443
|
+
break;
|
444
|
+
/* istanbul ignore next */
|
445
|
+
// eslint:disable-next-line
|
446
|
+
case 'detailsview':
|
447
|
+
updateLayout(this.parent, 'Details');
|
448
|
+
break;
|
449
|
+
}
|
450
|
+
}
|
451
|
+
});
|
452
|
+
}
|
453
|
+
|
454
|
+
private onPropertyChanged(e: NotifyArgs): void {
|
455
|
+
if (e.module !== this.getModuleName() && e.module !== 'common') {
|
456
|
+
/* istanbul ignore next */
|
457
|
+
return;
|
458
|
+
}
|
459
|
+
for (const prop of Object.keys(e.newProp)) {
|
460
|
+
switch (prop) {
|
461
|
+
case 'cssClass':
|
462
|
+
this.contextMenu.cssClass = getCssClass(this.parent, CLS.ROOT_POPUP);
|
463
|
+
break;
|
464
|
+
}
|
465
|
+
}
|
466
|
+
}
|
467
|
+
|
468
|
+
private addEventListener(): void {
|
469
|
+
this.parent.on(events.destroy, this.destroy, this);
|
470
|
+
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
|
471
|
+
this.keyboardModule = new KeyboardEvents(
|
472
|
+
this.contextMenu.element,
|
473
|
+
{
|
474
|
+
keyAction: this.keyActionHandler.bind(this),
|
475
|
+
keyConfigs: this.keyConfigs,
|
476
|
+
eventName: 'keydown'
|
477
|
+
}
|
478
|
+
);
|
479
|
+
}
|
480
|
+
|
481
|
+
private removeEventListener(): void {
|
482
|
+
this.parent.off(events.destroy, this.destroy);
|
483
|
+
this.parent.off(events.modelChanged, this.onPropertyChanged);
|
484
|
+
this.keyboardModule.destroy();
|
485
|
+
}
|
486
|
+
private keyActionHandler(e: KeyboardEventArgs): void {
|
487
|
+
switch (e.action) {
|
488
|
+
case 'uparrow':
|
489
|
+
case 'downarrow':
|
490
|
+
e.preventDefault();
|
491
|
+
}
|
492
|
+
}
|
493
|
+
|
494
|
+
/**
|
495
|
+
* For internal use only - Get the module name.
|
496
|
+
*
|
497
|
+
* @returns {string} - returns the module name.
|
498
|
+
* @private
|
499
|
+
*/
|
500
|
+
private getModuleName(): string {
|
501
|
+
return 'contextmenu';
|
502
|
+
}
|
503
|
+
|
504
|
+
private destroy(): void {
|
505
|
+
if (this.parent.isDestroyed) { return; }
|
506
|
+
this.removeEventListener();
|
507
|
+
this.contextMenu.destroy();
|
508
|
+
}
|
509
|
+
/* istanbul ignore next */
|
510
|
+
private getItemData(data: string[]): MenuItemModel[] {
|
511
|
+
const items: MenuItemModel[] = [];
|
512
|
+
for (let i: number = 0; i < data.length; i++) {
|
513
|
+
let item: MenuItemModel;
|
514
|
+
const itemId: string = this.getMenuId(data[i]);
|
515
|
+
const itemText: string = getLocaleText(this.parent, data[i]);
|
516
|
+
switch (data[i]) {
|
517
|
+
case '|':
|
518
|
+
item = { separator: true };
|
519
|
+
break;
|
520
|
+
case 'Open':
|
521
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_OPEN };
|
522
|
+
break;
|
523
|
+
case 'Upload':
|
524
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_UPLOAD };
|
525
|
+
break;
|
526
|
+
case 'Cut':
|
527
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_CUT };
|
528
|
+
break;
|
529
|
+
case 'Copy':
|
530
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_COPY };
|
531
|
+
break;
|
532
|
+
case 'Paste':
|
533
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_PASTE };
|
534
|
+
break;
|
535
|
+
case 'Delete':
|
536
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_DELETE }; break;
|
537
|
+
case 'Rename':
|
538
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_RENAME }; break;
|
539
|
+
case 'NewFolder':
|
540
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_NEWFOLDER }; break;
|
541
|
+
case 'Details':
|
542
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_DETAILS }; break;
|
543
|
+
case 'SortBy':
|
544
|
+
item = {
|
545
|
+
id: itemId, text: itemText, iconCss: CLS.ICON_SHORTBY,
|
546
|
+
items: [
|
547
|
+
{
|
548
|
+
id: this.getMenuId('Name'), text: getLocaleText(this.parent, 'Name'),
|
549
|
+
iconCss: this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : null
|
550
|
+
},
|
551
|
+
{
|
552
|
+
id: this.getMenuId('Size'), text: getLocaleText(this.parent, 'Size'),
|
553
|
+
iconCss: this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : null
|
554
|
+
},
|
555
|
+
{
|
556
|
+
id: this.getMenuId('Date'), text: getLocaleText(this.parent, 'DateModified'),
|
557
|
+
iconCss: this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : null
|
558
|
+
},
|
559
|
+
{ separator: true },
|
560
|
+
{
|
561
|
+
id: this.getMenuId('Ascending'), text: getLocaleText(this.parent, 'Ascending'),
|
562
|
+
iconCss: this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : null
|
563
|
+
},
|
564
|
+
{
|
565
|
+
id: this.getMenuId('Descending'), text: getLocaleText(this.parent, 'Descending'),
|
566
|
+
iconCss: this.parent.sortOrder === 'Descending' ? CLS.TB_OPTION_TICK : null
|
567
|
+
},
|
568
|
+
{
|
569
|
+
id: this.getMenuId('None'), text: getLocaleText(this.parent, 'None'),
|
570
|
+
iconCss: this.parent.sortOrder === 'None' ? CLS.TB_OPTION_TICK : null
|
571
|
+
}
|
572
|
+
]
|
573
|
+
};
|
574
|
+
break;
|
575
|
+
/* istanbul ignore next */
|
576
|
+
case 'View':
|
577
|
+
item = {
|
578
|
+
id: itemId, text: itemText, iconCss: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
|
579
|
+
items: [
|
580
|
+
{
|
581
|
+
id: this.getMenuId('largeiconsview'), text: getLocaleText(this.parent, 'View-LargeIcons'),
|
582
|
+
iconCss: this.parent.view === 'Details' ? null : CLS.TB_OPTION_TICK
|
583
|
+
},
|
584
|
+
{
|
585
|
+
id: this.getMenuId('detailsview'), text: getLocaleText(this.parent, 'View-Details'),
|
586
|
+
iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : null
|
587
|
+
}
|
588
|
+
]
|
589
|
+
};
|
590
|
+
break;
|
591
|
+
case 'Refresh':
|
592
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_REFRESH };
|
593
|
+
break;
|
594
|
+
case 'SelectAll':
|
595
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_SELECTALL };
|
596
|
+
break;
|
597
|
+
/* istanbul ignore next */
|
598
|
+
case 'Download':
|
599
|
+
item = { id: itemId, text: itemText, iconCss: CLS.ICON_DOWNLOAD };
|
600
|
+
break;
|
601
|
+
/* istanbul ignore next */
|
602
|
+
default:
|
603
|
+
item = { id: itemId, text: itemText };
|
604
|
+
break;
|
605
|
+
}
|
606
|
+
items.push(item);
|
607
|
+
}
|
608
|
+
return items;
|
609
|
+
}
|
610
|
+
|
611
|
+
private getMenuId(id: string): string {
|
612
|
+
return this.parent.element.id + '_cm_' + id.toLowerCase();
|
613
|
+
}
|
614
|
+
}
|