all files / rich-text-editor/actions/ file-manager.js

99.26% Statements 134/135
88.52% Branches 54/61
100% Functions 20/20
99.26% Lines 134/135
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                                                             17×                                                                                                                                                           13×   13× 13× 13×     14×     32823×        
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;
});