Gallery file settings panel

editor/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^8.0.2",
     "@angular/platform-browser-dynamic": "^8.0.2",
     "@angular/router": "^8.0.2",
+    "@kolkov/angular-editor": "^1.1.4",
     "@ngxs/store": "^3.4.3",
     "@sentry/browser": "^5.4.0",
     "core-js": "^2.5.4",

editor/src/app/inputs/rich-text-input.component.ts

@@ -0,0 +1,85 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
+
+@Component({
+  selector: 'berta-rich-text-input',
+  template: ` <div class="form-group">
+    <label>{{ label }}</label>
+    <angular-editor
+      [(ngModel)]="value"
+      (ngModelChange)="this.valueUpdate.next($event)"
+      [config]="editorConfig"
+    >
+    </angular-editor>
+  </div>`,
+  styles: [
+    `
+      :host label {
+        display: block;
+      }
+    `,
+  ],
+})
+export class RichTextInputComponent implements OnInit {
+  @Input() label?: string;
+  @Input() name?: string;
+  @Input() title?: string;
+  @Input() type?: string;
+  @Input() placeholder?: string;
+  @Input() disabled?: boolean;
+  @Input() disabledReason?: string;
+  @Input() enabledOnUpdate?: boolean;
+  @Input() value: string;
+  @Output() update = new EventEmitter<string>();
+  @Output() inputFocus = new EventEmitter<boolean>();
+
+  valueUpdate = new Subject<string>();
+
+  editorConfig: AngularEditorConfig = {
+    editable: true,
+    height: 'auto',
+    minHeight: '0',
+    maxHeight: 'auto',
+    width: 'auto',
+    minWidth: '0',
+    toolbarHiddenButtons: [
+      [
+        'underline',
+        'strikeThrough',
+        'subscript',
+        'superscript',
+        'justifyLeft',
+        'justifyCenter',
+        'justifyRight',
+        'justifyFull',
+        'indent',
+        'outdent',
+        'insertUnorderedList',
+        'insertOrderedList',
+        'heading',
+        'fontName',
+      ],
+      [
+        'fontSize',
+        'textColor',
+        'backgroundColor',
+        'customClasses',
+        'insertImage',
+        'insertVideo',
+        'insertHorizontalRule',
+      ],
+    ],
+  };
+
+  constructor() {
+    this.valueUpdate
+      .pipe(debounceTime(500), distinctUntilChanged())
+      .subscribe((value) => {
+        this.update.emit(value);
+      });
+  }
+
+  ngOnInit() {}
+}

editor/src/app/inputs/toggle-input.component.ts

@@ -3,39 +3,41 @@ import { SettingModel, SettingConfigModel } from '../shared/interfaces';
 
 @Component({
   selector: 'berta-toggle-input',
-  template: `
-    <div class="form-group" [class.bt-disabled]="disabled">
-      <label>
-        {{ label }}
-
-        <div class="toggle-wrapper">
-          <input [checked]="isChecked(value)"
-                 (change)="onChange($event)"
-                 type="checkbox">
-          <span></span>
-        </div>
-      </label>
-    </div>`
+  template: ` <div class="form-group" [class.bt-disabled]="disabled">
+    <label>
+      {{ label }}
+
+      <div class="toggle-wrapper">
+        <input
+          [checked]="isChecked(value)"
+          (change)="onChange($event)"
+          type="checkbox"
+        />
+        <span></span>
+      </div>
+    </label>
+  </div>`,
 })
 export class ToggleInputComponent {
   @Input() label: string;
   @Input() value: SettingModel['value'];
   @Input() values: SettingConfigModel['values'];
+  @Input() enabledOnUpdate?: boolean;
   @Output() update = new EventEmitter();
   disabled = false;
 
-  private activeValues = ['yes'];
+  private activeValues = ['yes', '1'];
 
   isChecked(value) {
-    return this.activeValues.some(val => val === value);
+    return this.activeValues.some((val) => val === value);
   }
 
   getCheckedValue() {
-    return this.values.find(val => this.isChecked(val.value)).value;
+    return this.values.find((val) => this.isChecked(val.value)).value;
   }
 
   getUncheckedValue() {
-    return this.values.find(val => !this.isChecked(val.value)).value;
+    return this.values.find((val) => !this.isChecked(val.value)).value;
   }
 
   onChange($event) {
@@ -46,8 +48,10 @@ export class ToggleInputComponent {
       value = this.getUncheckedValue();
     }
 
-    $event.target.disabled = true;
-    this.disabled = true;
+    if (!this.enabledOnUpdate) {
+      $event.target.disabled = true;
+      this.disabled = true;
+    }
     this.update.emit(value);
   }
 }

editor/src/app/shared/interfaces.ts

@@ -5,7 +5,11 @@ export interface SettingsGroupModel {
 
 export interface SettingModel {
   slug: string;
-  value: string|number|boolean|Array<{[k:string]: string|number|boolean}>;
+  value:
+    | string
+    | number
+    | boolean
+    | Array<{ [k: string]: string | number | boolean }>;
 }
 
 export interface SettingChildModel {
@@ -32,6 +36,7 @@ export interface SettingConfigModel {
   format?:
     | 'text'
     | 'longtext'
+    | 'richtext'
     | 'select'
     | 'fontselect'
     | 'toggle'
@@ -60,7 +65,7 @@ export interface SettingConfigModel {
   allow_blank?: boolean;
   link?: boolean;
   validator?: 'GoogleAnalytics' | string;
-  children?: Array<{[k: string]: SettingConfigModel}>;
+  children?: Array<{ [k: string]: SettingConfigModel }>;
   requires_feature?: string;
   [k: string]: any;
 }
@@ -97,8 +102,8 @@ export interface SettingConfigResponse {
   values?:
     | (string | number)[]
     | {
-      [k: string]: string | number;
-    };
+        [k: string]: string | number;
+      };
   html_entities?: boolean;
   css_units?: boolean;
   min_width?: number | string;
@@ -108,6 +113,6 @@ export interface SettingConfigResponse {
   allow_blank?: boolean;
   link?: boolean;
   validator?: 'GoogleAnalytics' | string;
-  children?: Array<{[k: string]: SettingConfigModel}>;
+  children?: Array<{ [k: string]: SettingConfigModel }>;
   [k: string]: any;
 }