croco-html 0.1.1 → 0.1.2

package/src/lib/components/editor/main-editor-block/main-editor-block.component.html

@@ -1,41 +0,0 @@
-<div>
-  <div>
-    <div *ngIf="textTags.includes(tag.tagDescription.tag)">
-      <croco-html-text-editor (onTagUpdated)="tagUpdatedHandler($event)" [tag]="tag">
-      </croco-html-text-editor>
-    </div>
-
-    <div *ngIf="tag.tagDescription.tag === 'file-image'"> 
-      <croco-html-image-editor (onTagUpdated)="tagUpdatedHandler($event)" [tag]="tag">
-      </croco-html-image-editor>
-    </div>
-
-    <div *ngIf="tag.tagDescription.tag === 'external-video'">
-      <croco-html-external-video-block (onTagUpdated)="tagUpdatedHandler($event)" [tag]="tag">
-      </croco-html-external-video-block>
-    </div>
-
-    <div *ngIf="tag.tagDescription.tag === 'html-raw'">
-      <croco-html-html-raw-editor (onTagUpdated)="tagUpdatedHandler($event)" [tag]="tag">
-      </croco-html-html-raw-editor>
-    </div>
-
-  </div>
-
-  <div class="d-flex justify-content-between">
-    <div class="d-flex justify-content-end align-self-center">
-      <div>
-        <button *ngIf="tag.presentOrEdit" (click)="tag.presentOrEdit = false" mat-icon-button>
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button *ngIf="!tag.presentOrEdit" (click)="save()" mat-icon-button>
-          <mat-icon>save</mat-icon>
-        </button>
-        <button (click)="deleteItem()" mat-icon-button color="warn">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    </div>
-
-  </div>
-</div>

package/src/lib/components/editor/main-editor-block/main-editor-block.component.ts

