croco-html 0.1.1 → 0.1.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,151 +0,0 @@
-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)
-        };
-    }
-}