@syncfusion/ej2-richtexteditor
Version:
Essential JS 2 RichTextEditor component
952 lines • 95.1 kB
JavaScript
import { addClass, Ajax, Browser, closest, detach, EventHandler, formatUnit, isNullOrUndefined as isNOU, isNullOrUndefined, removeClass } from '@syncfusion/ej2-base';
import { Button, RadioButton } from '@syncfusion/ej2-buttons';
import { TextBox, Uploader } from '@syncfusion/ej2-inputs';
import { isIDevice, convertToBlob, getRootOffsetParent, getMediaResizeBarValue } from '../../common/util';
import * as classes from '../base/classes';
import { CLS_VID_FOCUS } from '../../common/constant';
import * as events from '../base/constant';
import { RenderType } from '../base/enum';
import { dispatchEvent, hasClass, parseHtml } from '../base/util';
import { VideoCommand } from '../../editor-manager/plugin/video';
import * as EVENTS from './../../common/constant';
var Video = /** @class */ (function () {
function Video(parent, serviceLocator) {
this.isVideoUploaded = false;
this.isAllowedTypes = true;
this.pageX = null;
this.pageY = null;
this.mouseX = null;
this.deletedVid = [];
this.isResizeBind = true;
this.parent = parent;
this.rteID = parent.element.id;
this.i10n = serviceLocator.getService('rteLocale');
this.rendererFactory = serviceLocator.getService('rendererFactory');
this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
this.popupUploaderObj = serviceLocator.getService('popupUploaderObject');
this.addEventListener();
this.isDestroyed = false;
this.docClick = this.onDocumentClick.bind(this);
}
Video.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.on(events.keyDown, this.onKeyDown, this);
this.parent.on(events.keyUp, this.onKeyUp, this);
this.parent.on(events.insertVideo, this.insertingVideo, this);
this.parent.on(events.initialEnd, this.afterRender, this);
this.parent.on(events.dynamicModule, this.afterRender, this);
this.parent.on(events.windowResize, this.onWindowResize, this);
this.parent.on(events.showVideoDialog, this.showDialog, this);
this.parent.on(events.closeVideoDialog, this.closeDialog, this);
this.parent.on(events.dropDownSelect, this.alignmentSelect, this);
this.parent.on(events.videoDelete, this.deleteVideo, this);
this.parent.on(events.videoToolbarAction, this.onToolbarAction, this);
this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
this.parent.on(events.videoSize, this.videoSize, this);
this.parent.on(events.insertCompleted, this.showVideoQuickToolbar, this);
this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.bindOnEnd, this.bindOnEnd, this);
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
};
Video.prototype.removeEventListener = function () {
this.parent.off(events.keyDown, this.onKeyDown);
this.parent.off(events.keyUp, this.onKeyUp);
this.parent.off(events.insertVideo, this.insertingVideo);
this.parent.off(events.windowResize, this.onWindowResize);
this.parent.off(events.initialEnd, this.afterRender);
this.parent.off(events.dynamicModule, this.afterRender);
this.parent.off(events.showVideoDialog, this.showDialog);
this.parent.off(events.closeVideoDialog, this.closeDialog);
this.parent.off(events.dropDownSelect, this.alignmentSelect);
this.parent.off(events.videoDelete, this.deleteVideo);
this.parent.off(events.videoToolbarAction, this.onToolbarAction);
this.parent.off(events.editAreaClick, this.editAreaClickHandler);
this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
this.parent.off(events.videoSize, this.videoSize);
this.parent.off(events.insertCompleted, this.showVideoQuickToolbar);
this.parent.off(events.clearDialogObj, this.clearDialogObj);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.bindOnEnd, this.bindOnEnd);
this.parent.off(events.modelChanged, this.onPropertyChanged);
this.parent.off(EVENTS.touchEnd, this.videoClick);
this.parent.off(EVENTS.dropEvent, this.dragDrop);
this.parent.off(EVENTS.dragEnter, this.dragEnter);
this.parent.off(EVENTS.dragOver, this.dragOver);
if (!isNullOrUndefined(this.contentModule)) {
this.parent.formatter.editorManager.observer.off(events.checkUndo, this.undoStack);
if (this.parent.insertVideoSettings.resize) {
this.parent.off(EVENTS.touchStart, this.resizeStart);
this.parent.element.ownerDocument.removeEventListener('mousedown', this.docClick);
this.docClick = null;
this.parent.off(EVENTS.cut, this.onCutHandler);
EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
}
}
};
Video.prototype.bindOnEnd = function () {
if (!this.parent.formatter.editorManager.videoObj) {
this.parent.formatter.editorManager.videoObj = new VideoCommand(this.parent.formatter.editorManager);
}
};
Video.prototype.onPropertyChanged = function (e) {
for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) {
var prop = _a[_i];
if (prop === 'insertVideoSettings') {
switch (Object.keys(e.newProp.insertVideoSettings)[0]) {
case 'resize':
if (this.parent.insertVideoSettings.resize === false) {
this.parent.off(EVENTS.touchStart, this.resizeStart);
this.parent.off(EVENTS.cut, this.onCutHandler);
this.cancelResizeAction();
}
else {
this.addresizeHandler();
}
break;
}
}
}
};
Video.prototype.addresizeHandler = function () {
this.parent.on(EVENTS.touchStart, this.resizeStart, this);
this.parent.element.ownerDocument.addEventListener('mousedown', this.docClick);
this.parent.on(EVENTS.cut, this.onCutHandler, this);
};
Video.prototype.afterRender = function () {
this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
this.parent.on(EVENTS.touchEnd, this.videoClick, this);
this.parent.on(EVENTS.dropEvent, this.dragDrop, this);
this.parent.on(EVENTS.dragEnter, this.dragEnter, this);
this.parent.on(EVENTS.dragOver, this.dragOver, this);
if (this.parent.insertVideoSettings.resize) {
this.addresizeHandler();
}
};
Video.prototype.clearDialogObj = function () {
if (this.uploadObj && !this.uploadObj.isDestroyed) {
this.uploadObj.destroy();
detach(this.uploadObj.element);
this.uploadObj = null;
}
if (this.webUrlBtn && !this.webUrlBtn.isDestroyed) {
this.webUrlBtn.destroy();
detach(this.webUrlBtn.element);
this.webUrlBtn = null;
}
if (this.embedUrlBtn && !this.embedUrlBtn.isDestroyed) {
this.embedUrlBtn.destroy();
detach(this.embedUrlBtn.element);
this.embedUrlBtn = null;
}
if (this.widthNum && !this.widthNum.isDestroyed) {
this.widthNum.destroy();
detach(this.widthNum.element);
this.widthNum = null;
}
if (this.heightNum && !this.heightNum.isDestroyed) {
this.heightNum.destroy();
detach(this.heightNum.element);
this.heightNum = null;
}
if (this.button && !this.button.isDestroyed) {
this.button.destroy();
detach(this.button.element);
this.heightNum = null;
}
if (this.dialogObj && this.dialogObj.element) {
this.dialogObj.destroy();
detach(this.dialogObj.element);
this.dialogObj = null;
}
};
// eslint-disable-next-line
Video.prototype.onKeyUp = function (event) {
if (!isNOU(this.deletedVid) && this.deletedVid.length > 0) {
for (var i = 0; i < this.deletedVid.length; i++) {
var args = {
element: this.deletedVid[i],
src: this.deletedVid[i].tagName !== 'IFRAME' ? this.deletedVid[i].querySelector('source').getAttribute('src') :
this.deletedVid[i].src
};
this.parent.trigger(events.afterMediaDelete, args);
}
}
};
Video.prototype.undoStack = function (args) {
if ((args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') && this.parent.editorMode === 'HTML') {
for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {
var temp = this.parent.createElement('div');
var contentElem = this.parent.formatter.getUndoRedoStack()[i].text;
temp.appendChild(contentElem.cloneNode(true));
var vid = temp.querySelectorAll('video');
if (temp.querySelector('.e-vid-resize') && vid.length > 0) {
for (var j = 0; j < vid.length; j++) {
vid[j].style.outline = '';
}
detach(temp.querySelector('.e-vid-resize'));
var clonedElement = temp.cloneNode(true);
var fragment = document.createDocumentFragment();
while (clonedElement.firstChild) {
fragment.appendChild(clonedElement.firstChild);
}
this.parent.formatter.getUndoRedoStack()[i].text = fragment;
}
}
}
};
Video.prototype.onIframeMouseDown = function (e) {
var target = e.target;
if (this.dialogObj) {
this.dialogObj.hide({ returnValue: true });
}
if (!(!isNullOrUndefined(this.parent.currentTarget) && this.parent.currentTarget.nodeName === 'VIDEO') && (this.videoEle && this.vidResizeDiv && this.contentModule.getEditPanel().contains(this.vidResizeDiv))) {
this.cancelResizeAction();
}
if (this.contentModule.getEditPanel().querySelector('.e-vid-resize') && (this.parent.currentTarget.nodeName === 'VIDEO')) {
if (!isNOU(this.prevSelectedVidEle) &&
this.prevSelectedVidEle !== ((target.tagName === 'IFRAME' || target.tagName === 'VIDEO') ? target : target.querySelector('iframe'))) {
this.prevSelectedVidEle.style.outline = '';
}
}
};
Video.prototype.videoSize = function (e) {
var _this = this;
if (e.selectNode[0].nodeName !== 'VIDEO' && !this.isEmbedVidElem(e.selectNode[0])) {
return;
}
this.insertVideo(e);
if (!isNullOrUndefined(this.dialogObj)) {
var vidSizeHeader = this.i10n.getConstant('videoSizeHeader');
var linkUpdate = this.i10n.getConstant('dialogUpdate');
var dialogContent = this.vidsizeInput(e);
var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
this.dialogObj.setProperties({
width: '290px', header: vidSizeHeader, content: dialogContent,
buttons: [{
// eslint-disable-next-line
click: function (e) {
_this.insertSize(selectObj_1);
},
buttonModel: {
content: linkUpdate, cssClass: 'e-flat e-update-size', isPrimary: true
}
}]
});
this.dialogObj.element.style.maxHeight = 'inherit';
this.dialogObj.content.querySelector('input').focus();
}
};
Video.prototype.vidsizeInput = function (e) {
var _this = this;
var selectNode = e.selectNode[0];
var vidHeight = this.i10n.getConstant('videoHeight');
var vidWidth = this.i10n.getConstant('videoWidth');
var vidSizeWrap = this.parent.createElement('div', { className: 'e-video-sizewrap' });
var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();
var heightVal = isNullOrUndefined(this.changedHeightValue) && (selectNode.style.height.toString() === 'auto' ||
selectNode.style.height !== '') ? selectNode.style.height : !isNullOrUndefined(this.changedHeightValue) ?
this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
if (selectNode.style.width === '' && isNullOrUndefined(this.changedWidthValue)) {
widthVal = 'auto';
}
if (selectNode.style.height === '' && isNullOrUndefined(this.changedHeightValue)) {
heightVal = 'auto';
}
this.changedWidthValue = null;
this.changedHeightValue = null;
var content = '<div class="e-rte-label"><label>' + vidWidth +
'</label></div><div class="e-rte-field"><input type="text" id="vidwidth" class="e-vid-width" value=' +
widthVal
+ ' /></div>' +
'<div class="e-rte-label">' + '<label>' + vidHeight + '</label></div><div class="e-rte-field"> ' +
'<input type="text" id="vidheight" class="e-vid-height" value=' +
heightVal
+ ' /></div>';
var contentElem = parseHtml(content);
vidSizeWrap.appendChild(contentElem);
this.widthNum = new TextBox({
value: formatUnit(widthVal),
enableRtl: this.parent.enableRtl,
input: function (e) {
_this.inputWidthValue = formatUnit((e.value));
}
});
this.widthNum.createElement = this.parent.createElement;
this.widthNum.appendTo(vidSizeWrap.querySelector('#vidwidth'));
this.heightNum = new TextBox({
value: formatUnit(heightVal),
enableRtl: this.parent.enableRtl,
input: function (e) {
_this.inputHeightValue = formatUnit((e.value));
}
});
this.heightNum.createElement = this.parent.createElement;
this.heightNum.appendTo(vidSizeWrap.querySelector('#vidheight'));
return vidSizeWrap;
};
Video.prototype.insertSize = function (e) {
e.selection.restore();
var proxy = e.selfVideo;
if (proxy.parent.formatter.getUndoRedoStack().length === 0) {
proxy.parent.formatter.saveData();
}
var dialogEle = proxy.dialogObj.element;
this.changedWidthValue = this.inputWidthValue === 'px' ? null : this.inputWidthValue;
this.changedHeightValue = this.inputHeightValue === 'px' ? null : this.inputHeightValue;
var width = dialogEle.querySelector('.e-vid-width').value;
var height = dialogEle.parentElement.querySelector('.e-vid-height').value;
proxy.parent.formatter.process(this.parent, e.args, e.args, {
width: width, height: height, selectNode: e.selectNode,
subCommand: e.args.item.subCommand
});
if (this.vidResizeDiv) {
e.selectNode[0] = (e.selectNode[0].tagName === 'VIDEO' || e.selectNode[0].tagName === 'IFRAME') ?
e.selectNode[0] : e.selectNode[0].querySelector('iframe');
proxy.vidResizePos(e.selectNode[0], this.vidResizeDiv);
}
proxy.dialogObj.hide({ returnValue: true });
};
Video.prototype.resizeEnd = function (e) {
this.resizeBtnInit();
this.videoEle.parentElement.style.cursor = 'auto';
if (Browser.isDevice) {
removeClass([e.target.parentElement], 'e-mob-span');
}
var args = { event: e, requestType: 'videos' };
this.parent.trigger(events.resizeStop, args);
/* eslint-disable */
var pageX = this.getPointX(e);
var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
this.parent.element.getBoundingClientRect().top + e.clientY : e.pageY;
/* eslint-enable */
this.parent.formatter.editorManager.observer.on(events.checkUndo, this.undoStack, this);
this.parent.formatter.saveData();
};
Video.prototype.resizeStart = function (e, ele) {
var _this = this;
if (this.parent.readonly) {
return;
}
var target = ele ? ele : !this.isEmbedVidElem(e.target) ? e.target : e.target.querySelector('iframe');
if (isNullOrUndefined(target)) {
return;
}
this.prevSelectedVidEle = this.videoEle;
if (target.tagName === 'VIDEO' || target.tagName === 'IFRAME') {
this.parent.preventDefaultResize(e);
var videoElem = target;
if (this.vidResizeDiv && this.contentModule.getEditPanel().contains(this.vidResizeDiv)) {
detach(this.vidResizeDiv);
}
this.videoResize(videoElem);
}
if (target.classList.contains('e-rte-videoboxmark')) {
if (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
this.pageX = this.getPointX(e);
this.pageY = this.getPointY(e);
e.preventDefault();
e.stopImmediatePropagation();
this.resizeBtnInit();
if (this.quickToolObj) {
this.quickToolObj.videoQTBar.hidePopup();
}
if (target.classList.contains('e-rte-topLeft')) {
this.resizeBtnStat.topLeft = true;
}
if (target.classList.contains('e-rte-topRight')) {
this.resizeBtnStat.topRight = true;
}
if (target.classList.contains('e-rte-botLeft')) {
this.resizeBtnStat.botLeft = true;
}
if (target.classList.contains('e-rte-botRight')) {
this.resizeBtnStat.botRight = true;
}
if (Browser.isDevice && this.contentModule.getEditPanel().contains(this.vidResizeDiv) &&
!this.vidResizeDiv.classList.contains('e-mob-span')) {
addClass([this.vidResizeDiv], 'e-mob-span');
}
else {
var args = { event: e, requestType: 'videos' };
this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
if (resizeStartArgs.cancel) {
_this.cancelResizeAction();
}
});
}
if (this.isResizeBind) {
EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
this.isResizeBind = false;
}
}
};
Video.prototype.videoClick = function (e) {
if (Browser.isDevice) {
if ((e.target.tagName === 'VIDEO' || this.isEmbedVidElem(e.target))) {
this.contentModule.getEditPanel().setAttribute('contenteditable', 'false');
e.target.focus();
this.isVideoClicked = true;
}
else {
if (!this.parent.readonly && !this.parent.imageModule.isImageClicked && !this.parent.audioModule.isAudioClicked) {
this.contentModule.getEditPanel().setAttribute('contenteditable', 'true');
this.isVideoClicked = false;
}
}
}
if (e.target.tagName === 'VIDEO' || this.isEmbedVidElem(e.target) && !this.parent.userAgentData.isSafari()) {
e.preventDefault();
}
};
Video.prototype.onCutHandler = function () {
if (this.vidResizeDiv && this.contentModule.getEditPanel().contains(this.vidResizeDiv)) {
this.cancelResizeAction();
}
};
Video.prototype.videoResize = function (e) {
this.resizeBtnInit();
this.videoEle = e;
addClass([this.videoEle], 'e-resize');
this.vidResizeDiv = this.parent.createElement('span', { className: 'e-vid-resize', id: this.rteID + '_vidResize' });
this.vidResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-videoboxmark e-rte-topLeft', styles: 'cursor: nwse-resize'
}));
this.vidResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-videoboxmark e-rte-topRight', styles: 'cursor: nesw-resize'
}));
this.vidResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-videoboxmark e-rte-botLeft', styles: 'cursor: nesw-resize'
}));
this.vidResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-videoboxmark e-rte-botRight', styles: 'cursor: nwse-resize'
}));
if (Browser.isDevice) {
addClass([this.vidResizeDiv], 'e-mob-rte');
}
e.style.outline = '2px solid #4a90e2';
this.vidResizePos(e, this.vidResizeDiv);
this.resizeVidDupPos(e);
this.contentModule.getEditPanel().appendChild(this.vidResizeDiv);
if (this.parent.element.style.height === 'auto') {
this.vidResizePos(e, this.vidResizeDiv);
}
};
Video.prototype.getPointX = function (e) {
if (e.touches && e.touches.length) {
return e.touches[0].pageX;
}
else {
return e.pageX;
}
};
Video.prototype.getPointY = function (e) {
if (e.touches && e.touches.length) {
return e.touches[0].pageY;
}
else {
return e.pageY;
}
};
Video.prototype.vidResizePos = function (e, vidResizeDiv) {
if (isNullOrUndefined(vidResizeDiv)) {
return;
}
var pos = this.calcPos(e);
var top = pos.top;
var left = pos.left;
var vidWid = e.getBoundingClientRect().width;
var vidHgt = e.getBoundingClientRect().height;
var borWid = (Browser.isDevice) ? (4 * parseInt((e.style.outline.slice(-3)), 10)) + 2 :
(2 * parseInt((e.style.outline.slice(-3)), 10)) + 2; //span border width + video outline width
var devWid = ((Browser.isDevice) ? 0 : 2); // span border width
// to remove the scroll bar width in RTL mode
var right = 0;
if (this.parent.enableRtl && !this.parent.iframeSettings.enable) {
var offsetParent = getRootOffsetParent(e, this.rteID);
right = offsetParent.offsetWidth - offsetParent.clientWidth;
}
vidResizeDiv.querySelector('.e-rte-botLeft').style.left = ((left - borWid) - right) + 'px';
vidResizeDiv.querySelector('.e-rte-botLeft').style.top = ((parseInt(vidHgt.toString(), 10) - borWid) + top) + 'px';
vidResizeDiv.querySelector('.e-rte-botRight').style.left = (((parseInt(vidWid.toString(), 10) - (borWid - devWid)) + left) - right) + 'px';
vidResizeDiv.querySelector('.e-rte-botRight').style.top = ((parseInt(vidHgt.toString(), 10) - borWid) + top) + 'px';
vidResizeDiv.querySelector('.e-rte-topRight').style.left = (((parseInt(vidWid.toString(), 10) - (borWid - devWid)) + left) - right) + 'px';
vidResizeDiv.querySelector('.e-rte-topRight').style.top = (top - (borWid)) + 'px';
vidResizeDiv.querySelector('.e-rte-topLeft').style.left = ((left - borWid) - right) + 'px';
vidResizeDiv.querySelector('.e-rte-topLeft').style.top = (top - borWid) + 'px';
};
Video.prototype.calcPos = function (elem) {
var rootEl = this.parent.contentModule.getEditPanel();
var ElemOffset = getMediaResizeBarValue(elem, rootEl);
return {
top: ElemOffset.top,
left: ElemOffset.left
};
};
Video.prototype.setAspectRatio = function (vid, expectedX, expectedY, e) {
var vidEleStyle = getComputedStyle(vid);
if (isNullOrUndefined(vidEleStyle)) {
return;
}
var regExp = RegExp;
var width = vidEleStyle.width !== '' ? vidEleStyle.width.match(new regExp('^\\d+(\\.\\d*)?%$', 'g')) ? parseFloat(vidEleStyle.width) :
parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
var height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
width = width.toString().match(new regExp('\\b\\d+(\\.\\d*)?(%|$)\\b', 'g')) ? parseFloat(width.toString()) : parseInt(width.toString(), 10);
height = height.toString().match(new regExp('\\b\\d+(\\.\\d*)?(%|$)\\b', 'g')) ? parseFloat(height.toString()) : parseInt(height.toString(), 10);
/* eslint-enable */
if (width > height) {
vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '200px' : formatUnit(this.parent.insertVideoSettings.minWidth);
vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '90px' : formatUnit(this.parent.insertVideoSettings.minHeight);
if (this.parent.insertVideoSettings.resizeByPercent) {
this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
}
else if ((vid.style.width === '' && vid.style.height !== '') || (vidEleStyle.width === '' && vidEleStyle.height !== '')) {
vid.style.height = expectedY + 'px';
}
else if ((vid.style.width !== '' && vid.style.height === '') || (vidEleStyle.width !== '' && vidEleStyle.height === '')) {
var currentWidth = ((width / height * expectedY) +
width / height) <
(this.parent.inputElement.getBoundingClientRect().right - 32) ?
((width / height * expectedY) +
width / height) :
(this.parent.inputElement.getBoundingClientRect().right - 32);
vid.style.width = currentWidth.toString() + 'px';
}
else if (vid.style.width !== '' || vidEleStyle.width !== '') {
var currentWidth = (width / height * expectedY) <
(this.parent.inputElement.getBoundingClientRect().right - 32) ?
(width / height * expectedY) :
(this.parent.inputElement.getBoundingClientRect().right - 32);
vid.style.width = currentWidth + 'px';
vid.style.height = expectedY + 'px';
}
else {
vid.setAttribute('width', (parseInt(((width / height * expectedY) + width / height).toString(), 10)).toString());
}
}
else if (height > width) {
if (this.parent.insertVideoSettings.resizeByPercent) {
this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
}
else if (vidEleStyle.width !== '' || vid.style.width !== '') {
vid.style.width = expectedX + 'px';
vid.style.height = (height / width * expectedX) + 'px';
}
else {
vid.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - vid.getBoundingClientRect().left).toString() : expectedX.toString());
}
}
else {
if (this.parent.insertVideoSettings.resizeByPercent) {
vid.style.width = this.pixToPerc(expectedX, (vid.previousElementSibling || vid.parentElement)) + '%';
vid.style.height = null;
vid.removeAttribute('height');
}
else {
vid.style.width = expectedX + 'px';
vid.style.height = expectedX + 'px';
}
}
};
Video.prototype.updateVidEleWidth = function (vid, width, height, expectedX, expectedY) {
if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
var original = vid.offsetWidth + this.mouseX;
var finalWidthByPerc = (original / vid.offsetWidth) * (parseFloat(vid.style.width).toString() === 'NaN' ? (vid.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(vid.style.width));
vid.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
}
else {
if (width > height) {
vid.style.width = this.pixToPerc(width / height * expectedY, (vid.previousElementSibling || vid.parentElement)) + '%';
}
else {
vid.style.width = this.pixToPerc((expectedX / height * expectedY), (vid.previousElementSibling || vid.parentElement)) + '%';
}
}
vid.style.height = null;
vid.removeAttribute('height');
};
Video.prototype.pixToPerc = function (expected, parentEle) {
return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
};
Video.prototype.vidDupMouseMove = function (width, height, e) {
var _this = this;
var args = { event: e, requestType: 'videos' };
this.parent.trigger(events.onResize, args, function (resizingArgs) {
if (resizingArgs.cancel) {
_this.cancelResizeAction();
}
else {
if ((parseInt(_this.parent.insertVideoSettings.minWidth, 10) > parseInt(width, 10) ||
(parseInt(_this.parent.getInsertVidMaxWidth(), 10) < parseInt(width, 10) &&
isNOU(_this.videoEle.style.width)))) {
return;
}
if (!_this.parent.insertVideoSettings.resizeByPercent &&
(parseInt(_this.parent.insertVideoSettings.minHeight, 10) > parseInt(height, 10) ||
parseInt(_this.parent.insertVideoSettings.maxHeight, 10) < parseInt(height, 10))) {
return;
}
_this.videoEle.parentElement.style.cursor = 'pointer';
_this.setAspectRatio(_this.videoEle, parseInt(width, 10), parseInt(height, 10), args);
_this.resizeVidDupPos(_this.videoEle);
_this.vidResizePos(_this.videoEle, _this.vidResizeDiv);
}
});
};
Video.prototype.resizing = function (e) {
if (this.videoEle.offsetWidth >= this.parent.getInsertVidMaxWidth()) {
this.videoEle.style.maxHeight = this.videoEle.offsetHeight + 'px';
}
var pageX = this.getPointX(e);
var pageY = this.getPointY(e);
var mouseX = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageX - this.pageX) : (pageX - this.pageX);
var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);
var width = parseInt(this.vidDupPos.width, 10) + mouseX;
var height = parseInt(this.vidDupPos.height, 10) + mouseY;
this.pageX = pageX;
this.pageY = pageY;
this.mouseX = mouseX;
if (this.resizeBtnStat.botRight) {
this.vidDupMouseMove(width + 'px', height + 'px', e);
}
else if (this.resizeBtnStat.botLeft) {
this.vidDupMouseMove(width + 'px', height + 'px', e);
}
else if (this.resizeBtnStat.topRight) {
this.vidDupMouseMove(width + 'px', height + 'px', e);
}
else if (this.resizeBtnStat.topLeft) {
this.vidDupMouseMove(width + 'px', height + 'px', e);
}
};
Video.prototype.cancelResizeAction = function () {
this.isResizeBind = true;
EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);
if (this.videoEle && this.vidResizeDiv && this.contentModule.getEditPanel().contains(this.vidResizeDiv)) {
detach(this.vidResizeDiv);
this.videoEle.style.outline = '';
this.vidResizeDiv = null;
this.pageX = null;
this.pageY = null;
}
};
Video.prototype.resizeVidDupPos = function (e) {
this.vidDupPos = {
width: (e.style.width !== '' && (this.parent.insertVideoSettings &&
!this.parent.insertVideoSettings.resizeByPercent)) ? this.videoEle.style.width : e.width !== 'auto' && e.width !== 0 && e.width !== 'NaN' ? e.width + 'px' : parseInt(getComputedStyle(e).width, 10) + 'px',
height: (e.style.height !== '') ? this.videoEle.style.height : e.height !== 'auto' && e.height !== 0 && e.height !== 'NaN' ? e.height + 'px' : parseInt(getComputedStyle(e).height, 10) + 'px'
};
};
Video.prototype.resizeBtnInit = function () {
return this.resizeBtnStat = { botLeft: false, botRight: false, topRight: false, topLeft: false };
};
Video.prototype.onToolbarAction = function (args) {
if (isIDevice()) {
this.parent.notify(events.selectionRestore, {});
}
var item = args.args.item;
switch (item.subCommand) {
case 'VideoReplace':
this.parent.notify(events.insertVideo, args);
break;
case 'VideoRemove':
this.parent.notify(events.videoDelete, args);
break;
case 'VideoDimension':
this.parent.notify(events.videoSize, args);
}
};
Video.prototype.onKeyDown = function (event) {
var originalEvent = event.args;
var range;
var save;
var selectNodeEle;
var selectParentEle;
this.deletedVid = [];
var isCursor;
var keyCodeValues = [27, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123,
44, 45, 9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93, 144, 145, 182, 183];
if (this.parent.editorMode === 'HTML') {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
isCursor = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
}
if (!isCursor && this.parent.editorMode === 'HTML' && keyCodeValues.indexOf(originalEvent.which) < 0) {
var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeName === 'VIDEO' || nodes[i].nodeName === 'IFRAME') {
this.deletedVid.push(nodes[i]);
}
}
}
if (this.parent.editorMode === 'HTML' && ((originalEvent.which === 8 && originalEvent.code === 'Backspace') ||
(originalEvent.which === 46 && originalEvent.code === 'Delete'))) {
var isCursor_1 = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor_1)) {
this.checkVideoBack(range);
}
else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor_1)) {
this.checkVideoDel(range);
}
}
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
originalEvent.code !== 'KeyK') {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
((!isNOU(selectParentEle[0]) && selectParentEle[0].tagName === 'VIDEO' || this.isEmbedVidElem(selectParentEle[0]))) &&
selectParentEle[0].parentElement) {
if (this.contentModule.getEditPanel().querySelector('.e-vid-resize')) {
this.removeResizeEle();
}
removeClass([selectParentEle[0]], CLS_VID_FOCUS);
if (this.quickToolObj && this.quickToolObj.videoQTBar) {
this.quickToolObj.videoQTBar.hidePopup();
}
}
}
if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {
this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
}
if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
if (selectNodeEle && selectNodeEle[0]) {
// Is Video element selected to delete
var isVideoSelected = selectNodeEle[0].nodeName === 'VIDEO' ||
this.isEmbedVidElem(selectNodeEle[0]);
// Is Delete Key is pressed to remove video
var isVideoDeleteKeyPress = originalEvent.keyCode === 46 &&
(selectNodeEle[0].nextSibling &&
(selectNodeEle[0].nextSibling.className === 'e-video-wrap' ||
this.isEmbedVidElem(selectNodeEle[0].nextSibling)) &&
(range.startOffset === range.endOffset) &&
(range.startContainer.textContent.length === range.startOffset));
// Is Backspace key is pressed to remove video
var isVideoBackSpaceKeyPress = originalEvent.keyCode === 8 &&
(selectNodeEle[0].previousSibling &&
(selectNodeEle[0].previousSibling.className === 'e-video-wrap' ||
this.isEmbedVidElem(selectNodeEle[0].previousSibling)) &&
(range.startOffset === range.endOffset) && range.startOffset === 0);
if ((isVideoSelected || isVideoBackSpaceKeyPress || isVideoDeleteKeyPress)) {
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
}
originalEvent.preventDefault();
var event_1 = {
selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
args: {
item: { command: 'Videos', subCommand: 'VideoRemove' },
originalEvent: originalEvent
}
};
this.deleteVideo(event_1, originalEvent.keyCode);
}
}
if (this.parent.contentModule.getEditPanel().querySelector('.e-vid-resize')) {
this.removeResizeEle();
}
}
if (originalEvent.code === 'Backspace') {
originalEvent.action = 'backspace';
}
switch (originalEvent.action) {
case 'escape':
if (!isNullOrUndefined(this.dialogObj)) {
this.dialogObj.close();
}
break;
case 'backspace':
case 'delete':
for (var i = 0; i < this.deletedVid.length; i++) {
var src = this.deletedVid[i].src;
this.videoRemovePost(src);
}
if (this.parent.editorMode !== 'Markdown' && range.startContainer === range.endContainer && range.startOffset === range.endOffset) {
if (range.startContainer.nodeType === 3) {
if (originalEvent.code === 'Backspace' && !this.parent.audioModule.isAudioRemoved) {
if (range.startContainer.previousElementSibling && range.startOffset === 0 &&
(range.startContainer.previousElementSibling.classList.contains(classes.CLS_VIDEOWRAP) ||
this.isEmbedVidElem(range.startContainer.previousElementSibling))) {
detach(range.startContainer.previousElementSibling);
}
}
else {
if (!this.parent.audioModule.isAudioRemoved && range.startContainer.nextElementSibling &&
range.endContainer.textContent.length === range.endOffset &&
(range.startContainer.nextElementSibling.classList.contains(classes.CLS_VIDEOWRAP) ||
this.isEmbedVidElem(range.startContainer.nextElementSibling))) {
detach(range.startContainer.nextElementSibling);
}
}
}
else if (range.startContainer.nodeType === 1 && (range.startContainer.classList &&
range.startContainer.classList.contains(classes.CLS_VIDEOWRAP))) {
detach(range.startContainer);
}
else if (range.startContainer.nodeType === 1 &&
!isNOU(range.startContainer.querySelector('.e-video-wrap')) && originalEvent.code === 'Delete') {
detach(range.startContainer.querySelector('.e-video-wrap'));
}
}
break;
case 'insert-video':
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
}
this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
originalEvent.preventDefault();
break;
}
if (originalEvent.ctrlKey && originalEvent.key === 'a') {
this.handleSelectAll();
}
};
Video.prototype.handleSelectAll = function () {
this.cancelResizeAction();
var videoFocusNodes = this.parent.inputElement.querySelectorAll('.' + CLS_VID_FOCUS);
removeClass(videoFocusNodes, CLS_VID_FOCUS);
};
Video.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
var range;
var save;
var selectNodeEle;
var selectParentEle;
if (!isInternal && !isNOU(this.parent.formatter.editorManager.nodeSelection)) {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
}
else {
save = selection;
selectNodeEle = ele;
selectParentEle = parentEle;
}
if (this.parent.editorMode === 'HTML') {
this.insertVideo({
args: {
item: { command: 'Videos', subCommand: 'Video' },
originalEvent: event,
name: !isInternal ? 'showDialog' : null
},
selectNode: selectNodeEle,
selection: save,
selectParent: selectParentEle
});
}
};
Video.prototype.showDialog = function (args) {
if (!isNOU(args.originalEvent)) {
this.openDialog(false, args.originalEvent);
}
else {
this.openDialog(false);
}
};
Video.prototype.closeDialog = function () {
if (this.dialogObj) {
this.dialogObj.hide({ returnValue: true });
}
};
Video.prototype.isVideoWrapElem = function (target) {
if (target && target.classList && target.classList.contains(classes.CLS_VIDEOWRAP)) {
return true;
}
return false;
};
Video.prototype.checkVideoBack = function (range) {
if (range.startContainer.nodeName === '#text' && range.startOffset === 0 &&
!isNOU(range.startContainer.previousSibling) && (range.startContainer.previousSibling.nodeName === 'VIDEO' ||
this.isEmbedVidElem(range.startContainer.previousSibling) ||
this.isVideoWrapElem(range.startContainer.previousSibling))) {
this.deletedVid.push(range.startContainer.previousSibling);
}
else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset - 1]) &&
(range.startContainer.childNodes[range.startOffset - 1].nodeName === 'VIDEO' ||
this.isEmbedVidElem(range.startContainer.childNodes[range.startOffset - 1]) ||
this.isVideoWrapElem(range.startContainer.childNodes[range.startOffset - 1]))) {
this.deletedVid.push(range.startContainer.childNodes[range.startOffset - 1]);
}
};
Video.prototype.checkVideoDel = function (range) {
if (range.startContainer.nodeName === '#text' && range.startOffset === range.startContainer.textContent.length &&
!isNOU(range.startContainer.nextSibling) && (range.startContainer.nextSibling.nodeName === 'VIDEO' ||
this.isEmbedVidElem(range.startContainer.nextSibling) ||
this.isVideoWrapElem(range.startContainer.nextSibling))) {
this.deletedVid.push(range.startContainer.nextSibling);
}
else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset]) &&
(range.startContainer.childNodes[range.startOffset].nodeName === 'VIDEO' ||
this.isEmbedVidElem(range.startContainer.childNodes[range.startOffset]) ||
this.isVideoWrapElem(range.startContainer.childNodes[range.startOffset]))) {
this.deletedVid.push(range.startContainer.childNodes[range.startOffset]);
}
};
Video.prototype.alignmentSelect = function (e) {
var item = e.item;
if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Videos') {
return;
}
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectNodeEle = (selectNodeEle[0].nodeName === 'VIDEO') ? selectNodeEle : [this.videoEle];
var args = { args: e, selectNode: selectNodeEle };
if (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
switch (item.subCommand) {
case 'JustifyLeft':
case 'JustifyCenter':
case 'JustifyRight':
this.alignVideo(args, item.subCommand);
break;
case 'Inline':
this.inline(args);
break;
case 'Break':
this.break(args);
break;
}
if (this.quickToolObj && document.body.contains(this.quickToolObj.videoQTBar.element)) {
this.quickToolObj.videoQTBar.hidePopup();
removeClass([selectNodeEle[0]], CLS_VID_FOCUS);
}
this.cancelResizeAction();
};
Video.prototype.deleteVideo = function (e, keyCode) {
if (e.selectNode[0].nodeName !== 'VIDEO' && !this.isEmbedVidElem(e.selectNode[0])) {
return;
}
if (this.isEmbedVidElem(e.selectNode[0])) {
e.selectNode[0] = e.selectNode[0].classList.contains(classes.CLS_VID_CLICK_ELEM) ? e.selectNode[0] :
e.selectNode[0].parentElement;
}
var args = {
element: !this.isEmbedVidElem(e.selectNode[0]) ? e.selectNode[0].querySelector('iframe') :
e.selectNode[0],
src: !this.isEmbedVidElem(e.selectNode[0]) ? e.selectNode[0].querySelector('source').getAttribute('src') :
e.selectNode[0].querySelector('iframe').getAttribute('src')
};
if (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
e.selection.restore();
this.parent.formatter.process(this.parent, e.args, e.args, {
selectNode: e.selectNode,
subCommand: e.args.item.subCommand
});
this.videoRemovePost(args.src);
if (this.quickToolObj && document.body.contains(this.quickToolObj.videoQTBar.element)) {
this.quickToolObj.videoQTBar.hidePopup();
}
this.cancelResizeAction();
if (isNullOrUndefined