Use CSS variables in TypeScript

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts

@@ -6,7 +6,7 @@ import { ScriptDataService } from '../../core/data/processes/script-data.service
 import { AdminSidebarComponent } from './admin-sidebar.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { AuthService } from '../../core/auth/auth.service';

src/app/admin/admin-sidebar/admin-sidebar.component.ts

@@ -5,7 +5,7 @@ import { AuthService } from '../../core/auth/auth.service';
 import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { ActivatedRoute } from '@angular/router';
@@ -69,7 +69,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
+    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { of as observableOf } from 'rxjs';
 import { Component } from '@angular/core';

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts

@@ -2,7 +2,7 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { bgColor } from '../../../shared/animations/bgColor';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
@@ -65,7 +65,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)

src/app/app.component.spec.ts

@@ -19,7 +19,7 @@ import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.ser
 import { AuthServiceMock } from './shared/mocks/auth.service.mock';
 import { AuthService } from './core/auth/auth.service';
 import { MenuService } from './shared/menu/menu.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
 import { MenuServiceStub } from './shared/testing/menu-service.stub';
 import { HostWindowService } from './shared/host-window.service';

src/app/app.component.ts

@@ -25,7 +25,7 @@ import { HostWindowState } from './shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
 import { isAuthenticationBlocking } from './core/auth/selectors';
 import { AuthService } from './core/auth/auth.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
 import { ThemeService } from './shared/theme-support/theme.service';
