all files / document-editor-container/ribbon/insert-tab/ illustrations-group.js

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
 
1×
1×
1×
1×
1×
1×
 
1×
1×
1×
1×
 
 
1×
 
1×
1×
1×
1×
1×
14×
14×
 
 
 
14×
 
 
14×
14×
 
1×
14×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
1×
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
1×
14×
14×
14×
 
 
14×
 
14×
14×
 
1×
 
1×
 
 
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
define(["require", "exports", "../ribbon-interfaces", "@syncfusion/ej2-base"], function (require, exports, ribbon_interfaces_1, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.IMAGE_LOCAL_ID = '_image_local';
    var IllustrationsGroup = (function (_super) {
        __extends(IllustrationsGroup, _super);
        function IllustrationsGroup(container) {
            var _this = _super.call(this, container) || this;
            _this.imagePicker = ej2_base_1.createElement('input', {
                attrs: { type: 'file', accept: '.jpg,.jpeg,.png,.bmp,.svg' },
                className: 'e-de-ctnr-file-picker'
            });
            Iif (ej2_base_1.Browser.isIE) {
                document.body.appendChild(_this.imagePicker);
            }
            ej2_base_1.EventHandler.add(_this.imagePicker, 'change', _this.onImageChange, _this);
            return _this;
        }
        IllustrationsGroup.prototype.getGroupModel = function () {
            return {
                header: this.localObj.getConstant('Illustrations'),
                groupIconCss: 'e-icons e-de-ctnr-image',
                keyTip: 'P',
                enableGroupOverflow: true,
                overflowHeader: this.localObj.getConstant('Illustrations'),
                collections: [{
                        items: [{
                                type: 'DropDown',
                                keyTip: 'U',
                                dropDownSettings: {
                                    content: this.localObj.getConstant('Image'),
                                    iconCss: 'e-icons e-de-ctnr-image',
                                    items: [
                                        {
                                            text: this.localObj.getConstant('Upload from computer'),
                                            id: this.ribbonId + exports.IMAGE_LOCAL_ID,
                                            iconCss: 'e-icons e-de-ctnr-upload'
                                        }
                                    ],
                                    select: this.onImageDropDownSelect.bind(this)
                                },
                                id: this.ribbonId + '_image',
                                ribbonTooltipSettings: {
                                    content: this.localObj.getConstant('Insert inline picture from a file')
                                }
                            }]
                    }]
            };
        };
        IllustrationsGroup.prototype.onImageDropDownSelect = function (args) {
            var id = args.item.id;
            if (id === this.ribbonId + exports.IMAGE_LOCAL_ID) {
                this.imageClickHandler();
            }
        };
        IllustrationsGroup.prototype.imageClickHandler = function () {
            this.imagePicker.value = '';
            this.imagePicker.click();
        };
        IllustrationsGroup.prototype.onImageChange = function () {
            var _this = this;
            var file = this.imagePicker.files[0];
            if (!file) {
                return;
            }
            var fileReader = new FileReader();
            fileReader.onload = function () {
                _this.insertImage(fileReader.result);
            };
            fileReader.readAsDataURL(file);
        };
        IllustrationsGroup.prototype.insertImage = function (data) {
            var image = document.createElement('img');
            var container = this.container;
            image.addEventListener('load', function () {
                container.documentEditor.editorModule.insertImageInternal(data, true, this.width, this.height, this.alt);
            });
            image.src = data;
        };
        IllustrationsGroup.prototype.destroy = function () {
            Eif (this.imagePicker) {
                ej2_base_1.EventHandler.remove(this.imagePicker, 'change', this.onImageChange);
                Iif (this.imagePicker.parentElement) {
                    this.imagePicker.parentElement.removeChild(this.imagePicker);
                }
                this.imagePicker = undefined;
            }
            this.container = undefined;
            this.localObj = undefined;
        };
        return IllustrationsGroup;
    }(ribbon_interfaces_1.RibbonGroupBase));
    exports.IllustrationsGroup = IllustrationsGroup;
});