croco-html 0.0.1 → 0.1.1

package/README.md

@@ -1,24 +1,24 @@
-# CrocoHtml
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project croco-html` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project croco-html`.
-> Note: Don't forget to add `--project croco-html` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build croco-html` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build croco-html`, go to the dist folder `cd dist/croco-html` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test croco-html` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# CrocoHtml
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project croco-html` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project croco-html`.
+> Note: Don't forget to add `--project croco-html` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build croco-html` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build croco-html`, go to the dist folder `cd dist/croco-html` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test croco-html` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/croco-html'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/croco-html",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,23 +1,15 @@
-{
-  "name": "croco-html",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^12.1.0",
-    "@angular/core": "^12.1.0",
-    "@angular/material": "~12.2.0",
-    "@angular/cdk": "^14.2.3",
-    "angular-draggable-droppable": "^7.0.0",
-    "ngx-clipboard": "^12.3.1",
-    "@ng-select/ng-select": "^7.0.2"
-  },
-  "dependencies": {
-    "tslib": "^2.2.0"
-  },
-  "main": "bundles/croco-html.umd.js",
-  "module": "fesm2015/croco-html.js",
-  "es2015": "fesm2015/croco-html.js",
-  "esm2015": "esm2015/croco-html.js",
-  "fesm2015": "fesm2015/croco-html.js",
-  "typings": "croco-html.d.ts",
-  "sideEffects": false
+{
+  "name": "croco-html",
+  "version": "0.1.1",
+  "peerDependencies": {
+    "@angular/common": ">=13.3.11",
+    "@angular/core": ">=13.3.11",
+    "@angular/material": ">=13.3.9",
+    "@angular/cdk": ">=13.3.9",
+    "ngx-clipboard": ">=15.1.0",
+    "@ng-select/ng-select": ">=9.0.2"
+  },
+  "dependencies": {
+    "tslib": ">=2.2.0"
+  }
 }

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