@@ -110,18 +110,8 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   private storeCSSVariables() {
-    this.cssService.addCSSVariable('xlMin', '1200px');
-    this.cssService.addCSSVariable('mdMin', '768px');
-    this.cssService.addCSSVariable('lgMin', '576px');
-    this.cssService.addCSSVariable('smMin', '0');
-    this.cssService.addCSSVariable('adminSidebarActiveBg', '#0f1b28');
-    this.cssService.addCSSVariable('sidebarItemsWidth', '250px');
-    this.cssService.addCSSVariable('collapsedSidebarWidth', '53.234px');
-    this.cssService.addCSSVariable('totalSidebarWidth', '303.234px');
-    // const vars = variables.locals || {};
-    // Object.keys(vars).forEach((name: string) => {
-    //   this.cssService.addCSSVariable(name, vars[name]);
-    // })
+    this.cssService.clearCSSVariables();
+    this.cssService.addCSSVariables(this.cssService.getCSSVariablesFromStylesheets(this.document));
   }
 
   ngAfterViewInit() {

src/app/app.reducer.ts

@@ -35,7 +35,7 @@ import {
   ObjectSelectionListState,
   objectSelectionReducer
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
+import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';
 
 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
 import {

src/app/core/core.module.ts

@@ -23,7 +23,6 @@ import { NotificationsService } from '../shared/notifications/notifications.serv
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { UploaderService } from '../shared/uploader/uploader.service';
 import { SectionFormOperationsService } from '../submission/sections/form/section-form-operations.service';
@@ -257,7 +256,6 @@ const PROVIDERS = [
   DefaultChangeAnalyzer,
   ArrayMoveChangeAnalyzer,
   ObjectSelectService,
-  CSSVariableService,
   MenuService,
   ObjectUpdatesService,
   SearchService,

src/app/root/root.component.spec.ts

@@ -18,7 +18,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { RouterMock } from '../shared/mocks/router.mock';
 import { MockActivatedRoute } from '../shared/mocks/active-router.mock';
 import { MenuService } from '../shared/menu/menu.service';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../shared/testing/css-variable-service.stub';
 import { HostWindowService } from '../shared/host-window.service';
 import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';

src/app/root/root.component.ts

@@ -11,7 +11,7 @@ import { MetadataService } from '../core/metadata/metadata.service';
 import { HostWindowState } from '../shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from '../core/services/window.service';
 import { AuthService } from '../core/auth/auth.service';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { ThemeConfig } from '../../config/theme.model';
@@ -65,8 +65,8 @@ export class RootComponent implements OnInit {
   ngOnInit() {
     this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
 
-    this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
-    this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
+    this.collapsedSidebarWidth = this.cssService.getVariable('--ds-collapsed-sidebar-width');
+    this.totalSidebarWidth = this.cssService.getVariable('--ds-total-sidebar-width');
 
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
     this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])

src/app/shared/host-window.service.ts

@@ -7,7 +7,7 @@ import { createSelector, select, Store } from '@ngrx/store';
 
 import { hasValue } from './empty.util';
 import { AppState } from '../app.reducer';
-import { CSSVariableService } from './sass-helper/sass-helper.service';
+import { CSSVariableService } from './sass-helper/css-variable.service';
 
 export enum WidthCategory {
   XS,
@@ -31,10 +31,10 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-      this.breakPoints.XL_MIN = parseInt(variables.xlMin, 10);
-      this.breakPoints.LG_MIN = parseInt(variables.lgMin, 10);
-      this.breakPoints.MD_MIN = parseInt(variables.mdMin, 10);
-      this.breakPoints.SM_MIN = parseInt(variables.smMin, 10);
+      this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
+      this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
+      this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
+      this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
     });
   }
 

src/app/shared/key-value-pair.model.ts

@@ -0,0 +1,4 @@
+export interface KeyValuePair<K, V> {
+  key: K;
+  value: V;
+}

src/app/shared/sass-helper/sass-helper.actions.ts → src/app/shared/sass-helper/css-variable.actions.ts

@@ -1,5 +1,7 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../ngrx/type';
+import { KeyValuePair } from '../key-value-pair.model';
 
 /**
  * For each action type in an action group, make a simple
@@ -11,6 +13,8 @@ import { type } from '../ngrx/type';
  */
 export const CSSVariableActionTypes = {
   ADD: type('dspace/css-variables/ADD'),
+  ADD_ALL: type('dspace/css-variables/ADD_ALL'),
+  CLEAR: type('dspace/css-variables/CLEAR'),
 };
 
 export class AddCSSVariableAction implements Action {
@@ -24,5 +28,17 @@ export class AddCSSVariableAction implements Action {
     this.payload = {name, value};
   }
 }
+export class AddAllCSSVariablesAction implements Action {
+  type = CSSVariableActionTypes.ADD_ALL;
+  payload: KeyValuePair<string, string>[];
 
-export type CSSVariableAction = AddCSSVariableAction;
+  constructor(variables: KeyValuePair<string, string>[]) {
+    this.payload = variables;
+  }
+}
+
+export class ClearCSSVariablesAction implements Action {
+  type = CSSVariableActionTypes.CLEAR;
+}
+
+export type CSSVariableAction = AddCSSVariableAction | AddAllCSSVariablesAction | ClearCSSVariablesAction;

src/app/shared/sass-helper/css-variable.reducer.ts

@@ -0,0 +1,30 @@
+import { CSSVariableAction, CSSVariableActionTypes } from './css-variable.actions';
+import { KeyValuePair } from '../key-value-pair.model';
+
+export interface CSSVariablesState {
+  [name: string]: string;
+}
+
+const initialState: CSSVariablesState = Object.create({});
+
+/**
+ * Reducer that handles the state of CSS variables in the store
+ * @param state The current state of the store
+ * @param action The action to apply onto the current state of the store
+ */
+export function cssVariablesReducer(state = initialState, action: CSSVariableAction): CSSVariablesState {
+  switch (action.type) {
+    case CSSVariableActionTypes.ADD: {
+      const variable = action.payload;
+      return Object.assign({}, state, { [variable.name]: variable.value });
+    } case CSSVariableActionTypes.ADD_ALL: {
+      const variables = action.payload;
+      return Object.assign({}, state, ...variables.map(({ key, value }: KeyValuePair<string, string>) => {return {[key]: value};}));
+    } case CSSVariableActionTypes.CLEAR: {
+      return initialState;
+    }
+    default: {
+      return state;
+    }
+  }
+}

src/app/shared/sass-helper/css-variable.service.spec.ts

@@ -0,0 +1,78 @@
+import { TestBed } from '@angular/core/testing';
+import { CSSVariableService } from './css-variable.service';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { buildPaginatedList } from '../../core/data/paginated-list.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { KeyValuePair } from '../key-value-pair.model';
+
+describe('CSSVariableService', () => {
+  let store: MockStore;
+
+  let service: CSSVariableService;
+  let initialState;
+  const varKey1 = '--test-1';
+  const varValue1 = 'test-value-1';
+  const varKey2 = '--test-2';
+  const varValue2 = 'test-value-2';
+  const varKey3 = '--test-3';
+  const varValue3 = 'test-value-3';
+  const queryInAll = 'test';
+  const queryFor3 = '3';
+
+  function init() {
+    initialState = {
+      ['cssVariables']: {
+        [varKey1]: varValue1,
+        [varKey2]: varValue2,
+        [varKey3]: varValue3,
+      }
+    };
+  }
+
+  beforeEach(() => {
+    init();
+    TestBed.configureTestingModule({
+      providers: [
+        CSSVariableService,
+        provideMockStore({ initialState }),
+      ],
+    });
+    service = TestBed.inject(CSSVariableService as any);
+    store = TestBed.inject(MockStore as any);
+  });
+
+  it('should create', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('searchVariable', () => {
+    it('should return the right keys and variables in a paginated list for query that returns all 3 results', () => {
+      const currentPage = 1;
+      const pageSize = 5;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 1, totalElements: 3 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey1, value: varValue1 }, { key: varKey2, value: varValue2 }, { key: varKey3, value: varValue3 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryInAll, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+
+    it('should return the right keys and variables in a paginated list for query that returns only the 3rd results', () => {
+      const currentPage = 1;
+      const pageSize = 5;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 1, totalElements: 1 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey3, value: varValue3 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryFor3, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+
+    it('should return the right keys and variables in a paginated list that\'s not longer than the page size', () => {
+      const currentPage = 1;
+      const pageSize = 2;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 2, totalElements: 3 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey1, value: varValue1 }, { key: varKey2, value: varValue2 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryInAll, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+  });
+
+});