Improve Sync Script

Lessify · Jan 9, 2025 · b32969c · b32969c
1 parent ca71859
commit b32969c
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 92 deletions.
diff --git 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<HTMLElement>('[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<EventType, EventCallback[]> = {
+      events: Record<EventToAppType, EventCallback[]> = {
         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
@@ -356,74 +356,80 @@ 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`);
     }
   }
 
   onFormChange(event: string) {
     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
@@ -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
@@ -8,7 +8,7 @@ export class ImagePreviewDirective {
 
   constructor(private hostElement: ElementRef<HTMLImageElement>) {}
 
-  @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
@@ -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
             });
         });
     }