all files / document-editor/implementation/dialogs/ cell-options-dialog.js

95.71% Statements 201/210
84.75% Branches 50/59
96% Functions 24/25
95.71% Lines 201/210
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   181× 181× 181×   181×                 181×           181×   181×               14486×                                                                     10× 10×       10×   10× 10×     10× 10×   10× 30×   10×   30× 30× 30× 30×               257×   14× 14×     257× 257× 257× 257× 257× 257×   257×   257×   257×   257×   257×   257×     257×     12× 12× 12× 12× 12×     12× 12× 12×     12× 12× 12× 12× 12× 12×     12× 12× 12×     12× 12× 12× 12× 12× 12× 12× 12×         12× 12×       12× 12×         12× 12×       12× 12× 12× 12× 12×          
define(["require", "exports", "@syncfusion/ej2-buttons", "@syncfusion/ej2-inputs", "../index", "@syncfusion/ej2-base"], function (require, exports, ej2_buttons_1, ej2_inputs_1, index_1, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var CellOptionsDialog = (function () {
        function CellOptionsDialog(documentHelper) {
            var _this = this;
            this.changeSameAsTableClickHandler = this.onChangeSameAsTable.bind(this);
            this.removeEvents = function () {
                _this.documentHelper.dialog2.element.style.pointerEvents = '';
                _this.documentHelper.updateFocus();
            };
            this.changeSameAsTable = function () {
                Eif (_this.sameAsTableCheckBox.checked) {
                    _this.leftMarginBox.enabled = false;
                    _this.rightMarginBox.enabled = false;
                    _this.bottomMarginBox.enabled = false;
                    _this.topMarginBox.enabled = false;
                }
                else {
                    _this.leftMarginBox.enabled = true;
                    _this.rightMarginBox.enabled = true;
                    _this.bottomMarginBox.enabled = true;
                    _this.topMarginBox.enabled = true;
                }
            };
            this.applyTableCellProperties = function () {
                var cellFormat = _this.documentHelper.selection.cellFormat;
                Eif (!ej2_base_1.isNullOrUndefined(_this.bottomMarginBox.value || _this.leftMarginBox.value
                    || _this.rightMarginBox.value || _this.topMarginBox.value) &&
                    (cellFormat.bottomMargin !== _this.bottomMarginBox.value || cellFormat.leftMargin !== _this.leftMarginBox.value
                        || cellFormat.rightMargin !== _this.rightMarginBox.value || cellFormat.topMargin !== _this.topMarginBox.value)) {
                    _this.documentHelper.owner.tablePropertiesDialogModule.isCellOptionsUpdated = true;
                    _this.applyTableOptions(_this.cellFormat);
                    _this.documentHelper.owner.tablePropertiesDialogModule.applyTableSubProperties();
                }
                _this.closeCellMarginsDialog();
            };
            this.closeCellMarginsDialog = function () {
                _this.documentHelper.dialog.hide();
                _this.documentHelper.dialog.element.style.pointerEvents = '';
            };
            this.documentHelper = documentHelper;
        }
        Object.defineProperty(CellOptionsDialog.prototype, "cellFormat", {
            get: function () {
                if (ej2_base_1.isNullOrUndefined(this.cellFormatIn)) {
                    return this.cellFormatIn = new index_1.WCellFormat();
                }
                return this.cellFormatIn;
            },
            enumerable: true,
            configurable: true
        });
        CellOptionsDialog.prototype.getModuleName = function () {
            return 'CellOptionsDialog';
        };
        CellOptionsDialog.prototype.onChangeSameAsTable = function () {
            this.changeSameAsTable();
        };
        CellOptionsDialog.prototype.initCellMarginsDialog = function (localValue, isRtl) {
            this.owner = this.documentHelper.owner.viewer;
            this.target = ej2_base_1.createElement('div', {
                className: 'e-de-table-cell-margin-dlg'
            });
            this.innerDiv = ej2_base_1.createElement('div');
            this.innerDivLabel = ej2_base_1.createElement('Label', {
                className: 'e-de-para-dlg-heading'
            });
            this.innerDivLabel.innerHTML = localValue.getConstant('Cell margins');
            this.innerDiv.appendChild(this.innerDivLabel);
            this.table = ej2_base_1.createElement('TABLE', {
                styles: 'padding-bottom: 8px;padding-top: 8px;', className: 'e-de-cell-margin-top'
            });
            this.tr = ej2_base_1.createElement('tr');
            this.td = ej2_base_1.createElement('td', { className: 'e-de-tbl-btn-separator' });
            var sameAsTableCheckBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'checkbox' }, id: this.target.id + '_sameAsCheckBox'
            });
            sameAsTableCheckBox.setAttribute('aria-label', localValue.getConstant('Same as the whole table'));
            this.td.appendChild(sameAsTableCheckBox);
            this.tr.appendChild(this.td);
            this.table.appendChild(this.tr);
            this.innerDiv.appendChild(this.table);
            CellOptionsDialog.getCellMarginDialogElements(this, this.innerDiv, localValue, true);
            this.divBtn = document.createElement('div');
            this.target.appendChild(this.divBtn);
            this.sameAsTableCheckBox = new ej2_buttons_1.CheckBox({
                label: localValue.getConstant('Same as the whole table'),
                change: this.changeSameAsTable,
                enableRtl: isRtl
            });
            sameAsTableCheckBox.setAttribute('aria-label', localValue.getConstant('Same as the whole table'));
            this.sameAsTableCheckBox.appendTo(sameAsTableCheckBox);
            this.sameAsTableCheckBox.addEventListener('change', this.changeSameAsTableClickHandler);
        };
        CellOptionsDialog.prototype.show = function () {
            var localizeValue = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localizeValue.setLocale(this.documentHelper.owner.locale);
            Eif (!this.target) {
                this.initCellMarginsDialog(localizeValue, this.documentHelper.owner.enableRtl);
            }
            this.loadCellMarginsDialog();
            this.documentHelper.dialog.header = localizeValue.getConstant('Cell Options');
            this.documentHelper.dialog.position = { X: 'center', Y: 'center' };
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = undefined;
            this.documentHelper.dialog.open = undefined;
            this.documentHelper.dialog.close = this.removeEvents;
            this.documentHelper.dialog.buttons = [{
                    click: this.applyTableCellProperties,
                    buttonModel: { content: localizeValue.getConstant('Ok'), cssClass: 'e-flat e-table-cell-margin-okay', isPrimary: true }
                },
                {
                    click: this.closeCellMarginsDialog,
                    buttonModel: { content: localizeValue.getConstant('Cancel'), cssClass: 'e-flat e-table-cell-margin-cancel' }
                }];
            this.documentHelper.dialog.show();
        };
        CellOptionsDialog.prototype.loadCellMarginsDialog = function () {
            var cellFormat = this.documentHelper.selection.cellFormat;
            this.sameAsTable = ej2_base_1.isNullOrUndefined(cellFormat.leftMargin || cellFormat.topMargin
                || cellFormat.rightMargin || cellFormat.bottomMargin);
            if (this.sameAsTable) {
                var tableFormat = this.documentHelper.selection.tableFormat;
                this.loadCellProperties(tableFormat, false, true);
            }
            else {
                this.loadCellProperties(cellFormat, true, false);
            }
        };
        CellOptionsDialog.prototype.loadCellProperties = function (format, enableTextBox, enableCheckBox) {
            this.leftMarginBox.value = format.leftMargin;
            this.rightMarginBox.value = format.rightMargin;
            this.topMarginBox.value = format.topMargin;
            this.bottomMarginBox.value = format.bottomMargin;
            this.leftMarginBox.enabled = enableTextBox;
            this.rightMarginBox.enabled = enableTextBox;
            this.topMarginBox.enabled = enableTextBox;
            this.bottomMarginBox.enabled = enableTextBox;
            this.sameAsTableCheckBox.checked = enableCheckBox;
        };
        CellOptionsDialog.prototype.applySubCellOptions = function (cellFormat) {
            this.documentHelper.owner.editorHistoryModule.initComplexHistory(this.documentHelper.selection, 'CellMarginsSelection');
            this.documentHelper.owner.editorModule.initHistory('CellOptions');
            Eif (!ej2_base_1.isNullOrUndefined(this.documentHelper.owner.editorHistoryModule.currentBaseHistoryInfo)) {
                this.documentHelper.owner.editorHistoryModule.currentBaseHistoryInfo.insertedFormat = cellFormat;
            }
            this.documentHelper.selection.start.paragraph.associatedCell.ownerTable.combineWidget(this.owner);
            this.applyCellMarginValue(this.documentHelper.selection.start.paragraph.associatedCell.ownerRow.combineWidget(this.owner), this.documentHelper.selection.start, this.documentHelper.selection.end, cellFormat);
            this.documentHelper.owner.editorModule.reLayout(this.documentHelper.selection, false);
            Eif (!ej2_base_1.isNullOrUndefined(this.documentHelper.owner.editorHistoryModule.currentHistoryInfo)) {
                this.documentHelper.owner.editorHistoryModule.updateComplexHistory();
            }
        };
        CellOptionsDialog.prototype.applyCellMarginValue = function (row, start, end, cellFormat) {
            this.applyCellMarginsInternal(row, cellFormat);
            if (end.paragraph.associatedCell.ownerRow === row) {
                return;
            }
            var newRow = row.nextWidget;
            Eif (!ej2_base_1.isNullOrUndefined(newRow)) {
                this.applyCellMarginValue(newRow, start, end, cellFormat);
            }
        };
        CellOptionsDialog.prototype.applyCellMarginsInternal = function (row, cellFormat) {
            if (!ej2_base_1.isNullOrUndefined(this.documentHelper.owner.editorHistoryModule.currentBaseHistoryInfo)) {
                var currentFormat = row.childWidgets[0].cellFormat;
                cellFormat = this.documentHelper.owner.editorHistoryModule.currentBaseHistoryInfo.addModifiedCellOptions(currentFormat, cellFormat, row.ownerTable);
            }
            Eif (!ej2_base_1.isNullOrUndefined(cellFormat)) {
                this.applyCellMarginsForCells(row, cellFormat);
            }
        };
        CellOptionsDialog.prototype.applyCellMarginsForCells = function (row, cellFormat) {
            var rowCells = row.childWidgets;
            this.iterateCells(rowCells, cellFormat);
        };
        CellOptionsDialog.prototype.iterateCells = function (cells, cellFormat) {
            for (var i = 0; i < cells.length; i++) {
                this.applySubCellMargins(cells[parseInt(i.toString(), 10)].cellFormat, cellFormat);
            }
            this.documentHelper.owner.tablePropertiesDialogModule.calculateGridValue(cells[0].ownerTable);
        };
        CellOptionsDialog.prototype.applySubCellMargins = function (sourceFormat, cellFormat) {
            sourceFormat.leftMargin = cellFormat.leftMargin;
            sourceFormat.topMargin = cellFormat.topMargin;
            sourceFormat.rightMargin = cellFormat.rightMargin;
            sourceFormat.bottomMargin = cellFormat.bottomMargin;
        };
        CellOptionsDialog.prototype.applyTableOptions = function (cellFormat) {
            Iif (!this.sameAsTableCheckBox.checked) {
                cellFormat.leftMargin = this.leftMarginBox.value;
                cellFormat.topMargin = this.topMarginBox.value;
                cellFormat.bottomMargin = this.bottomMarginBox.value;
                cellFormat.rightMargin = this.rightMarginBox.value;
            }
        };
        CellOptionsDialog.prototype.destroy = function () {
            if (!ej2_base_1.isNullOrUndefined(this.target)) {
                if (this.target.parentElement) {
                    this.target.parentElement.removeChild(this.target);
                }
                for (var y = 0; y < this.target.childNodes.length; y++) {
                    this.target.removeChild(this.target.childNodes[parseInt(y.toString(), 10)]);
                    y--;
                }
                this.target = undefined;
            }
            this.removeElements();
            this.unWireEvents();
            this.dialog = undefined;
            this.target = undefined;
            this.documentHelper = undefined;
            this.sameAsTableCheckBox = undefined;
        };
        CellOptionsDialog.prototype.removeElements = function () {
            if (this.table) {
                this.table.remove();
                this.table = undefined;
            }
            if (this.innerDiv) {
                this.innerDiv.remove();
                this.innerDiv = undefined;
            }
            if (this.innerDivLabel) {
                this.innerDivLabel.remove();
                this.innerDivLabel = undefined;
            }
            if (this.tr) {
                this.tr.remove();
                this.tr = undefined;
            }
            if (this.td) {
                this.td.remove();
                this.td = undefined;
            }
            if (this.divBtn) {
                this.divBtn.remove();
                this.divBtn = undefined;
            }
        };
        CellOptionsDialog.prototype.unWireEvents = function () {
            if (this.sameAsTableCheckBox) {
                this.sameAsTableCheckBox.removeEventListener('change', this.changeSameAsTableClickHandler);
            }
        };
        CellOptionsDialog.getCellMarginDialogElements = function (dialog, div, locale, cellOptions) {
            Eif (!ej2_base_1.isNullOrUndefined(dialog)) {
                var table1 = ej2_base_1.createElement('div');
                var tr1 = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
                var td1 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
                var topTextBox = ej2_base_1.createElement('input', {
                    attrs: { 'type': 'text' }, styles: 'width:100%'
                });
                td1.appendChild(topTextBox);
                var td2 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
                var leftTextBox = ej2_base_1.createElement('input', {
                    attrs: { 'type': 'text' }, styles: 'width:100%'
                });
                td2.appendChild(leftTextBox);
                tr1.appendChild(td1);
                tr1.appendChild(td2);
                var tr2 = ej2_base_1.createElement('div', { className: cellOptions ? 'e-de-dlg-row' : 'e-de-container-row' });
                var td3 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
                var bottomTextBox = ej2_base_1.createElement('input', {
                    attrs: { 'type': 'text' }, styles: 'width:100%'
                });
                td3.appendChild(bottomTextBox);
                var td4 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
                var rightTextBox = ej2_base_1.createElement('input', {
                    attrs: { 'type': 'text' }, styles: 'width:100%'
                });
                td4.appendChild(rightTextBox);
                tr2.appendChild(td3);
                tr2.appendChild(td4);
                table1.appendChild(tr1);
                table1.appendChild(tr2);
                div.appendChild(table1);
                dialog.target.appendChild(div);
                dialog.topMarginBox = new ej2_inputs_1.NumericTextBox({
                    value: 0, min: 0, max: 1584, decimals: 2,
                    enablePersistence: false, placeholder: locale.getConstant('Top'),
                    floatLabelType: 'Always'
                });
                dialog.topMarginBox.appendTo(topTextBox);
                dialog.leftMarginBox = new ej2_inputs_1.NumericTextBox({
                    value: 0, min: 0, max: 1584, decimals: 2, enablePersistence: false, placeholder: locale.getConstant('Left'),
                    floatLabelType: 'Always'
                });
                dialog.leftMarginBox.appendTo(leftTextBox);
                dialog.bottomMarginBox = new ej2_inputs_1.NumericTextBox({
                    value: 0, min: 0, max: 1584, decimals: 2,
                    enablePersistence: false, placeholder: locale.getConstant('Bottom'),
                    floatLabelType: 'Always'
                });
                dialog.bottomMarginBox.appendTo(bottomTextBox);
                dialog.rightMarginBox = new ej2_inputs_1.NumericTextBox({
                    value: 0, min: 0, max: 1584, decimals: 2, enablePersistence: false, placeholder: locale.getConstant('Right'),
                    floatLabelType: 'Always'
                });
                dialog.rightMarginBox.appendTo(rightTextBox);
                rightTextBox.setAttribute('aria-labelledby', locale.getConstant('Right'));
                leftTextBox.setAttribute('aria-labelledby', locale.getConstant('Left'));
                bottomTextBox.setAttribute('aria-labelledby', locale.getConstant('Bottom'));
                topTextBox.setAttribute('aria-labelledby', locale.getConstant('Top'));
            }
        };
        return CellOptionsDialog;
    }());
    exports.CellOptionsDialog = CellOptionsDialog;
});