croco-html 2.16.0 → 2.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/editor/external-video-block/youtube-video-player/youtube-video-player.component.mjs +3 -3
- package/esm2022/lib/components/editor/image-editor/image-editor.component.mjs +10 -8
- package/esm2022/lib/components/file-id-select/file-id-select.component.mjs +3 -3
- package/esm2022/lib/components/xml-tags/file-image-tag-view/file-image-tag-view.component.mjs +30 -8
- package/esm2022/lib/extensions/BodyTagsExtensions.mjs +7 -5
- package/esm2022/lib/extensions/ImageMethods.mjs +4 -1
- package/fesm2022/croco-html.mjs +70 -45
- package/fesm2022/croco-html.mjs.map +1 -1
- package/lib/components/editor/image-editor/image-editor.component.d.ts +2 -1
- package/lib/components/xml-tags/file-image-tag-view/file-image-tag-view.component.d.ts +11 -3
- package/lib/index.d.ts +3 -3
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -14,6 +14,8 @@ import * as i27 from '@angular/material/icon';
|
|
|
14
14
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
15
15
|
import * as i1$2 from '@angular/material/card';
|
|
16
16
|
import { MatCardModule, MatCard, MatCardContent } from '@angular/material/card';
|
|
17
|
+
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
|
|
18
|
+
import { NgStyle, CommonModule } from '@angular/common';
|
|
17
19
|
import * as i2$1 from '@angular/material/input';
|
|
18
20
|
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
19
21
|
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
|
@@ -23,10 +25,8 @@ import * as i29 from '@angular/material/button-toggle';
|
|
|
23
25
|
import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
24
26
|
import * as i28 from '@angular/cdk/drag-drop';
|
|
25
27
|
import { CdkDragHandle, moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
|
|
26
|
-
import { NgStyle, CommonModule } from '@angular/common';
|
|
27
28
|
import * as i22 from '@angular/material/slide-toggle';
|
|
28
29
|
import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
29
|
-
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
|
|
30
30
|
import * as i24 from '@angular/material/core';
|
|
31
31
|
import { MatOption, MatNativeDateModule } from '@angular/material/core';
|
|
32
32
|
import * as i11 from '@angular/material/select';
|
|
@@ -169,6 +169,9 @@ class ImageMethods {
|
|
|
169
169
|
};
|
|
170
170
|
}
|
|
171
171
|
static { this.mediaRequestStringToArrayParser = (data) => {
|
|
172
|
+
if (!data) {
|
|
173
|
+
return [];
|
|
174
|
+
}
|
|
172
175
|
if (!data.length) {
|
|
173
176
|
return [];
|
|
174
177
|
}
|
|
@@ -672,11 +675,13 @@ class BodyTagsExtensions {
|
|
|
672
675
|
static imageTagToHtml(imageTag) {
|
|
673
676
|
let fileIdAttr = "";
|
|
674
677
|
let screenMediaRequestAttr = "";
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
+
if (imageTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && imageTag.attributes[FileImageTagDataConsts.FileIdAttrName]) {
|
|
679
|
+
fileIdAttr = `${FileImageTagDataConsts.FileIdAttrName}="${imageTag.attributes[FileImageTagDataConsts.FileIdAttrName]}"`;
|
|
680
|
+
}
|
|
681
|
+
if (imageTag.attributes.hasOwnProperty(FileImageTagDataConsts.ScreenMediaRequest) && imageTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]) {
|
|
682
|
+
screenMediaRequestAttr = `${FileImageTagDataConsts.ScreenMediaRequest}="${imageTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]}"`;
|
|
678
683
|
}
|
|
679
|
-
return `<${FileImageTagDataConsts.TagName} ${fileIdAttr} ${
|
|
684
|
+
return `<${FileImageTagDataConsts.TagName} ${fileIdAttr} ${screenMediaRequestAttr}></${FileImageTagDataConsts.TagName}>`;
|
|
680
685
|
}
|
|
681
686
|
static getBodyTags(html, options) {
|
|
682
687
|
let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html, options);
|
|
@@ -949,11 +954,11 @@ class YoutubeVideoPlayerComponent {
|
|
|
949
954
|
this.sanitizer = sanitizer;
|
|
950
955
|
}
|
|
951
956
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
952
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n <iframe\n width=\"100%\"\n height=\"100%\"\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer
|
|
957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n <iframe\n width=\"100%\"\n height=\"100%\"\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
|
|
953
958
|
}
|
|
954
959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, decorators: [{
|
|
955
960
|
type: Component,
|
|
956
|
-
args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n <iframe\n width=\"100%\"\n height=\"100%\"\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer
|
|
961
|
+
args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n <iframe\n width=\"100%\"\n height=\"100%\"\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
|
|
957
962
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
|
|
958
963
|
type: Input
|
|
959
964
|
}] } });
|
|
@@ -1200,21 +1205,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1200
1205
|
args: [{ required: true }]
|
|
1201
1206
|
}] } });
|
|
1202
1207
|
|
|
1203
|
-
class
|
|
1208
|
+
class ScreenWidthService {
|
|
1204
1209
|
constructor() {
|
|
1210
|
+
this.screenWidth = new BehaviorSubject(window.innerWidth);
|
|
1211
|
+
window.addEventListener('resize', this.onResize.bind(this));
|
|
1212
|
+
}
|
|
1213
|
+
onResize(event) {
|
|
1214
|
+
this.screenWidth.next(window.innerWidth);
|
|
1215
|
+
}
|
|
1216
|
+
getScreenWidth() {
|
|
1217
|
+
return this.screenWidth.asObservable();
|
|
1218
|
+
}
|
|
1219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1220
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, providedIn: 'root' }); }
|
|
1221
|
+
}
|
|
1222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, decorators: [{
|
|
1223
|
+
type: Injectable,
|
|
1224
|
+
args: [{
|
|
1225
|
+
providedIn: 'root'
|
|
1226
|
+
}]
|
|
1227
|
+
}], ctorParameters: () => [] });
|
|
1228
|
+
|
|
1229
|
+
class FileImageTagViewComponent {
|
|
1230
|
+
set item(item) {
|
|
1231
|
+
let data = item.data;
|
|
1232
|
+
this.imageSrc = data.src;
|
|
1233
|
+
this.requests = ImageMethods.mediaRequestStringToArrayParser(data.screenMediaRequest);
|
|
1234
|
+
}
|
|
1235
|
+
constructor(screenWidthService) {
|
|
1236
|
+
this.screenWidthService = screenWidthService;
|
|
1205
1237
|
this.imageSrc = "";
|
|
1238
|
+
this.requests = [];
|
|
1239
|
+
this.unsubscribe = new Subject();
|
|
1240
|
+
this.imageMaxHeight = null;
|
|
1206
1241
|
}
|
|
1207
1242
|
ngOnInit() {
|
|
1208
|
-
|
|
1209
|
-
|
|
1243
|
+
this.screenWidthService.getScreenWidth()
|
|
1244
|
+
.pipe(takeUntil(this.unsubscribe))
|
|
1245
|
+
.subscribe(screenWidth => {
|
|
1246
|
+
this.imageMaxHeight = ImageMethods.screenSizeChanged(screenWidth, this.requests);
|
|
1247
|
+
});
|
|
1210
1248
|
}
|
|
1211
|
-
|
|
1212
|
-
|
|
1249
|
+
ngOnDestroy() {
|
|
1250
|
+
this.unsubscribe.next();
|
|
1251
|
+
this.unsubscribe.complete();
|
|
1252
|
+
}
|
|
1253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, deps: [{ token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "<img\n [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%'}\"\n class=\"mx-auto d-block img-fluid\"\n [src]=\"imageSrc\"\n alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1213
1255
|
}
|
|
1214
1256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
|
|
1215
1257
|
type: Component,
|
|
1216
|
-
args: [{ selector: 'croco-html-file-image-tag-view',
|
|
1217
|
-
|
|
1258
|
+
args: [{ selector: 'croco-html-file-image-tag-view', imports: [
|
|
1259
|
+
NgStyle
|
|
1260
|
+
], standalone: true, template: "<img\n [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%'}\"\n class=\"mx-auto d-block img-fluid\"\n [src]=\"imageSrc\"\n alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n" }]
|
|
1261
|
+
}], ctorParameters: () => [{ type: ScreenWidthService }], propDecorators: { item: [{
|
|
1218
1262
|
type: Input
|
|
1219
1263
|
}] } });
|
|
1220
1264
|
|
|
@@ -1402,11 +1446,11 @@ class FileIdSelectComponent {
|
|
|
1402
1446
|
this.loadFiles();
|
|
1403
1447
|
}
|
|
1404
1448
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: FilesQueryService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\n <div class=\"form-group\">\n <label for=\"fileName\">{{labelText}}</label>\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"
|
|
1449
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\n <div class=\"form-group\">\n <label for=\"fileName\">{{labelText}}</label>\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n dropdownPosition=\"auto\" bindValue=\"fileId\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n [virtualScroll]=\"true\">\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <div>\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n </div>\n <div>\n <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n </div>\n <div>\n <small>\n <span>\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\n </span>\n </small>\n </div>\n </ng-template>\n </ng-select>\n </div>\n</div>\n\n<div>\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1406
1450
|
}
|
|
1407
1451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, decorators: [{
|
|
1408
1452
|
type: Component,
|
|
1409
|
-
args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div>\n <div class=\"form-group\">\n <label for=\"fileName\">{{labelText}}</label>\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"
|
|
1453
|
+
args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div>\n <div class=\"form-group\">\n <label for=\"fileName\">{{labelText}}</label>\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n dropdownPosition=\"auto\" bindValue=\"fileId\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n [virtualScroll]=\"true\">\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <div>\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n </div>\n <div>\n <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n </div>\n <div>\n <small>\n <span>\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\n </span>\n </small>\n </div>\n </ng-template>\n </ng-select>\n </div>\n</div>\n\n<div>\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>" }]
|
|
1410
1454
|
}], ctorParameters: () => [{ type: FilesQueryService }, { type: undefined, decorators: [{
|
|
1411
1455
|
type: Inject,
|
|
1412
1456
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -1420,33 +1464,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1420
1464
|
type: Output
|
|
1421
1465
|
}] } });
|
|
1422
1466
|
|
|
1423
|
-
class ScreenWidthService {
|
|
1424
|
-
constructor() {
|
|
1425
|
-
this.screenWidth = new BehaviorSubject(window.innerWidth);
|
|
1426
|
-
window.addEventListener('resize', this.onResize.bind(this));
|
|
1427
|
-
}
|
|
1428
|
-
onResize(event) {
|
|
1429
|
-
this.screenWidth.next(window.innerWidth);
|
|
1430
|
-
}
|
|
1431
|
-
getScreenWidth() {
|
|
1432
|
-
return this.screenWidth.asObservable();
|
|
1433
|
-
}
|
|
1434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1435
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, providedIn: 'root' }); }
|
|
1436
|
-
}
|
|
1437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScreenWidthService, decorators: [{
|
|
1438
|
-
type: Injectable,
|
|
1439
|
-
args: [{
|
|
1440
|
-
providedIn: 'root'
|
|
1441
|
-
}]
|
|
1442
|
-
}], ctorParameters: () => [] });
|
|
1443
|
-
|
|
1444
1467
|
class ImageEditorComponent {
|
|
1445
1468
|
onErrorHandler() {
|
|
1446
1469
|
this.hasImageError = true;
|
|
1447
1470
|
}
|
|
1448
|
-
constructor(_options,
|
|
1471
|
+
constructor(_options, screenWidthService) {
|
|
1449
1472
|
this._options = _options;
|
|
1473
|
+
this.screenWidthService = screenWidthService;
|
|
1450
1474
|
this.hasImageError = false;
|
|
1451
1475
|
this.searchOrEdit = "search";
|
|
1452
1476
|
this.requests = [];
|
|
@@ -1454,11 +1478,6 @@ class ImageEditorComponent {
|
|
|
1454
1478
|
this.isShowMediaRequest = false;
|
|
1455
1479
|
this.unsubscribe = new Subject();
|
|
1456
1480
|
this.onTagUpdated = new EventEmitter();
|
|
1457
|
-
screenWidth.getScreenWidth()
|
|
1458
|
-
.pipe(takeUntil(this.unsubscribe))
|
|
1459
|
-
.subscribe(screenWidth => {
|
|
1460
|
-
this.imageMaxHeight = ImageMethods.screenSizeChanged(screenWidth, this.requests);
|
|
1461
|
-
});
|
|
1462
1481
|
}
|
|
1463
1482
|
getSrc() {
|
|
1464
1483
|
return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName], "Medium", this._options);
|
|
@@ -1474,7 +1493,13 @@ class ImageEditorComponent {
|
|
|
1474
1493
|
this.hasImageError = false;
|
|
1475
1494
|
}
|
|
1476
1495
|
ngOnInit() {
|
|
1477
|
-
|
|
1496
|
+
let attr = this.tag.attributes[FileImageTagDataConsts.ScreenMediaRequest];
|
|
1497
|
+
this.requests = ImageMethods.mediaRequestStringToArrayParser(attr);
|
|
1498
|
+
this.screenWidthService.getScreenWidth()
|
|
1499
|
+
.pipe(takeUntil(this.unsubscribe))
|
|
1500
|
+
.subscribe(screenWidth => {
|
|
1501
|
+
this.imageMaxHeight = ImageMethods.screenSizeChanged(screenWidth, this.requests);
|
|
1502
|
+
});
|
|
1478
1503
|
}
|
|
1479
1504
|
requestChanged() {
|
|
1480
1505
|
this.tag.attributes[FileImageTagDataConsts.ScreenMediaRequest] = ImageMethods.mediaRequestsArrayToStringParser(this.requests);
|