responsive.directive.ts ➔ inserted - Code Metrics - Inspection of "Merge branch 'next-26008/add-tests-for-directives'..." - shopware/platform - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — trunk ( 54c4dd...cf5ce9 )

by Christian

created 2023-04-18 12:46 UTC

responsive.directive.ts ➔ inserted B

↳ Parent: src/Administration/Resources/app/administration/src/app/directive/responsive.directive.ts

Complexity

Conditions

Size

Total Lines	24
Code Lines	20

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	7
eloc	20
dl	0
loc	24
rs	8
c	0
b	0
f	0

import type { DirectiveBinding } from 'vue/types/options';

interface ResponsiveDirectiveBinding extends DirectiveBinding {
    value?: {
        [key: string]: ((elementSizeValues: DOMRectReadOnly) => boolean) | number;
    }
}

/**
 * @package admin
 *
 * @deprecated tag:v6.6.0 - Will be private
 * Directive for responsive element classes
 *
 * Usage:
 * v-responsive="{ 'is--compact': el => el.width <= 1620, timeout: 200 }"
 * Explanation:
 *  - Apply class (in this case: 'is--compact') when the width of the element is smaller than 1620px.
 *  - timeout: Sets the duration on how much the throttle should wait.
 */

Shopware.Directive.register('responsive', {
    inserted(el: HTMLElement, binding: ResponsiveDirectiveBinding) {
        const timeout = typeof binding.value?.timeout === 'number' ? binding.value.timeout : 200;

        const handleResize: ResizeObserverCallback = Shopware.Utils.throttle((entries: ResizeObserverEntry[]) => {
            entries.forEach(entry => {
                const elementSizeValues = entry.contentRect;

                Object.entries(binding.value ?? {}).forEach(([breakpointClass, breakpointCallback]) => {
                    if (typeof breakpointCallback !== 'function') {
                        return;
                    }

                    if (breakpointCallback(elementSizeValues)) {
                        el.classList.add(breakpointClass);
                        return;
                    }

                    el.classList.remove(breakpointClass);
                });
            });
        }, timeout);

        const observer = new ResizeObserver(handleResize);
        observer.observe(el);
    },
});



1			import type { DirectiveBinding } from 'vue/types/options';
2
3			interface ResponsiveDirectiveBinding extends DirectiveBinding {
4			value?: {
5			[key: string]: ((elementSizeValues: DOMRectReadOnly) => boolean) \| number;
6			}
7			}
8
9			/**
10			* @package admin
11			*
12			* @deprecated tag:v6.6.0 - Will be private
13			* Directive for responsive element classes
14			*
15			* Usage:
16			* v-responsive="{ 'is--compact': el => el.width <= 1620, timeout: 200 }"
17			* Explanation:
18			* - Apply class (in this case: 'is--compact') when the width of the element is smaller than 1620px.
19			* - timeout: Sets the duration on how much the throttle should wait.
20			*/
21
22			Shopware.Directive.register('responsive', {
23			inserted(el: HTMLElement, binding: ResponsiveDirectiveBinding) {
24			const timeout = typeof binding.value?.timeout === 'number' ? binding.value.timeout : 200;
25
26			const handleResize: ResizeObserverCallback = Shopware.Utils.throttle((entries: ResizeObserverEntry[]) => {
27			entries.forEach(entry => {
28			const elementSizeValues = entry.contentRect;
29
30			Object.entries(binding.value ?? {}).forEach(([breakpointClass, breakpointCallback]) => {
31			if (typeof breakpointCallback !== 'function') {
32			return;
33			}
34
35			if (breakpointCallback(elementSizeValues)) {
36			el.classList.add(breakpointClass);
37			return;
38			}
39
40			el.classList.remove(breakpointClass);
41			});
42			});
43			}, timeout);
44
45			const observer = new ResizeObserver(handleResize);
46			observer.observe(el);
47			},
48			});
49
50

shopware / platform

Push — trunk ( 54c4dd...cf5ce9 )

responsive.directive.ts ➔ inserted B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like