myrta-ui 17.0.20 → 17.0.21

package/src/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.html

@@ -1,30 +0,0 @@
-<mrx-modal
-  [title]="title"
-  (close)="close()"
-  size="small"
-  color="negative">
-
-  <div class="row">
-    <div class="col">
-      <p class="text-center">{{message}}</p>
-    </div>
-  </div>
-
-  <ng-template #footerContent>
-    <mrx-button
-      [customClasses]="'mr-3'"
-      [type]="'secondary'"
-      [size]="'medium'"
-      color="negative"
-      (click)="close()"
-    >Отменить
-    </mrx-button>
-    <mrx-button
-      [type]="'primary'"
-      [size]="'medium'"
-      color="negative"
-      (click)="ok()"
-    >Удалить
-    </mrx-button>
-  </ng-template>
-</mrx-modal>

package/src/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.ts

@@ -1,43 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ModalRef } from '../../../../services/modal-service/helpers/modal-ref';
-import { MODAL_DATA } from '../../../../services/modal-service/helpers/modal-tokens';
-import { ModalServiceComponent } from '../../../../services/modal-service/helpers/modal.component';
-
-export interface GalleryConfirmParams {
-  title: string;
-  message: string;
-}
-
-export interface GalleryConfirmResult {
-  result: boolean;
-}
-
-@Component({
-  selector: 'app-gallery-confirm-modal',
-  templateUrl: './gallery-confirm-modal.component.html',
-})
-export class GalleryConfirmModalComponent extends ModalServiceComponent<GalleryConfirmParams, GalleryConfirmResult> {
-
-  title!: string;
-  message!: string;
-
-  constructor(
-    private dialogRef: ModalRef<GalleryConfirmResult>,
-    @Inject(MODAL_DATA) data: GalleryConfirmParams,
-  ) {
-    super();
-    this.result = {result: false};
-    this.title = data.title
-    this.message = data.message
-  }
-
-  ok() {
-    this.result = {result: true};
-    this.dialogRef.close(this.result);
-  }
-
-  close() {
-    this.result = {result: false};
-    this.dialogRef.close(this.result);
-  }
-}

package/src/lib/components/gallery/components/gallery-item/gallery-item.component.html

@@ -1,58 +0,0 @@
-<div class="mrx-gallery-item">
-  <div class="mrx-gallery-item__preview" (click)="onOpenGalleryModal()">
-
-    <img [src]="getImageUrl()" [alt]="preview.imageName || 'image'" *ngIf="!isLoadingImage; else skeletonTemplate">
-
-    <ng-template #skeletonTemplate>
-      <div class="d-flex align-items-center justify-content-center w-100 h-100">
-        <mrx-loader size="medium" color="brand"></mrx-loader>
-      </div>
-    </ng-template>
-
-    <div class="mrx-gallery-item__preview-overlay" *ngIf="!isLoadingImage"></div>
-
-    <div class="mrx-gallery-item__preview-controls" *ngIf="!isLoadingImage">
-      <a class="mrx-gallery-item__preview-controls--icon" [href]="yandexCheckUrl" target="_blank" (click)="$event.stopPropagation()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <g clip-path="url(#clip0_12346_12076)">
-            <path d="M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z" fill="white"/>
-            <path d="M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z" fill="#FC3F1D"/>
-          </g>
-          <defs>
-            <clipPath id="clip0_12346_12076">
-              <rect width="16" height="16" fill="white"/>
-            </clipPath>
-          </defs>
-        </svg>
-      </a>
-
-      <a class="mrx-gallery-item__preview-controls--icon" [href]="googleCheckUrl" target="_blank" (click)="$event.stopPropagation()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path d="M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z" fill="#FBC02D"/>
-          <path d="M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z" fill="#E53935"/>
-          <path d="M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z" fill="#4CAF50"/>
-          <path d="M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z" fill="#1565C0"/>
-        </svg>
-      </a>
-
-      <div class="mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center" *ngIf="isEditing" (click)="$event.stopPropagation()">
-        <span class="mrx-icon icon-delete icon-font-16 text-bold" (click)="deleteImage()"></span>
-      </div>
-    </div>
-  </div>
-  <div class="mrx-gallery-item__description">
-    <mrx-input-textarea
-      *ngIf="isEditing; else textTemplate"
-      [fields]="(fields$ | async)!"
-      [ngModel]="preview.description"
-      [autosize]="false"
-      [rows]="2"
-      [maxlength]="descriptionMaxLength"
-      (modelChange)="changeDescription($event)"
-    ></mrx-input-textarea>
-
-    <ng-template #textTemplate>
-      {{ preview.description }}
-    </ng-template>
-  </div>
-</div>

package/src/lib/components/gallery/components/gallery-item/gallery-item.component.less

@@ -1,85 +0,0 @@
-.mrx-gallery-item {
-  cursor: pointer;
-
-  .text-truncate(@count, @height) {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: @count;
-    -webkit-box-orient: vertical;
-    max-height: @height * @count;
-  }
-
-  &__preview {
-    width: 100%;
-    height: 180px;
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-    margin-bottom: 8px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center top;
-    }
-
-    &-overlay {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 78.93%, rgba(0, 0, 0, 0.35) 91.52%)
-    }
-
-    &-controls {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 2;
-      padding: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 8px;
-
-      &--text {
-        font-family: var(--body-sm-font-family);
-        font-size: var(--body-sm-font-size);
-        font-weight: var(--body-sm-font-weight);
-        line-height: var(--body-sm-line-height);
-        color: var(--neutral-text-inverse);
-        opacity: 0.8;
-      }
-
-      &--icon {
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: white;
-        border-radius: 50%;
-      }
-
-      &__button {
-        padding: 4px;
-        border-radius: 4px;
-        background: var(--system-white, #FFF);
-      }
-    }
-  }
-
-  &__description {
-    font-family: var(--body-md-font-family);
-    font-size: var(--body-md-font-size);
-    font-weight: var(--body-md-font-weight);
-    line-height: var(--body-md-line-height);
-    color: var(--neutral-text-primary);
-
-    //.text-truncate(2, 20px)
-  }
-}

