d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Constructor, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
import { getElementOffset } from 'ngx-tethys/util';
import { takeUntil } from 'rxjs/operators';

import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';

import { ThyDropdownMenuItemDirective } from './dropdown-menu-item.directive';

export type ThyDropdownSubmenuDirection = 'left' | 'right' | 'auto';

type InnerDropdownSubmenuDirection = ThyDropdownSubmenuDirection | 'leftBottom' | 'rightBottom';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

const SUBMENU_CLASS_PREFIX = 'dropdown-submenu';

/**
 * 下拉子菜单
 * @name thy-dropdown-submenu,[thyDropdownSubmenu]
 * @order 40
 */
@Component({
    selector: '[thyDropdownSubmenu],thy-dropdown-submenu',
    template: '<ng-content></ng-content>',
    host: {
        class: 'dropdown-submenu'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true
})
export class ThyDropdownSubmenuComponent extends _MixinBase implements OnInit, OnDestroy {
    private direction: InnerDropdownSubmenuDirection = 'right';

    /**
     * 菜单方向
     * @type left | right | auto
     * @default right
     */
    @Input() set thyDirection(value: ThyDropdownSubmenuDirection) {
        this.direction = value;
    }

    constructor(private dropdownMenuItem: ThyDropdownMenuItemDirective, private elementRef: ElementRef<HTMLElement>) {
        super();
    }

    ngOnInit(): void {
        let direction = this.direction || 'right';
        this.updateClassByDirection(direction);
        this.dropdownMenuItem
            .bindMouseenterEvent()
            .pipe(takeUntil(this.ngUnsubscribe$))
            .subscribe(() => {
                if (this.direction === 'auto') {
                    const element = this.dropdownMenuItem.getElement();
                    const offset = getElementOffset(element);
                    if (document.documentElement.clientWidth < offset.left + offset.width + offset.width) {
                        direction = 'left';
                    } else {
                        direction = 'right';
                    }
                    this.updateClassByDirection(direction);
                }
                this.updateVerticalDirection(direction);
            });
    }

    private updateClassByDirection(direction: InnerDropdownSubmenuDirection) {
        this.dropdownMenuItem.updateClass([`${SUBMENU_CLASS_PREFIX}-${direction}`]);
    }

    private updateVerticalDirection(direction: InnerDropdownSubmenuDirection) {
        const submenuItems = this.elementRef.nativeElement.querySelectorAll('.dropdown-menu-item');
        if (submenuItems.length) {
            let submenuItemHeight = 0;
            submenuItems.forEach(item => (submenuItemHeight += item.clientHeight));
            if (
                document.documentElement.clientHeight - this.dropdownMenuItem.getElement().getBoundingClientRect().bottom <
                submenuItemHeight
            ) {
                direction = direction === 'left' ? 'leftBottom' : 'rightBottom';
                this.updateClassByDirection(direction);
            } else {
                this.updateClassByDirection(direction);
            }
        }
    }

    ngOnDestroy() {
        super.ngOnDestroy();
    }
}

1	import { Constructor, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
2	import { getElementOffset } from 'ngx-tethys/util';
3	import { takeUntil } from 'rxjs/operators';
4
5	import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
6
7	import { ThyDropdownMenuItemDirective } from './dropdown-menu-item.directive';	1✔
8		1✔
9	export type ThyDropdownSubmenuDirection = 'left' \| 'right' \| 'auto';
10
11	type InnerDropdownSubmenuDirection = ThyDropdownSubmenuDirection \| 'leftBottom' \| 'rightBottom';
12
13	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);
14		1✔
15	const SUBMENU_CLASS_PREFIX = 'dropdown-submenu';
16		×
17	/**
18	* 下拉子菜单
19	* @name thy-dropdown-submenu,[thyDropdownSubmenu]	×
20	* @order 40	×
21	*/	×
22	@Component({	×
23	selector: '[thyDropdownSubmenu],thy-dropdown-submenu',
24	template: '<ng-content></ng-content>',
25	host: {	×
26	class: 'dropdown-submenu'	×
27	},	×
28	changeDetection: ChangeDetectionStrategy.OnPush,
29	standalone: true
30	})
31	export class ThyDropdownSubmenuComponent extends _MixinBase implements OnInit, OnDestroy {	×
32	private direction: InnerDropdownSubmenuDirection = 'right';	×
33		×
34	/**	×
35	* 菜单方向	×
36	* @type left \| right \| auto
37	* @default right
38	*/	×
39	@Input() set thyDirection(value: ThyDropdownSubmenuDirection) {
40	this.direction = value;	×
41	}
42		×
43	constructor(private dropdownMenuItem: ThyDropdownMenuItemDirective, private elementRef: ElementRef<HTMLElement>) {
44	super();
45	}
46		×
47	ngOnInit(): void {
48	let direction = this.direction \|\| 'right';
49	this.updateClassByDirection(direction);	×
50	this.dropdownMenuItem	×
51	.bindMouseenterEvent()	×
52	.pipe(takeUntil(this.ngUnsubscribe$))	×
53	.subscribe(() => {	×
54	if (this.direction === 'auto') {
55	const element = this.dropdownMenuItem.getElement();	×
56	const offset = getElementOffset(element);	×
57	if (document.documentElement.clientWidth < offset.left + offset.width + offset.width) {
58	direction = 'left';
59	} else {	×
60	direction = 'right';
61	}
62	this.updateClassByDirection(direction);
63	}
64	this.updateVerticalDirection(direction);	×
65	});
66	}	1✔
67
68	private updateClassByDirection(direction: InnerDropdownSubmenuDirection) {
69	this.dropdownMenuItem.updateClass([`${SUBMENU_CLASS_PREFIX}-${direction}`]);
70	}	1✔
71
72	private updateVerticalDirection(direction: InnerDropdownSubmenuDirection) {
73	const submenuItems = this.elementRef.nativeElement.querySelectorAll('.dropdown-menu-item');
74	if (submenuItems.length) {	1✔
75	let submenuItemHeight = 0;
76	submenuItems.forEach(item => (submenuItemHeight += item.clientHeight));
77	if (
78	document.documentElement.clientHeight - this.dropdownMenuItem.getElement().getBoundingClientRect().bottom <
79	submenuItemHeight
80	) {
81	direction = direction === 'left' ? 'leftBottom' : 'rightBottom';
82	this.updateClassByDirection(direction);
83	} else {
84	this.updateClassByDirection(direction);
85	}
86	}
87	}
88
89	ngOnDestroy() {
90	super.ngOnDestroy();
91	}
92	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous