| 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 | 1×
1×
1×
1×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
1×
101×
1×
78×
78×
1×
60×
60×
60×
60×
60×
60×
1×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
1×
60×
60×
60×
60×
60×
60×
60×
60×
60×
60×
1×
120×
120×
120×
120×
120×
120×
120×
120×
120×
1×
60×
60×
60×
60×
60×
60×
60×
60×
1×
1×
1×
1×
2×
1×
2×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
3×
1×
1×
1×
1×
1×
2×
2×
2×
2×
2×
2×
2×
1×
1×
3×
1×
1×
1×
1×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
1×
77×
8×
77×
75×
2×
2×
1×
8×
8×
8×
8×
1×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
1×
59×
59×
59×
59×
59×
59×
59×
59×
59×
1×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
59×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "@syncfusion/ej2-buttons", "@syncfusion/ej2-inputs", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_inputs_1, ej2_buttons_1, ej2_inputs_2, ej2_base_2, ej2_base_3) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ImageProperties = (function () {
function ImageProperties(container, isRtl) {
this.isWidthApply = false;
this.isHeightApply = false;
this.onAspectRatioBtnClickHook = this.onAspectRatioBtnClick.bind(this);
this.widthBlurHook = this.widthBlur.bind(this);
this.heightBlurHook = this.heightBlur.bind(this);
this.onImageWidthHook = this.onImageWidth.bind(this);
this.onImageHeightHook = this.onImageHeight.bind(this);
this.widthNumericBlurHook = this.widthNumericBlur.bind(this);
this.heightNumericBlurHook = this.heightNumericBlur.bind(this);
this.altTextAreaBlurHook = this.altTextAreaBlur.bind(this);
this.container = container;
this.elementId = this.documentEditor.element.id;
this.isMaintainAspectRatio = false;
this.isRtl = isRtl;
this.initializeImageProperties();
}
Object.defineProperty(ImageProperties.prototype, "documentEditor", {
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
ImageProperties.prototype.enableDisableElements = function (enable) {
Eif (enable) {
ej2_base_1.classList(this.element, [], ['e-de-overlay']);
}
else {
ej2_base_1.classList(this.element, ['e-de-overlay'], []);
}
};
ImageProperties.prototype.initializeImageProperties = function () {
this.element = ej2_base_1.createElement('div', { id: this.elementId + '_imageProperties', className: 'e-de-prop-pane' });
this.element.style.display = 'none';
this.container.propertiesPaneContainer.appendChild(this.element);
this.initImageProp();
this.initImageAltProp();
this.wireEvents();
};
ImageProperties.prototype.initImageProp = function () {
var localObj = new ej2_base_1.L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
this.imageDiv = ej2_base_1.createElement('div', { id: this.elementId + '_imageDiv', className: 'e-de-cntr-pane-padding e-de-prop-separator-line' });
this.element.appendChild(this.imageDiv);
this.label = ej2_base_1.createElement('label', { className: 'e-de-ctnr-prop-label' });
this.label.textContent = localObj.getConstant('Image');
this.imageDiv.appendChild(this.label);
this.outerDiv = ej2_base_1.createElement('div');
this.imageDiv.appendChild(this.outerDiv);
this.widthElement = this.createImagePropertiesDiv('_widthDiv', this.outerDiv, '_widthInput', localObj.getConstant('W'), localObj.getConstant('Width'));
this.widthNumericBox = new ej2_inputs_1.NumericTextBox({ min: 0, max: 23500, cssClass: 'e-de-image-property', showSpinButton: false, format: 'n0', decimals: 2 });
this.widthNumericBox.appendTo(this.widthElement);
this.heightElement = this.createImagePropertiesDiv('_heightDiv', this.outerDiv, '_heightInput', localObj.getConstant('H'), localObj.getConstant('Height'));
this.heightNumericBox = new ej2_inputs_1.NumericTextBox({ min: 0, max: 23500, cssClass: 'e-de-image-property', showSpinButton: false, format: 'n0', decimals: 2 });
this.heightNumericBox.appendTo(this.heightElement);
this.aspectRatioDiv = ej2_base_1.createElement('div', { id: this.elementId + '_aspectRatioDiv' });
this.aspectRatioDiv.setAttribute('title', localObj.getConstant('Aspect ratio'));
this.outerDiv.appendChild(this.aspectRatioDiv);
this.aspectRatio = ej2_base_1.createElement('input', { id: this.elementId + '_aspectRatio', className: 'e-de-ctnr-prop-label' });
this.aspectRatioDiv.appendChild(this.aspectRatio);
this.aspectRatioBtn = new ej2_buttons_1.CheckBox({ label: localObj.getConstant('Aspect ratio'), enableRtl: this.isRtl }, this.aspectRatio);
};
ImageProperties.prototype.initImageAltProp = function () {
var localObj = new ej2_base_1.L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
this.altDiv = ej2_base_1.createElement('div', { id: this.elementId + '_altDiv', className: 'e-de-cntr-pane-padding e-de-prop-separator-line' });
this.element.appendChild(this.altDiv);
this.alabel = ej2_base_1.createElement('label', { className: 'e-de-ctnr-prop-label' });
this.alabel.textContent = localObj.getConstant('Alternate Text');
this.altDiv.appendChild(this.alabel);
this.textArea = ej2_base_1.createElement('textarea', { id: this.elementId + '_textarea', className: 'e-de-ctnr-prop-label ' });
this.altDiv.appendChild(this.textArea);
this.textareaObj = new ej2_inputs_2.TextBox({
floatLabelType: 'Never'
});
this.textareaObj.appendTo(this.textArea);
};
ImageProperties.prototype.createImagePropertiesDiv = function (id, outerDiv, inputId, spanContent, tooltip) {
var divElement = ej2_base_1.createElement('div', { id: this.elementId + id, styles: 'position: relative;width: 100%;', className: 'e-de-ctnr-segment' });
divElement.setAttribute('title', tooltip);
outerDiv.appendChild(divElement);
var inputElement = ej2_base_1.createElement('input', { id: this.elementId + inputId, className: 'e-textbox', styles: 'width:100%;' });
divElement.appendChild(inputElement);
var spanElement = ej2_base_1.createElement('span', { className: 'e-de-img-prty-span' });
spanElement.textContent = spanContent;
divElement.appendChild(spanElement);
return inputElement;
};
ImageProperties.prototype.wireEvents = function () {
this.aspectRatioBtn.element.addEventListener('change', this.onAspectRatioBtnClickHook);
this.widthNumericBox.element.addEventListener('click', this.widthBlurHook);
this.heightNumericBox.element.addEventListener('click', this.heightBlurHook);
this.widthNumericBox.element.addEventListener('keydown', this.onImageWidthHook);
this.heightNumericBox.element.addEventListener('keydown', this.onImageHeightHook);
this.widthNumericBox.element.addEventListener('blur', this.widthNumericBlurHook);
this.heightNumericBox.element.addEventListener('blur', this.heightNumericBlurHook);
this.textArea.addEventListener('blur', this.altTextAreaBlurHook);
};
ImageProperties.prototype.altTextAreaBlur = function () {
if (this.documentEditor.selectionModule.imageFormat.alternateText !== this.textArea.value) {
this.applyImageAlternativeText();
}
};
ImageProperties.prototype.heightNumericBlur = function () {
this.applyImageHeight();
this.isHeightApply = false;
};
ImageProperties.prototype.widthNumericBlur = function () {
this.applyImageWidth();
this.isWidthApply = false;
};
ImageProperties.prototype.widthBlur = function () {
this.isWidthApply = true;
};
ImageProperties.prototype.heightBlur = function () {
this.isHeightApply = true;
};
ImageProperties.prototype.applyImageAlternativeText = function () {
var altText = ej2_base_2.SanitizeHtmlHelper.sanitize(this.textArea.value);
Eif (!ej2_base_3.isNullOrUndefined(altText)) {
this.documentEditor.selectionModule.imageFormat.applyImageAlternativeText(altText);
}
};
ImageProperties.prototype.onImageWidth = function (e) {
var _this = this;
Eif (e.keyCode === 13) {
setTimeout(function () {
_this.applyImageWidth();
_this.isWidthApply = false;
}, 30);
}
};
ImageProperties.prototype.onImageHeight = function (e) {
var _this = this;
Eif (e.keyCode === 13) {
setTimeout(function () {
_this.applyImageHeight();
_this.isHeightApply = false;
}, 30);
}
};
ImageProperties.prototype.applyImageWidth = function () {
if (!this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
var height = this.heightNumericBox.value;
Iif (width > this.widthNumericBox.max) {
width = this.widthNumericBox.max;
}
Iif (height > this.heightNumericBox.max) {
height = this.heightNumericBox.max;
}
Iif (!(width === null || height === null)) {
this.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
else Eif (this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
Iif (width > this.widthNumericBox.max) {
width = this.widthNumericBox.max;
}
var ratio = width / this.documentEditor.selectionModule.imageFormat.width;
var height = this.heightNumericBox.value * ratio;
this.heightNumericBox.value = height;
if (!(width === null || height === null)) {
this.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
};
ImageProperties.prototype.applyImageHeight = function () {
if (!this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
var height = this.heightNumericBox.value;
Eif (!(width === null || height === null)) {
this.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
else Eif (this.isMaintainAspectRatio) {
var height = this.heightNumericBox.value;
var ratio = height / this.documentEditor.selectionModule.imageFormat.height;
var width = this.widthNumericBox.value * ratio;
this.widthNumericBox.value = width;
Eif (!(width === null || height === null)) {
this.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
};
ImageProperties.prototype.onAspectRatioBtnClick = function () {
Iif (this.isMaintainAspectRatio) {
this.isMaintainAspectRatio = false;
}
else {
this.isMaintainAspectRatio = true;
}
};
ImageProperties.prototype.showImageProperties = function (isShow) {
if (this.element.style.display === 'block') {
this.updateImageProperties();
}
if (!isShow && this.element.style.display === 'none' || (isShow && this.element.style.display === 'block')) {
return;
}
this.element.style.display = isShow ? 'block' : 'none';
this.documentEditor.resize();
};
ImageProperties.prototype.updateImageProperties = function () {
this.widthNumericBox.value = this.documentEditor.selectionModule.imageFormat.width;
this.heightNumericBox.value = this.documentEditor.selectionModule.imageFormat.height;
Iif (ej2_base_3.isNullOrUndefined(this.documentEditor.selectionModule.imageFormat.alternateText)) {
this.textArea.value = '';
}
else {
this.textArea.value = this.documentEditor.selectionModule.imageFormat.alternateText;
}
};
ImageProperties.prototype.destroy = function () {
this.unWireEvents();
this.removeHTMLDom();
Eif (this.widthNumericBox) {
this.widthNumericBox.destroy();
}
this.widthNumericBox = undefined;
Eif (this.heightNumericBox) {
this.heightNumericBox.destroy();
}
this.heightNumericBox = undefined;
Eif (this.aspectRatioBtn) {
this.aspectRatioBtn.destroy();
}
this.aspectRatioBtn = undefined;
Eif (this.textareaObj) {
this.textareaObj.destroy();
this.textArea.remove();
this.textArea = undefined;
}
Eif (this.element) {
this.element.innerHTML = '';
this.element = undefined;
}
this.container = undefined;
};
ImageProperties.prototype.removeHTMLDom = function () {
this.outerDiv.remove();
this.label.remove();
this.imageDiv.remove();
this.aspectRatioDiv.remove();
this.aspectRatio.remove();
this.alabel.remove();
this.textArea.remove();
this.altDiv.remove();
this.element.remove();
};
ImageProperties.prototype.unWireEvents = function () {
this.aspectRatioBtn.element.removeEventListener('change', this.onAspectRatioBtnClickHook);
this.widthNumericBox.element.removeEventListener('click', this.widthBlurHook);
this.heightNumericBox.element.removeEventListener('click', this.heightBlurHook);
this.widthNumericBox.element.removeEventListener('keydown', this.onImageWidthHook);
this.heightNumericBox.element.removeEventListener('keydown', this.onImageHeightHook);
this.widthNumericBox.element.removeEventListener('blur', this.widthNumericBlurHook);
this.heightNumericBox.element.removeEventListener('blur', this.heightNumericBlurHook);
this.textArea.removeEventListener('blur', this.altTextAreaBlurHook);
this.onAspectRatioBtnClickHook = undefined;
this.widthBlurHook = undefined;
this.heightBlurHook = undefined;
this.onImageWidthHook = undefined;
this.onImageHeightHook = undefined;
this.widthNumericBlurHook = undefined;
this.heightNumericBlurHook = undefined;
this.altTextAreaBlurHook = undefined;
};
return ImageProperties;
}());
exports.ImageProperties = ImageProperties;
});
|