| 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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383 | 1×
1×
1×
1×
1892×
1892×
1×
1892×
1892×
1×
1747×
1747×
1×
113×
46×
46×
11×
11×
1×
1×
2×
2×
2×
2×
10×
10×
4×
4×
1×
1×
8×
8×
5×
5×
7×
7×
8×
8×
4×
4×
4×
4×
1×
57×
57×
57×
57×
9×
9×
9×
48×
48×
48×
36×
48×
1×
1×
47×
57×
36×
36×
36×
15×
13×
13×
13×
15×
36×
1×
57×
54×
57×
57×
9×
9×
9×
23×
1×
57×
57×
38×
57×
43×
57×
43×
57×
43×
57×
41×
57×
43×
57×
4×
1×
217×
217×
94×
94×
123×
217×
1×
13×
13×
2×
2×
13×
13×
9×
13×
9×
13×
13×
1×
2×
2×
1×
3×
3×
1×
1×
1×
1×
1×
1×
1×
2×
2×
1×
2×
3×
1×
3×
3×
1×
1×
2×
2×
3×
1×
12×
4×
4×
2×
2×
8×
3×
5×
12×
1×
5×
5×
1×
2×
2×
2×
2×
2×
2×
2×
2×
1×
8×
8×
1×
6×
6×
6×
6×
6×
3×
3×
6×
1×
1×
1×
5×
6×
1×
8×
8×
8×
8×
8×
3×
3×
3×
8×
1×
1×
1×
1×
7×
8×
1×
9×
9×
9×
9×
9×
2×
2×
9×
1×
1×
1×
8×
9×
1×
5×
5×
5×
5×
5×
1×
1×
1×
1×
1×
5×
1×
5×
5×
5×
5×
5×
1×
1×
1×
1×
1×
5×
1×
81×
61×
1×
1747×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "./../base/constant", "./../base/classes", "./inserthtml", "./../../common/constant"], function (require, exports, ej2_base_1, CONSTANT, classes, inserthtml_1, EVENTS) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ImageCommand = (function () {
function ImageCommand(parent) {
this.parent = parent;
this.addEventListener();
}
ImageCommand.prototype.addEventListener = function () {
this.parent.observer.on(CONSTANT.IMAGE, this.imageCommand, this);
this.parent.observer.on(EVENTS.INTERNAL_DESTROY, this.destroy, this);
};
ImageCommand.prototype.removeEventListener = function () {
this.parent.observer.off(CONSTANT.IMAGE, this.imageCommand);
this.parent.observer.off(EVENTS.INTERNAL_DESTROY, this.destroy);
};
ImageCommand.prototype.imageCommand = function (e) {
switch (e.value.toString().toLowerCase()) {
case 'image':
case 'replace':
this.createImage(e);
break;
case 'insertlink':
this.insertImageLink(e);
break;
case 'openimagelink':
this.openImageLink(e);
break;
case 'editimagelink':
this.editImageLink(e);
break;
case 'removeimagelink':
this.removeImageLink(e);
break;
case 'remove':
this.removeImage(e);
break;
case 'alttext':
this.insertAltTextImage(e);
break;
case 'dimension':
this.imageDimension(e);
break;
case 'caption':
this.imageCaption(e);
break;
case 'justifyleft':
this.imageJustifyLeft(e);
break;
case 'justifycenter':
this.imageJustifyCenter(e);
break;
case 'justifyright':
this.imageJustifyRight(e);
break;
case 'inline':
this.imageInline(e);
break;
case 'break':
this.imageBreak(e);
break;
}
};
ImageCommand.prototype.createImage = function (e) {
var _this = this;
var isReplaced = false;
e.item.url = ej2_base_1.isNullOrUndefined(e.item.url) || e.item.url === 'undefined' ? e.item.src : e.item.url;
if (!ej2_base_1.isNullOrUndefined(e.item.selectParent) && e.item.selectParent[0].tagName === 'IMG') {
var imgEle = e.item.selectParent[0];
isReplaced = true;
this.setStyle(imgEle, e, isReplaced);
}
else {
var imgElement = ej2_base_1.createElement('img');
this.setStyle(imgElement, e);
if (!ej2_base_1.isNullOrUndefined(e.item.selection)) {
e.item.selection.restore();
}
if (!ej2_base_1.isNullOrUndefined(e.selector) && e.selector === 'pasteCleanupModule') {
Eif (!ej2_base_1.isNullOrUndefined(this.parent.currentDocument)) {
e.callBack({ requestType: 'Images',
editorMode: 'HTML',
event: e.event,
range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
elements: [imgElement]
});
}
}
else {
inserthtml_1.InsertHtml.Insert(this.parent.currentDocument, imgElement, this.parent.editableElement);
}
}
if (e.callBack && (ej2_base_1.isNullOrUndefined(e.selector) || !ej2_base_1.isNullOrUndefined(e.selector) && e.selector !== 'pasteCleanupModule')) {
var selectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)[0];
var imgElm_1 = (e.value === 'Replace' || isReplaced) ? e.item.selectParent[0] :
(ej2_base_1.Browser.isIE ? selectedNode.previousSibling : selectedNode.previousElementSibling);
var onImageLoadEvent_1 = function () {
if (!ej2_base_1.isNullOrUndefined(_this.parent.currentDocument)) {
imgElm_1.setAttribute('width', imgElm_1.offsetWidth.toString());
imgElm_1.setAttribute('height', imgElm_1.offsetHeight.toString());
e.callBack({
requestType: (e.value === 'Replace') ? (e.item.subCommand = 'Replace', 'Replace') : 'Images',
editorMode: 'HTML',
event: e.event,
range: _this.parent.nodeSelection.getRange(_this.parent.currentDocument),
elements: [imgElm_1]
});
}
imgElm_1.removeEventListener('load', onImageLoadEvent_1);
};
imgElm_1.addEventListener('load', onImageLoadEvent_1);
}
};
ImageCommand.prototype.setStyle = function (imgElement, e, imgReplace) {
if (!ej2_base_1.isNullOrUndefined(e.item.url)) {
imgElement.setAttribute('src', e.item.url);
}
var alignClassName;
if (imgReplace) {
var alignClass = {
'e-imgcenter': 'e-imgcenter',
'e-imgright': 'e-imgright',
'e-imgleft': 'e-imgleft'
};
var imgClassList = imgElement.classList;
for (var i = 0; i < imgClassList.length; i++) {
if (!ej2_base_1.isNullOrUndefined(alignClass[imgClassList[i]])) {
alignClassName = alignClass[imgClassList[i]];
}
}
}
imgElement.setAttribute('class', 'e-rte-image' + (ej2_base_1.isNullOrUndefined(e.item.cssClass) ? '' : ' ' + e.item.cssClass)
+ (ej2_base_1.isNullOrUndefined(alignClassName) ? '' : ' ' + alignClassName));
if (!ej2_base_1.isNullOrUndefined(e.item.altText)) {
imgElement.setAttribute('alt', e.item.altText.replace(/\.[a-zA-Z0-9]+$/, ''));
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.width)) {
imgElement.setAttribute('width', this.calculateStyleValue(e.item.width.width));
}
if (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.height)) {
imgElement.setAttribute('height', this.calculateStyleValue(e.item.height.height));
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.minWidth)) {
imgElement.style.minWidth = this.calculateStyleValue(e.item.width.minWidth);
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.maxWidth)) {
imgElement.style.maxWidth = this.calculateStyleValue(e.item.width.maxWidth);
}
if (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.minHeight)) {
imgElement.style.minHeight = this.calculateStyleValue(e.item.height.minHeight);
}
if (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.maxHeight)) {
imgElement.style.maxHeight = this.calculateStyleValue(e.item.height.maxHeight);
}
};
ImageCommand.prototype.calculateStyleValue = function (value) {
var styleValue;
if (typeof (value) === 'string') {
Eif (value.indexOf('px') || value.indexOf('%') || value.indexOf('auto')) {
styleValue = value;
}
else {
styleValue = value + 'px';
}
}
else {
styleValue = value + 'px';
}
return styleValue;
};
ImageCommand.prototype.insertImageLink = function (e) {
var anchor = ej2_base_1.createElement('a', {
attrs: {
href: e.item.url
}
});
if (e.item.selectNode[0].parentElement.classList.contains('e-img-wrap')) {
e.item.selection.restore();
anchor.setAttribute('contenteditable', 'true');
}
anchor.appendChild(e.item.selectNode[0]);
if (!ej2_base_1.isNullOrUndefined(e.item.target)) {
anchor.setAttribute('target', e.item.target);
}
if (!ej2_base_1.isNullOrUndefined(e.item.ariaLabel)) {
anchor.setAttribute('aria-label', e.item.ariaLabel);
}
inserthtml_1.InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);
this.callBack(e);
};
ImageCommand.prototype.openImageLink = function (e) {
document.defaultView.open(e.item.url, e.item.target);
this.callBack(e);
};
ImageCommand.prototype.removeImageLink = function (e) {
var selectParent = e.item.selectParent[0];
if (selectParent.classList.contains('e-img-caption')) {
var capImgWrap = ej2_base_1.select('.e-img-wrap', selectParent);
var textEle = ej2_base_1.select('.e-img-inner', selectParent);
var newTextEle = textEle.cloneNode(true);
ej2_base_1.detach(ej2_base_1.select('a', selectParent));
ej2_base_1.detach(textEle);
capImgWrap.appendChild(e.item.insertElement);
capImgWrap.appendChild(newTextEle);
}
else {
ej2_base_1.detach(selectParent);
if (ej2_base_1.Browser.isIE && e.item.selection) {
e.item.selection.restore();
}
inserthtml_1.InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
}
this.callBack(e);
};
ImageCommand.prototype.editImageLink = function (e) {
e.item.selectNode[0].parentElement.href = e.item.url;
if (ej2_base_1.isNullOrUndefined(e.item.target)) {
e.item.selectNode[0].parentElement.removeAttribute('target');
e.item.selectNode[0].parentElement.removeAttribute('aria-label');
}
else {
e.item.selectNode[0].parentElement.target = e.item.target;
e.item.selectNode[0].parentElement.setAttribute('aria-label', e.item.ariaLabel);
}
this.callBack(e);
};
ImageCommand.prototype.removeImage = function (e) {
if (ej2_base_1.closest(e.item.selectNode[0], 'a')) {
Eif (e.item.selectNode[0].parentElement.nodeName === 'A' && !ej2_base_1.isNullOrUndefined(e.item.selectNode[0].parentElement.innerText)) {
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION))) {
ej2_base_1.detach(ej2_base_1.closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION));
}
else {
ej2_base_1.detach(e.item.selectNode[0]);
}
}
else {
ej2_base_1.detach(ej2_base_1.closest(e.item.selectNode[0], 'a'));
}
}
else if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION))) {
ej2_base_1.detach(ej2_base_1.closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION));
}
else {
ej2_base_1.detach(e.item.selectNode[0]);
}
this.callBack(e);
};
ImageCommand.prototype.insertAltTextImage = function (e) {
e.item.selectNode[0].setAttribute('alt', e.item.altText);
this.callBack(e);
};
ImageCommand.prototype.imageDimension = function (e) {
var selectNode = e.item.selectNode[0];
selectNode.style.height = '';
selectNode.style.width = '';
Eif (e.item.width !== 'auto') {
selectNode.style.width = ej2_base_1.formatUnit(e.item.width);
}
else {
selectNode.removeAttribute('width');
}
Eif (e.item.height !== 'auto') {
selectNode.style.height = ej2_base_1.formatUnit(e.item.height);
}
else {
selectNode.removeAttribute('height');
}
this.callBack(e);
};
ImageCommand.prototype.imageCaption = function (e) {
inserthtml_1.InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
this.callBack(e);
};
ImageCommand.prototype.imageJustifyLeft = function (e) {
var selectNode = e.item.selectNode[0];
Eif (!ej2_base_1.isNullOrUndefined(selectNode)) {
selectNode.removeAttribute('class');
ej2_base_1.addClass([selectNode], 'e-rte-image');
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION))) {
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);
}
if (selectNode.parentElement.nodeName === 'A') {
ej2_base_1.removeClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_LEFT);
}
else {
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_LEFT);
}
this.callBack(e);
}
};
ImageCommand.prototype.imageJustifyCenter = function (e) {
var selectNode = e.item.selectNode[0];
Eif (!ej2_base_1.isNullOrUndefined(selectNode)) {
selectNode.removeAttribute('class');
ej2_base_1.addClass([selectNode], 'e-rte-image');
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION))) {
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);
}
if (selectNode.parentElement.nodeName === 'A') {
ej2_base_1.removeClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);
ej2_base_1.removeClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([selectNode.parentElement], classes.CLASS_IMAGE_CENTER);
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_CENTER);
}
else {
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_CENTER);
}
this.callBack(e);
}
};
ImageCommand.prototype.imageJustifyRight = function (e) {
var selectNode = e.item.selectNode[0];
Eif (!ej2_base_1.isNullOrUndefined(selectNode)) {
selectNode.removeAttribute('class');
ej2_base_1.addClass([selectNode], 'e-rte-image');
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION))) {
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);
ej2_base_1.addClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);
}
if (selectNode.parentElement.nodeName === 'A') {
ej2_base_1.removeClass([selectNode.parentElement], classes.CLASS_IMAGE_LEFT);
ej2_base_1.addClass([selectNode.parentElement], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_RIGHT);
}
else {
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_RIGHT);
}
this.callBack(e);
}
};
ImageCommand.prototype.imageInline = function (e) {
var selectNode = e.item.selectNode[0];
selectNode.removeAttribute('class');
ej2_base_1.addClass([selectNode], 'e-rte-image');
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_INLINE);
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION))) {
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_BREAK);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_CAPTION_INLINE);
}
this.callBack(e);
};
ImageCommand.prototype.imageBreak = function (e) {
var selectNode = e.item.selectNode[0];
selectNode.removeAttribute('class');
ej2_base_1.addClass([selectNode], classes.CLASS_IMAGE_BREAK);
ej2_base_1.addClass([selectNode], 'e-rte-image');
if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION))) {
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_CAPTION_INLINE);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_CENTER);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_LEFT);
ej2_base_1.removeClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_RIGHT);
ej2_base_1.addClass([ej2_base_1.closest(selectNode, '.' + classes.CLASS_CAPTION)], classes.CLASS_IMAGE_BREAK);
}
this.callBack(e);
};
ImageCommand.prototype.callBack = function (e) {
if (e.callBack) {
e.callBack({
requestType: e.item.subCommand,
editorMode: 'HTML',
event: e.event,
range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)
});
}
};
ImageCommand.prototype.destroy = function () {
this.removeEventListener();
};
return ImageCommand;
}());
exports.ImageCommand = ImageCommand;
});
|