1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250 | 1×
1×
1×
1×
7×
7×
7×
7×
7×
7×
7×
7×
7×
7×
7×
7×
1×
7×
1×
9×
9×
1×
8×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
9×
1×
17×
2×
1×
1×
1×
6×
6×
3×
6×
6×
6×
1×
9×
9×
4×
4×
2×
2×
2×
2×
4×
9×
6×
9×
2×
9×
9×
1×
9×
9×
9×
9×
9×
9×
9×
9×
1×
3×
3×
3×
3×
3×
1×
1×
1×
1×
3×
3×
3×
3×
3×
1×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
7×
7×
7×
7×
1×
7×
7×
7×
7×
7×
1×
13×
9×
9×
13×
13×
13×
1×
14×
7×
7×
7×
7×
7×
7×
7×
7×
7×
7×
1×
32823×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-filemanager", "@syncfusion/ej2-filemanager", "../base/enum", "../base/constant", "../base/classes", "../base/util"], function (require, exports, ej2_base_1, ej2_filemanager_1, ej2_filemanager_2, enum_1, events, classes, util_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FileManager = (function () {
function FileManager(parent, locator) {
ej2_filemanager_1.FileManager.Inject(ej2_filemanager_1.ContextMenu, ej2_filemanager_1.DetailsView, ej2_filemanager_2.NavigationPane, ej2_filemanager_2.Toolbar);
this.parent = parent;
this.i10n = locator.getService('rteLocale');
this.dialogRenderObj = locator.getService('dialogRenderObject');
this.rendererFactory = locator.getService('rendererFactory');
this.addEventListener();
this.isDestroyed = false;
this.insertImageBoundFn = this.insertImageUrl.bind(this);
this.cancelDialogBoundFn = this.cancelDialog.bind(this);
this.renderFileManagerBoundFn = this.renderFileManager.bind(this);
this.dialogClosedBoundFn = this.dialogClosed.bind(this);
this.onDocumentClickBoundFn = this.onDocumentClick.bind(this);
}
FileManager.prototype.initialize = function () {
this.contentModule = this.rendererFactory.getRenderer(enum_1.RenderType.Content);
};
FileManager.prototype.render = function (e) {
var dlgInsert;
if (e.selectNode && e.selectNode[0].nodeName === 'IMG') {
dlgInsert = this.parent.localeObj.getConstant('dialogUpdate');
}
else {
dlgInsert = this.i10n.getConstant('dialogInsert');
}
var dlgHeader = this.parent.localeObj.getConstant('fileDialogHeader');
var dlgCancel = this.i10n.getConstant('dialogCancel');
this.dlgButtons = [{
click: this.insertImageBoundFn,
buttonModel: { content: dlgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true, disabled: true }
},
{
click: this.cancelDialogBoundFn,
buttonModel: { cssClass: 'e-flat e-cancel', content: dlgCancel }
}];
this.selectObj = { selection: e.selection, args: e.args, selectParent: e.selectParent };
var dlgTarget = this.parent.createElement('div', {
className: 'e-rte-file-manager-dialog', id: this.parent.getID() + '_file-manager-dialog',
attrs: { 'aria-owns': this.parent.getID() }
});
document.body.appendChild(dlgTarget);
this.fileWrap = this.parent.createElement('div', {
id: this.parent.getID() + '_rte-file-manager', className: 'e-img-file-wrap'
});
dlgTarget.appendChild(this.fileWrap);
dlgTarget.appendChild(this.getInputUrlElement());
var dialogModel = {
visible: false,
isModal: true, header: dlgHeader,
target: document.body, locale: this.parent.locale,
enableRtl: this.parent.enableRtl, cssClass: classes.CLS_RTE_ELEMENTS,
animationSettings: { effect: 'None' },
showCloseIcon: true, closeOnEscape: true, width: '720px', height: 'auto',
position: { X: 'center', Y: 'center' },
buttons: this.dlgButtons,
created: this.renderFileManagerBoundFn,
close: this.dialogClosedBoundFn
};
this.dialogObj = this.dialogRenderObj.render(dialogModel);
this.dialogObj.createElement = this.parent.createElement;
this.dialogObj.appendTo(dlgTarget);
this.dialogObj.show(ej2_base_1.Browser.isDevice ? true : false);
this.setCssClass({ cssClass: this.parent.getCssClass() });
};
FileManager.prototype.setCssClass = function (e) {
if (this.dialogObj && e.cssClass) {
if (ej2_base_1.isNullOrUndefined(e.oldCssClass)) {
this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
}
}
};
FileManager.prototype.dialogClosed = function (e) {
this.parent.isBlur = false;
if (e && e.event.returnValue) {
this.selectObj.selection.restore();
}
this.destroyComponents();
this.parent.element.ownerDocument.removeEventListener('mousedown', this.onDocumentClickBoundFn);
this.dialogRenderObj.close(e);
};
FileManager.prototype.renderFileManager = function () {
var _this = this;
this.fileObj = new ej2_filemanager_1.FileManager({
allowMultiSelection: false,
locale: this.parent.locale,
enableRtl: this.parent.enableRtl,
path: this.parent.fileManagerSettings.path,
view: this.parent.fileManagerSettings.view,
enablePersistence: this.parent.enablePersistence,
cssClass: this.parent.fileManagerSettings.cssClass,
sortOrder: this.parent.fileManagerSettings.sortOrder,
ajaxSettings: this.parent.fileManagerSettings.ajaxSettings,
showThumbnail: this.parent.fileManagerSettings.showThumbnail,
rootAliasName: this.parent.fileManagerSettings.rootAliasName,
uploadSettings: this.parent.fileManagerSettings.uploadSettings,
searchSettings: this.parent.fileManagerSettings.searchSettings,
toolbarSettings: this.parent.fileManagerSettings.toolbarSettings,
showHiddenItems: this.parent.fileManagerSettings.showHiddenItems,
allowDragAndDrop: this.parent.fileManagerSettings.allowDragAndDrop,
showFileExtension: this.parent.fileManagerSettings.showFileExtension,
detailsViewSettings: this.parent.fileManagerSettings.detailsViewSettings,
contextMenuSettings: this.parent.fileManagerSettings.contextMenuSettings,
navigationPaneSettings: this.parent.fileManagerSettings.navigationPaneSettings,
beforeSend: this.parent.fileManagerSettings.beforeSend,
fileSelect: function (e) {
var selectedFile = e.fileDetails;
if (selectedFile.isFile && _this.parent.insertImageSettings.allowedTypes.indexOf(selectedFile.type) > -1) {
_this.inputUrl.value = _this.parent.fileManagerSettings.ajaxSettings.getImageUrl + '?path=' +
(selectedFile.filterPath && selectedFile.filterPath.replace(/\\/g, '/')) + selectedFile.name;
_this.dlgButtons[0].buttonModel.disabled = false;
}
else {
_this.inputUrl.value = '';
_this.dlgButtons[0].buttonModel.disabled = true;
}
_this.dialogObj.setProperties({ buttons: _this.dlgButtons });
},
created: function () {
_this.inputUrl.removeAttribute('disabled');
},
success: function () {
_this.fileObj.refreshLayout();
}
});
if (ej2_base_1.Browser.isDevice) {
this.fileObj.height = '85%';
}
this.fileObj.appendTo(this.fileWrap);
this.parent.element.ownerDocument.addEventListener('mousedown', this.onDocumentClickBoundFn);
};
FileManager.prototype.getInputUrlElement = function () {
var imgUrl = this.parent.createElement('div', { className: 'imgUrl' });
var urlLabel = this.parent.createElement('div', { className: 'e-rte-label' });
urlLabel.innerHTML = '<label for="rteSample_img_url">' + this.i10n.getConstant('linkWebUrl') + '</label>';
imgUrl.appendChild(urlLabel);
var placeUrl = this.i10n.getConstant('imageUrl');
this.inputUrl = this.parent.createElement('input', {
className: 'e-input e-img-url',
attrs: { placeholder: placeUrl, spellcheck: 'false', disabled: 'true' }
});
imgUrl.appendChild(this.inputUrl);
return imgUrl;
};
FileManager.prototype.insertImageUrl = function (e) {
var url = this.inputUrl.value;
Eif (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
Eif (url !== '') {
if (this.parent.editorMode === 'HTML' &&
ej2_base_1.isNullOrUndefined(ej2_base_1.closest(this.selectObj.selection.range.startContainer.parentNode, '#' + this.contentModule.getPanel().id))) {
this.contentModule.getEditPanel().focus();
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
this.selectObj.selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
this.selectObj.selectParent = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
}
var regex = /[\w-]+.(jpg|png|jpeg|gif)/g;
var matchUrl = (!ej2_base_1.isNullOrUndefined(url.match(regex)) && this.parent.editorMode === 'HTML') ? url.match(regex)[0] : '';
var value = {
cssClass: (this.parent.insertImageSettings.display === 'inline' ? classes.CLS_IMGINLINE : classes.CLS_IMGBREAK),
url: url, selection: this.selectObj.selection, altText: matchUrl, selectParent: this.selectObj.selectParent,
width: {
width: this.parent.insertImageSettings.width, minWidth: this.parent.insertImageSettings.minWidth,
maxWidth: this.parent.getInsertImgMaxWidth()
},
height: {
height: this.parent.insertImageSettings.height, minHeight: this.parent.insertImageSettings.minHeight,
maxHeight: this.parent.insertImageSettings.maxHeight
}
};
this.parent.formatter.process(this.parent, this.selectObj.args, this.selectObj.args.originalEvent, value);
this.dialogObj.hide({ returnValue: false });
}
};
FileManager.prototype.cancelDialog = function () {
this.parent.isBlur = false;
this.dialogObj.hide({ returnValue: true });
};
FileManager.prototype.onDocumentClick = function (e) {
var target = e.target;
var prevEle = target.nodeName !== '#document' && !ej2_base_1.isNullOrUndefined(target.previousElementSibling) && target.previousElementSibling;
Eif (!ej2_base_1.isNullOrUndefined(this.dialogObj) &&
(!ej2_base_1.closest(target, '#' + this.parent.getID() + '_file-manager-dialog') &&
!ej2_base_1.closest(target, '#' + this.parent.getID() + '_rte-file-manager_tb_sortby-popup') &&
!ej2_base_1.closest(target, '#' + this.parent.getID() + '_rte-file-manager_tb_view-popup') &&
!ej2_base_1.closest(target, '#' + this.parent.getID() + '_rte-file-manager_contextmenu') &&
(!(!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(target, '.e-contextmenu-wrapper')) &&
ej2_base_1.closest(target, '.e-contextmenu-wrapper').querySelector('#' + this.parent.getID() + '_rte-file-manager_contextmenu'))) &&
(!ej2_base_1.isNullOrUndefined(prevEle) && !prevEle.classList.contains('e-rte-file-manager-dialog')) &&
(!ej2_base_1.isNullOrUndefined(prevEle) && prevEle.id !== this.parent.getID() + '_rte-file-manager_contextmenu'))) {
this.dialogObj.hide({ returnValue: true });
this.parent.isBlur = true;
util_1.dispatchEvent(this.parent.element, 'focusout');
}
else {
this.parent.isRTE = true;
}
};
FileManager.prototype.addEventListener = function () {
this.parent.on(events.initialEnd, this.initialize, this);
this.parent.on(events.renderFileManager, this.render, this);
this.parent.on(events.bindCssClass, this.setCssClass, this);
this.parent.on(events.destroy, this.destroy, this);
};
FileManager.prototype.removeEventListener = function () {
this.parent.element.ownerDocument.removeEventListener('mousedown', this.onDocumentClickBoundFn);
this.parent.off(events.initialEnd, this.initialize);
this.parent.off(events.renderFileManager, this.render);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.destroy, this.destroy);
};
FileManager.prototype.destroyComponents = function () {
if (this.fileObj) {
this.fileObj.destroy();
this.fileObj = null;
}
Eif (this.dialogObj) {
this.dialogObj.destroy();
ej2_base_1.detach(this.dialogObj.element);
}
};
FileManager.prototype.destroy = function () {
if (this.isDestroyed) {
return;
}
this.destroyComponents();
this.removeEventListener();
this.dlgButtons = null;
this.isDestroyed = true;
this.insertImageBoundFn = null;
this.cancelDialogBoundFn = null;
this.renderFileManagerBoundFn = null;
this.dialogClosedBoundFn = null;
this.onDocumentClickBoundFn = null;
};
FileManager.prototype.getModuleName = function () {
return 'fileManager';
};
return FileManager;
}());
exports.FileManager = FileManager;
});
|