@@ -1,39 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { TextMethods } from '../../../extensions/TextMethods';
-import { HtmlBodyTag } from '../../../models/models';
-
-@Component({
-  selector: 'croco-html-main-editor-block',
-  templateUrl: './main-editor-block.component.html',
-  styleUrls: ['./main-editor-block.component.css']
-})
-export class MainEditorBlockComponent implements OnInit {
-
-  textTags = TextMethods.textTags;
-
-  @Input()
-  tag:HtmlBodyTag;
-
-  @Output()
-  onTagSaved = new EventEmitter<HtmlBodyTag>();
-
-  @Output()
-  onTagRemoved = new EventEmitter<HtmlBodyTag>();
-
-  constructor() { }
-
-  tagUpdatedHandler(tag:HtmlBodyTag):void{
-  }
-
-  save(){
-    this.tag.presentOrEdit = true;
-    this.onTagSaved.emit(this.tag);
-  }
-
-  deleteItem(){
-    this.onTagRemoved.emit(this.tag);
-  }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/editor/text-editor/text-editor.component.html

@@ -1,39 +0,0 @@
-<div *ngIf="tag.presentOrEdit">
-    <div style="height: 10px;">
-    </div>
-
-    <div style="text-align: left;" *ngIf="tag.attributes['h-align'] === 'left'" [innerHtml]="getInnerHtml()">
-    </div>
-    <div style="text-align: right;" *ngIf="tag.attributes['h-align'] === 'right'" [innerHtml]="getInnerHtml()">
-    </div>
-    <div style="text-align: center;" *ngIf="tag.attributes['h-align'] === 'center'" [innerHtml]="getInnerHtml()">
-    </div>
-</div>
-
-<div *ngIf="!tag.presentOrEdit">
-    <div style="overflow-x: auto;">
-        <mat-button-toggle-group [(ngModel)]="tag.attributes['h-align']">
-            <mat-button-toggle value="center">
-                По центру <mat-icon>format_align_center</mat-icon>
-            </mat-button-toggle>
-            <mat-button-toggle value="left">
-                Слева <mat-icon>format_align_left</mat-icon>
-            </mat-button-toggle>
-            <mat-button-toggle value="right">
-                Справа <mat-icon> format_align_right</mat-icon>
-            </mat-button-toggle>
-        </mat-button-toggle-group>
-    </div>
-
-    <div style="height: 10px;">
-    </div>
-    <form [formGroup]="myForm">
-        <mat-form-field class="w-100">
-            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                placeholder="Внутренняя разметка текстового тега"
-                formControlName="innerHtml"
-                [(ngModel)]="tag.innerHtml"></textarea>
-        </mat-form-field>
-    </form>
-</div>

package/src/lib/components/editor/text-editor/text-editor.component.ts

@@ -1,30 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { HtmlBodyTag } from '../../../models/models';
-
-@Component({
-  selector: 'croco-html-text-editor',
-  templateUrl: './text-editor.component.html',
-  styleUrls: ['./text-editor.component.css']
-})
-export class TextEditorComponent implements OnInit {
-
-  myForm = new FormGroup({
-    "innerHtml": new FormControl()
-  });
-
-  @Input()
-  tag: HtmlBodyTag;
-
-  @Output()
-  onTagUpdated = new EventEmitter<HtmlBodyTag>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  getInnerHtml(){
-    return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
-  }
-}

package/src/lib/components/editor/visual-editor/visual-editor.component.css

@@ -1,48 +0,0 @@
-.example-list {
-    width: 500px;
-    max-width: 100%;
-    border: solid 1px #ccc;
-    min-height: 60px;
-    display: block;
-    background: white;
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.example-box {
-    padding: 20px 10px;
-    border-bottom: solid 1px #ccc;
-    color: rgba(0, 0, 0, 0.87);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    cursor: move;
-    background: white;
-    font-size: 14px;
-}
-
-.cdk-drag-preview {
-    box-sizing: border-box;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0 8px 10px 1px rgba(0, 0, 0, 0.14),
-        0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-    opacity: 0;
-}
-
-.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
-    border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/editor/visual-editor/visual-editor.component.html

@@ -1,84 +0,0 @@
-<div *ngIf="isLoading">
-    <div>
-        <mat-spinner style="margin:0 auto;"></mat-spinner>
-        <div style="text-align: center;">{{loadingText}}</div>
-    </div>
-    <div style="height: 10px;"></div>
-</div>
-
-<div [hidden]="isLoading">
-    <div cdkDropList (cdkDropListDropped)="drop($event)">
-        <div *ngFor="let tag of bodyTags; let i = index" cdkDrag>
-            <mat-card>
-                <div class="d-flex justify-content-between">
-                    <div class="example-handle" cdkDragHandle>
-                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
-                            <path
-                                d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
-                            </path>
-                            <path d="M0 0h24v24H0z" fill="none"></path>
-                        </svg>
-                    </div>
-                    <div>
-                        <mat-chip-list aria-label="Tag display value">
-                            <mat-chip color="primary" selected>{{tag.tagDescription.displayValue}}</mat-chip>
-                        </mat-chip-list>
-                    </div>
-                </div>
-    
-                <div style="height: 15px;"></div>
-    
-                <croco-html-main-editor-block [tag]="tag" 
-                    (onTagSaved)="onTagSavedHandler($event)"
-                    (onTagRemoved)="onTagRemovedHandler(i)">
-                </croco-html-main-editor-block>
-            </mat-card>
-    
-            <div style="height: 10px;">
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<div [hidden]="isLoading">
-    <mat-card>
-        <div class="row d-flex align-items-center">
-            <div class="col-12">
-                <mat-form-field class="w-100" appearance="fill">
-                    <mat-label>Выберите тег</mat-label>
-                    <mat-select [(ngModel)]="selectedValue">
-                        <mat-option *ngFor="let tag of tags" [value]="tag.tag">
-                            {{tag.displayValue}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </div>
-            <div class="col-12">
-                <button (click)="addTag()" class="w-100" mat-stroked-button>
-                    Добавить тег
-                </button>
-            </div>
-        </div>
-    </mat-card>
-
-    <div style="height: 10px;">
-    </div>
-</div>
-
-<div [hidden]="isLoading">
-    <mat-card>
-        <div class="row d-flex align-items-center">
-            <div class="col-12">
-                <croco-add-files-btn 
-                    (filesTagsReady)="filesTagsReadyHandler($event)"
-                    (postFilesStarted)="postFilesStartedEventHandler($event)"
-                    class="w-100">
-                </croco-add-files-btn>
-            </div>
-        </div>
-    </mat-card>
-
-    <div style="height: 10px;">
-    </div>
-</div>

package/src/lib/components/editor/visual-editor/visual-editor.component.ts

@@ -1,180 +0,0 @@
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
-import { BodyTagsExtensions } from '../../../extensions/BodyTagsExtensions';
-import { HtmlRawTagDataConsts } from '../../../extensions/HtmlRawTagDataConsts';
-import { FileImageTagDataConsts } from '../../../extensions/ImageMethods';
-import { TextMethods } from '../../../extensions/TextMethods';
-import { ExternalVideoTagDataConsts, ExternalVideoSupportedTypes } from '../../../extensions/VideoMethods';
-import { XmlExtensions } from '../../../extensions/XmlExtensions';
-import { TagItem, HtmlBodyTag } from '../../../models/models';
-import { FilePostingStarted } from '../../upload-files-btn/upload-files-btn.component';
-
-export class DefaultTags{
-  static tags:TagItem[] = [
-    { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
-    { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео Youtube' },
-    { tag: 'text', displayValue: 'Текст' },
-    { tag: 'h1', displayValue: 'Заголовок 1 уровня' },
-    { tag: 'h2', displayValue: 'Заголовок 2 уровня' },
-    { tag: 'h3', displayValue: 'Заголовок 3 уровня' },
-    { tag: 'h4', displayValue: 'Заголовок 4 уровня' },
-    { tag: 'h5', displayValue: 'Заголовок 5 уровня' },
-    { tag: 'h6', displayValue: 'Заголовок 6 уровня' },
-  ];
-
-  static htmlRawTag:TagItem = {
-    tag: HtmlRawTagDataConsts.TagName, displayValue: 'Html разметка'
-  }
-
-  static getTags(useHtmlRaw:boolean):TagItem[]{
-    var result = [...DefaultTags.tags];
-
-    if(useHtmlRaw){
-      result.push(DefaultTags.htmlRawTag);
-    }
-
-    return result;
-  }
-}
-
-@Component({
-  selector: 'croco-visual-editor',
-  templateUrl: './visual-editor.component.html',
-  styleUrls: ['./visual-editor.component.css']
-})
-export class VisualEditorComponent implements OnInit, AfterViewInit {
-
-  isLoading = false;
-  loadingText = "Идёт загрузка";
-
-  @Input()
-  showMarkUp = true;
-
-  myForm = new FormGroup({
-    "html": new FormControl(),
-  });
-
-  tags: TagItem[] = [];
-
-  selectedValue: string;
-
-  @Input()
-  useHtmlRaw = false;
-
-  @Input()
-  @Output()
-  html: string = "";
-
-  isHtmlSet(){
-    return this.html.startsWith("<body>");
-  }
-
-  clearHtml(){
-    this.html = "";
-    this.recalculateBodyTags();
-  }
-
-  getHtml(){
-    this.recalculateHtml();
-    return this.html;
-  }
-
-  @Output()
-  onHtmlChanged = new EventEmitter<string>();
-
-  @Output()
-  rendered = new EventEmitter<boolean>();
-
-  bodyTags: HtmlBodyTag[] = [];
-
-  constructor(
-    private _cdref: ChangeDetectorRef) { }
-
-  ngAfterViewInit(): void {
-    this.rendered.emit(true);
-  }
-
-  ngAfterContentChecked(): void {
-    this._cdref.detectChanges();
-  }
-
-  addTag(): void {
-    let tagDescription = this.tags
-      .find(x => x.tag === this.selectedValue);
-
-    let attrs = {};
-    let innerHtml = "";
-
-    if(TextMethods.textTags.includes(tagDescription.tag)){
-      attrs["h-align"] = "left";
-      innerHtml = "Введите ваш текст";
-    }
-    else if(tagDescription.tag == ExternalVideoTagDataConsts.TagName){
-      attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = ExternalVideoSupportedTypes.Youtube;
-      attrs[ExternalVideoTagDataConsts.LinkAttrName] = null;
-    }
-    else{
-      attrs[FileImageTagDataConsts.FileIdAttrName] = null;
-    }
-
-    this.bodyTags.push({
-      tagDescription,
-      innerHtml,
-      attributes: attrs,
-      presentOrEdit: true
-    });
-
-    this.recalculateHtml();
-  }
-
-  postFilesStartedEventHandler(model:FilePostingStarted){
-    this.loadingText = "Файлы загружаются на сервер";
-    this.isLoading = true;
-  }
-
-  addTagCustom(tag: HtmlBodyTag){
-    this.bodyTags.push(tag);
-    this.recalculateHtml();
-  }
-
-  filesTagsReadyHandler(tags: HtmlBodyTag[]){
-    for(let i = 0; i < tags.length; i++){
-      this.bodyTags.push(tags[i]);
-    }
-    this.recalculateHtml();
-
-    this.isLoading = false;
-  }
-
-  drop(event: CdkDragDrop<object[]>) {
-    moveItemInArray(this.bodyTags, event.previousIndex, event.currentIndex);
-    this.recalculateHtml();
-  }
-
-  onTagSavedHandler(tag: HtmlBodyTag){
-    this.recalculateHtml();
-  }
-
-  onTagRemovedHandler(index: number){
-    this.bodyTags.splice(index, 1);
-    this.recalculateHtml();
-  }
-
-  recalculateHtml(){
-    let result = BodyTagsExtensions.toHtml(this.bodyTags);
-    this.html = XmlExtensions.formatXml("<body>" + result + "</body>");
-    this.onHtmlChanged.emit(this.html);
-  }
-
-  recalculateBodyTags(){
-    this.bodyTags = BodyTagsExtensions.getBodyTags(this.html);
-  }
-
-  ngOnInit(): void {
-    this.recalculateBodyTags();
-
-    this.tags = DefaultTags.getTags(this.useHtmlRaw);
-    this.selectedValue = this.tags[0].tag;
-  }
-}

package/src/lib/components/file-id-select/file-id-select.component.html

@@ -1,39 +0,0 @@
-<form [formGroup]="form">
-    <div class="form-group">
-        <label for="fileName">{{labelText}}</label>
-        <ng-select [(ngModel)]="fileId" (ngModelChange)="onModelChanged($event)"
-                   [items]="files"
-                   #select
-                   bindLabel="fileName"
-                   (search)="onSearchChanged($event)"
-                   [loading]="loading"
-                   [loadingText]="'Загружаю файлы'"
-                   dropdownPosition="auto"
-                   bindValue="fileId"
-                   labelForId="fileName"
-                   placeholder="Выбрать файл"
-                   [virtualScroll]="true"
-                   formControlName="fileName">
-            <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-                <div>
-                    <img class="mx-auto d-block img-fluid" [src]="getSrc(item.fileId)"/>
-                </div>
-                <div>
-                    <span class="h5">Файл: </span>
-                    <span class="h5" [ngOptionHighlight]="search"><b>{{item.fileName}}</b></span>
-                </div>
-                <div>
-                    <small>
-                        <span>
-                            Идентификатор файла: <b>{{item.fileId}}</b>
-                        </span>
-                    </small>
-                </div>
-            </ng-template>
-        </ng-select>
-    </div>
-</form>
-
-<div>
-    Идентификатор файла: {{fileId}}
-</div>

package/src/lib/components/file-id-select/file-id-select.component.ts

@@ -1,75 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { ImageMethods } from '../../extensions/ImageMethods';
-import { FileNameAndIdModel, FilesQueryService } from '../../services/files-query.service';
-
-export interface SearchQuestionsFormData{
-    q: string;
-}
-
-@Component({
-    selector: 'croco-html-file-id-select',
-    templateUrl: './file-id-select.component.html',
-    styleUrls: ['./file-id-select.component.css']
-})
-export class FileIdSelectComponent implements OnInit, OnChanges {
-
-    q: string;
-
-    @Input()
-    labelText = "Поиск файлов"
-
-    @Input()
-    @Output()
-    fileId: number;
-
-    loading = false;
-
-    form: FormGroup;
-    files: FileNameAndIdModel[] = [];
-
-    @Output()
-    onFileIdChanged = new EventEmitter<number>();
-
-    constructor(
-        private fb: FormBuilder,
-        private _fileService: FilesQueryService) {
-        this.form = this.fb.group({
-            fileName: '',
-        });
-    }
-
-    onModelChanged(fileId: number){
-        this.onFileIdChanged.emit(fileId);
-    }
-
-    getSrc(fileId: number){
-        return ImageMethods.buildSmallUrl(fileId);
-    }
-
-    ngOnInit(): void {
-        this.loadFiles();
-    }
-
-    public loadFiles() {
-        this.loading = true;
-        this._fileService.getFiles({
-            count: 10,
-            offSet: 0,
-            fileName: null,
-            q: this.q
-        }).subscribe(data => {
-            this.files = [...data.list];
-            this.loading = false;
-        });
-    }
-
-    onSearchChanged(q: {term: string, items:object[]}){
-        this.q = q.term;
-        this.loadFiles();
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-        this.loadFiles();
-    }
-}

package/src/lib/components/index.ts

@@ -1,5 +0,0 @@
-export * from './add-files-btn/add-files-btn.component'
-export * from './editor/'
-export * from './file-id-select/file-id-select.component'
-export * from './upload-files-btn/upload-files-btn.component'
-export * from './xml-tags'

package/src/lib/components/upload-files-btn/upload-files-btn.component.html

@@ -1,2 +0,0 @@
-<button [hidden]="hidden" mat-raised-button color="primary" (click)="filesInput.click()">{{btnText}}</button>
-<input [hidden]="true" [accept]="extAccepts" [multiple]="isMultiple" type="file" #filesInput (change)="handleFileInput($event.target.files)" />

package/src/lib/components/upload-files-btn/upload-files-btn.component.ts

@@ -1,57 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { BaseApiResponseWithFilesIds, FileUploadService } from '../../services/file-upload.service';
-
-export interface FilePostingStarted {
-  filesCount: number;
-  createLocalCopiesNow:boolean;
-}
-
-@Component({
-  selector: 'app-upload-files-btn',
-  templateUrl: './upload-files-btn.component.html',
-  styleUrls: ['./upload-files-btn.component.css']
-})
-export class UploadFilesBtnComponent implements OnInit {
-
-  constructor(private _fileUploadService: FileUploadService) { }
-  @ViewChild('filesInput') private fileInput!: ElementRef<HTMLInputElement>;
-
-  @Input()
-  extAccepts: string = "*/*";
-
-  @Input()
-  isMultiple: boolean = true;
-
-  @Input()
-  btnText: string = "Загрузить файлы";
-
-  @Input()
-  createLocalCopiesNow = false;
-
-  @Input()
-  hidden: boolean = false;
-
-  @Output()
-  postFilesStarted = new EventEmitter<FilePostingStarted>();
-
-  @Output()
-  onFilesUploaded = new EventEmitter<BaseApiResponseWithFilesIds>();
-
-  handleFileInput(files: FileList) {
-    this.postFilesStarted.emit({
-      filesCount:files.length,
-      createLocalCopiesNow: this.createLocalCopiesNow
-    });
-
-    this._fileUploadService.postFiles(files, this.createLocalCopiesNow).subscribe(data => {
-      this.onFilesUploaded.emit(data);
-    })
-  }
-
-  clickFileInput(){
-    this.fileInput.nativeElement.click();
-  }
-
-  ngOnInit() {
-  }
-}

package/src/lib/components/xml-tags/xml-tag-external-video/xml-tag-external-video.component.css

@@ -1,15 +0,0 @@
-@media only screen and (min-width: 769px) {
-    .y-video {
-        width: 640px;
-        height: 360px;
-        margin: 0 auto;
-    }
-}
-
-@media only screen and (max-width: 768px)  {
-    .y-video {
-        width: 560px;
-        height: 315px;
-        margin: 0 auto;
-    }
-}

package/src/lib/components/xml-tags/xml-tag-external-video/xml-tag-external-video.component.html

@@ -1,8 +0,0 @@
-<div class="d-flex justify-content-center">
-    <div *ngIf="widgetUrl" class="y-video">
-        <iframe width="100%" height="100%" [src]="widgetUrl"
-            title="YouTube video player" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen></iframe>
-    </div>
-</div>