Skip to content

Commit

Permalink
feat(cdk): add tuiInjectDocElement
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode committed Oct 2, 2024
1 parent c1a6653 commit d8dc2b1
Show file tree
Hide file tree
Showing 7 changed files with 22 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
CdkVirtualForOf,
CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {AsyncPipe, DOCUMENT, NgForOf, NgIf} from '@angular/common';
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import type {AfterViewInit} from '@angular/core';
import {
ChangeDetectionStrategy,
Expand Down Expand Up @@ -36,6 +36,7 @@ import {
import {TuiMapperPipe} from '@taiga-ui/cdk/pipes/mapper';
import {TUI_IS_E2E, TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
import type {TuiBooleanHandler, TuiMapper} from '@taiga-ui/cdk/types';
import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom';
import {TuiButton} from '@taiga-ui/core/components/button';
import {TuiLink} from '@taiga-ui/core/components/link';
import {TuiMonthPipe} from '@taiga-ui/core/pipes/month';
Expand Down Expand Up @@ -126,7 +127,7 @@ export class TuiMobileCalendar implements AfterViewInit {
private activeYear = 0;
private activeMonth = 0;
private readonly destroyRef = inject(DestroyRef);
private readonly doc = inject(DOCUMENT);
private readonly documentElement = tuiInjectDocElement();
private readonly speed = inject(TUI_ANIMATIONS_SPEED);
private readonly ngZone = inject(NgZone);

Expand Down Expand Up @@ -222,7 +223,7 @@ export class TuiMobileCalendar implements AfterViewInit {
}

protected get yearWidth(): number {
return this.doc.documentElement.clientWidth / YEARS_IN_ROW;
return this.documentElement.clientWidth / YEARS_IN_ROW;
}

protected onClose(): void {
Expand Down
7 changes: 3 additions & 4 deletions projects/cdk/services/theme-color.service.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {DOCUMENT} from '@angular/common';
import {inject, Injectable} from '@angular/core';
import {Meta} from '@angular/platform-browser';
import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils';
import {tuiCreateTokenFromFactory, tuiInjectDocElement} from '@taiga-ui/cdk/utils';

export const TUI_THEME_COLOR = tuiCreateTokenFromFactory<string>(
() => inject(Meta).getTag('name="theme-color"')?.content ?? '',
Expand All @@ -16,8 +15,8 @@ interface TuiThemeColor {
providedIn: 'root',
})
export class TuiThemeColorService implements TuiThemeColor {
private readonly documentElement = tuiInjectDocElement();
private readonly current = inject(TUI_THEME_COLOR);
private readonly doc = inject(DOCUMENT);
private readonly meta = inject(Meta);

public get color(): string {
Expand All @@ -26,6 +25,6 @@ export class TuiThemeColorService implements TuiThemeColor {

public set color(content: string) {
this.meta.updateTag({name: 'theme-color', content});
this.doc.documentElement.style.setProperty('--tui-theme-color', content);
this.documentElement.style.setProperty('--tui-theme-color', content);
}
}
1 change: 1 addition & 0 deletions projects/cdk/utils/dom/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export * from './get-element-obscurers';
export * from './get-element-offset';
export * from './get-element-point';
export * from './get-selected-text';
export * from './inject-document-element';
export * from './inject-element';
export * from './is-current-target';
export * from './is-element-editable';
Expand Down
6 changes: 6 additions & 0 deletions projects/cdk/utils/dom/inject-document-element.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {DOCUMENT} from '@angular/common';
import {inject} from '@angular/core';

export function tuiInjectDocElement(): HTMLElement {
return inject(DOCUMENT).documentElement;
}
5 changes: 3 additions & 2 deletions projects/core/components/root/root.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
import {DOCUMENT, NgIf} from '@angular/common';
import {NgIf} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -14,6 +14,7 @@ import {TUI_VERSION} from '@taiga-ui/cdk/constants';
import {TuiPlatform} from '@taiga-ui/cdk/directives/platform';
import {tuiWatch, tuiZonefreeScheduler} from '@taiga-ui/cdk/observables';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom';
import {TuiAlerts} from '@taiga-ui/core/components/alert';
import {TUI_DIALOGS, TuiDialogs} from '@taiga-ui/core/components/dialog';
import {TuiScrollControls} from '@taiga-ui/core/components/scrollbar';
Expand Down Expand Up @@ -68,7 +69,7 @@ export class TuiRoot {
);

constructor() {
inject(DOCUMENT).defaultView?.document.documentElement.setAttribute(
tuiInjectDocElement().setAttribute(
'data-tui-theme',
inject(TUI_THEME).toLowerCase(),
);
Expand Down
6 changes: 3 additions & 3 deletions projects/core/tokens/scroll-ref.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {DOCUMENT} from '@angular/common';
import {ElementRef, inject} from '@angular/core';
import {ElementRef} from '@angular/core';
import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom';
import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils/miscellaneous';

export const TUI_SCROLL_REF = tuiCreateTokenFromFactory(
() => new ElementRef(inject(DOCUMENT).documentElement),
() => new ElementRef(tuiInjectDocElement()),
);
4 changes: 2 additions & 2 deletions projects/demo/src/modules/app/search/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {DOCUMENT} from '@angular/common';
import {
afterNextRender,
ChangeDetectionStrategy,
Expand All @@ -7,6 +6,7 @@ import {
inject,
ViewEncapsulation,
} from '@angular/core';
import {tuiInjectDocElement} from '@taiga-ui/cdk';
import {TUI_DARK_MODE} from '@taiga-ui/core';

import {SEARCH_CONFIG} from './env';
Expand Down Expand Up @@ -47,7 +47,7 @@ export class TuiAlgoliaSearch {
}

private setSearchDocDarkMode(): void {
const documentElement = inject(DOCUMENT).defaultView?.document.documentElement;
const documentElement = tuiInjectDocElement();
const darkMode = inject(TUI_DARK_MODE);

effect(() => {
Expand Down

0 comments on commit d8dc2b1

Please sign in to comment.