all files / document-editor-container/properties-pane/ status-bar.js

85.15% Statements 195/229
51.09% Branches 47/92
78.13% Functions 25/32
85.15% Lines 195/229
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   60× 60× 60× 60× 60× 60× 60× 60× 60× 60× 60×                                                     508×           96×         60× 60× 60× 60× 60× 60× 60× 60× 60× 60× 60× 60× 60× 60×     59× 59× 59×   60× 60× 60× 60× 60× 60× 60× 60× 60× 60×   60× 60× 60× 60× 60×     60× 60× 60×                                                                     60× 60× 60×                                                                                                                           94×   75× 75×   14×     14×         14× 14×   60× 60× 60× 60×   59× 59× 59× 59× 59× 59×   75× 75×               120× 120× 120×     120× 59×   120× 120× 120× 60×     60×   120×   59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59×   59× 59× 59×   59×   59× 59× 59×   59× 59× 59×     59× 59× 59× 59× 59× 59× 59× 59× 59× 59× 59×   59×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-splitbuttons", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_splitbuttons_1, ej2_buttons_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var StatusBar = (function () {
        function StatusBar(parentElement, docEditor) {
            this.startPage = 1;
            this.onPageLayoutClickHandler = this.onPageLayoutClick.bind(this);
            this.onWebLayoutClickHandler = this.onWebLayoutClick.bind(this);
            this.onPageNumberKeyDownHandler = this.onPageNumberKeyDown.bind(this);
            this.onPageNumberKeyUpHandler = this.onPageNumberKeyUp.bind(this);
            this.onPageNumberBlurHandler = this.onPageNumberBlur.bind(this);
            this.onPageNumberFocusHandler = this.onPageNumberFocus.bind(this);
            this.statusBarDiv = parentElement;
            this.container = docEditor;
            this.initializeStatusBar();
            this.wireEvents();
        }
        StatusBar.prototype.onPageLayoutClick = function () {
            this.documentEditor.layoutType = 'Pages';
            this.addRemoveClass(this.pageButton, this.webButton);
            this.documentEditor.focusIn();
        };
        StatusBar.prototype.onWebLayoutClick = function () {
            this.documentEditor.layoutType = 'Continuous';
            this.addRemoveClass(this.webButton, this.pageButton);
            this.documentEditor.focusIn();
        };
        StatusBar.prototype.onPageNumberKeyDown = function (e) {
            Eif (e.which === 13) {
                e.preventDefault();
                var pageNumber = parseInt(this.pageNumberInput.value, 10);
                if (pageNumber > this.editorPageCount) {
                    this.updatePageNumber();
                }
                else {
                    Eif (this.documentEditor.selectionModule) {
                        this.documentEditor.selectionModule.goToPage(parseInt(this.pageNumberInput.value, 10));
                        this.documentEditor.focusIn();
                    }
                    else {
                        this.documentEditor.scrollToPage(parseInt(this.pageNumberInput.value, 10));
                    }
                }
                this.pageNumberInput.contentEditable = 'false';
                Iif (this.pageNumberInput.value === '') {
                    this.updatePageNumber();
                }
            }
            Iif (e.which > 64) {
                e.preventDefault();
            }
        };
        StatusBar.prototype.onPageNumberKeyUp = function () {
            this.updatePageNumberWidth();
        };
        StatusBar.prototype.onPageNumberBlur = function () {
            if (this.pageNumberInput.value === '' || parseInt(this.pageNumberInput.value, 10) > this.editorPageCount) {
                this.updatePageNumber();
            }
            this.pageNumberInput.contentEditable = 'false';
        };
        StatusBar.prototype.onPageNumberFocus = function () {
            this.pageNumberInput.select();
        };
        Object.defineProperty(StatusBar.prototype, "documentEditor", {
            get: function () {
                return this.container ? this.container.documentEditor : undefined;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(StatusBar.prototype, "editorPageCount", {
            get: function () {
                return this.documentEditor ? this.documentEditor.pageCount : 1;
            },
            enumerable: true,
            configurable: true
        });
        StatusBar.prototype.initializeStatusBar = function () {
            var isRtl = this.container.enableRtl;
            this.documentEditor.enableSpellCheck = (this.container.enableSpellCheck) ? true : false;
            this.localObj = new ej2_base_1.L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
            var styles = isRtl ? 'padding-right:16px' : 'padding-left:16px';
            this.pageNumDiv = ej2_base_1.createElement('div', { className: (this.container.enableSpellCheck) ? 'e-de-ctnr-pg-no' : 'e-de-ctnr-pg-no-spellout', styles: styles });
            this.statusBarDiv.appendChild(this.pageNumDiv);
            this.pageLabel = ej2_base_1.createElement('span');
            this.pageLabel.textContent = this.localObj.getConstant('Page') + ' ';
            this.pageNumDiv.appendChild(this.pageLabel);
            this.pageNumberInput = ej2_base_1.createElement('input', { styles: 'text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text', attrs: { type: 'text', 'aria-label': this.localObj.getConstant('Current Page Number') }, className: 'e-de-pagenumber-input' });
            this.editablePageNumber = ej2_base_1.createElement('div', { styles: 'display: inline-flex', className: 'e-input e-de-pagenumber-text' });
            this.editablePageNumber.appendChild(this.pageNumberInput);
            var pageNumberOfLabelStyle = '';
            if (isRtl) {
                this.pageLabel.style.marginLeft = '6px';
                this.editablePageNumber.style.marginLeft = '6px';
                pageNumberOfLabelStyle = 'padding-left:5px';
            }
            else {
                this.pageLabel.style.marginRight = '6px';
                this.editablePageNumber.style.marginRight = '6px';
                pageNumberOfLabelStyle = 'padding-right:5px';
            }
            this.updatePageNumber();
            this.pageNumDiv.appendChild(this.editablePageNumber);
            this.editablePageNumber.setAttribute('title', this.localObj.getConstant('Current Page Number'));
            this.ofLabel = ej2_base_1.createElement('span', { styles: pageNumberOfLabelStyle });
            this.ofLabel.textContent = ' ' + this.localObj.getConstant('of') + ' ';
            this.pageNumDiv.appendChild(this.ofLabel);
            this.pageCount = ej2_base_1.createElement('span');
            this.pageNumDiv.appendChild(this.pageCount);
            this.updatePageCount();
            if (this.documentEditor.enableSpellCheck) {
                this.verticalLine = ej2_base_1.createElement('div', { className: 'e-de-statusbar-separator' });
                this.statusBarDiv.appendChild(this.verticalLine);
                this.spellCheckBtn = this.addSpellCheckElement();
                this.spellCheckButton.appendTo(this.spellCheckBtn);
            }
            this.pageButton = this.createButtonTemplate((this.container.enableSpellCheck) ? 'e-de-statusbar-pageweb e-btn-pageweb-spellcheck' : 'e-de-statusbar-pageweb', 'e-de-printlayout e-icons', 'Print layout', this.statusBarDiv, this.pageButton, (this.documentEditor.layoutType === 'Pages') ? true : false);
            this.webButton = this.createButtonTemplate('e-de-statusbar-pageweb', 'e-de-weblayout e-icons', 'Web layout', this.statusBarDiv, this.webButton, (this.documentEditor.layoutType === 'Continuous') ? true : false);
            this.pageButton.addEventListener('click', this.onPageLayoutClickHandler);
            this.webButton.addEventListener('click', this.onWebLayoutClickHandler);
            this.zoomBtn = ej2_base_1.createElement('button', {
                className: 'e-de-statusbar-zoom', attrs: { type: 'button' }
            });
            this.statusBarDiv.appendChild(this.zoomBtn);
            this.zoomBtn.setAttribute('title', this.localObj.getConstant('ZoomLevelTooltip'));
            var items = [
                {
                    text: '200%'
                },
                {
                    text: '175%'
                },
                {
                    text: '150%'
                },
                {
                    text: '125%'
                },
                {
                    text: '100%'
                },
                {
                    text: '75%'
                },
                {
                    text: '50%'
                },
                {
                    text: '25%'
                },
                {
                    separator: true
                },
                {
                    text: this.localObj.getConstant('Fit one page')
                },
                {
                    text: this.localObj.getConstant('Fit page width')
                }
            ];
            this.zoom = new ej2_splitbuttons_1.DropDownButton({ content: '100%', items: items, enableRtl: this.container.enableRtl, select: this.onZoom.bind(this) });
            this.zoom.isStringTemplate = true;
            this.zoom.appendTo(this.zoomBtn);
        };
        StatusBar.prototype.addSpellCheckElement = function () {
            var _this = this;
            var spellCheckBtn = ej2_base_1.createElement('button', {
                className: 'e-de-statusbar-spellcheck'
            });
            this.statusBarDiv.appendChild(spellCheckBtn);
            spellCheckBtn.setAttribute('title', 'Spell Checker options');
            var spellCheckItems = [
                {
                    text: this.localObj.getConstant('Spell Check')
                },
                {
                    text: this.localObj.getConstant('Underline errors')
                }
            ];
            this.spellCheckButton = new ej2_splitbuttons_1.DropDownButton({
                content: this.localObj.getConstant('Spelling'), items: spellCheckItems, enableRtl: this.container.enableRtl, select: this.onSpellCheck.bind(this),
                beforeItemRender: function (args) {
                    args.element.innerHTML = '<span></span>' + args.item.text;
                    if (ej2_base_1.isNullOrUndefined(_this.currentLanguage)) {
                        _this.currentLanguage = _this.documentEditor.spellCheckerModule.languageID;
                    }
                    if (ej2_base_1.isNullOrUndefined(_this.allowSuggestion)) {
                        _this.allowSuggestion = _this.documentEditor.spellCheckerModule.allowSpellCheckAndSuggestion;
                    }
                    var span = args.element.children[0];
                    if (args.item.text === _this.localObj.getConstant('Spell Check') && _this.documentEditor.enableSpellCheck &&
                        _this.documentEditor.spellCheckerModule.enableSpellCheck) {
                        span.style.marginRight = '10px';
                        span.setAttribute('class', 'e-de-selected-spellcheck-item');
                    }
                    else if (args.item.text === _this.localObj.getConstant('Underline errors') && _this.documentEditor.enableSpellCheck &&
                        _this.documentEditor.spellCheckerModule.enableSpellCheck && !_this.documentEditor.spellCheckerModule.removeUnderline) {
                        span.style.marginRight = '10px';
                        span.setAttribute('class', 'e-de-selected-underline-item');
                    }
                    else {
                        span.style.marginRight = '25px';
                        args.element.children[0].classList.remove('e-de-selected-spellcheck-item');
                        args.element.children[0].classList.remove('e-de-selected-underline-item');
                    }
                }
            });
            return spellCheckBtn;
        };
        StatusBar.prototype.onZoom = function (args) {
            this.setZoomValue(args.item.text);
            this.updateZoomContent();
        };
        StatusBar.prototype.onSpellCheck = function (args) {
            this.setSpellCheckValue(args.item.text);
        };
        StatusBar.prototype.updateZoomContent = function () {
            this.zoom.content = Math.round(this.documentEditor.zoomFactor * 100) + '%';
        };
        StatusBar.prototype.setSpellCheckValue = function (text) {
            this.spellCheckButton.content = this.localObj.getConstant('Spelling');
            if (text.match(this.localObj.getConstant('Spell Check'))) {
                this.documentEditor.spellCheckerModule.enableSpellCheck =
                    (this.documentEditor.spellCheckerModule.enableSpellCheck) ? false : true;
                this.documentEditor.documentHelper.triggerSpellCheck = false;
                this.documentEditor.documentHelper.triggerElementsOnLoading = false;
            }
            else if (text.match(this.localObj.getConstant('Underline errors'))) {
                if (this.documentEditor.enableSpellCheck && this.documentEditor.spellCheckerModule.enableSpellCheck) {
                    this.documentEditor.spellCheckerModule.removeUnderline =
                        (this.documentEditor.spellCheckerModule.removeUnderline) ? false : true;
                }
            }
        };
        StatusBar.prototype.setZoomValue = function (text) {
            if (text.match(this.localObj.getConstant('Fit one page'))) {
                this.documentEditor.fitPage('FitOnePage');
            }
            else if (text.match(this.localObj.getConstant('Fit page width'))) {
                this.documentEditor.fitPage('FitPageWidth');
            }
            else {
                this.documentEditor.zoomFactor = parseInt(text, 10) / 100;
            }
        };
        StatusBar.prototype.updatePageCount = function () {
            this.pageCount.textContent = this.editorPageCount.toString();
        };
        StatusBar.prototype.updatePageNumber = function () {
            this.pageNumberInput.value = this.startPage.toString();
            this.updatePageNumberWidth();
        };
        StatusBar.prototype.updatePageNumberOnViewChange = function (args) {
            Eif (this.documentEditor.selectionModule
                && this.documentEditor.selectionModule.startPage >= args.startPage
                && this.documentEditor.selectionModule.startPage <= args.endPage) {
                this.startPage = this.documentEditor.selectionModule.startPage;
            }
            else {
                this.startPage = args.startPage;
            }
            this.updatePageNumber();
            this.updatePageCount();
        };
        StatusBar.prototype.wireEvents = function () {
            this.pageNumberInput.addEventListener('keydown', this.onPageNumberKeyDownHandler);
            this.pageNumberInput.addEventListener('keyup', this.onPageNumberKeyUpHandler);
            this.pageNumberInput.addEventListener('blur', this.onPageNumberBlurHandler);
            this.pageNumberInput.addEventListener('focus', this.onPageNumberFocusHandler);
        };
        StatusBar.prototype.unWireEvents = function () {
            this.pageButton.removeEventListener('click', this.onPageLayoutClickHandler);
            this.webButton.removeEventListener('click', this.onWebLayoutClickHandler);
            this.pageNumberInput.removeEventListener('keydown', this.onPageNumberKeyDownHandler);
            this.pageNumberInput.removeEventListener('keyup', this.onPageNumberKeyUpHandler);
            this.pageNumberInput.removeEventListener('blur', this.onPageNumberBlurHandler);
            this.pageNumberInput.removeEventListener('focus', this.onPageNumberFocusHandler);
        };
        StatusBar.prototype.updatePageNumberWidth = function () {
            Eif (this.pageNumberInput) {
                this.pageNumberInput.style.width = this.pageNumberInput.value.length >= 3 ? '30px' : '22px';
            }
        };
        StatusBar.prototype.toggleWebLayout = function () {
            this.addRemoveClass(this.pageButton, this.webButton);
        };
        StatusBar.prototype.togglePageLayout = function () {
            this.addRemoveClass(this.webButton, this.pageButton);
        };
        StatusBar.prototype.addRemoveClass = function (addToElement, removeFromElement) {
            addToElement.classList.add('e-btn-toggle');
            Eif (removeFromElement.classList.contains('e-btn-toggle')) {
                removeFromElement.classList.remove('e-btn-toggle');
            }
        };
        StatusBar.prototype.createButtonTemplate = function (className, iconcss, toolTipText, div, appendDiv, toggle) {
            appendDiv = ej2_base_1.createElement('Button', { className: className, attrs: { type: 'button' } });
            div.appendChild(appendDiv);
            var btn = new ej2_buttons_1.Button({
                cssClass: className, iconCss: iconcss, enableRtl: this.container.enableRtl
            });
            if (toggle === true) {
                appendDiv.classList.add('e-btn-toggle');
            }
            btn.appendTo(appendDiv);
            appendDiv.setAttribute('title', this.localObj.getConstant(toolTipText));
            if (toolTipText === 'Web layout') {
                this.webBtn = btn;
            }
            else {
                this.pageBtn = btn;
            }
            return appendDiv;
        };
        StatusBar.prototype.destroy = function () {
            this.unWireEvents();
            this.removeHTMLDom();
            this.dependentComponentsDestroy();
            this.pageButton = undefined;
            this.webButton = undefined;
            this.pageNumberInput = undefined;
            this.statusBarDiv = undefined;
            this.pageCount = undefined;
            this.editablePageNumber = undefined;
            this.localObj = undefined;
            this.container = undefined;
        };
        StatusBar.prototype.dependentComponentsDestroy = function () {
            Eif (this.zoom) {
                this.zoom.destroy();
                this.zoom = undefined;
            }
            if (this.spellCheckButton) {
                this.spellCheckButton.destroy();
                this.spellCheckButton = undefined;
            }
            Eif (this.pageBtn) {
                this.pageBtn.destroy();
                this.pageBtn = undefined;
            }
            Eif (this.webBtn) {
                this.webBtn.destroy();
                this.webBtn = undefined;
            }
        };
        StatusBar.prototype.removeHTMLDom = function () {
            this.pageNumDiv.remove();
            this.statusBarDiv.remove();
            this.pageCount.remove();
            this.pageLabel.remove();
            this.pageNumberInput.remove();
            this.editablePageNumber.remove();
            this.ofLabel.remove();
            this.zoomBtn.remove();
            this.pageButton.remove();
            this.webButton.remove();
            if (!ej2_base_1.isNullOrUndefined(this.verticalLine)) {
                this.verticalLine.remove();
            }
            if (!ej2_base_1.isNullOrUndefined(this.spellCheckBtn)) {
                this.spellCheckBtn.remove();
            }
        };
        return StatusBar;
    }());
    exports.StatusBar = StatusBar;
});