@@ -0,0 +1,14 @@
+<div [hidden]="true">
+    <app-upload-files-btn #fakeBtn 
+        (onFilesUploaded)="filesUploadedHandler($event)" 
+        [btnText]="'Добавить изображения'"
+        [createLocalCopiesNow]="true"
+        (postFilesStarted)="postFilesStartedEventHandler($event)" 
+        [extAccepts]="'image/*'"></app-upload-files-btn>
+</div>
+
+<div>
+    <button class="w-100" 
+        (click)="handleClick()"
+        mat-stroked-button>Добавить изображения</button>
+</div>

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

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { FileImageTagDataConsts } from '../../extensions/ImageMethods';
+import { HtmlBodyTag } from '../../models/models';
+import { BaseApiResponseWithFilesIds } from '../../services/file-upload.service';
+import { FilePostingStarted, UploadFilesBtnComponent } from '../upload-files-btn/upload-files-btn.component';
+
+@Component({
+  selector: 'croco-add-files-btn',
+  templateUrl: './add-files-btn.component.html',
+  styleUrls: ['./add-files-btn.component.css']
+})
+export class AddFilesBtnComponent implements OnInit {
+
+  @Output()
+  postFilesStarted = new EventEmitter<FilePostingStarted>();
+
+  @ViewChild("fakeBtn")
+  fakeBtn!: UploadFilesBtnComponent;
+
+  fileIds:number[] = [];
+
+  constructor() { }
+
+  @Output()
+  filesTagsReady = new EventEmitter<HtmlBodyTag[]>();
+
+  postFilesStartedEventHandler(data: FilePostingStarted){
+    this.postFilesStarted.emit(data);
+  }
+
+  filesUploadedHandler(data: BaseApiResponseWithFilesIds){
+    this.fileIds = data.responseObject;
+
+    let fileTags:HtmlBodyTag[] = [];
+
+    for(let i=0; i < this.fileIds.length; i++){
+      let fileTag: HtmlBodyTag = {
+        presentOrEdit: true,
+        tagDescription: {
+          tag: FileImageTagDataConsts.TagName,
+          displayValue: "Изображение"
+        },
+        attributes: {
+          [FileImageTagDataConsts.FileIdAttrName]: this.fileIds[i]
+        },
+        innerHtml: ""
+      };
+
+      fileTags.push(fileTag);
+    }
+
+    this.filesTagsReady.emit(fileTags);
+  }
+
+  handleClick(){
+    this.fakeBtn.clickFileInput();
+  }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/components/editor/external-video-block/external-video-block.component.html

@@ -0,0 +1,27 @@
+<div *ngIf="tag.presentOrEdit">
+    
+    <div>
+        Ссылка на YouTube: {{data.youtubeLink}}
+    </div>
+
+    <div style="height: 10px;"></div>
+
+    <croco-html-xml-tag-external-video [tagData]="tagData">
+    </croco-html-xml-tag-external-video>
+</div>
+
+<div *ngIf="!tag.presentOrEdit">
+    <div>
+        <form [formGroup]="myForm">
+            <mat-form-field class="w-100">
+                <input matInput placeholder="Ссылка на YouTube"
+                    new-autocomplete="off"
+                    autocomplete="off"
+                    formControlName="youtubeLink"
+                    [(ngModel)]="data.youtubeLink"
+                    (ngModelChange)="linkChanged()">
+            </mat-form-field>
+        </form>
+    </div>
+</div>
+

package/src/lib/components/editor/external-video-block/external-video-block.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { ExternalVideoTagData, ExternalVideoSupportedTypes } from '../../../extensions/VideoMethods';
+import { HtmlBodyTag } from '../../../models/models';
+
+@Component({
+  selector: 'croco-html-external-video-block',
+  templateUrl: './external-video-block.component.html',
+  styleUrls: ['./external-video-block.component.css']
+})
+export class ExternalVideoBlockComponent implements OnInit {
+
+  @Input()
+  tag: HtmlBodyTag;
+
+  @Output()
+  onTagUpdated = new EventEmitter<HtmlBodyTag>();
+
+  myForm = new FormGroup({
+    youtubeLink: new FormControl()
+  });
+
+  defaultLink = "https://youtu.be/jzBneaWSswY";
+
+  data = {
+    youtubeLink: this.defaultLink
+  }
+
+  tagData: ExternalVideoTagData = {
+    link: this.defaultLink,
+    type: ExternalVideoSupportedTypes.Youtube
+  };
+
+  linkChanged(){
+    this.tagData.link = this.data.youtubeLink;
+    this.tag.attributes = this.tagData;
+  }
+
+  ngOnInit(): void {
+    this.linkChanged();
+
+    this.tagData = this.tag.attributes as ExternalVideoTagData;
+    this.data.youtubeLink = this.tagData.link;
+  }
+}

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

@@ -0,0 +1,17 @@
+<div *ngIf="tag.presentOrEdit">
+    <div [innerHTML]="tag.innerHtml"></div>
+</div>
+
+<div *ngIf="!tag.presentOrEdit">
+    <div style="height: 10px;">
+    </div>
+    <div>
+        <mat-form-field class="w-100">
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
+                cdkAutosizeMinRows="1"
+                placeholder="Внутренняя разметка тега"
+                [(ngModel)]="tag.innerHtml"></textarea>
+        </mat-form-field>
+    </div>
+</div>
+

package/src/lib/components/editor/html-raw-editor/html-raw-editor.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { HtmlBodyTag } from '../../../models/models';
+
+@Component({
+  selector: 'croco-html-html-raw-editor',
+  templateUrl: './html-raw-editor.component.html',
+  styleUrls: ['./html-raw-editor.component.css']
+})
+export class HtmlRawEditorComponent implements OnInit {
+
+  @Input()
+  tag: HtmlBodyTag;
+
+  @Output()
+  onTagUpdated = new EventEmitter<HtmlBodyTag>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,7 @@
+.error-block{
+    background-color: rgb(243 35 35);
+    color: white;
+    text-align: center;
+    border-radius: 10px;
+    padding: 10px;
+}

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

@@ -0,0 +1,54 @@
+<div>
+    <div style="height: 10px;">
+    </div>
+    
+    <div *ngIf="hasImageError" class="error-block">
+        Изображение не найдено по указанному идентификатору, возможно файл не существует или отсутствует на сервере.
+    </div>
+
+    <div *ngIf="hasFileId() && !hasImageError">
+        <img class="mx-auto d-block img-fluid" [src]="getSrc()" (error)="onErrorHandler()"/>
+    </div>
+
+    <div *ngIf="!hasFileId()">
+        <h5>[Изображение не выбрано]</h5>
+    </div>
+</div>
+
+<div *ngIf="!tag.presentOrEdit">
+    <div style="height: 10px;"></div>
+
+    <div style="overflow-x:auto;">
+        <mat-button-toggle-group [(ngModel)]="searchOrEdit">
+            <mat-button-toggle value="search">
+                Искать файл <mat-icon>search</mat-icon>
+            </mat-button-toggle>
+            <mat-button-toggle value="edit">
+                Указать по идентификатору <mat-icon>settings</mat-icon>
+            </mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+    
+
+    <div style="height: 10px;"></div>
+
+    <div [hidden]="searchOrEdit !== 'search'">
+        <croco-html-file-id-select
+         [labelText]="'Выбрать файл'"
+         [(fileId)]="tag.attributes['file-id']"
+         (onFileIdChanged)="onFileIdChanged($event)">
+        </croco-html-file-id-select>
+    </div>
+
+    <div [hidden]="searchOrEdit !== 'edit'">
+        <form [formGroup]="myForm">
+            <mat-form-field class="w-100">
+                <input matInput placeholder="Идентификатор файла" new-autocomplete="off" autocomplete="off"
+                    formControlName="fileId" 
+                    type="number"
+                    [(ngModel)]="tag.attributes['file-id']"
+                    (ngModelChange)="removeImageError()">
+            </mat-form-field>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { ImageMethods, FileImageTagDataConsts } from '../../../extensions/ImageMethods';
+import { HtmlBodyTag } from '../../../models/models';
+
+@Component({
+  selector: 'croco-html-image-editor',
+  templateUrl: './image-editor.component.html',
+  styleUrls: ['./image-editor.component.css']
+})
+export class ImageEditorComponent implements OnInit {
+
+  hasImageError = false;
+  searchOrEdit = "search";
+
+  @Input()
+  tag: HtmlBodyTag;
+
+  myForm = new FormGroup({
+    fileId:new FormControl()
+  });
+
+  onErrorHandler(){
+    this.hasImageError = true;
+  }
+
+  @Output()
+  onTagUpdated = new EventEmitter<HtmlBodyTag>();
+
+  constructor() { }
+
+  getSrc(){
+    return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+  }
+
+  hasFileId(){
+    return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && !isNaN(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+  }
+
+  onFileIdChanged(fileId:number){
+    this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
+    this.removeImageError();
+  }
+
+  removeImageError(){
+    this.hasImageError = false;
+  }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/editor/index.ts

@@ -0,0 +1,7 @@
+export * from './external-video-block/external-video-block.component'
+export * from './html-raw-editor/html-raw-editor.component'
+export * from './image-editor/image-editor.component'
+export * from './main-editor/main-editor.component'
+export * from './main-editor-block/main-editor-block.component'
+export * from './text-editor/text-editor.component'
+export * from './visual-editor/visual-editor.component'

package/src/lib/components/editor/main-editor/main-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/main-editor/main-editor.component.html

@@ -0,0 +1,39 @@
+<mat-tab-group>
+  <mat-tab label="Визуальный редактор">
+
+    <div style="height: 20px;"></div>
+
+    <croco-visual-editor #visualEditor
+      [useHtmlRaw]="useHtmlRaw"
+      [html]="html"
+      (onHtmlChanged)="onHtmlChangedHandler($event)"
+      (rendered)="visualEditorRenderedHandler()">
+    </croco-visual-editor>
+
+    <div style="height: 20px;"></div>
+
+  </mat-tab>
+
+  <mat-tab label="Разметка">
+    <div style="height: 10px;"></div>
+    <form *ngIf="visualEditorRendered" [formGroup]="myForm">
+      <mat-form-field class="w-100">
+        <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
+          cdkAutosizeMinRows="1"
+          placeholder="Исходный код" formControlName="html" [(ngModel)]="html"
+          (ngModelChange)="textAreaModelChangedHandler()"></textarea>
+      </mat-form-field>
+    </form>
+
+    <button (click)="copyMarkUp()" 
+      mat-raised-button color="primary">
+      Копировать разметку
+    </button>
+  </mat-tab>
+  <mat-tab label="Результат">
+    <mat-card>
+      <croco-html-xml-tag-view [data]="html | topreview">
+      </croco-html-xml-tag-view>
+    </mat-card>
+  </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,71 @@
+import { AfterContentChecked, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ClipboardService } from 'ngx-clipboard';
+import { VisualEditorComponent } from '../visual-editor/visual-editor.component';
+
+@Component({
+  selector: 'croco-html-main-editor',
+  templateUrl: './main-editor.component.html',
+  styleUrls: ['./main-editor.component.css']
+})
+export class MainEditorComponent implements OnInit, AfterContentChecked {
+
+  visualEditorRendered = false;
+  @ViewChild("visualEditor")
+  visualEditor!: VisualEditorComponent;
+
+  @Input()
+  showMarkUp = true;
+
+  @Input()
+  useHtmlRaw = false;
+
+  myForm = new FormGroup({
+    "html": new FormControl(),
+  });
+
+  @Input()
+  @Output()
+  html: string = "";
+
+  @Output()
+  onHtmlChanged = new EventEmitter<string>();
+
+  constructor(private _clipboardService: ClipboardService,
+    private _snackBar: MatSnackBar,
+    private _cdref: ChangeDetectorRef) { }
+
+  ngAfterContentChecked(): void {
+    this._cdref.detectChanges();
+  }
+
+  visualEditorRenderedHandler(){
+    this.visualEditorRendered = true;
+    this.recalculateBodyTags();
+  }
+
+  onHtmlChangedHandler(html: string) {
+    this.html = html;
+    this.onHtmlChanged.emit(html);
+  }
+
+  textAreaModelChangedHandler(){
+    this.recalculateBodyTags();
+    this.onHtmlChangedHandler(this.html);
+  }
+
+  recalculateBodyTags() {
+    this.visualEditor.html = this.html;
+    this.visualEditor.recalculateBodyTags();
+  }
+
+  copyMarkUp() {
+    this._snackBar.open("Разметка таблицы скопирована в буфер обмена", "Закрыть", { duration: 1500 });
+    this._clipboardService.copy(this.html);
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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

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