From b32969cffecd102735f2ea4b7fcc35844f1d0c36 Mon Sep 17 00:00:00 2001 From: alexcibotari Date: Thu, 9 Jan 2025 12:07:26 +0100 Subject: [PATCH] Improve Sync Script --- scripts/sync-v1.ts | 48 ++++---- .../edit-document/edit-document.component.ts | 104 +++++++++--------- .../edit-document/edit-document.model.ts | 12 +- .../directives/image-preview.directive.ts | 4 +- src/scripts/sync-v1.js | 17 ++- 5 files changed, 93 insertions(+), 92 deletions(-) diff --git a/scripts/sync-v1.ts b/scripts/sync-v1.ts index e1340f75..fd68d5d3 100644 --- a/scripts/sync-v1.ts +++ b/scripts/sync-v1.ts @@ -1,18 +1,21 @@ -(function () { - interface EventToEditor { - owner: string; - id: string; - } +(function() { + // Event emitted to Visual Editor + type EventToEditorType = 'selectSchema' | 'hoverSchema'; + type EventToEditor = { owner: 'LOCALESS'; type: EventToEditorType; id: string; } + // Event emitted by Visual Editor - type EventType = 'save' | 'publish' | 'input' | 'change' | 'enterSchema' | 'hoverSchema'; + type EventToAppType = 'save' | 'publish' | 'input' | 'change' | 'enterSchema' | 'hoverSchema'; type EventCallback = (event: EventToApp) => void; - type EventToApp = { type: 'save' | 'publish' } | { type: 'input' | 'change'; data: any } | { type: 'enterSchema' | 'hoverSchema', id: string}; + type EventToApp = + { type: 'save' | 'publish' } | + { type: 'input' | 'change'; data: any } | + { type: 'enterSchema' | 'hoverSchema', id: string }; function isInIframe() { return window.top !== window.self; } - function sendEditorData(data: any) { + function sendEditorData(data: EventToEditor) { console.log('sendEditorData', data); window.parent.postMessage(data, '*'); } @@ -31,36 +34,33 @@ function markVisualEditorElements() { document.querySelectorAll('[data-ll-id]').forEach(element => { + const id = element.getAttribute('data-ll-id')!; if (element.offsetHeight < 5) { - element.style.minHeight = '5px' + element.style.minHeight = '5px'; } element.addEventListener('click', event => { event.stopPropagation(); - const id = element.getAttribute('data-ll-id'); - if (id) { - // Send Message with Selected Schema - sendEditorData({ - owner: 'LOCALESS', - id: id, - } satisfies EventToEditor); - } + // Send Message with Selected Schema + sendEditorData({ owner: 'LOCALESS', type: 'selectSchema', id: id }); }); element.addEventListener('mouseenter', event => { - console.log('mouseenter', event) + // Send Message with Hover Schema + sendEditorData({ owner: 'LOCALESS', type: 'hoverSchema', id: id }); + // TODO Create Overlay }); element.addEventListener('mouseleave', event => { - console.log('mouseleave', event) + // TODO Remove Overlay }); }); } if (isInIframe()) { - createCSS() + createCSS(); setTimeout(() => markVisualEditorElements(), 1000); class Sync { version = 'v1'; - events: Record = { + events: Record = { save: [], publish: [], input: [], @@ -72,7 +72,7 @@ constructor() { console.log( `%c🚀🚀🚀LOCALESS: Sync version ${this.version} initialized🚀🚀🚀`, - 'background: #222; color: #0063EB; font-size: 2rem;' + 'background: #222; color: #0063EB; font-size: 2rem;', ); // Receive message from Visual Editor addEventListener('message', event => { @@ -116,7 +116,7 @@ } } - on(type: EventType | EventType[], callback: EventCallback) { + on(type: EventToAppType | EventToAppType[], callback: EventCallback) { if (Array.isArray(type)) { for (const e of type) { this.addEvent(e, callback); @@ -126,7 +126,7 @@ } } - private addEvent(type: EventType, callback: EventCallback) { + private addEvent(type: EventToAppType, callback: EventCallback) { if (this.events[type].indexOf(callback) === -1) { this.events[type].push(callback); } diff --git a/src/app/features/spaces/contents/edit-document/edit-document.component.ts b/src/app/features/spaces/contents/edit-document/edit-document.component.ts index da51f0d1..191932ea 100644 --- a/src/app/features/spaces/contents/edit-document/edit-document.component.ts +++ b/src/app/features/spaces/contents/edit-document/edit-document.component.ts @@ -356,67 +356,72 @@ export class EditDocumentComponent implements OnInit, DirtyFormGuardComponent { if (event.isTrusted && event.data && event.data.owner === 'LOCALESS') { console.log('MessageEvent'); console.log(event); - // find element - const contentIdIteration = ObjectUtils.clone(this.documentIdsTree.get(event.data.id)) || []; - // Iterative traversing content and validating fields. - let selectedContentId = contentIdIteration.shift(); - // check Root Schema - if (this.documentData._id === selectedContentId) { - console.log('root', selectedContentId); - const schema = this.schemaMapById.get(this.documentData.schema); - if (schema) { - this.navigateToSchemaBackwards({ - contentId: this.documentData._id, - schemaName: this.documentData.schema, - fieldName: '', - }); - selectedContentId = contentIdIteration.shift(); + const { id, type } = event.data; + if (type === 'selectSchema') { + // find element + const contentIdIteration = ObjectUtils.clone(this.documentIdsTree.get(id)) || []; + // Iterative traversing content and validating fields. + let selectedContentId = contentIdIteration.shift(); + // check Root Schema + if (this.documentData._id === selectedContentId) { + console.log('root', selectedContentId); + const schema = this.schemaMapById.get(this.documentData.schema); + if (schema) { + this.navigateToSchemaBackwards({ + contentId: this.documentData._id, + schemaName: this.documentData.schema, + fieldName: '', + }); + selectedContentId = contentIdIteration.shift(); + } else { + console.log(`schema ${this.selectedDocumentData.schema} not-found`); + return; + } } else { - console.log(`schema ${this.selectedDocumentData.schema} not-found`); + console.log(`root id ${selectedContentId} not-found`); return; } - } else { - console.log(`root id ${selectedContentId} not-found`); - return; - } - // Navigate to child - while (selectedContentId) { - console.log('child', selectedContentId); - const schema = this.schemaMapById.get(this.selectedDocumentData.schema); - if (schema && (schema.type === SchemaType.ROOT || schema.type === SchemaType.NODE)) { - schemaFieldsLoop: for (const field of schema.fields || []) { - if (field.kind === SchemaFieldKind.SCHEMA) { - const cData: ContentData | undefined = this.selectedDocumentData[field.name]; - if (cData && cData._id === selectedContentId) { - this.navigateToSchemaForwards({ - contentId: selectedContentId!, - fieldName: field.name, - schemaName: cData.schema, - }); - break; - } - } - if (field.kind === SchemaFieldKind.SCHEMAS) { - const cData: ContentData[] | undefined = this.selectedDocumentData[field.name]; - for (const content of cData || []) { - if (content._id === selectedContentId) { + // Navigate to child + while (selectedContentId) { + console.log('child', selectedContentId); + const schema = this.schemaMapById.get(this.selectedDocumentData.schema); + if (schema && (schema.type === SchemaType.ROOT || schema.type === SchemaType.NODE)) { + schemaFieldsLoop: for (const field of schema.fields || []) { + if (field.kind === SchemaFieldKind.SCHEMA) { + const cData: ContentData | undefined = this.selectedDocumentData[field.name]; + if (cData && cData._id === selectedContentId) { this.navigateToSchemaForwards({ - contentId: selectedContentId, + contentId: selectedContentId!, fieldName: field.name, - schemaName: content.schema, + schemaName: cData.schema, }); - break schemaFieldsLoop; + break; + } + } + if (field.kind === SchemaFieldKind.SCHEMAS) { + const cData: ContentData[] | undefined = this.selectedDocumentData[field.name]; + for (const content of cData || []) { + if (content._id === selectedContentId) { + this.navigateToSchemaForwards({ + contentId: selectedContentId, + fieldName: field.name, + schemaName: content.schema, + }); + break schemaFieldsLoop; + } } } } + selectedContentId = contentIdIteration.shift(); + } else { + console.log(`schema ${this.selectedDocumentData.schema} not-found`); + return; } - selectedContentId = contentIdIteration.shift(); - } else { - console.log(`schema ${this.selectedDocumentData.schema} not-found`); - return; } + console.log(`id ${selectedContentId} not-found`); + } else if (type === 'hoverSchema') { + console.log(`hoverSchema not implemented`); } - console.log(`id ${selectedContentId} not-found`); } } @@ -424,6 +429,7 @@ export class EditDocumentComponent implements OnInit, DirtyFormGuardComponent { console.log('onFormChange', event); this.sendEventToApp({ type: 'input', data: this.documentData }); } + onStructureChange(event: string) { console.log('onStructureChange', event); this.generateDocumentIdsTree(); diff --git a/src/app/features/spaces/contents/edit-document/edit-document.model.ts b/src/app/features/spaces/contents/edit-document/edit-document.model.ts index 51692d7d..11c21cf1 100644 --- a/src/app/features/spaces/contents/edit-document/edit-document.model.ts +++ b/src/app/features/spaces/contents/edit-document/edit-document.model.ts @@ -6,14 +6,12 @@ export interface SchemaPathItem { // Events -// Event emitted by app in IFrame -export interface EventToEditor { - owner: string; - id: string; -} +// Event emitted to Visual Editor +export type EventToEditorType = 'selectSchema' | 'hoverSchema'; +export type EventToEditor = { owner: 'LOCALESS'; type: EventToEditorType; id: string }; -// Event emitted by Editor to app in IFrame -export type EventType = 'save' | 'publish' | 'input' | 'change' | 'enterSchema' | 'hoverSchema'; +// Event emitted by Visual Editor +export type EventToAppType = 'save' | 'publish' | 'input' | 'change' | 'enterSchema' | 'hoverSchema'; export type EventToApp = | { type: 'save' | 'publish' } | { type: 'input' | 'change'; data: any } diff --git a/src/app/shared/directives/image-preview.directive.ts b/src/app/shared/directives/image-preview.directive.ts index 308def02..5ddb4813 100644 --- a/src/app/shared/directives/image-preview.directive.ts +++ b/src/app/shared/directives/image-preview.directive.ts @@ -8,7 +8,7 @@ export class ImagePreviewDirective { constructor(private hostElement: ElementRef) {} - @HostListener('mouseover') + @HostListener('mouseenter') public onMouseOver() { if (this.hostElement.nativeElement.parentElement) { this.hostElement.nativeElement.parentElement.style.overflow = 'visible'; @@ -19,7 +19,7 @@ export class ImagePreviewDirective { this.hostElement.nativeElement.style.transition = 'transform 0.3s ease-in-out'; } - @HostListener('mouseout') + @HostListener('mouseleave') public onMouseOut() { this.hostElement.nativeElement.style.transform = 'scale(1)'; this.hostElement.nativeElement.style.zIndex = ''; diff --git a/src/scripts/sync-v1.js b/src/scripts/sync-v1.js index ff3ee400..6075d49f 100644 --- a/src/scripts/sync-v1.js +++ b/src/scripts/sync-v1.js @@ -20,25 +20,22 @@ } function markVisualEditorElements() { document.querySelectorAll('[data-ll-id]').forEach(element => { + const id = element.getAttribute('data-ll-id'); if (element.offsetHeight < 5) { element.style.minHeight = '5px'; } element.addEventListener('click', event => { event.stopPropagation(); - const id = element.getAttribute('data-ll-id'); - if (id) { - // Send Message with Selected Schema - sendEditorData({ - owner: 'LOCALESS', - id: id, - }); - } + // Send Message with Selected Schema + sendEditorData({ owner: 'LOCALESS', type: 'selectSchema', id: id }); }); element.addEventListener('mouseenter', event => { - console.log('mouseenter', event); + // Send Message with Hover Schema + sendEditorData({ owner: 'LOCALESS', type: 'hoverSchema', id: id }); + // TODO Create Overlay }); element.addEventListener('mouseleave', event => { - console.log('mouseleave', event); + // TODO Remove Overlay }); }); }