croco-html 0.0.1 → 0.1.1

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

@@ -0,0 +1,59 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { InterfaceBlock } from "../../../extensions/InterfaceBlock";
+import { ExternalVideoTagData } from '../../../extensions/VideoMethods';
+
+@Component({
+  selector: 'croco-html-xml-tag-external-video',
+  templateUrl: './xml-tag-external-video.component.html',
+  styleUrls: ['./xml-tag-external-video.component.css']
+})
+export class XmlTagExternalVideoComponent implements OnInit {
+
+  @Input()
+  data: InterfaceBlock;
+
+  @Input()
+  tagData: ExternalVideoTagData;
+
+  widgetUrl: SafeResourceUrl;
+
+  getYouTubeId(youtubeLink:string){
+
+    //https://www.youtube.com/watch?v=l3KfbfkxJOU
+    if(youtubeLink.includes("watch?v=")){
+      var url = new URL(youtubeLink);
+      return url.searchParams.get("v");
+    }
+
+    //https://youtu.be/jzBneaWSswY
+    let bits = youtubeLink.split('/')
+    return bits[bits.length - 1];
+  }
+
+  getWidgetLink(youtubeLink:string){
+
+    let id = this.getYouTubeId(youtubeLink);
+
+    let result = `https://www.youtube.com/embed/${id}?controls=0`;
+
+    this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(result);
+    return result;
+  }
+
+
+
+  constructor(private _domSanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+    if(this.data != null){
+      this.tagData = this.data.data as ExternalVideoTagData;
+    }
+
+    let youtubeWidgetLink = this.getWidgetLink(this.tagData.link);
+    this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(youtubeWidgetLink);
+  }
+
+
+
+}

package/src/lib/components/xml-tags/xml-tag-header-inner-text-view/xml-tag-header-inner-text-view.component.html

@@ -0,0 +1,18 @@
+<h1 *ngIf="item.type === 'h1'" 
+    [innerHtml]="item.data.html">
+</h1>
+<h2 *ngIf="item.type === 'h2'" 
+    [innerHtml]="item.data.html">
+</h2>
+<h3 *ngIf="item.type === 'h3'" 
+    [innerHtml]="item.data.html">
+</h3>
+<h4 *ngIf="item.type === 'h4'" 
+    [innerHtml]="item.data.html">
+</h4>
+<h5 *ngIf="item.type === 'h5'" 
+    [innerHtml]="item.data.html">
+</h5>
+<h6 *ngIf="item.type === 'h6'" 
+    [innerHtml]="item.data.html">
+</h6>

package/src/lib/components/xml-tags/xml-tag-header-inner-text-view/xml-tag-header-inner-text-view.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { GenericTextTag } from '../../../extensions/TextSimpleMethods';
+
+@Component({
+  selector: 'croco-html-xml-tag-header-inner-text-view',
+  templateUrl: './xml-tag-header-inner-text-view.component.html',
+  styleUrls: ['./xml-tag-header-inner-text-view.component.css']
+})
+export class XmlTagHeaderInnerTextViewComponent implements OnInit {
+
+  @Input()
+  item: GenericTextTag;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/xml-tags/xml-tag-header-text-view/xml-tag-header-text-view.component.html

@@ -0,0 +1,25 @@
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'" style="text-align: left;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+    <croco-html-xml-tag-header-inner-text-view *ngIf="item.data.html.length > 0"  [item]="item">
+    </croco-html-xml-tag-header-inner-text-view>
+</div>
+
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'" style="text-align: right;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+    <croco-html-xml-tag-header-inner-text-view *ngIf="item.data.html.length > 0"  [item]="item">
+    </croco-html-xml-tag-header-inner-text-view>
+</div>
+
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'" style="text-align: center;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+
+    <croco-html-xml-tag-header-inner-text-view *ngIf="item.data.html.length > 0"  [item]="item">
+    </croco-html-xml-tag-header-inner-text-view>
+</div>
+
+<div *ngIf="!item.data.validationResult.isSucceeded" class="red" style="margin-top: 10px;" >
+    <h4>Допущена ошибка в теге &lt;text&gt;</h4>
+    <span>
+        {{item.data.validationResult.message}}
+    </span>
+</div>

package/src/lib/components/xml-tags/xml-tag-header-text-view/xml-tag-header-text-view.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { GenericTextTag } from '../../../extensions/TextSimpleMethods';
+
+@Component({
+  selector: 'croco-html-xml-tag-header-text-view',
+  templateUrl: './xml-tag-header-text-view.component.html',
+  styleUrls: ['./xml-tag-header-text-view.component.css']
+})
+export class XmlTagHeaderTextViewComponent implements OnInit {
+
+  @Input()
+  item: GenericTextTag;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,3 @@
+<div class="col" [innerHTML]="html">
+    
+</div>

package/src/lib/components/xml-tags/xml-tag-html-view/xml-tag-html-view.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'croco-html-xml-tag-html-view',
+  templateUrl: './xml-tag-html-view.component.html',
+  styleUrls: ['./xml-tag-html-view.component.css']
+})
+export class XmlTagHtmlViewComponent {
+
+  constructor() { }
+
+  @Input()
+  html: string = "";
+}

