all files / document-editor/implementation/dialogs/ styles-dialog.js

87.7% Statements 164/187
84.48% Branches 49/58
63.64% Functions 14/22
87.5% Lines 161/184
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   148× 148× 148× 148× 148×       148×     148×       148×   14468×                             24× 24× 20× 18× 18× 34× 34× 18× 18×               68× 68× 20×   68× 12×   56× 20×     36×                                                                         203×   203× 203× 203× 203× 203× 203×   203×   203×   203×       203×   203×   203×   203×   203×   203×   203×   203×   203×   203×   203×          
define(["require", "exports", "@syncfusion/ej2-lists", "@syncfusion/ej2-buttons", "@syncfusion/ej2-base"], function (require, exports, ej2_lists_1, ej2_buttons_1, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var StylesDialog = (function () {
        function StylesDialog(documentHelper) {
            var _this = this;
            this.selecHandlerClickHandler = this.onSelecHandlerClick.bind(this);
            this.addNewStyleClickHandler = this.onAddNewStyleClick.bind(this);
            this.modifyStyleClickHandler = this.onModifyStyleClick.bind(this);
            this.modifyStyles = function () {
                _this.documentHelper.dialog.hide();
                _this.documentHelper.owner.styleDialogModule.show(_this.styleName, _this.localValue.getConstant('Modify Style'));
            };
            this.selectHandler = function (args) {
                _this.styleName = _this.getStyleName(args.text);
            };
            this.addNewStyles = function () {
                _this.documentHelper.dialog.hide();
                _this.documentHelper.owner.styleDialogModule.show();
            };
            this.documentHelper = documentHelper;
        }
        StylesDialog.prototype.getModuleName = function () {
            return 'StylesDialog';
        };
        StylesDialog.prototype.initStylesDialog = function (localValue, styles, isRtl) {
            var id = this.documentHelper.owner.containerId + '_insert_styles';
            this.target = ej2_base_1.createElement('div', { id: id, className: 'e-de-styles' });
            var headerValue = localValue.getConstant('Styles');
            this.dlgFields = ej2_base_1.createElement('div', { innerHTML: headerValue, className: 'e-de-para-dlg-heading' });
            this.target.appendChild(this.dlgFields);
            this.commonDiv = ej2_base_1.createElement('div', { className: 'e-styles-common' });
            this.target.appendChild(this.commonDiv);
            this.searchDiv = ej2_base_1.createElement('div', { className: 'e-styles-list' });
            this.commonDiv.appendChild(this.searchDiv);
            if (isRtl) {
                this.searchDiv.classList.add('e-de-rtl');
            }
            this.listviewDiv = ej2_base_1.createElement('div', { className: 'e-styles-listViewDiv', id: 'styles_listview' });
            this.searchDiv.appendChild(this.listviewDiv);
            this.listviewInstance = new ej2_lists_1.ListView({
                dataSource: styles,
                cssClass: 'e-styles-listview',
                fields: { text: 'StyleName', iconCss: 'IconClass' },
                showIcon: true
            });
            this.listviewInstance.appendTo(this.listviewDiv);
            this.listviewInstance.addEventListener('select', this.selecHandlerClickHandler);
            this.buttonDiv = ej2_base_1.createElement('div', { className: 'e-styles-button' });
            this.commonDiv.appendChild(this.buttonDiv);
            this.newButtonDiv = ej2_base_1.createElement('div', { className: 'e-styles-addbutton' });
            this.buttonDiv.appendChild(this.newButtonDiv);
            this.newButtonElement = ej2_base_1.createElement('button', {
                innerHTML: localValue.getConstant('New') + '...', id: 'new',
                attrs: { type: 'button' }
            });
            this.newButtonDiv.appendChild(this.newButtonElement);
            this.newbutton = new ej2_buttons_1.Button({ cssClass: 'e-button-custom' });
            this.newbutton.appendTo(this.newButtonElement);
            this.newButtonElement.addEventListener('click', this.addNewStyleClickHandler);
            this.modifybuttonDiv = ej2_base_1.createElement('div', { className: 'e-styles-addbutton' });
            this.buttonDiv.appendChild(this.modifybuttonDiv);
            this.modifyButtonElement = ej2_base_1.createElement('button', {
                innerHTML: localValue.getConstant('Modify') + '...', id: 'modify',
                attrs: { type: 'button' }
            });
            this.modifybuttonDiv.appendChild(this.modifyButtonElement);
            this.addbutton = new ej2_buttons_1.Button({ cssClass: 'e-button-custom' });
            this.addbutton.appendTo(this.modifyButtonElement);
            this.modifyButtonElement.addEventListener('click', this.modifyStyleClickHandler);
        };
        StylesDialog.prototype.show = function () {
            var localValue = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localValue.setLocale(this.documentHelper.owner.locale);
            var paraStyles = this.updateStyleNames('Paragraph').filter(function (obj) { return obj.Type === 'Paragraph'; });
            var linkedStyles = this.updateStyleNames('Paragraph').filter(function (obj) { return obj.Type === 'Linked'; });
            var charStyles = this.updateStyleNames('Character').filter(function (obj) { return obj.Type === 'Character'; });
            for (var _i = 0, linkedStyles_1 = linkedStyles; _i < linkedStyles_1.length; _i++) {
                var linkedStyle = linkedStyles_1[_i];
                for (var _a = 0, charStyles_1 = charStyles; _a < charStyles_1.length; _a++) {
                    var charStyle = charStyles_1[_a];
                    if (linkedStyle['StyleName'] + ' Char' === charStyle['StyleName']) {
                        charStyles.splice(charStyles.indexOf(charStyle), 1);
                        break;
                    }
                }
            }
            var styles = paraStyles.concat(linkedStyles, charStyles);
            this.localValue = localValue;
            this.initStylesDialog(localValue, styles, this.documentHelper.owner.enableRtl);
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = this.documentHelper.updateFocus;
            this.documentHelper.dialog.close = this.documentHelper.updateFocus;
            this.documentHelper.dialog.header = localValue.getConstant('Styles');
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.buttons = [{
                    click: this.hideObjects.bind(this),
                    buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-hyper-insert', isPrimary: true }
                }];
            this.documentHelper.dialog.dataBind();
            this.documentHelper.dialog.show();
        };
        StylesDialog.prototype.updateStyleNames = function (type) {
            var localValue = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localValue.setLocale(this.documentHelper.owner.locale);
            var collection = this.documentHelper.owner.documentHelper.styles.getStyles(type);
            var paraIcon = 'e-de-listview-icon e-de-e-paragraph-style-mark e-icons';
            var charIcon = 'e-de-listview-icon e-de-e-character-style-mark e-icons';
            var linkedIcon = 'e-de-listview-icon e-de-e-linked-style-mark e-icons';
            var finalList = [];
            for (var i = 0; i < collection.length; i++) {
                var styleName = localValue.getConstant(collection[parseInt(i.toString(), 10)].name);
                if (styleName === '') {
                    styleName = collection[parseInt(i.toString(), 10)].name;
                }
                if (collection[parseInt(i.toString(), 10)].type === 'Paragraph') {
                    finalList.push({ StyleName: styleName, IconClass: paraIcon, Type: collection[parseInt(i.toString(), 10)].type });
                }
                else if (collection[parseInt(i.toString(), 10)].type === 'Character') {
                    finalList.push({ StyleName: styleName, IconClass: charIcon, Type: collection[parseInt(i.toString(), 10)].type });
                }
                else {
                    finalList.push({ StyleName: styleName, IconClass: linkedIcon, Type: collection[parseInt(i.toString(), 10)].type });
                }
            }
            return finalList;
        };
        StylesDialog.prototype.defaultStyleName = function (styleNames) {
            var styleName = [];
            for (var index = 0; index < styleNames.length; index++) {
                styleName.push(styleNames[parseInt(index.toString(), 10)]);
            }
            return styleName;
        };
        StylesDialog.prototype.onModifyStyleClick = function () {
            this.modifyStyles();
        };
        StylesDialog.prototype.onSelecHandlerClick = function (args) {
            this.selectHandler(args);
        };
        StylesDialog.prototype.getStyleName = function (styleName) {
            var localValue = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localValue.setLocale(this.documentHelper.owner.locale);
            if (localValue.getConstant('Heading 1') === styleName) {
                styleName = 'Heading 1';
            }
            else Iif (localValue.getConstant('Heading 2') === styleName) {
                styleName = 'Heading 2';
            }
            else Iif (localValue.getConstant('Heading 3') === styleName) {
                styleName = 'Heading 3';
            }
            else Iif (localValue.getConstant('Heading 4') === styleName) {
                styleName = 'Heading 4';
            }
            else Iif (localValue.getConstant('Heading 5') === styleName) {
                styleName = 'Heading 5';
            }
            else Iif (localValue.getConstant('Heading 6') === styleName) {
                styleName = 'Heading 6';
            }
            else Iif (localValue.getConstant('Normal') === styleName) {
                styleName = 'Normal';
            }
            else Iif (localValue.getConstant('Header') === styleName) {
                styleName = 'Header';
            }
            else Iif (localValue.getConstant('Footer') === styleName) {
                styleName = 'Footer';
            }
            return styleName;
        };
        StylesDialog.prototype.hideObjects = function () {
            this.documentHelper.dialog.hide();
            this.documentHelper.updateFocus();
        };
        StylesDialog.prototype.onAddNewStyleClick = function () {
            this.addNewStyles();
        };
        StylesDialog.prototype.destroy = function () {
            if (this.listviewInstance) {
                this.listviewInstance.destroy();
                this.listviewInstance = undefined;
            }
            this.removeEvents();
            this.removeElements();
            this.documentHelper = undefined;
            this.styleName = undefined;
            this.localValue = undefined;
            this.target = undefined;
        };
        StylesDialog.prototype.removeEvents = function () {
            if (this.newButtonElement) {
                this.newButtonElement.removeEventListener('click', this.addNewStyleClickHandler);
            }
            if (this.modifyButtonElement) {
                this.modifyButtonElement.removeEventListener('click', this.modifyStyleClickHandler);
            }
            Iif (this.listviewInstance) {
                this.listviewInstance.removeEventListener('select', this.selecHandlerClickHandler);
            }
        };
        StylesDialog.prototype.removeElements = function () {
            if (this.dlgFields) {
                this.dlgFields.remove();
                this.dlgFields = undefined;
            }
            if (this.commonDiv) {
                this.commonDiv.remove();
                this.commonDiv = undefined;
            }
            if (this.searchDiv) {
                this.searchDiv.remove();
                this.searchDiv = undefined;
            }
            if (this.listviewDiv) {
                this.listviewDiv.remove();
                this.listviewDiv = undefined;
            }
            if (this.buttonDiv) {
                this.buttonDiv.remove();
                this.buttonDiv = undefined;
            }
            if (this.newButtonDiv) {
                this.newButtonDiv.remove();
                this.newButtonDiv = undefined;
            }
            if (this.newButtonElement) {
                this.newButtonElement.remove();
                this.newButtonElement = undefined;
            }
            if (this.newbutton) {
                this.newbutton.destroy();
                this.newbutton = undefined;
            }
            if (this.modifybuttonDiv) {
                this.modifybuttonDiv.remove();
                this.modifybuttonDiv = undefined;
            }
            if (this.modifyButtonElement) {
                this.modifyButtonElement.remove();
                this.modifyButtonElement = undefined;
            }
            if (this.addbutton) {
                this.addbutton.destroy();
                this.addbutton = undefined;
            }
        };
        return StylesDialog;
    }());
    exports.StylesDialog = StylesDialog;
});