package/src/lib/components/gallery/components/gallery-item/gallery-item.component.ts

@@ -1,106 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { GalleryItemModel, GalleryRotateSlides } from '../../models/gallery-item.model';
-import { GalleryService } from '../../services/gallery.service';
-import { GalleryConfirmModalComponent } from '../gallery-confirm-modal/gallery-confirm-modal.component';
-import {
-  autosaveAddId, autosaveErrorFor,
-  autosaveStartFor,
-  autosaveSuccessFor,
-  Field,
-  MrxAutosaveService,
-  selectFields
-} from '../../../../services';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import { ModalService } from '../../../../services/modal-service/modal-service.service';
-
-@Component({
-  selector: 'mrx-gallery-item',
-  templateUrl: './gallery-item.component.html',
-  styleUrls: ['./gallery-item.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [MrxAutosaveService]
-})
-export class GalleryItemComponent {
-  private timeStamp: number = (new Date()).getTime();
-  private isLoading = false;
-  private _timer!: ReturnType<typeof setTimeout>;
-
-  public fields$!: Observable<Field[]>;
-
-  @Input() preview!: GalleryItemModel;
-  @Input() index!: number;
-  @Input() isEditing = false;
-  @Input() descriptionMaxLength = 0;
-  @Input() deleteEndPoint!: string;
-  @Input() updateEndPoint!: string;
-  @Input() rotateSlides: GalleryRotateSlides[] = [];
-
-  @Input('isLoading') set setIsLoading(value: boolean) {
-    this.isLoading = value;
-    this.timeStamp = (new Date()).getTime();
-  }
-
-  @Output() openGalleryModal: EventEmitter<number> = new EventEmitter<number>();
-  @Output() deletePhoto: EventEmitter<any> = new EventEmitter<any>();
-  @Output() updatePhoto: EventEmitter<any> = new EventEmitter<any>();
-
-  constructor(
-    private _galleryService: GalleryService,
-    private _modalService: ModalService,
-    private _store: Store
-  ) {
-    this.fields$ = this._store.select(selectFields);
-  }
-
-  getImageUrl(): string {
-    return this.preview.previewUrl + '?' + this.timeStamp;
-  }
-
-  get yandexCheckUrl() {
-    return `https://yandex.ru/images/search?source=collections&rpt=imageview&url=${this.preview.url}`;
-  }
-
-  get googleCheckUrl() {
-    return `https://lens.google.com/uploadbyurl?url=${this.preview.url}`;
-  }
-
-  get isLoadingImage(): boolean {
-    return this.isLoading && !!this.rotateSlides.find((s) => s.previewImageId === this.preview.previewImageId);
-  }
-
-  onOpenGalleryModal() {
-    this.openGalleryModal.emit(this.index);
-  }
-
-  deleteImage() {
-    this._modalService.open(GalleryConfirmModalComponent, {
-      title: 'УДАЛЕНИЕ ДАННЫХ',
-      message: 'Вы уверены, что хотите удалить файл?'
-    })
-      .afterClosed()
-      .subscribe((res) => {
-        if (res.result) {
-          this._galleryService.delete(this.deleteEndPoint, this.preview.uuid).subscribe(res => {
-            this.deletePhoto.emit(res);
-          });
-        }
-      });
-  }
-
-  changeDescription(obj: any) {
-    clearTimeout(this._timer);
-
-    this._store.dispatch(autosaveAddId({id: obj.id}));
-    this._store.dispatch(autosaveStartFor({id: obj.id}));
-
-    this._timer = setTimeout(() => {
-      this._galleryService.update(this.updateEndPoint, this.preview.uuid, obj.value).subscribe(res => {
-        this.updatePhoto.emit(res);
-        this._store.dispatch(autosaveSuccessFor({id: obj.id}));
-      }, () => {
-        this._store.dispatch(autosaveErrorFor({id: obj.id}));
-      });
-    }, 1500);
-  }
-}

package/src/lib/components/gallery/constants/custom-buttons-default.ts

@@ -1,15 +0,0 @@
-import {
-  ToolbarItemKey,
-  ToolbarItemsType,
-  ToolbarPosition
-} from 'mrx-gallery-lib/types/Fancybox/plugins/Toolbar/Toolbar';
-
-export const customButtonsDefault: ToolbarItemsType = {
-
-};
-
-export const customToolbarDefault: Record<ToolbarPosition, Array<ToolbarItemKey>> = {
-  left: ['infobar'],
-  middle: [],
-  right: ['rotateLeft', 'rotateRight', 'iterateZoom', 'slideshow', 'thumbs', 'close'],
-}

package/src/lib/components/gallery/constants/thumbs-config-default.ts

@@ -1,6 +0,0 @@
-import { ThumbsOptionsType } from 'mrx-gallery-lib';
-
-export const thumbsConfigDefault: Boolean | Partial<ThumbsOptionsType> = {
-  type: 'modern',
-  showOnStart: false,
-}

package/src/lib/components/gallery/gallery.component.html

@@ -1,32 +0,0 @@
-<div class="mrx-gallery" [class]="getClasses">
-  <div class="mrx-gallery-row row">
-    <div *ngFor="let preview of getData; trackBy: trackByFn; let index = index" class="col col-12 col-sm-6 col-md-3">
-      <mrx-gallery-item
-        [preview]="preview"
-        [index]="index"
-        [isEditing]="isEditing"
-        [descriptionMaxLength]="descriptionMaxLength"
-        [rotateSlides]="rotateSlides"
-        [isLoading]="isLoading"
-        [deleteEndPoint]="deleteEndPoint"
-        [updateEndPoint]="updateEndPoint"
-        (openGalleryModal)="openGalleryModal($event)"
-        (deletePhoto)="deletePhoto.emit($event)"
-        (updatePhoto)="updatePhoto.emit($event)"
-      ></mrx-gallery-item>
-    </div>
-  </div>
-
-  <div class="row mt-3" *ngIf="isShowMore">
-    <div class="col d-flex justify-content-center">
-      <mrx-button type="tertiary" (mrxClick)="changeExpanded()">
-        {{ getIsExpanded ? 'Скрыть' : 'Показать все фотографии' }}
-        <span
-          class="mrx-icon icon-font-16 ml-2"
-          [class.icon-chevron-down]="!getIsExpanded"
-          [class.icon-chevron-up]="getIsExpanded"
-        ></span>
-      </mrx-button>
-    </div>
-  </div>
-</div>

package/src/lib/components/gallery/gallery.component.less

@@ -1,14 +0,0 @@
-::ng-deep {
-  @import './assets/fancybox';
-
-  .fancybox__slide.has-image>.fancybox__content {
-    //width: 100% !important;
-    //height: 100% !important;
-  }
-}
-
-.mrx-gallery {
-  &-row {
-    row-gap: 16px;
-  }
-}

package/src/lib/components/gallery/gallery.component.ts

@@ -1,202 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output
-} from '@angular/core';
-import { Fancybox, ThumbsOptionsType, ToolbarOptionsType } from 'mrx-gallery-lib';
-import { GalleryInnerItemModal, GalleryItemModel, GalleryRotateSlides } from './models/gallery-item.model';
-import { customToolbarDefault } from './constants/custom-buttons-default';
-import { OptionsType } from 'mrx-gallery-lib/types/Fancybox/options';
-import { thumbsConfigDefault } from './constants/thumbs-config-default';
-import { GalleryService } from './services/gallery.service';
-
-@Component({
-  selector: 'mrx-gallery',
-  templateUrl: './gallery.component.html',
-  styleUrls: ['./gallery.component.less'],
-})
-export class GalleryComponent implements OnInit {
-  private timeStamp: number = (new Date()).getTime();
-  public rotateSlides: GalleryRotateSlides[] = [];
-  public isLoading = false
-
-  private isExpanded = false;
-
-  @Input() data: GalleryItemModel[] = []
-  @Input() isExpandable = true;
-  @Input() customClasses = '';
-  @Input() rotateEndPoint!: string;
-  @Input() deleteEndPoint!: string;
-  @Input() updateEndPoint!: string;
-  @Input() isEditing = false;
-  @Input() isSaveRotate = true;
-  @Input() descriptionMaxLength = 0;
-  @Input() thumbsConfig!: Boolean | Partial<ThumbsOptionsType>;
-  @Input() toolbarConfig!: Boolean | Partial<ToolbarOptionsType>;
-
-  @Output() deletePhoto: EventEmitter<any> = new EventEmitter<any>();
-  @Output() updatePhoto: EventEmitter<any> = new EventEmitter<any>();
-
-  private defaultConfig: Partial<OptionsType> = {};
-
-  constructor(
-    private galleryService: GalleryService,
-  ) {
-  }
-
-  ngOnInit(): void {
-    if (this.isExpandable) {
-      this.isExpanded = false;
-    }
-
-    if (this.thumbsConfig) {
-      this.defaultConfig.Thumbs = this.thumbsConfig;
-    }
-
-    if (this.toolbarConfig) {
-      this.defaultConfig.Toolbar = this.toolbarConfig;
-    }
-  }
-
-  public get getClasses(): string {
-    return `${this.customClasses}`;
-  }
-
-  public get isShowMore(): boolean {
-    return this.data.length > 8
-  }
-
-  public get getData(): GalleryItemModel[] {
-    if (this.isExpandable && !this.isExpanded) {
-      return this.data.slice(0, 8);
-    } else {
-      return this.data;
-    }
-  }
-
-  private get getSlides(): GalleryInnerItemModal[] {
-    return this.data.map((slide) => {
-      return {
-        src: slide.url + '?' + this.timeStamp,
-        thumb: slide.previewUrl,
-        caption: slide.description,
-        uuid: slide.uuid,
-        imageName: slide.imageName,
-        previewImageId: slide.previewImageId
-      };
-    });
-  }
-
-  public get getIsExpanded(): boolean {
-    return this.isExpanded;
-  }
-
-  public changeExpanded(): void {
-    this.isExpanded = !this.isExpanded;
-  }
-
-  public trackByFn(index: number, item: any) {
-    return item.id;
-  }
-
-  public openGalleryModal(id: number): void {
-    new Fancybox(
-      this.getSlides,
-      {
-        startIndex: id,
-        compact: false,
-        hideScrollbar: false,
-        Carousel: {},
-        Thumbs: thumbsConfigDefault,
-        on: {
-          close: (fancy: any, event: any) => {
-            if (this.rotateSlides.length) {
-              this.galleryService.rotate(this.rotateSlides, this.rotateEndPoint).subscribe(res => {
-                this.isLoading = true
-
-                setTimeout(() => {
-                  this.isLoading = false
-                  this.rotateSlides.length = 0
-                  this.timeStamp = (new Date()).getTime();
-                }, 1000)
-              })
-            }
-          }
-        },
-        Toolbar: {
-          items: {
-            rotateLeft: {
-              tpl: `
-            <button title="Rotate counterclockwise" class="f-button">
-              <svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path d="M15 4.55a8 8 0 0 0-6 14.9M9 15v5H4M18.37 7.16v.01M13 19.94v.01M16.84 18.37v.01M19.37 15.1v.01M19.94 11v.01">
-                </path>
-              </svg>
-            </button>
-          `,
-              click: (a: any) => {
-                const slide = a.instance.getSlide();
-                if (!slide) return;
-
-                const foundRotateSlide = this.rotateSlides.find((s) => s.previewImageId === slide.previewImageId);
-
-                if (foundRotateSlide) {
-                  this.rotateSlides = this.rotateSlides.map((s) => {
-                    if (s.previewImageId === foundRotateSlide.previewImageId) {
-                      s.rotate = s.rotate === -270 ? 0 : s.rotate - 90;
-                    }
-                    return s;
-                  }).filter((s) => s.rotate !== 0);
-                } else {
-                  this.rotateSlides.push({
-                    previewImageId: slide.previewImageId,
-                    rotate: -90
-                  });
-                }
-
-                slide.panzoom?.rotateCCW()
-              }
-            },
-            rotateRight: {
-              tpl: `
-            <button title="Rotate clockwise" class="f-button">
-              <svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path d="M9 4.55a8 8 0 0 1 6 14.9M15 15v5h5M5.63 7.16v.01M4.06 11v.01M4.63 15.1v.01M7.16 18.37v.01M11 19.94v.01">
-                </path>
-              </svg>
-            </button>
-          `,
-              click: (a: any) => {
-                const slide = a.instance.getSlide();
-                if (!slide) return;
-
-                const foundRotateSlide = this.rotateSlides.find((s) => s.previewImageId === slide.previewImageId);
-
-                if (foundRotateSlide) {
-                  this.rotateSlides = this.rotateSlides.map((s) => {
-                    if (s.previewImageId === foundRotateSlide.previewImageId) {
-                      s.rotate = s.rotate === 270 ? 0 : s.rotate + 90;
-                    }
-                    return s;
-                  }).filter((s) => s.rotate !== 0);
-                } else {
-                  this.rotateSlides.push({
-                    previewImageId: slide.previewImageId,
-                    rotate: 90
-                  });
-                }
-
-                slide.panzoom?.rotateCW()
-              }
-            }
-          },
-          display: customToolbarDefault,
-        },
-        ...this.defaultConfig
-      },
-      {}
-    );
-  }
-}

