all files / document-editor/implementation/dialogs/ bullets-and-numbering-dialog.js

90.36% Statements 253/280
80% Branches 80/100
92% Functions 23/25
90.36% Lines 253/280
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   150× 150× 150× 150× 150×                   150×                                                               150× 16×   150× 17× 17×   150×   150× 14×         14× 14×   14×       14×   14× 14× 14× 14× 14× 14× 13×   14× 14× 14× 14× 14× 14× 14×   150×   14487×                                               14×       14× 14× 14× 14×       14× 14× 14×                 14×       14× 14× 14×       14× 14× 14× 14×           19×     18×   19× 19×   19×     18×   19× 19× 19×   19× 19× 19× 19× 19× 19× 19× 19×               19× 19× 19×     64×             104× 104×   104×   104×   104×     104× 104× 104× 104×   104×   104×   104×   104×   104×   104×     104×   104×   104×   104×   104×   104×   104×   104×   104×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../list/list", "../list/abstract-list", "../list/list-level", "../../implementation/format/list-format"], function (require, exports, ej2_base_1, ej2_navigations_1, list_1, abstract_list_1, list_level_1, list_format_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var BulletsAndNumberingDialog = (function () {
        function BulletsAndNumberingDialog(documentHelper) {
            var _this = this;
            this.isBullet = false;
            this.numberListClickHandler = this.onNumberListClick.bind(this);
            this.bulletListClickHandler = this.onBulletListClick.bind(this);
            this.numberListClick = function (args) {
                _this.isBullet = false;
                _this.setActiveElement(args);
                if (args.currentTarget.classList.contains('e-de-list-numbered-none')) {
                    _this.numberFormat = undefined;
                    _this.listLevelPattern = undefined;
                }
                else if (args.currentTarget.classList.contains('e-de-list-numbered-number-dot')) {
                    _this.numberFormat = '%1.';
                    _this.listLevelPattern = 'Arabic';
                }
                else if (args.currentTarget.classList.contains('e-de-list-numbered-number-brace')) {
                    _this.numberFormat = '%1)';
                    _this.listLevelPattern = 'Arabic';
                }
                else if (args.currentTarget.classList.contains('e-de-list-numbered-up-roman')) {
                    _this.numberFormat = '%1.';
                    _this.listLevelPattern = 'UpRoman';
                }
                else if (args.currentTarget.classList.contains('e-de-list-numbered-up-letter')) {
                    _this.numberFormat = '%1.';
                    _this.listLevelPattern = 'UpLetter';
                }
                else if (args.currentTarget.classList.contains('e-de-list-numbered-low-letter-brace')) {
                    _this.numberFormat = '%1)';
                    _this.listLevelPattern = 'LowLetter';
                }
                else if (args.currentTarget.classList.contains('e-de-numbered-low-letter-dot')) {
                    _this.numberFormat = '%1.';
                    _this.listLevelPattern = 'LowLetter';
                }
                else Eif (args.currentTarget.classList.contains('e-de-list-numbered-low-roman')) {
                    _this.numberFormat = '%1.';
                    _this.listLevelPattern = 'LowRoman';
                }
            };
            this.bulletListClick = function (args) {
                _this.isBullet = true;
                _this.setActiveElement(args);
                if (args.currentTarget.classList.contains('e-bullet-none')) {
                    _this.symbol = undefined;
                    _this.fontFamily = undefined;
                }
                else if (args.currentTarget.classList.contains('e-bullet-dot')) {
                    _this.symbol = String.fromCharCode(61623);
                    _this.fontFamily = 'Symbol';
                }
                else if (args.currentTarget.classList.contains('e-bullet-circle')) {
                    _this.symbol = String.fromCharCode(61551) + String.fromCharCode(32);
                    _this.fontFamily = 'Symbol';
                }
                else if (args.currentTarget.classList.contains('e-bullet-square')) {
                    _this.symbol = String.fromCharCode(61607);
                    _this.fontFamily = 'Wingdings';
                }
                else if (args.currentTarget.classList.contains('e-bullet-flower')) {
                    _this.symbol = String.fromCharCode(61558);
                    _this.fontFamily = 'Wingdings';
                }
                else if (args.currentTarget.classList.contains('e-bullet-arrow')) {
                    _this.symbol = String.fromCharCode(61656);
                    _this.fontFamily = 'Wingdings';
                }
                else if (args.currentTarget.classList.contains('e-bullet-tick')) {
                    _this.symbol = String.fromCharCode(61692);
                    _this.fontFamily = 'Wingdings';
                }
            };
            this.loadNumberingBulletDialog = function () {
                _this.documentHelper.updateFocus();
            };
            this.closeNumberingBulletDialog = function () {
                _this.unWireEventsAndBindings();
                _this.documentHelper.updateFocus();
            };
            this.onCancelButtonClick = function () {
                _this.isBullet = false;
                _this.listLevelPattern = undefined;
                _this.numberFormat = undefined;
                _this.symbol = undefined;
                _this.fontFamily = undefined;
                _this.documentHelper.dialog.hide();
                _this.unWireEventsAndBindings();
            };
            this.onOkButtonClick = function () {
                Iif (_this.documentHelper.owner.documentHelper.lists.length > 0) {
                    _this.listFormat.list.listId = _this.documentHelper.owner.documentHelper.lists[_this.documentHelper.owner.documentHelper.lists.length - 1].listId + 1;
                    _this.listFormat.listId = _this.listFormat.list.listId;
                }
                else {
                    _this.listFormat.list.listId = 0;
                    _this.listFormat.listId = 0;
                }
                Iif (_this.documentHelper.owner.documentHelper.abstractLists.length > 0) {
                    _this.abstractList.abstractListId = _this.documentHelper.owner.documentHelper.abstractLists[_this.documentHelper.owner.documentHelper.abstractLists.length - 1].abstractListId + 1;
                }
                else {
                    _this.abstractList.abstractListId = 0;
                }
                _this.listFormat.list.abstractListId = _this.abstractList.abstractListId;
                _this.listFormat.nsid = _this.listFormat.list.nsid = _this.abstractList.nsid;
                var listLevel = new list_level_1.WListLevel(_this.abstractList);
                listLevel.listLevelPattern = !ej2_base_1.isNullOrUndefined(_this.listLevelPattern) ? _this.listLevelPattern : 'Bullet';
                listLevel.numberFormat = _this.isBullet ? _this.symbol : _this.numberFormat;
                if (listLevel.listLevelPattern !== 'Bullet') {
                    listLevel.startAt = 1;
                }
                listLevel.characterFormat.fontFamily = !ej2_base_1.isNullOrUndefined(_this.fontFamily) ? _this.fontFamily : 'Verdana';
                listLevel.paragraphFormat.leftIndent = 36;
                listLevel.paragraphFormat.firstLineIndent = -18;
                _this.abstractList.levels.push(listLevel);
                _this.listFormat.listLevelNumber = 0;
                _this.listFormat.list.abstractList = _this.abstractList;
                _this.documentHelper.hideDialog();
            };
            this.documentHelper = documentHelper;
        }
        BulletsAndNumberingDialog.prototype.getModuleName = function () {
            return 'BulletsAndNumberingDialog';
        };
        BulletsAndNumberingDialog.prototype.initNumberingBulletDialog = function (locale) {
            var id = this.documentHelper.owner.containerId;
            this.target = ej2_base_1.createElement('div', { id: id + '_insertNumberBulletDialog', className: 'e-de-number-bullet-dlg' });
            this.tabTarget = ej2_base_1.createElement('div', { id: id + '_tabNumberBulletDialog', className: 'e-de-tab-number-bullet-dlg' });
            this.target.appendChild(this.tabTarget);
            this.createNumberList(id, locale);
            this.createBulletList(id, locale);
            this.tabObj = new ej2_navigations_1.Tab({
                items: [
                    {
                        header: { 'text': ej2_base_1.createElement('div', { innerHTML: locale.getConstant('Numbering') }) },
                        content: this.numberListDiv
                    },
                    {
                        header: { 'text': ej2_base_1.createElement('div', { innerHTML: locale.getConstant('Bullets') }) },
                        content: this.bulletListDiv
                    }
                ],
                heightAdjustMode: 'None',
                width: 'auto',
                selecting: this.onTabSelect.bind(this)
            });
            this.tabObj.isStringTemplate = true;
            this.tabObj.appendTo(this.tabTarget);
        };
        BulletsAndNumberingDialog.prototype.onTabSelect = function (args) {
            args.preventFocus = true;
            if (args.selectingIndex === 1) {
                this.bulletListDiv.style.display = 'block';
            }
        };
        BulletsAndNumberingDialog.prototype.createNumberList = function (id, locale) {
            this.numberListDiv = ej2_base_1.createElement('div', { className: 'e-de-style-numbered-list', id: id + '_Number' });
            var numberListDiv = this.numberListDiv;
            this.ulTag = ej2_base_1.createElement('ul', {
                styles: 'display: block; outline: 0px;',
                id: 'listMenu',
                className: 'e-de-ui-wfloating-menu e-de-ui-bullets-menu e-de-list-container e-de-list-thumbnail'
            });
            numberListDiv.appendChild(this.ulTag);
            var numberedNone = this.createNumberNoneListTag(this.ulTag, locale);
            var numberedNumberDot = this.createNumberListTag(this.ulTag, '1.', '2.', '3.', 'e-de-list-numbered-number-dot');
            var numberedNumberBrace = this.createNumberListTag(this.ulTag, '1)', '2)', '3)', 'e-de-list-numbered-number-brace');
            var numberedUpRoman = this.createNumberListTag(this.ulTag, 'I.', 'II.', 'III.', 'e-de-list-numbered-up-roman');
            var numberedUpLettter = this.createNumberListTag(this.ulTag, 'A.', 'B.', 'C.', 'e-de-list-numbered-up-letter');
            var numberedLowLetterDot = this.createNumberListTag(this.ulTag, 'a.', 'b.', 'c.', 'e-de-numbered-low-letter-dot');
            var numberedLowLetterBrace = this.createNumberListTag(this.ulTag, 'a)', 'b)', 'c)', 'e-de-list-numbered-low-letter-brace');
            var numberedLowRoman = this.createNumberListTag(this.ulTag, 'i.', 'ii.', 'iii.', 'e-de-list-numbered-low-roman');
            numberedNone.addEventListener('click', this.numberListClickHandler);
            numberedNumberDot.addEventListener('click', this.numberListClickHandler);
            numberedNumberBrace.addEventListener('click', this.numberListClickHandler);
            numberedUpRoman.addEventListener('click', this.numberListClickHandler);
            numberedUpLettter.addEventListener('click', this.numberListClickHandler);
            numberedLowLetterBrace.addEventListener('click', this.numberListClickHandler);
            numberedLowLetterDot.addEventListener('click', this.numberListClickHandler);
            numberedLowRoman.addEventListener('click', this.numberListClickHandler);
            this.target.appendChild(numberListDiv);
        };
        BulletsAndNumberingDialog.prototype.createNumberListTag = function (ulTag, text1, text2, text3, className) {
            this.liTag = ej2_base_1.createElement('li', {
                styles: 'display:block',
                className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-menuitem-md e-de-list-items  e-de-list-item-size ' + className
            });
            ulTag.appendChild(this.liTag);
            var innerHTML = '<div>' + text1 + '<span class="e-de-ui-list-line"></span></div><div>' + text2 + '<span class="e-de-ui-list-line">';
            innerHTML += '</span></div><div>' + text3 + '<span class="e-de-ui-list-line"> </span></div >';
            this.liInnerDiv = ej2_base_1.createElement('div', {
                className: 'e-de-ui-list-header-presetmenu',
                id: 'e-de-ui-zlist0', innerHTML: innerHTML
            });
            this.liTag.style.cssFloat = 'left';
            this.liTag.appendChild(this.liInnerDiv);
            return this.liTag;
        };
        BulletsAndNumberingDialog.prototype.createNumberNoneListTag = function (ulTag, locale) {
            this.liTag1 = ej2_base_1.createElement('li', {
                styles: 'display:block',
                className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-menuitem-md e-de-list-items  e-de-list-item-size e-de-list-numbered-none'
            });
            ulTag.appendChild(this.liTag1);
            var innerHTML = '<div class="e-de-ui-bullets e-de-bullet-icons">' + locale.getConstant('None') + '</div>';
            this.liInnerDiv1 = ej2_base_1.createElement('div', {
                className: 'e-de-ui-list-header-presetmenu',
                id: 'e-de-ui-zlist0', innerHTML: innerHTML
            });
            this.liTag1.style.cssFloat = 'left';
            this.liTag1.appendChild(this.liInnerDiv1);
            return this.liTag1;
        };
        BulletsAndNumberingDialog.prototype.createBulletListTag = function (ulTag, iconCss, className, locale) {
            this.liTag2 = ej2_base_1.createElement('li', {
                styles: 'display:block;',
                className: 'e-de-ui-wfloating-menuitem e-de-ui-wfloating-bullet-menuitem-md e-de-list-items  e-de-list-item-size ' + className
            });
            ulTag.appendChild(this.liTag2);
            var isNone = className === 'e-bullet-none';
            this.liInnerDiv2 = ej2_base_1.createElement('div', {
                className: 'e-de-ui-bullet-list-header-presetmenu e-de-bullet-icon-size',
                styles: isNone ? 'font-size:9px;text-align: center;top: 13px;left:-2px;line-height:normal;position: relative' : ''
            });
            this.liNextDiv = ej2_base_1.createElement('div', { className: !isNone ? iconCss : '', innerHTML: isNone ? locale.getConstant('None') : '' });
            this.liInnerDiv2.appendChild(this.liNextDiv);
            this.liTag2.appendChild(this.liInnerDiv2);
            return this.liTag2;
        };
        BulletsAndNumberingDialog.prototype.createBulletList = function (id, locale) {
            this.bulletListDiv = ej2_base_1.createElement('div', { className: 'e-de-ui-bullet-list-header-presetmenu', id: id + '_Bullet' });
            var bulletListDiv = this.bulletListDiv;
            bulletListDiv.style.display = 'none';
            this.ulTag1 = ej2_base_1.createElement('ul', {
                styles: 'display: block; outline: 0px;', id: 'listMenu',
                className: 'e-de-ui-wfloating-menu e-de-ui-bullets-menu e-de-list-container e-de-list-thumbnail'
            });
            bulletListDiv.appendChild(this.ulTag1);
            var bulletNone = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-none e-de-bullet-icons', 'e-bullet-none', locale);
            var bulletDot = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-dot e-de-bullet-icons', 'e-bullet-dot');
            var bulletCircle = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-circle e-de-bullet-icons', 'e-bullet-circle');
            var bulletSquare = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-square e-de-bullet-icons', 'e-bullet-square');
            var bulletFlower = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-flower e-de-bullet-icons', 'e-bullet-flower');
            var bulletArrow = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-arrow e-de-bullet-icons', 'e-bullet-arrow');
            var bulletTick = this.createBulletListTag(this.ulTag1, 'e-de-icon-bullet-list-tick e-de-bullet-icons', 'e-bullet-tick');
            bulletNone.addEventListener('click', this.bulletListClickHandler);
            bulletDot.addEventListener('click', this.bulletListClickHandler);
            bulletCircle.addEventListener('click', this.bulletListClickHandler);
            bulletSquare.addEventListener('click', this.bulletListClickHandler);
            bulletFlower.addEventListener('click', this.bulletListClickHandler);
            bulletArrow.addEventListener('click', this.bulletListClickHandler);
            bulletTick.addEventListener('click', this.bulletListClickHandler);
            this.target.appendChild(bulletListDiv);
        };
        BulletsAndNumberingDialog.prototype.showNumberBulletDialog = function (listFormat, abstractList) {
            if (!ej2_base_1.isNullOrUndefined(listFormat)) {
                this.listFormat = listFormat;
            }
            else {
                this.listFormat = new list_format_1.WListFormat();
            }
            Eif (ej2_base_1.isNullOrUndefined(this.listFormat.list)) {
                this.listFormat.list = new list_1.WList();
            }
            if (!ej2_base_1.isNullOrUndefined(abstractList)) {
                this.abstractList = abstractList;
            }
            else {
                this.abstractList = new abstract_list_1.WAbstractList();
            }
            var locale = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            locale.setLocale(this.documentHelper.owner.locale);
            if (!this.target) {
                this.initNumberingBulletDialog(locale);
            }
            this.documentHelper.dialog.header = locale.getConstant('Numbering and Bullets');
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = this.loadNumberingBulletDialog;
            this.documentHelper.dialog.close = this.closeNumberingBulletDialog;
            this.documentHelper.dialog.position = { X: 'center', Y: 'center' };
            this.documentHelper.dialog.buttons = [{
                    click: this.onOkButtonClick,
                    buttonModel: { content: locale.getConstant('Ok'), cssClass: 'e-flat e-numbering-bullet-okay', isPrimary: true }
                },
                {
                    click: this.onCancelButtonClick,
                    buttonModel: { content: locale.getConstant('Cancel'), cssClass: 'e-flat e-numbering-bullet-cancel' }
                }];
            this.documentHelper.dialog.dataBind();
            this.documentHelper.dialog.show();
            this.tabObj.refresh();
        };
        BulletsAndNumberingDialog.prototype.onNumberListClick = function (args) {
            this.numberListClick(args);
        };
        BulletsAndNumberingDialog.prototype.setActiveElement = function (args) {
            var html = args.currentTarget.parentElement;
            for (var i = 0; i < html.childElementCount; i++) {
                if (html.childNodes[i].classList.contains('e-de-list-active')) {
                    html.childNodes[i].classList.remove('e-de-list-active');
                }
            }
            args.currentTarget.classList.add('e-de-list-active');
        };
        BulletsAndNumberingDialog.prototype.onBulletListClick = function (args) {
            this.bulletListClick(args);
        };
        BulletsAndNumberingDialog.prototype.unWireEventsAndBindings = function () {
        };
        BulletsAndNumberingDialog.prototype.destroy = function () {
            this.documentHelper = undefined;
            if (this.listFormat) {
                this.listFormat.destroy();
                this.listFormat = undefined;
            }
            if (this.tabObj) {
                this.tabObj.destroy();
                this.tabObj = undefined;
            }
            if (this.abstractList) {
                this.abstractList.destroy();
                this.abstractList = undefined;
            }
            if (this.target && this.target.parentElement) {
                this.target.parentElement.removeChild(this.target);
                for (var m = 0; m < this.target.childNodes.length; m++) {
                    this.target.removeChild(this.target.childNodes[parseInt(m.toString(), 10)]);
                    m--;
                }
                this.target = undefined;
            }
            this.removeEvents();
            this.removeElements();
            this.bulletListDiv = undefined;
            this.numberListDiv = undefined;
        };
        BulletsAndNumberingDialog.prototype.removeEvents = function () {
            if (this.liTag) {
                this.liTag.removeEventListener('click', this.numberListClickHandler);
            }
            if (this.liTag1) {
                this.liTag1.removeEventListener('click', this.numberListClickHandler);
            }
            if (this.liTag2) {
                this.liTag2.removeEventListener('click', this.numberListClickHandler);
            }
            if (this.liTag) {
                this.liTag.removeEventListener('click', this.bulletListClickHandler);
            }
            if (this.liTag1) {
                this.liTag1.removeEventListener('click', this.bulletListClickHandler);
            }
            if (this.liTag2) {
                this.liTag2.removeEventListener('click', this.bulletListClickHandler);
            }
        };
        BulletsAndNumberingDialog.prototype.removeElements = function () {
            if (this.ulTag) {
                this.ulTag.remove();
                this.ulTag = undefined;
            }
            if (this.ulTag1) {
                this.ulTag1.remove();
                this.ulTag1 = undefined;
            }
            if (this.liTag) {
                this.liTag.remove();
                this.liTag = undefined;
            }
            if (this.liTag1) {
                this.liTag1.remove();
                this.liTag1 = undefined;
            }
            if (this.liTag2) {
                this.liTag2.remove();
                this.liTag2 = undefined;
            }
            if (this.liNextDiv) {
                this.liNextDiv.remove();
                this.liNextDiv = undefined;
            }
            if (this.liInnerDiv) {
                this.liInnerDiv.remove();
                this.liInnerDiv = undefined;
            }
            if (this.liInnerDiv1) {
                this.liInnerDiv1.remove();
                this.liInnerDiv1 = undefined;
            }
            if (this.liInnerDiv2) {
                this.liInnerDiv2.remove();
                this.liInnerDiv2 = undefined;
            }
        };
        return BulletsAndNumberingDialog;
    }());
    exports.BulletsAndNumberingDialog = BulletsAndNumberingDialog;
});