croco-html 0.0.1 → 0.1.1

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,48 @@
+.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

@@ -0,0 +1,84 @@
+<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

@@ -0,0 +1,180 @@
+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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,2 @@
+<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

@@ -0,0 +1,57 @@
+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/{lib/components/xml-tags/index.d.ts → src/lib/components/xml-tags/index.ts}

@@ -1,8 +1,8 @@
-export * from './xml-tag-external-video/xml-tag-external-video.component';
-export * from './xml-tag-header-inner-text-view/xml-tag-header-inner-text-view.component';
-export * from './xml-tag-header-text-view/xml-tag-header-text-view.component';
-export * from './xml-tag-html-view/xml-tag-html-view.component';
-export * from './xml-tag-rich-text-view/xml-tag-rich-text-view.component';
-export * from './xml-tag-table-view/xml-tag-table-view.component';
-export * from './xml-tag-text-view/xml-tag-text-view.component';
-export * from './xml-tag-view/xml-tag-view.component';
+export * from './xml-tag-external-video/xml-tag-external-video.component'
+export * from './xml-tag-header-inner-text-view/xml-tag-header-inner-text-view.component'
+export * from './xml-tag-header-text-view/xml-tag-header-text-view.component'
+export * from './xml-tag-html-view/xml-tag-html-view.component'
+export * from './xml-tag-rich-text-view/xml-tag-rich-text-view.component'
+export * from './xml-tag-table-view/xml-tag-table-view.component'
+export * from './xml-tag-text-view/xml-tag-text-view.component'
+export * from './xml-tag-view/xml-tag-view.component'

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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,8 @@
+<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>