add a defaultEmptyComponent method for link and image directives

Sitecore · Oct 1, 2024 · 5cfb5fa · 5cfb5fa
1 parent c9c1dfd
commit 5cfb5fa
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 56 deletions.
diff --git a/packages/sitecore-jss-angular/src/components/base-field.directive.ts b/packages/sitecore-jss-angular/src/components/base-field.directive.ts
@@ -1,12 +1,4 @@
-import {
-  Directive,
-  Type,
-  ViewContainerRef,
-  EmbeddedViewRef,
-  TemplateRef,
-  Renderer2,
-  ElementRef,
-} from '@angular/core';
+import { Directive, Type, ViewContainerRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
 import { RenderingField } from './rendering-field';
 import { GenericFieldValue, isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
 import { FieldMetadataMarkerComponent } from './field-metadata-marker.component';
@@ -29,11 +21,7 @@ export abstract class BaseFieldDirective {
    */
   protected abstract defaultFieldEditingComponent: Type<unknown>;
 
-  constructor(
-    protected viewContainer: ViewContainerRef,
-    protected renderer: Renderer2, // Inject Renderer2 for DOM manipulation
-    protected elementRef: ElementRef
-  ) {}
+  constructor(protected viewContainer: ViewContainerRef) {}
 
   /**
    * Determines if directive should render the field as is
@@ -52,40 +40,7 @@ export abstract class BaseFieldDirective {
       if (this.emptyFieldEditingTemplate) {
         this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate);
       } else {
-        if (this.field?.metadata?.fieldType === 'Image') {
-          const img = this.renderer.createElement('img');
-
-          // Set image attributes
-          this.renderer.setAttribute(img, 'alt', '');
-          this.renderer.setAttribute(
-            img,
-            'src',
-            'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
-          );
-          this.renderer.setAttribute(img, 'class', 'scEmptyImage');
-          this.renderer.setStyle(img, 'min-width', '48px');
-          this.renderer.setStyle(img, 'min-height', '48px');
-          this.renderer.setStyle(img, 'max-width', '400px');
-          this.renderer.setStyle(img, 'max-height', '400px');
-          this.renderer.setStyle(img, 'cursor', 'pointer');
-
-          const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-          if (parentNode) {
-            this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement);
-          }
-        } else if (
-          this.field?.metadata?.fieldType === 'General Link' ||
-          this.field?.metadata?.fieldType === 'Single Line Text'
-        ) {
-          const span = this.renderer.createElement('span');
-
-          this.renderer.setAttribute(span, 'sc-default-empty-text-field-editing-placeholder', '');
-
-          const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-          if (parentNode) {
-            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-          }
-        }
+        this.viewContainer.createComponent(this.defaultFieldEditingComponent);
       }
       this.renderMetadata(MetadataKind.Close);
     }

diff --git a/packages/sitecore-jss-angular/src/components/date.directive.ts b/packages/sitecore-jss-angular/src/components/date.directive.ts
@@ -46,7 +46,7 @@ export class DateDirective extends BaseFieldDirective implements OnChanges {
     protected renderer: Renderer2,
     protected elementRef: ElementRef
   ) {
-    super(viewContainer, renderer, elementRef);
+    super(viewContainer);
     this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
   }
 

diff --git a/...core-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/...core-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
  * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields.
  */
 @Component({
-  selector: '[sc-default-empty-text-field-editing-placeholder]',
+  selector: 'sc-default-empty-text-field-editing-placeholder',
   template: '<span>[No text in field]</span>',
 })
 export class DefaultEmptyFieldEditingComponent {}
diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts
@@ -52,7 +52,7 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges {
     protected renderer: Renderer2,
     protected elementRef: ElementRef
   ) {
-    super(viewContainer, renderer, elementRef);
+    super(viewContainer);
     this.defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent;
   }
 
@@ -70,7 +70,11 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges {
 
   private updateView() {
     if (!this.shouldRender()) {
-      super.renderEmpty();
+      if (this.emptyFieldEditingTemplate) {
+        super.renderEmpty();
+      } else {
+        this.defaultEmptyFieldTemplate();
+      }
       return;
     }
 
@@ -114,6 +118,28 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges {
     }
   }
 
+  private defaultEmptyFieldTemplate() {
+    const img = this.renderer.createElement('img');
+    // Set image attributes
+    this.renderer.setAttribute(img, 'alt', '');
+    this.renderer.setAttribute(
+      img,
+      'src',
+      'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
+    );
+    this.renderer.setAttribute(img, 'class', 'scEmptyImage');
+    this.renderer.setStyle(img, 'min-width', '48px');
+    this.renderer.setStyle(img, 'min-height', '48px');
+    this.renderer.setStyle(img, 'max-width', '400px');
+    this.renderer.setStyle(img, 'max-height', '400px');
+    this.renderer.setStyle(img, 'cursor', 'pointer');
+
+    const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+    if (parentNode) {
+      this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement);
+    }
+  }
+
   private getImageAttrs(
     fieldAttrs: ImageFieldValue,
     parsedAttrs: { [attr: string]: unknown },

diff --git a/packages/sitecore-jss-angular/src/components/link.directive.ts b/packages/sitecore-jss-angular/src/components/link.directive.ts
@@ -40,7 +40,7 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges {
     protected renderer: Renderer2,
     protected elementRef: ElementRef
   ) {
-    super(viewContainer, renderer, elementRef);
+    super(viewContainer);
     this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
   }
 
@@ -112,7 +112,11 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges {
       this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
     } else {
       if (!this.shouldRender()) {
-        super.renderEmpty();
+        if (this.emptyFieldEditingTemplate) {
+          super.renderEmpty();
+        } else {
+          this.defaultEmptyFieldTemplate();
+        }
         return;
       }
 
@@ -131,6 +135,16 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges {
     }
   }
 
+  private defaultEmptyFieldTemplate() {
+    const emptyElement = this.renderer.createElement('span');
+    emptyElement.textContent = '[No text in field]';
+
+    const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+    if (parentNode) {
+      this.renderer.insertBefore(parentNode, emptyElement, this.elementRef.nativeElement);
+    }
+  }
+
   private renderInlineWrapper(editableFirstPart: string, editableLastPart: string) {
     const span: HTMLSpanElement = this.renderer.createElement('span');
     span.className = 'sc-link-wrapper';

diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts
@@ -41,7 +41,7 @@ export class RichTextDirective extends BaseFieldDirective implements OnChanges {
     protected renderer: Renderer2,
     protected elementRef: ElementRef
   ) {
-    super(viewContainer, renderer, elementRef);
+    super(viewContainer);
     this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
   }
 

diff --git a/packages/sitecore-jss-angular/src/components/text.directive.ts b/packages/sitecore-jss-angular/src/components/text.directive.ts
@@ -40,7 +40,7 @@ export class TextDirective extends BaseFieldDirective implements OnChanges {
     protected renderer: Renderer2,
     protected elementRef: ElementRef
   ) {
-    super(viewContainer, renderer, elementRef);
+    super(viewContainer);
     this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
   }