| 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 | 1×
1×
1×
1×
1907×
1907×
1×
1907×
1907×
1×
1762×
1762×
1×
48×
48×
48×
48×
48×
20×
20×
20×
48×
28×
28×
4×
4×
2×
2×
1×
2×
1×
2×
2×
2×
2×
2×
1×
2×
1×
2×
2×
2×
3×
3×
3×
3×
3×
3×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
5×
5×
5×
1×
35×
35×
35×
9×
9×
9×
9×
9×
9×
9×
9×
9×
26×
26×
26×
26×
26×
26×
35×
1×
37×
37×
37×
37×
3×
1×
1×
1×
2×
2×
2×
34×
34×
1×
1×
1×
33×
25×
8×
33×
27×
33×
33×
30×
30×
37×
27×
27×
27×
4×
3×
1×
1×
1×
23×
27×
15×
15×
1×
15×
4×
27×
2×
27×
1×
1×
1×
1×
1×
37×
28×
37×
28×
37×
27×
37×
27×
37×
27×
37×
26×
37×
27×
37×
37×
27×
1×
1×
26×
26×
1×
7×
7×
7×
7×
7×
7×
7×
7×
1×
23×
20×
1×
1762×
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 VideoCommand = (function () {
function VideoCommand(parent) {
this.parent = parent;
this.addEventListener();
}
VideoCommand.prototype.addEventListener = function () {
this.parent.observer.on(CONSTANT.VIDEO, this.videoCommand, this);
this.parent.observer.on(EVENTS.INTERNAL_DESTROY, this.destroy, this);
};
VideoCommand.prototype.removeEventListener = function () {
this.parent.observer.off(CONSTANT.VIDEO, this.videoCommand);
this.parent.observer.off(EVENTS.INTERNAL_DESTROY, this.destroy);
};
VideoCommand.prototype.videoCommand = function (e) {
var selectNode;
var videoWrapNode;
var videoClickElem;
var value = e.value.toString().toLowerCase();
if (value !== 'video' && value !== 'videoreplace') {
selectNode = e.item.selectNode[0];
videoWrapNode = selectNode.closest('.' + classes.CLASS_EMBED_VIDEO_WRAP);
videoClickElem = selectNode.closest('.' + classes.CLASS_VIDEO_CLICK_ELEM);
}
switch (value) {
case 'video':
case 'videoreplace':
this.createVideo(e);
break;
case 'videodimension':
this.videoDimension(e);
break;
case 'inline':
selectNode.removeAttribute('class');
if (videoWrapNode) {
videoWrapNode.style.display = 'inline-block';
}
if (videoClickElem) {
selectNode.parentElement.style.cssFloat = '';
}
ej2_base_1.addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_INLINE, classes.CLASS_VIDEO_FOCUS]);
this.callBack(e);
break;
case 'break':
selectNode.removeAttribute('class');
if (videoWrapNode) {
videoWrapNode.style.display = 'block';
}
if (videoClickElem) {
selectNode.parentElement.style.cssFloat = '';
}
ej2_base_1.addClass([selectNode], [classes.CLASS_VIDEO_BREAK, classes.CLASS_VIDEO, classes.CLASS_VIDEO_FOCUS]);
this.callBack(e);
break;
case 'justifyleft':
selectNode.removeAttribute('class');
Iif (videoWrapNode) {
videoWrapNode.style.display = 'block';
}
Iif (videoClickElem) {
selectNode.parentElement.style.cssFloat = 'left';
}
ej2_base_1.addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_LEFT]);
this.callBack(e);
break;
case 'justifycenter':
selectNode.removeAttribute('class');
Iif (videoWrapNode) {
videoWrapNode.style.display = 'block';
}
Iif (videoClickElem) {
selectNode.parentElement.style.cssFloat = '';
}
ej2_base_1.addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_CENTER]);
this.callBack(e);
break;
case 'justifyright':
selectNode.removeAttribute('class');
Iif (videoWrapNode) {
videoWrapNode.style.display = 'block';
}
Iif (videoClickElem) {
selectNode.parentElement.style.cssFloat = 'right';
}
ej2_base_1.addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_RIGHT]);
this.callBack(e);
break;
case 'videoremove':
ej2_base_1.detach(selectNode.parentElement);
this.callBack(e);
break;
}
};
VideoCommand.prototype.wrapVideo = function (e) {
var wrapElement;
var sourceElement;
if (e.item.isEmbedUrl) {
wrapElement = ej2_base_1.createElement('span', { className: classes.CLASS_EMBED_VIDEO_WRAP, attrs: { contentEditable: 'false' } });
var clickElement = ej2_base_1.createElement('span', { className: classes.CLASS_VIDEO_CLICK_ELEM });
var temp = ej2_base_1.createElement('template');
temp.innerHTML = e.item.fileName;
clickElement.appendChild(temp.content);
this.vidElement = sourceElement = clickElement.firstElementChild;
this.setStyle(sourceElement, e, this.vidElement);
wrapElement.style.display = (e.item.cssClass === classes.CLASS_VIDEO_INLINE) ? 'inline-block' : 'block';
wrapElement.appendChild(clickElement);
}
else {
wrapElement = ej2_base_1.createElement('span', { className: classes.CLASS_VIDEO_WRAP, attrs: { contentEditable: 'false', title: ((!ej2_base_1.isNullOrUndefined(e.item.title)) ? e.item.title : (!ej2_base_1.isNullOrUndefined(e.item.fileName) ? e.item.fileName : '')) } });
this.vidElement = ej2_base_1.createElement('video', { className: classes.CLASS_VIDEO + ' ' + classes.CLASS_VIDEO_INLINE, attrs: { controls: '' } });
sourceElement = ej2_base_1.createElement('source');
this.setStyle(sourceElement, e, this.vidElement);
this.vidElement.appendChild(sourceElement);
wrapElement.appendChild(this.vidElement);
}
return wrapElement;
};
VideoCommand.prototype.createVideo = function (e) {
var _this = this;
var isReplaced = false;
var wrapElement;
if (e.value === 'VideoReplace' && !ej2_base_1.isNullOrUndefined(e.item.selectParent) && (e.item.selectParent[0].tagName === 'VIDEO')) {
if (e.item.isEmbedUrl) {
wrapElement = this.wrapVideo(e);
var oldEle = e.item.selection.range.startContainer;
oldEle.parentNode.replaceChild(wrapElement, oldEle);
}
else {
var videoEle = e.item.selectParent[0].querySelector('source');
this.setStyle(videoEle, e, videoEle);
isReplaced = true;
}
}
else Iif (e.value === 'VideoReplace' && !ej2_base_1.isNullOrUndefined(e.item.selectParent) && ej2_base_1.isNullOrUndefined(e.item.selectParent[0].querySelector('iframe')) &&
e.item.selectParent[0].classList &&
e.item.selectParent[0].classList.contains(classes.CLASS_VIDEO_CLICK_ELEM)) {
e.item.selectParent[0].innerHTML = e.item.fileName;
this.setStyle(e.item.selectParent[0].firstElementChild, e, e.item.selectParent[0].firstElementChild);
}
else if (e.value === 'VideoReplace' && !ej2_base_1.isNullOrUndefined(e.item.selectParent) && !ej2_base_1.isNullOrUndefined(e.item.selectParent[0].querySelector('iframe')) &&
!e.item.isEmbedUrl) {
wrapElement = this.wrapVideo(e);
var oldEle = e.item.selection.range.startContainer;
oldEle.parentNode.replaceChild(wrapElement, oldEle);
}
else {
if (!e.item.isEmbedUrl) {
wrapElement = this.wrapVideo(e);
}
else {
wrapElement = this.wrapVideo(e);
}
if (!ej2_base_1.isNullOrUndefined(e.item.selection)) {
e.item.selection.restore();
}
inserthtml_1.InsertHtml.Insert(this.parent.currentDocument, wrapElement, this.parent.editableElement);
if (wrapElement.nextElementSibling === null) {
var insertElem = ej2_base_1.createElement('br');
wrapElement.parentNode.insertBefore(insertElem, wrapElement.nextSibling);
}
}
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 videoElm_1;
if (e.value === 'VideoReplace' || isReplaced) {
if (!e.item.isEmbedUrl) {
videoElm_1 = e.item.selectParent[0];
}
else Eif (e.item.isEmbedUrl) {
Eif (!ej2_base_1.isNullOrUndefined(wrapElement)) {
videoElm_1 = wrapElement.querySelector('iframe');
}
}
else {
videoElm_1 = e.item.selectParent[0].querySelector('iframe');
}
}
else {
videoElm_1 = !e.item.isEmbedUrl ? selectedNode.lastElementChild : selectedNode.querySelector('iframe');
}
videoElm_1.addEventListener(videoElm_1.tagName !== 'IFRAME' ? 'loadeddata' : 'load', function () {
Eif (e.value !== 'VideoReplace' || !isReplaced) {
if (e.item.isEmbedUrl && videoElm_1) {
videoElm_1.classList.add('e-rte-embed-url');
}
if (!ej2_base_1.isNullOrUndefined(_this.parent.currentDocument)) {
e.callBack({
requestType: 'Videos',
editorMode: 'HTML',
event: e.event,
range: _this.parent.nodeSelection.getRange(_this.parent.currentDocument),
elements: [videoElm_1]
});
}
}
});
if (isReplaced) {
videoElm_1.load();
}
if (ej2_base_1.Browser.userAgent.indexOf('Firefox') !== -1) {
this.vidElement.addEventListener('play', function () { _this.editAreaVideoClick(e); });
this.vidElement.addEventListener('pause', function () { _this.editAreaVideoClick(e); });
}
}
};
VideoCommand.prototype.editAreaVideoClick = function (e) {
e.callBack({
requestType: 'VideosPlayPause',
editorMode: 'HTML',
event: e.event
});
};
VideoCommand.prototype.setStyle = function (sourceElement, e, videoEle) {
if (e.item.url !== '' && !ej2_base_1.isNullOrUndefined(e.item.url) && ej2_base_1.isNullOrUndefined(sourceElement) ? false : sourceElement.nodeName.toLowerCase() !== 'iframe') {
sourceElement.setAttribute('src', e.item.url);
}
if (!e.item.isEmbedUrl) {
sourceElement.type = e.item.fileName && e.item.fileName.split('.').length > 0 ?
'video/' + e.item.fileName.split('.')[e.item.fileName.split('.').length - 1] :
e.item.url && e.item.url.split('.').length > 0 ? 'video/' + e.item.url.split('.')[e.item.url.split('.').length - 1] : '';
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.width)) {
videoEle.setAttribute('width', ej2_base_1.formatUnit(e.item.width.width));
}
if (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.height)) {
videoEle.setAttribute('height', ej2_base_1.formatUnit(e.item.height.height));
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.minWidth)) {
videoEle.style.minWidth = ej2_base_1.formatUnit(e.item.width.minWidth);
}
if (!ej2_base_1.isNullOrUndefined(e.item.width) && !ej2_base_1.isNullOrUndefined(e.item.width.maxWidth)) {
videoEle.style.maxWidth = ej2_base_1.formatUnit(e.item.width.maxWidth);
}
if (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.minHeight)) {
videoEle.style.minHeight = ej2_base_1.formatUnit(e.item.height.minHeight);
}
Iif (!ej2_base_1.isNullOrUndefined(e.item.height) && !ej2_base_1.isNullOrUndefined(e.item.height.maxHeight)) {
videoEle.style.maxHeight = ej2_base_1.formatUnit(e.item.height.maxHeight);
}
if (!ej2_base_1.isNullOrUndefined(e.item.cssClass)) {
if (e.item.cssClass === classes.CLASS_VIDEO_BREAK) {
ej2_base_1.addClass([videoEle], [classes.CLASS_VIDEO_BREAK]);
ej2_base_1.removeClass([videoEle], [classes.CLASS_VIDEO_INLINE]);
}
else {
ej2_base_1.addClass([videoEle], [classes.CLASS_VIDEO_INLINE]);
ej2_base_1.removeClass([videoEle], [classes.CLASS_VIDEO_BREAK]);
}
}
};
VideoCommand.prototype.videoDimension = function (e) {
var selectNode = !(e.item.selectNode[0].classList.contains(classes.CLASS_VIDEO_CLICK_ELEM)) ? e.item.selectNode[0] :
e.item.selectNode[0].querySelector('iframe');
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);
};
VideoCommand.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)
});
}
};
VideoCommand.prototype.destroy = function () {
this.removeEventListener();
};
return VideoCommand;
}());
exports.VideoCommand = VideoCommand;
});
|