all files / rich-text-editor/actions/ color-picker.js

100% Statements 157/157
90.28% Branches 65/72
100% Functions 15/15
100% Lines 157/157
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   3825× 3825× 3825× 3825× 3825× 3825×     3823×     2190×   2190× 2190× 2190× 2190× 2190× 2190× 2190× 41610× 3714×   179× 179× 179× 179× 179×       179× 179×                 179× 179× 179×     237× 237× 237× 237× 237×       237× 237×                 237× 237× 237×         2190× 80×     1837× 1837× 1837× 1837× 1837× 1837× 1837× 1837×   2259× 179×   2259× 237×   2259× 174× 174× 174×   174×   2259× 209× 209× 209× 209×   209×     1827×   1827×     1914× 1914×   3828×           3825× 3825× 3825× 3825× 3825×         212× 212× 212× 285× 285×                                               1837× 1837× 1837× 1837× 1837×        
define(["require", "exports", "@syncfusion/ej2-base", "../base/enum", "../base/constant", "../base/classes", "../base/util", "../models/items"], function (require, exports, ej2_base_1, enum_1, events, classes, util_1, items_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ColorPickerInput = (function () {
        function ColorPickerInput(parent, serviceLocator) {
            this.tools = {};
            this.parent = parent;
            this.locator = serviceLocator;
            this.renderFactory = this.locator.getService('rendererFactory');
            this.addEventListener();
            if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {
                ej2_base_1.extend(this.tools, items_1.tools, util_1.toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);
            }
            else {
                this.tools = items_1.tools;
            }
        }
        ColorPickerInput.prototype.initializeInstance = function () {
            this.toolbarRenderer = this.renderFactory.getRenderer(enum_1.RenderType.Toolbar);
        };
        ColorPickerInput.prototype.renderColorPickerInput = function (args) {
            var _this = this;
            this.initializeInstance();
            var suffixID = args.containerType;
            var tbElement = args.container;
            var targetID;
            var options;
            items_1.templateItems.forEach(function (item) {
                if (util_1.getIndex(item, args.items) !== -1) {
                    switch (item) {
                        case 'fontcolor': {
                            targetID = _this.parent.getID() + '_' + suffixID + '_FontColor_Target';
                            var fontNode = _this.parent.createElement('input');
                            fontNode.id = targetID;
                            fontNode.classList.add(classes.CLS_FONT_COLOR_TARGET);
                            if (!ej2_base_1.isNullOrUndefined(_this.parent.cssClass)) {
                                var allClassName = _this.parent.cssClass.split(' ');
                                for (var i = 0; i < allClassName.length; i++) {
                                    Eif (allClassName[i].trim() !== '') {
                                        fontNode.classList.add(allClassName[i]);
                                    }
                                }
                            }
                            document.body.appendChild(fontNode);
                            options = {
                                cssClass: _this.tools[item.toLocaleLowerCase()].icon
                                    + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                                value: _this.tools[item.toLocaleLowerCase()].value,
                                command: _this.tools[item.toLocaleLowerCase()].command,
                                subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
                                element: ej2_base_1.select('#' + _this.parent.getID() + '_' + suffixID + '_FontColor', tbElement),
                                target: (targetID)
                            };
                            _this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor');
                            _this.fontColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'fontcolor', _this.fontColorPicker);
                            break;
                        }
                        case 'backgroundcolor': {
                            targetID = _this.parent.getID() + '_' + suffixID + '_BackgroundColor_Target';
                            var backNode = _this.parent.createElement('input');
                            backNode.id = targetID;
                            backNode.classList.add(classes.CLS_BACKGROUND_COLOR_TARGET);
                            if (!ej2_base_1.isNullOrUndefined(_this.parent.cssClass)) {
                                var allClassName = _this.parent.cssClass.split(' ');
                                for (var i = 0; i < allClassName.length; i++) {
                                    Eif (allClassName[i].trim() !== '') {
                                        backNode.classList.add(allClassName[i]);
                                    }
                                }
                            }
                            document.body.appendChild(backNode);
                            options = {
                                cssClass: _this.tools[item.toLocaleLowerCase()].icon
                                    + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                                value: _this.tools[item.toLocaleLowerCase()].value,
                                command: _this.tools[item.toLocaleLowerCase()].command,
                                subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
                                element: ej2_base_1.select('#' + _this.parent.getID() + '_' + suffixID + '_BackgroundColor', tbElement),
                                target: (targetID)
                            };
                            _this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor');
                            _this.backgroundColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', _this.backgroundColorPicker, _this.defaultColorPicker);
                            break;
                        }
                    }
                }
            });
            if (this.parent.inlineMode.enable) {
                this.setCssClass({ cssClass: this.parent.getCssClass() });
            }
        };
        ColorPickerInput.prototype.destroy = function () {
            this.removeEventListener();
            this.destroyColorPicker();
            this.defaultColorPicker = null;
            this.fontColorPicker = null;
            this.fontColorDropDown = null;
            this.backgroundColorDropDown = null;
            this.backgroundColorPicker = null;
            this.tools = {};
        };
        ColorPickerInput.prototype.destroyColorPicker = function () {
            if (this.fontColorPicker && !this.fontColorPicker.isDestroyed) {
                this.fontColorPicker.destroy();
            }
            if (this.backgroundColorPicker && !this.backgroundColorPicker.isDestroyed) {
                this.backgroundColorPicker.destroy();
            }
            if (this.fontColorDropDown && !this.fontColorDropDown.isDestroyed) {
                var innerEle = this.fontColorDropDown.element.querySelector('.e-rte-color-content');
                Eif (innerEle) {
                    ej2_base_1.detach(innerEle);
                }
                this.fontColorDropDown.destroy();
            }
            if (this.backgroundColorDropDown && !this.backgroundColorDropDown.isDestroyed) {
                var innerEle = this.backgroundColorDropDown.element.querySelector('.e-rte-color-content');
                Eif (innerEle) {
                    this.defaultColorPicker = innerEle.children[0].style.borderBottomColor;
                    ej2_base_1.detach(innerEle);
                }
                this.backgroundColorDropDown.destroy();
            }
        };
        ColorPickerInput.prototype.setRtl = function (args) {
            if (this.fontColorPicker) {
                this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });
                this.fontColorDropDown.setProperties({ enableRtl: args.enableRtl });
            }
            if (this.backgroundColorPicker) {
                this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
                this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
            }
        };
        ColorPickerInput.prototype.setCssClass = function (e) {
            this.updateCss(this.fontColorPicker, this.fontColorDropDown, e);
            this.updateCss(this.backgroundColorPicker, this.backgroundColorDropDown, e);
        };
        ColorPickerInput.prototype.updateCss = function (colorPickerObj, dropDownObj, e) {
            if (colorPickerObj && e.cssClass) {
                if (ej2_base_1.isNullOrUndefined(e.oldCssClass)) {
                    colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
                    dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
                }
                else {
                    colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
                    dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
                }
            }
        };
        ColorPickerInput.prototype.addEventListener = function () {
            this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);
            this.parent.on(events.rtlMode, this.setRtl, this);
            this.parent.on(events.modelChanged, this.onPropertyChanged, this);
            this.parent.on(events.bindCssClass, this.setCssClass, this);
            this.parent.on(events.showColorPicker, this.showColorPicker, this);
        };
        ColorPickerInput.prototype.showColorPicker = function (e) {
            if (!ej2_base_1.isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === 'fontcolor')) {
                this.fontColorDropDown.toggle();
            }
            else Eif (!ej2_base_1.isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === 'backgroundcolor')) {
                this.backgroundColorDropDown.toggle();
            }
        };
        ColorPickerInput.prototype.onPropertyChanged = function (model) {
            var newProp = model.newProp;
            var element;
            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                switch (prop) {
                    case 'fontColor':
                        Eif (this.fontColorPicker) {
                            for (var _b = 0, _c = Object.keys(newProp.fontColor); _b < _c.length; _b++) {
                                var font = _c[_b];
                                switch (font) {
                                    case 'default': {
                                        this.fontColorPicker.setProperties({ value: newProp.fontColor.default });
                                        element = this.fontColorDropDown.element;
                                        var fontBorder = element.querySelector('.' + this.tools['fontcolor'].icon);
                                        fontBorder.style.borderBottomColor = newProp.fontColor.default;
                                        break;
                                    }
                                    case 'mode':
                                        this.fontColorPicker.setProperties({ mode: newProp.fontColor.mode });
                                        break;
                                    case 'columns':
                                        this.fontColorPicker.setProperties({ columns: newProp.fontColor.columns });
                                        break;
                                    case 'colorCode':
                                        this.fontColorPicker.setProperties({ presetColors: newProp.fontColor.colorCode });
                                        break;
                                    case 'modeSwitcher':
                                        this.fontColorPicker.setProperties({ modeSwitcher: newProp.fontColor.modeSwitcher });
                                        break;
                                }
                            }
                        }
                        break;
                    case 'backgroundColor':
                        Eif (this.backgroundColorPicker) {
                            for (var _d = 0, _e = Object.keys(newProp.backgroundColor); _d < _e.length; _d++) {
                                var background = _e[_d];
                                switch (background) {
                                    case 'default': {
                                        this.backgroundColorPicker.setProperties({ value: newProp.backgroundColor.default });
                                        element = this.backgroundColorDropDown.element;
                                        var backgroundBorder = element.querySelector('.' + this.tools['backgroundcolor'].icon);
                                        backgroundBorder.style.borderBottomColor = newProp.backgroundColor.default;
                                        break;
                                    }
                                    case 'mode':
                                        this.backgroundColorPicker.setProperties({ mode: newProp.backgroundColor.mode });
                                        break;
                                    case 'columns':
                                        this.backgroundColorPicker.setProperties({ columns: newProp.backgroundColor.columns });
                                        break;
                                    case 'colorCode':
                                        this.backgroundColorPicker.setProperties({ presetColors: newProp.backgroundColor.colorCode });
                                        break;
                                    case 'modeSwitcher':
                                        this.backgroundColorPicker.setProperties({ modeSwitcher: newProp.backgroundColor.modeSwitcher });
                                        break;
                                }
                            }
                        }
                        break;
                }
            }
        };
        ColorPickerInput.prototype.removeEventListener = function () {
            this.parent.off(events.toolbarRenderComplete, this.renderColorPickerInput);
            this.parent.off(events.rtlMode, this.setRtl);
            this.parent.off(events.modelChanged, this.onPropertyChanged);
            this.parent.off(events.bindCssClass, this.setCssClass);
            this.parent.off(events.showColorPicker, this.showColorPicker);
        };
        return ColorPickerInput;
    }());
    exports.ColorPickerInput = ColorPickerInput;
});