all files / document-editor/implementation/dialogs/ form-field-popup.js

25.23% Statements 81/321
34.17% Branches 41/120
26.92% Functions 7/26
25.23% Lines 81/321
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 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416   1741× 1741× 1741× 1741× 1741× 1741× 1741×         1741×         1741×             1741×         1741×         1741×                               1741× 904× 904× 904×     904×           1741×                                                                                                                                                                                                                                                                                                                                                                 1739×     1739× 1739× 1739× 1739×   1739×     1739×     1739×     1739×     1739×     1739×     1739×     1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×       1739×              
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "@syncfusion/ej2-buttons", "@syncfusion/ej2-popups", "../viewer/page", "@syncfusion/ej2-calendars", "@syncfusion/ej2-dropdowns", "../../base/index"], function (require, exports, ej2_base_1, ej2_inputs_1, ej2_buttons_1, ej2_popups_1, page_1, ej2_calendars_1, ej2_dropdowns_1, index_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var FormFieldPopUp = (function () {
        function FormFieldPopUp(owner) {
            var _this = this;
            this.applyTextFormFieldValueClickHandler = this.onApplyTextFormFieldValueClick.bind(this);
            this.applyDropDownFormFieldValueClickHandler = this.onApplyDropDownFormFieldValueClick.bind(this);
            this.closeButtonClickHandler = this.onCloseButtonClick.bind(this);
            this.applyDateFormFieldValueClickHandler = this.onApplyDateFormFieldValueClick.bind(this);
            this.applyNumberFormFieldValueClickHandler = this.onApplyNumberFormFieldValueClick.bind(this);
            this.applyTextFormFieldValue = function () {
                _this.owner.editorModule.updateFormField(_this.formField, _this.textBoxInstance.value);
                _this.owner.trigger(index_1.afterFormFieldFillEvent, { 'fieldName': _this.formField.formFieldData.name, value: _this.formField.resultText, isCanceled: false });
                _this.hidePopup();
            };
            this.applyNumberFormFieldValue = function () {
                _this.owner.editorModule.updateFormField(_this.formField, _this.numberInput.value.toString());
                _this.owner.trigger(index_1.afterFormFieldFillEvent, { 'fieldName': _this.formField.formFieldData.name, value: _this.formField.resultText, isCanceled: false });
                _this.hidePopup();
            };
            this.applyDateFormFieldValue = function () {
                if (!ej2_base_1.isNullOrUndefined(_this.datePickerInstance.value)) {
                    _this.owner.editorModule.updateFormField(_this.formField, _this.dateInput.value);
                    _this.owner.trigger(index_1.afterFormFieldFillEvent, { 'fieldName': _this.formField.formFieldData.name, value: _this.formField.resultText, isCanceled: false });
                    _this.hidePopup();
                }
            };
            this.applyDropDownFormFieldValue = function () {
                _this.owner.editorModule.updateFormField(_this.formField, _this.ddlInstance.index);
                _this.owner.trigger(index_1.afterFormFieldFillEvent, { 'fieldName': _this.formField.formFieldData.name, value: _this.formField.formFieldData.selectedIndex, isCanceled: false });
                _this.hidePopup();
            };
            this.enableDisableDatePickerOkButton = function (args) {
                if (args.isInteracted) {
                    _this.dataPickerOkButton.disabled = false;
                }
            };
            this.closeButton = function () {
                var field = _this.formField;
                _this.hidePopup();
                var eventArgs = { 'fieldName': field.formFieldData.name };
                if (field.formFieldData instanceof page_1.TextFormField) {
                    eventArgs.value = field.resultText;
                }
                else if (field.formFieldData instanceof page_1.CheckBoxFormField) {
                    eventArgs.value = field.formFieldData.checked;
                }
                else {
                    eventArgs.value = field.formFieldData.selectedIndex;
                }
                eventArgs.isCanceled = true;
                _this.owner.trigger(index_1.afterFormFieldFillEvent, eventArgs);
            };
            this.hidePopup = function () {
                _this.owner.documentHelper.isFormFilling = false;
                _this.formField = undefined;
                Iif (_this.target) {
                    _this.target.style.display = 'none';
                }
                Iif (_this.popupObject) {
                    _this.popupObject.hide();
                    _this.popupObject.destroy();
                    _this.popupObject = undefined;
                }
            };
            this.owner = owner;
        }
        FormFieldPopUp.prototype.initPopup = function () {
            this.popupElement = ej2_base_1.createElement('div', { className: 'e-de-form-popup' });
            this.textBoxContainer = this.initTextBoxInput();
            this.popupElement.appendChild(this.textBoxContainer);
            this.popupElement.appendChild(this.initNumericTextBox());
            this.popupElement.appendChild(this.initDatePicker());
            this.popupElement.appendChild(this.initDropDownList());
            this.target = this.popupElement;
            this.owner.documentHelper.viewerContainer.appendChild(this.popupElement);
        };
        FormFieldPopUp.prototype.initTextBoxInput = function () {
            this.textBoxDiv = ej2_base_1.createElement('div', { className: 'e-de-txt-field' });
            var textBoxInput = ej2_base_1.createElement('input', { className: 'e-de-txt-form' });
            var textBox = new ej2_inputs_1.TextBox();
            this.textBoxInput = textBoxInput;
            this.textBoxButtonDiv = ej2_base_1.createElement('div', { className: 'e-de-cmt-action-button' });
            this.textBoxOkButton = ej2_base_1.createElement('button');
            this.textBoxCancelButton = ej2_base_1.createElement('button');
            this.textBoxOkButton.addEventListener('click', this.applyTextFormFieldValueClickHandler);
            this.textBoxCancelButton.addEventListener('click', this.closeButtonClickHandler);
            this.textBoxDiv.appendChild(textBoxInput);
            this.textBoxButtonDiv.appendChild(this.textBoxOkButton);
            this.textBoxButtonDiv.appendChild(this.textBoxCancelButton);
            this.textBoxDiv.appendChild(this.textBoxButtonDiv);
            textBox.appendTo(textBoxInput);
            new ej2_buttons_1.Button({ cssClass: 'e-de-save e-primary', iconCss: 'e-de-save-icon' }, this.textBoxOkButton);
            new ej2_buttons_1.Button({ cssClass: 'e-de-cancel', iconCss: 'e-de-cancel-icon' }, this.textBoxCancelButton);
            this.textBoxInstance = textBox;
            return this.textBoxDiv;
        };
        FormFieldPopUp.prototype.initNumericTextBox = function () {
            this.numericDiv = ej2_base_1.createElement('div', { className: 'e-de-num-field' });
            var numberInput = ej2_base_1.createElement('input', { className: 'e-de-txt-form' });
            var numericTextBox = new ej2_inputs_1.NumericTextBox();
            this.numberInput = numberInput;
            this.textBoxButtonNumericDiv = ej2_base_1.createElement('div', { className: 'e-de-cmt-action-button' });
            this.textBoxOkButtonNumeric = ej2_base_1.createElement('button');
            this.textBoxCancelButtonNumeric = ej2_base_1.createElement('button');
            this.textBoxOkButtonNumeric.addEventListener('click', this.applyNumberFormFieldValueClickHandler);
            this.textBoxCancelButtonNumeric.addEventListener('click', this.closeButtonClickHandler);
            this.numericDiv.appendChild(numberInput);
            this.textBoxButtonNumericDiv.appendChild(this.textBoxOkButtonNumeric);
            this.textBoxButtonNumericDiv.appendChild(this.textBoxCancelButtonNumeric);
            this.numericDiv.appendChild(this.textBoxButtonNumericDiv);
            numericTextBox.appendTo(numberInput);
            new ej2_buttons_1.Button({ cssClass: 'e-de-save e-primary', iconCss: 'e-de-save-icon' }, this.textBoxOkButtonNumeric);
            new ej2_buttons_1.Button({ cssClass: 'e-de-cancel', iconCss: 'e-de-cancel-icon' }, this.textBoxCancelButtonNumeric);
            this.numericTextBoxInstance = numericTextBox;
            return this.numericDiv;
        };
        FormFieldPopUp.prototype.initDatePicker = function () {
            this.dateDiv = ej2_base_1.createElement('div', { className: 'e-de-date-field' });
            var dateInput = ej2_base_1.createElement('input', { className: 'e-de-txt-form' });
            var datePicker = new ej2_calendars_1.DateTimePicker({ strictMode: true, change: this.enableDisableDatePickerOkButton });
            this.dateInput = dateInput;
            this.textBoxButtonDateDiv = ej2_base_1.createElement('div', { className: 'e-de-cmt-action-button' });
            this.textBoxOkButtonDate = ej2_base_1.createElement('button');
            this.textBoxCancelButtonDate = ej2_base_1.createElement('button');
            this.textBoxOkButtonDate.addEventListener('click', this.applyDateFormFieldValueClickHandler);
            this.textBoxCancelButtonDate.addEventListener('click', this.closeButtonClickHandler);
            this.dateDiv.appendChild(dateInput);
            this.textBoxButtonDateDiv.appendChild(this.textBoxOkButtonDate);
            this.textBoxButtonDateDiv.appendChild(this.textBoxCancelButtonDate);
            this.dateDiv.appendChild(this.textBoxButtonDateDiv);
            datePicker.appendTo(dateInput);
            this.dataPickerOkButton = new ej2_buttons_1.Button({ cssClass: 'e-de-save e-primary', iconCss: 'e-de-save-icon' }, this.textBoxOkButtonDate);
            new ej2_buttons_1.Button({ cssClass: 'e-de-cancel', iconCss: 'e-de-cancel-icon' }, this.textBoxCancelButtonDate);
            this.datePickerInstance = datePicker;
            return this.dateDiv;
        };
        FormFieldPopUp.prototype.initDropDownList = function () {
            this.dropDownDiv = ej2_base_1.createElement('div', { className: 'e-de-ddl-field' });
            var dropDownInput = ej2_base_1.createElement('input', { className: 'e-de-txt-form' });
            var ddl = new ej2_dropdowns_1.DropDownList();
            this.dropDownInput = dropDownInput;
            this.textBoxButtonDropDownDiv = ej2_base_1.createElement('div', { className: 'e-de-cmt-action-button' });
            this.textBoxOkButtonDropDown = ej2_base_1.createElement('button');
            this.textBoxCancelButtonDropDown = ej2_base_1.createElement('button');
            this.textBoxOkButtonDropDown.addEventListener('click', this.applyDropDownFormFieldValueClickHandler);
            this.textBoxCancelButtonDropDown.addEventListener('click', this.closeButtonClickHandler);
            this.dropDownDiv.appendChild(dropDownInput);
            this.textBoxButtonDropDownDiv.appendChild(this.textBoxOkButtonDropDown);
            this.textBoxButtonDropDownDiv.appendChild(this.textBoxCancelButtonDropDown);
            this.dropDownDiv.appendChild(this.textBoxButtonDropDownDiv);
            ddl.appendTo(dropDownInput);
            new ej2_buttons_1.Button({ cssClass: 'e-de-save e-primary', iconCss: 'e-de-save-icon' }, this.textBoxOkButtonDropDown);
            new ej2_buttons_1.Button({ cssClass: 'e-de-cancel', iconCss: 'e-de-cancel-icon' }, this.textBoxCancelButtonDropDown);
            this.ddlInstance = ddl;
            return this.dropDownDiv;
        };
        FormFieldPopUp.prototype.onApplyTextFormFieldValueClick = function () {
            this.applyTextFormFieldValue();
        };
        FormFieldPopUp.prototype.onApplyNumberFormFieldValueClick = function () {
            this.applyNumberFormFieldValue();
        };
        FormFieldPopUp.prototype.onApplyDateFormFieldValueClick = function () {
            this.applyDateFormFieldValue();
        };
        FormFieldPopUp.prototype.onApplyDropDownFormFieldValueClick = function () {
            this.applyDropDownFormFieldValue();
        };
        FormFieldPopUp.prototype.showPopUp = function (formField) {
            var _this = this;
            if (formField) {
                this.formField = formField;
                this.owner.selectionModule.selectField();
                if (ej2_base_1.isNullOrUndefined(this.target)) {
                    this.initPopup();
                }
                ej2_base_1.classList(this.target, [], ['e-de-txt-form', 'e-de-num-form', 'e-de-date-form', 'e-de-ddl-form']);
                var formFieldData = formField.formFieldData;
                if (formFieldData) {
                    if (formFieldData instanceof page_1.TextFormField) {
                        var resultText = formField.resultText;
                        var rex = RegExp(this.owner.documentHelper.textHelper.getEnSpaceCharacter(), 'gi');
                        if (resultText.replace(rex, '') === '') {
                            resultText = '';
                        }
                        var maxLength = formFieldData.maxLength;
                        var formFieldType = formFieldData.type;
                        var inputElement_1;
                        resultText = resultText ? resultText : '';
                        if (formFieldType === 'Text' || formFieldType === 'Calculation') {
                            ej2_base_1.classList(this.target, ['e-de-txt-form'], []);
                            inputElement_1 = this.textBoxInput;
                            this.textBoxInstance.value = resultText;
                        }
                        else if (formFieldData.type === 'Number') {
                            ej2_base_1.classList(this.target, ['e-de-num-form'], []);
                            inputElement_1 = this.numberInput;
                            this.numericTextBoxInstance.format = formFieldData.format;
                            this.numericTextBoxInstance.value = parseFloat(resultText.replace(/,/gi, ''));
                        }
                        else if (formFieldType === 'Date') {
                            ej2_base_1.classList(this.target, ['e-de-date-form'], []);
                            inputElement_1 = this.dateInput;
                            var format = formFieldData.format;
                            if (format.indexOf('am/pm') !== -1) {
                                format = format.replace(/am\/pm/gi, 'a');
                            }
                            this.datePickerInstance.format = format;
                            this.datePickerInstance.value = new Date(resultText);
                            this.dataPickerOkButton.disabled = true;
                        }
                        if (inputElement_1) {
                            if (maxLength > 0) {
                                inputElement_1.maxLength = maxLength;
                            }
                            else {
                                inputElement_1.removeAttribute('maxlength');
                            }
                            setTimeout(function () {
                                inputElement_1.focus();
                            });
                        }
                    }
                    else if (formFieldData instanceof page_1.DropDownFormField) {
                        ej2_base_1.classList(this.target, ['e-de-ddl-form'], []);
                        this.ddlInstance.refresh();
                        this.ddlInstance.dataSource = formFieldData.dropdownItems;
                        this.ddlInstance.index = formFieldData.selectedIndex;
                        setTimeout(function () {
                            _this.ddlInstance.showPopup();
                        }, 50);
                    }
                    var left = this.owner.selectionModule.getLeftInternal(formField.line, formField, 0);
                    var lineHeight = formField.line.height * this.owner.documentHelper.zoomFactor;
                    var position = this.owner.selectionModule.getTooltipPosition(formField.line, left, this.target, true);
                    if (!this.popupObject) {
                        this.popupObject = new ej2_popups_1.Popup(this.target, {
                            height: 'auto',
                            width: 'auto',
                            relateTo: this.owner.documentHelper.viewerContainer.parentElement,
                            position: { X: position.x, Y: position.y + lineHeight }
                        });
                    }
                    this.target.style.display = 'block';
                    this.popupObject.show();
                }
                this.owner.documentHelper.isFormFilling = true;
            }
        };
        FormFieldPopUp.prototype.onCloseButtonClick = function () {
            this.closeButton();
        };
        FormFieldPopUp.prototype.destroy = function () {
            Iif (this.formField) {
                this.formField.destroy();
            }
            this.formField = undefined;
            this.owner = undefined;
            this.removeEvents();
            this.removeElements();
        };
        FormFieldPopUp.prototype.removeEvents = function () {
            Iif (this.textBoxOkButton) {
                this.textBoxOkButton.removeEventListener('click', this.applyTextFormFieldValueClickHandler);
            }
            Iif (this.textBoxCancelButton) {
                this.textBoxCancelButton.removeEventListener('click', this.closeButtonClickHandler);
            }
            Iif (this.textBoxOkButtonNumeric) {
                this.textBoxOkButtonNumeric.removeEventListener('click', this.applyNumberFormFieldValueClickHandler);
            }
            Iif (this.textBoxCancelButtonNumeric) {
                this.textBoxCancelButtonNumeric.removeEventListener('click', this.closeButtonClickHandler);
            }
            Iif (this.textBoxOkButtonDate) {
                this.textBoxOkButtonDate.removeEventListener('click', this.applyDateFormFieldValueClickHandler);
            }
            Iif (this.textBoxCancelButtonDate) {
                this.textBoxCancelButtonDate.removeEventListener('click', this.closeButtonClickHandler);
            }
            Iif (this.textBoxOkButtonDropDown) {
                this.textBoxOkButtonDropDown.removeEventListener('click', this.applyDropDownFormFieldValueClickHandler);
            }
            Iif (this.textBoxCancelButtonDropDown) {
                this.textBoxCancelButtonDropDown.removeEventListener('click', this.closeButtonClickHandler);
            }
        };
        FormFieldPopUp.prototype.removeElements = function () {
            Iif (this.popupElement) {
                this.popupElement.remove();
                this.popupElement = undefined;
            }
            Iif (this.textBoxDiv) {
                this.textBoxDiv.remove();
                this.textBoxDiv = undefined;
            }
            Iif (this.textBoxButtonDiv) {
                this.textBoxButtonDiv.remove();
                this.textBoxButtonDiv = undefined;
            }
            Iif (this.textBoxOkButton) {
                this.textBoxOkButton.remove();
                this.textBoxOkButton = undefined;
            }
            Iif (this.textBoxCancelButton) {
                this.textBoxCancelButton.remove();
                this.textBoxCancelButton = undefined;
            }
            Iif (this.numericDiv) {
                this.numericDiv.remove();
                this.numericDiv = undefined;
            }
            Iif (this.textBoxButtonNumericDiv) {
                this.textBoxButtonNumericDiv.remove();
                this.textBoxButtonNumericDiv = undefined;
            }
            Iif (this.textBoxOkButtonNumeric) {
                this.textBoxOkButtonNumeric.remove();
                this.textBoxOkButtonNumeric = undefined;
            }
            Iif (this.textBoxCancelButtonNumeric) {
                this.textBoxCancelButtonNumeric.remove();
                this.textBoxCancelButtonNumeric = undefined;
            }
            Iif (this.dateDiv) {
                this.dateDiv.remove();
                this.dateDiv = undefined;
            }
            Iif (this.textBoxButtonDateDiv) {
                this.textBoxButtonDateDiv.remove();
                this.textBoxButtonDateDiv = undefined;
            }
            Iif (this.textBoxOkButtonDate) {
                this.textBoxOkButtonDate.remove();
                this.textBoxOkButtonDate = undefined;
            }
            Iif (this.textBoxCancelButtonDate) {
                this.textBoxCancelButtonDate.remove();
                this.textBoxCancelButtonDate = undefined;
            }
            Iif (this.dropDownDiv) {
                this.dropDownDiv.remove();
                this.dropDownDiv = undefined;
            }
            Iif (this.textBoxButtonDropDownDiv) {
                this.textBoxButtonDropDownDiv.remove();
                this.textBoxButtonDropDownDiv = undefined;
            }
            Iif (this.textBoxOkButtonDropDown) {
                this.textBoxOkButtonDropDown.remove();
                this.textBoxOkButtonDropDown = undefined;
            }
            Iif (this.textBoxCancelButtonDropDown) {
                this.textBoxCancelButtonDropDown.remove();
                this.textBoxCancelButtonDropDown = undefined;
            }
            Iif (this.target) {
                this.target.remove();
                this.target = undefined;
            }
            Iif (this.textBoxContainer) {
                this.textBoxContainer.remove();
                this.textBoxContainer = undefined;
            }
            Iif (this.textBoxInput) {
                this.textBoxInput.remove();
                this.textBoxInput = undefined;
            }
            Iif (this.numberInput) {
                this.numberInput.remove();
                this.numberInput = undefined;
            }
            Iif (this.dateInput) {
                this.dateInput.remove();
                this.dateInput = undefined;
            }
            Iif (this.dropDownInput) {
                this.dropDownInput.remove();
                this.dropDownInput = undefined;
            }
            Iif (this.numbericInput) {
                this.numbericInput.remove();
                this.numbericInput = undefined;
            }
            Iif (this.popupObject) {
                this.popupObject.destroy();
                this.popupObject = undefined;
            }
            Iif (this.textBoxInstance) {
                this.textBoxInstance.destroy();
                this.textBoxInstance = undefined;
            }
            Iif (this.numericTextBoxInstance) {
                this.numericTextBoxInstance.destroy();
                this.numericTextBoxInstance = undefined;
            }
            Iif (this.datePickerInstance) {
                this.datePickerInstance.destroy();
                this.datePickerInstance = undefined;
            }
            Iif (this.ddlInstance) {
                this.ddlInstance.destroy();
                this.ddlInstance = undefined;
            }
            Iif (this.dataPickerOkButton) {
                this.dataPickerOkButton.destroy();
                this.dataPickerOkButton = undefined;
            }
        };
        return FormFieldPopUp;
    }());
    exports.FormFieldPopUp = FormFieldPopUp;
});