package/src/lib/components/gallery/gallery.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { GalleryComponent } from './gallery.component';
-import { GalleryItemComponent } from './components/gallery-item/gallery-item.component';
-import { ButtonModule } from '../button/button.module';
-import { InputTextareaModule } from '../form/input-textarea/input-textarea.module';
-import { LoaderModule } from '../loader/loader.module';
-import { ModalModule } from '../modal/modal.module';
-import { GalleryConfirmModalComponent } from './components/gallery-confirm-modal/gallery-confirm-modal.component';
-import { SaveStoreModule } from "../../services";
-
-@NgModule({
-  declarations: [
-    GalleryComponent,
-    GalleryItemComponent,
-    GalleryConfirmModalComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ButtonModule,
-    InputTextareaModule,
-    LoaderModule,
-    ModalModule,
-    SaveStoreModule
-  ],
-  exports: [
-    GalleryComponent
-  ]
-})
-export class GalleryModule { }

package/src/lib/components/gallery/helpers/rotate-image.ts

@@ -1,33 +0,0 @@
-import { GalleryInnerItemModal } from '../models/gallery-item.model';
-
-// @ts-ignore
-export const rotateBase64Image = (base64Image: string, isClockwise: boolean, slide?: GalleryInnerItemModal): string => {
-  const offScreenCanvas = document.createElement('canvas');
-  const offScreenCanvasCtx = offScreenCanvas.getContext('2d');
-
-  if (!offScreenCanvasCtx) return ''
-
-  const img = new Image();
-  img.src = base64Image;
-  img.onload = () => {
-    if (slide && slide.imageEl) {
-      offScreenCanvas.height = slide.imageEl.width;
-      offScreenCanvas.width = slide.imageEl.height;
-    } else {
-      offScreenCanvas.height = img.width;
-      offScreenCanvas.width = img.height;
-    }
-
-    // rotate and draw source image into the off-screen canvas:
-    if (isClockwise) {
-      offScreenCanvasCtx.rotate(90 * Math.PI / 180);
-      offScreenCanvasCtx.translate(0, -offScreenCanvas.width);
-    } else {
-      offScreenCanvasCtx.rotate(-90 * Math.PI / 180);
-      offScreenCanvasCtx.translate(-offScreenCanvas.height, 0);
-    }
-    offScreenCanvasCtx.drawImage(img, 0, 0);
-
-    return offScreenCanvas.toDataURL();
-  }
-}