package/src/lib/components/xml-tags/xml-tag-rich-text-view/xml-tag-rich-text-view.component.html

@@ -0,0 +1,2 @@
+<div *ngIf="richTextData" [innerHtml]="richTextData | richTextToHtml">
+</div>

package/src/lib/components/xml-tags/xml-tag-rich-text-view/xml-tag-rich-text-view.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { RichTextData } from '../../../extensions/TextMethods';
+
+@Component({
+  selector: 'croco-html-xml-tag-rich-text-view',
+  templateUrl: './xml-tag-rich-text-view.component.html',
+  styleUrls: ['./xml-tag-rich-text-view.component.css']
+})
+export class XmlTagRichTextViewComponent implements OnInit {
+
+  @Input()
+  richTextData: RichTextData = null;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  
+}

package/src/lib/components/xml-tags/xml-tag-table-view/xml-tag-table-view.component.html

@@ -0,0 +1,9 @@
+<table mat-table [dataSource]="data" class="mat-elevation-z8 w-100 example-container">
+    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

package/src/lib/components/xml-tags/xml-tag-table-view/xml-tag-table-view.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'croco-html-xml-tag-table-view',
+  templateUrl: './xml-tag-table-view.component.html',
+  styleUrls: ['./xml-tag-table-view.component.css']
+})
+export class XmlTagTableViewComponent {
+
+  @Input()
+  displayedColumns: string[] = [];
+
+  @Input()
+  data: object;
+}

package/src/lib/components/xml-tags/xml-tag-text-view/xml-tag-text-view.component.html

@@ -0,0 +1,21 @@
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'" style="text-align: left;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+    <span *ngIf="item.data.html.length > 0" [innerHtml]="item.data.html"></span>
+</div>
+
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'" style="text-align: right;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+    <span *ngIf="item.data.html.length > 0" [innerHtml]="item.data.html"></span>
+</div>
+
+<div *ngIf="item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'" style="text-align: center;">
+    <span *ngIf="item.data.html.length === 0 || !item.data.html">&nbsp;</span>
+    <span *ngIf="item.data.html.length > 0" [innerHtml]="item.data.html"></span>
+</div>
+
+<div *ngIf="!item.data.validationResult.isSucceeded" class="red" style="margin-top: 10px;" >
+    <h4>Допущена ошибка в теге &lt;text&gt;</h4>
+    <span>
+        {{item.data.validationResult.message}}
+    </span>
+</div>

