WIP

2025-11-02 09:13:42 -08:00
parent cd9021d9c0
commit 70aa8adbba
10 changed files with 76 additions and 86 deletions
@@ -30,7 +30,7 @@ const teamSize: number[][] = [
 const fourthQuestNeed2Failed = 7;
 const SIGNAL_R_URL = (id: string = null) => { return `${environment.signalRUrl}/${id}Hub` }
 //const SIGNAL_R_URL = (id: string = null) => { return `http://localhost:12071/hub` }
-//const SIGNAL_R_URL = (id: string = null) => { return `http://happiness.tours:8088/${id}hub` }
+//const SIGNAL_R_URL = (id: string = null) => { return `http://golife.love:8088/${id}hub` }

@Component({
  selector: 'ngx-avalon',
@@ -26,5 +26,5 @@
 <ng-template #WaitingMessage>
    <h1>等待遊戲開始中...</h1>

-    <qr-code *ngIf="isHost" [size]="qrCodeWidth" [value]="'http://happiness.tours/games/avalon'"></qr-code>
+    <qr-code *ngIf="isHost" [size]="qrCodeWidth" [value]="'http://golife.love/games/avalon'"></qr-code>
 </ng-template>
@@ -10,10 +10,12 @@
                </nb-accordion-item-body>
            </nb-accordion-item>
        </nb-accordion>
-    </div> -->
-    <div class="col-12">
+    </div>
+        <div class="col-12">
        <md2-html-editor></md2-html-editor>
    </div>
+    -->
+

    <div class="col-12 col-md-5">
        <nb-card>
@@ -1 +1 @@
-<editor [init]="htmlEditorSetting"></editor>
+<!-- <editor [init]="htmlEditorSetting"></editor> -->
@@ -1,109 +1,97 @@
-import { Component, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, Output, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { Editor, RawEditorOptions } from 'tinymce';
+
 import { MsgBoxService } from '../../../services/msg-box.service';
 import { DropDownOption } from '../../../entity/dropDownOption';
 import { MD2Icon } from '../massive-darkness2.model';
 import { first } from 'rxjs/operators';
+import { HtmlEditorSettings } from '../../../ui/html-editor/html-editor.model';
+import { EditorComponent } from '@tinymce/tinymce-angular';
+import { Editor } from 'tinymce';

@Component({
  selector: 'md2-html-editor',
  templateUrl: './md2-html-editor.component.html',
  styleUrl: './md2-html-editor.component.scss'
 })
-export class MD2HtmlEditorComponent implements ControlValueAccessor, Validator {
-
-  private _lastBlurValue: string;
-
-  readonly: boolean = false;
-  isRequired: boolean = false;
-
-  @Input() id? = '';
-  @Input() name = '';
-  @Input() data: string;
-
-  @Output() focus = new EventEmitter();
-  @Output() blur = new EventEmitter<string>();
-
-  @Input('readonly')
-  public set input_readonly(value) {
-    this.readonly = typeof value !== 'undefined' && value !== false;
-  }
-  @Input('isRequired')
-  public set input_isRequired(value) {
-    this.isRequired = typeof value !== 'undefined' && value !== false;
-  }
+export class MD2HtmlEditorComponent extends EditorComponent implements ControlValueAccessor {
+  htmlEditorSetting: HtmlEditorSettings = {};

  constructor(
    private msgBoxService: MsgBoxService,
-    private elementRef: ElementRef,
-    private renderer: Renderer2) {
+    elementRef: ElementRef, ngZone: NgZone, @Inject(PLATFORM_ID) platformId: Object) {
+    super(elementRef, ngZone, platformId);
+    // this.elementRef is private. Need a duplicate
+    this._elementRef2 = elementRef;
    this.htmlEditorSetting.base_url = '/tinymce';
    this.htmlEditorSetting.suffix = '.min';
    this.htmlEditorSetting['parentComponent'] = this;
-    this.htmlEditorSetting.plugins = 'lists link image table code';
-    this.htmlEditorSetting.toolbar2 = 'customInsertButton'
-    this.htmlEditorSetting.setup = this.htmlEditorSetup;
+    this.htmlEditorSetting.plugins = [
+      'noneditable', 'lists', 'link', 'image', 'table', 'code'];
+    this.htmlEditorSetting.toolbar = ['undo redo | blocks | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist | code customInsertButton'];
+    this.htmlEditorSetting.content_style = '.MD2Icon{font-family: "Massive Darkness 2", sans-serif !important; font-size: 40px; margin-left:5px}  body{font-size: 30px;  }';
+    this.htmlEditorSetting.noneditable_noneditable_class = 'MD2Icon';
+    //this.htmlEditorSetting.o = this.htmlEditorSetup;
+    this.htmlEditorSetting.setup = (editor) => this.htmlEditorSetup(editor)
  }

-  htmlEditorSetting: RawEditorOptions = {};

  htmlEditorSetup(editor: Editor) {
-    let component = this.htmlEditorSetting['parentComponent'] as MD2HtmlEditorComponent;

+    if (editor) {
+      let component = this.htmlEditorSetting['parentComponent'] as MD2HtmlEditorComponent;
+      editor.ui.registry.addButton('customInsertButton', {
+        icon: 'code-sample',
+        text: 'MD2 Icon',
+        onAction: (_) => component.showInsertMD2Icon(this.editor as any)
+      });
+    }

-    editor.ui.registry.addButton('customInsertButton', {
-      icon: 'code-sample',
-      text: 'MD2 Icon',
-      onAction: (_) => component.showInsertMD2Icon(editor)
-    });
  }
  showInsertMD2Icon(editor: Editor) {

    var iconKeys = Object.keys(MD2Icon);
    iconKeys = iconKeys.slice(iconKeys.length / 2, iconKeys.length - 1);
+    this.ngZone.run(_ => {
+      this.msgBoxService.showInputbox('Insert MD2 Icon', '', { inputType: 'dropdown', dropDownOptions: iconKeys.map((k, i) => new DropDownOption(i, k)) })
+        .pipe(first()).subscribe(result => {

-    this.msgBoxService.showInputbox('Insert MD2 Icon', '', { inputType: 'dropdown', dropDownOptions: iconKeys.map(k => new DropDownOption(k, k)) })
-      .pipe(first()).subscribe(result => {
+          editor.insertContent(`<span class="MD2Icon mceNonEditable">${String.fromCharCode(65 + result)}</span>`);
+          this.writeValue(editor.getContent());
+        });
+    });

-        editor.insertContent(`&nbsp;<strong>${result}</strong>&nbsp;`);
-        this.writeValue(editor.getContent());
-      });
  }

-  validate(control: AbstractControl): ValidationErrors {
-    // if (this.required && (this.value == null || this.value == 0)) {
-    //   return { 'currency': '' };
-    // }
-    return null;
+  private _elementRef2: ElementRef;
+
+  writeValue(value: string | null): void {
+
+    super.writeValue(value);
  }
-  registerOnValidatorChange?(fn: () => void): void {
-  }
-  onChange = (value: number) => { };
-  onTouched = () => { };
-  writeValue(obj: string): void {
-    this.data = obj;
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
+
+  registerOnChange(fn: (value: string) => void): void {
+    super.registerOnChange(fn);
  }
  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
+    super.registerOnTouched(fn);
  }
-  setDisabledState?(isDisabled: boolean): void {
-    this.readonly = isDisabled;
+  setDisabledState(isDisabled: boolean): void {
+    super.setDisabledState(isDisabled);
  }
-
-  ngOnInit() {
+  checkDomAttachment(): boolean {
+    // check if component has been attached to DOM yet
+    return document.body.contains(this._elementRef2.nativeElement);
  }
-
  ngAfterViewInit() {
-    this.renderer.removeAttribute(this.elementRef.nativeElement, 'id')
+    this.init = this.htmlEditorSetting;
+    //this.htmlEditorSetup();
+    super.ngAfterViewInit();
  }
-  onBlur() {
-    if (this._lastBlurValue != this.data) {
-      this._lastBlurValue = this.data;
-      this.blur.emit(this.data);
-    }
+
+
+  private InitializeEditor() {
+    this.init = new HtmlEditorSettings({});
+    //super.initialise();
  }
-}
+}