Ensure dspace.collection.css is being loaded for collections with it set

- Working collectionCSS style tag to head - Click on home clears the style - Click on another collection clears the style
alexklbuckley · Oct 13, 2024 · c263e25 · c263e25
1 parent 433c9cf
commit c263e25
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/app/collection-page/collection-form/collection-form.models.ts b/src/app/collection-page/collection-form/collection-form.models.ts
@@ -14,7 +14,7 @@ export const collectionFormEntityTypeSelectionConfig: DynamicSelectModelConfig<s
 export const administratorStyleFormModels: DynamicFormControlModel[] = [
   new DynamicTextAreaModel({
     id: 'css',
-    name: 'dc.collection.css',
+    name: 'dspace.collection.css',
     spellCheck: environment.form.spellCheck,
   }),
 ];

diff --git a/src/app/core/shared/collection.model.ts b/src/app/core/shared/collection.model.ts
@@ -122,7 +122,7 @@ export class Collection extends DSpaceObject implements ChildHALResource, Handle
    * Corresponds to the metadata field collection.css
    */
   get cssDisplay(): string {
-    return this.firstMetadataValue('collection.css');
+    return this.firstMetadataValue('dspace.collection.css');
   }
 
   getParentLinkKey(): keyof this['_links'] {

diff --git a/src/app/shared/theme-support/theme.service.ts b/src/app/shared/theme-support/theme.service.ts
@@ -1,4 +1,5 @@
-import { Injectable, Inject, Injector } from '@angular/core';
+import { Injectable, Inject, Injector, SecurityContext } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Store, createFeatureSelector, createSelector, select } from '@ngrx/store';
 import { BehaviorSubject, EMPTY, Observable, of as observableOf } from 'rxjs';
 import { ThemeState } from './theme.reducer';
@@ -43,6 +44,8 @@ export class ThemeService {
    */
   themes: Theme[];
 
+  sanitizedStyles: SafeStyle;
+
   /**
    * True if at least one theme depends on the route
    */
@@ -59,6 +62,7 @@ export class ThemeService {
     private router: Router,
     @Inject(DOCUMENT) private document: any,
     private collectionService: CollectionDataService,
+    private sanitizer: DomSanitizer,
   ) {
     // Create objects from the theme configs in the environment file
     this.themes = environment.themes.map((themeConfig: ThemeConfig) => themeFactory(themeConfig, injector));
@@ -307,7 +311,7 @@ export class ThemeService {
     const action$ = currentTheme$.pipe(
       switchMap((currentTheme: string) => {
         const snapshotWithData = this.findRouteData(activatedRouteSnapshot);
-
+	this.addCollectionCSSToHead('');
         if (this.hasDynamicTheme === true && isNotEmpty(this.themes)) {
           if (hasValue(snapshotWithData) && hasValue(snapshotWithData.data) && hasValue(snapshotWithData.data.dso)) {
             const dsoRD: RemoteData<DSpaceObject> = snapshotWithData.data.dso;
@@ -493,11 +497,24 @@ export class ThemeService {
    * Add collection.css to <head>
    */
   private addCollectionCSSToHead(css: string) {
+    // Clear collectionCSS style tag
+    if (hasValue(document.getElementById('collectionCSS'))) {
+      document.getElementById('collectionCSS').remove();
+    }
+
+    if (hasNoValue(css)) {
+      return;
+    }
+
+    // Add collectionCSS style tag
+    const sanitizedCSS = this.sanitizer.sanitize(SecurityContext.STYLE, css);
     const cssDisplay = css,
       head = document.head || document.getElementsByTagName('head')[0],
       style = document.createElement('style');
+
     head.appendChild(style);
     style.type = 'text/css';
+    style.id   = 'collectionCSS';
     style.appendChild(document.createTextNode(cssDisplay));
   }