package/src/lib/components/xml-tags/xml-tag-text-view/xml-tag-text-view.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SimpleTextTag } from '../../../extensions/TextSimpleMethods';
+
+@Component({
+  selector: 'croco-html-xml-tag-text-view',
+  templateUrl: './xml-tag-text-view.component.html',
+  styleUrls: ['./xml-tag-text-view.component.css']
+})
+export class XmlTagTextViewComponent implements OnInit {
+
+  @Input()
+  item: SimpleTextTag;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

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

@@ -0,0 +1,4 @@
+.red{
+    background-color: rgb(201, 68, 68);
+    color: white;
+}

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

@@ -0,0 +1,44 @@
+<div class="">
+    <div class="row" *ngFor="let item of data">
+        <div *ngIf="item.type === 'text'">
+            <croco-html-xml-tag-text-view [item]="item"></croco-html-xml-tag-text-view>
+        </div>
+        <div *ngIf="item.type === 'image'" class="red" style="margin-top: 10px;" >
+            <h4>Данный тег больше больше не поддерживается</h4>
+            <span>
+                Вмето этого переименуйте тег image на file-image
+            </span>
+        </div>
+        <div *ngIf="item.type === 'html-raw'" [innerHTML]="item.data.innerHTML">
+        </div>
+        <div *ngIf="item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'">
+            <croco-html-xml-tag-header-text-view [item]="item"></croco-html-xml-tag-header-text-view>
+        </div>
+        <div *ngIf="item.type === 'file-image'">
+            <img class="mx-auto d-block img-fluid" [src]="item.data.src"/>
+        </div>
+        <div *ngIf="item.type === 'table'">
+    
+            <croco-html-xml-tag-html-view *ngIf="item.validationResult.isSucceeded" [html]="item.bootstrapHtml">
+            </croco-html-xml-tag-html-view>
+             
+            <app-tutor-baseapiresponse-banner 
+                *ngIf="item.validationResult && !item.validationResult.isSucceeded" 
+                [message]="item.validationResult.message">
+            </app-tutor-baseapiresponse-banner>
+        </div>
+    
+        <div *ngIf="item.type === 'rich-text'">
+            <croco-html-xml-tag-text-view [richTextData]="item"></croco-html-xml-tag-text-view>
+        </div>
+        <div *ngIf="item.type === 'external-video'">
+            <croco-html-xml-tag-external-video [data]="item"></croco-html-xml-tag-external-video>
+        </div>
+        <div *ngIf="item.type === 'unsupported-tag'" class="red" style="margin-top: 10px;" >
+            <h4>Данный тег не поддерживается</h4>
+            <span>
+                {{item.data.tagString}}
+            </span>
+        </div>
+    </div>
+</div>

package/src/lib/components/xml-tags/xml-tag-view/xml-tag-view.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { InterfaceBlock } from "../../../extensions/InterfaceBlock";
+
+@Component({
+  selector: 'croco-html-xml-tag-view',
+  templateUrl: './xml-tag-view.component.html',
+  styleUrls: ['./xml-tag-view.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class XmlTagViewComponent {
+
+  @Input()
+  data:InterfaceBlock[] = [];
+
+  constructor() { }
+
+}

package/src/lib/croco-html.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { CrocoHtmlDeclarations, MaterialModules } from ".";
+
+@NgModule({
+    declarations: [
+      ...CrocoHtmlDeclarations
+    ],
+    exports: [
+      ...CrocoHtmlDeclarations,
+    ],
+    imports: [
+      CommonModule,
+      FormsModule,
+      ReactiveFormsModule,
+      NgSelectModule,
+      ...MaterialModules
+    ]
+})
+export class CrocoHtmlModule { }

package/src/lib/extensions/AngularMaterialTableMethods.ts

@@ -0,0 +1,87 @@
+import { BaseApiResponse, TableData, TableRowData } from './TableMethods';
+export interface AngularMaterialTableData {
+    displayedColumns: string[];
+    data: object[];
+}
+
+export class AngularMaterialTableMethods {
+    static getAngularMaterialTableData(columns: string[], rows: TableRowData[]): AngularMaterialTableData {
+
+        let data: object[] = [];
+
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+            const row = rows[rowIndex];
+
+            var elem = {};
+
+            for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+                const column = columns[columnIndex];
+
+                elem[column] = row.columns[columnIndex].data.text;
+            }
+
+            data.push(elem);
+        }
+
+        return {
+            displayedColumns: columns,
+            data: data,
+        };
+    }
+
+    static checkHeaders(tableData: TableData): BaseApiResponse {
+        if(tableData.header === null){
+            return {
+                isSucceeded: false,
+                message: "Необходимо указать заголовок таблицы"
+            };
+        }
+
+        let columns: string[] = tableData.header.columns;
+
+        var uniqueDislayedColumns = columns.filter((v, i, a) => a.indexOf(v) === i);
+
+        if (uniqueDislayedColumns.length !== columns.length) {
+            return {
+                isSucceeded: false,
+                message: "Ошибка при обработке разметки таблицы. Обнаружены дубликаты заголовков."
+            };
+        }
+
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
+    }
+    static checkAngularMaterialTableData(tableData: TableData, checkHeaders: boolean = true): BaseApiResponse {
+
+        if(checkHeaders){
+            var checkHeadersResult = this.checkHeaders(tableData);
+
+            if(!checkHeadersResult.isSucceeded){
+                return checkHeadersResult;
+            }
+        }
+
+        let rows: TableRowData[] = tableData.rows;
+        let columns: string[] = tableData.header.columns;
+
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+
+            if (row.columns.length !== columns.length) {
+                return {
+                    isSucceeded: false,
+                    message: `Ошибка при обработке разметки таблицы. `
+                        + `Количество колонок в каждой строке таблицы должно соотвествовать количеству колонок указанных в заголовке. `
+                        + `В строке таблицы №${i + 1} количество колонок = ${row.columns.length}, а должно быть ${columns.length}.`
+                };
+            }
+        }
+
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
+    }
+}

package/src/lib/extensions/BodyTagsExtensions.ts

@@ -0,0 +1,151 @@
+import { HtmlBodyTag } from "../models/models";
+import { HtmlExtractionMethods } from "./HtmlExtractionMethods";
+import { InterfaceBlock } from "./InterfaceBlock";
+import { HtmlRawTagDataConsts } from "./HtmlRawTagDataConsts";
+import { FileImageTagData, FileImageTagDataConsts } from "./ImageMethods";
+import { TextMethods } from "./TextMethods";
+import { SimpleTextTagData } from "./TextSimpleMethods";
+import { ExternalVideoTagDataConsts } from "./VideoMethods";
+
+export class BodyTagsExtensions {
+
+    static getDescription(tagName: string){
+        var descriptions = {
+            "text": "Текст",
+            "h1": "Заголовок 1 уровня",
+            "h2": "Заголовок 2 уровня",
+            "h3": "Заголовок 3 уровня",
+            "h4": "Заголовок 4 уровня",
+            "h5": "Заголовок 5 уровня",
+            "h6": "Заголовок 6 уровня",
+            [FileImageTagDataConsts.TagName]: "Изображение",
+            [ExternalVideoTagDataConsts.TagName]: "Внешнее видео YouTube",
+            [HtmlRawTagDataConsts.TagName]: "Html разметка"
+        };
+
+        return descriptions[tagName];
+    }
+
+    static toHtml(bodyTags: HtmlBodyTag[]): string{
+        let htmls = bodyTags.map(x => {
+            if(TextMethods.textTags.includes(x.tagDescription.tag)){
+              return `<${x.tagDescription.tag} h-align="${x.attributes['h-align']}">${x.innerHtml}</${x.tagDescription.tag}>`;
+            }
+
+            if(x.tagDescription.tag === ExternalVideoTagDataConsts.TagName){
+                return `<${x.tagDescription.tag} type="${x.attributes['type']}" link="${x.attributes['link']}">${x.innerHtml}</${x.tagDescription.tag}>`
+            }
+
+            if(x.tagDescription.tag === "html-raw"){
+                return `<${x.tagDescription.tag}>${x.innerHtml}</${x.tagDescription.tag}>`
+            }
+
+            return BodyTagsExtensions.imageTagToHtml(x);
+          });
+
+          let result = "";
+
+          for (let index = 0; index < htmls.length; index++) {
+            const element = htmls[index];
+
+            result += element;
+          }
+
+          return result;
+    }
+
+    static imageTagToHtml(imageTag: HtmlBodyTag){
+
+        var attrStr = "";
+
+        var attrValue = imageTag.attributes[FileImageTagDataConsts.FileIdAttrName];
+        if(imageTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && attrValue){
+            attrStr = `${FileImageTagDataConsts.FileIdAttrName}="${attrValue}"`;
+        }
+
+        return `<${FileImageTagDataConsts.TagName} ${attrStr}></${FileImageTagDataConsts.TagName}>`;
+    }
+
+    static getBodyTags(html:string){
+        let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html);
+        return result.map(x => BodyTagsExtensions.toBodyTag(x));
+    }
+
+    static sanitizeInnerHtml(html:string):string{
+        return html.trim().replace('\n\t', '');
+    }
+
+    static toBodyTag(data: InterfaceBlock): HtmlBodyTag {
+        if (TextMethods.textTags.includes(data.type)) {
+            let textTagData = data.data as SimpleTextTagData;
+
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: textTagData.textTagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: { "h-align": textTagData.horizontalAlignment },
+                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(textTagData.html)
+            };
+        }
+
+        if(data.type === FileImageTagDataConsts.TagName){
+
+            let fileData = data.data as FileImageTagData;
+
+            let atts = {};
+
+            if(fileData.fileId){
+                atts[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
+            }
+
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: FileImageTagDataConsts.TagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: atts,
+                innerHtml: ""
+            };
+        }
+
+        if(data.type === ExternalVideoTagDataConsts.TagName){
+            let fileData = data.data as ExternalVideoTagDataConsts;
+
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: ExternalVideoTagDataConsts.TagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: fileData,
+                innerHtml: ""
+            };
+        }
+
+        if(data.type === HtmlRawTagDataConsts.TagName){
+
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: HtmlRawTagDataConsts.TagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: {},
+                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(data.data["innerHTML"])
+            };
+        }
+
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: "unsupported-tag",
+                displayValue: "Неподдерживаемый тег"
+            },
+            attributes: { },
+            innerHtml: JSON.stringify(data)
+        };
+    }
+}