9029489818

Committed 10 May 2024 08:27AM UTC coverage: 63.302% (-0.02%) from 63.325%

Build # 9029489818

Build Type

Pull #80

github

Committed by

web-flow

Commit Message

Merge 841d58ba8 into a436a3918

Pull Request Pull Request #80: feat: the logo can be hidden in the left/right

Run Details

1346 of 1498 branches covered (89.85%)

Branch coverage included in aggregate %.

50 of 87 new or added lines in 2 files covered. (57.47%)

8 existing lines in 1 file now uncovered.

5352 of 9083 relevant lines covered (58.92%)

30.92 hits per line

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

76.5

/packages/page-spy-browser/src/helpers/moveable.ts

export type UElement = HTMLElement & {
  isMoveEvent: boolean;
  isHidden: boolean;
  disableHidden: boolean;
};

const STICKY_RADIUS = '50%';
const FULLY_RADIUS = '100%';

function getPosition(evt: TouchEvent | MouseEvent): Touch | MouseEvent {
  /* c8 ignore next 3 */
  if (window.TouchEvent && evt instanceof TouchEvent) {
    return evt.touches[0];
  }
  return evt as MouseEvent;
}

/* eslint-disable no-param-reassign */
export function moveable(el: UElement) {
  let hiddenTimer: ReturnType<typeof setTimeout> | null;
  let rect: DOMRect;
  const critical = {
    xAxis: 0,
    yAxis: 0,
  };
  const touch = { x: 0, y: 0 };
  function handleHidden() {
    // 第一时间计算 el.isHidden，保证点击显示弹窗行为正常
    const { left, top } = el.getBoundingClientRect();
    if (left >= 0 && left <= critical.xAxis) {
      el.isHidden = false;
    }

    if (hiddenTimer) {
      clearTimeout(hiddenTimer);
    }
    hiddenTimer = setTimeout(() => {
      hiddenTimer = null;
      if (el.disableHidden) return;

      if (left <= 0) {
        el.classList.add('hidden-in-left');
      } else if (left >= critical.xAxis) {
        el.classList.add('hidden-in-right');
      }

      if (top <= 0) {
        el.classList.add('hidden-in-top');
      } else if (top >= critical.yAxis) {
        el.classList.add('hidden-in-bottom');
      }
      el.isHidden = true;
    }, 1000);
  }
  function move(evt: TouchEvent | MouseEvent) {
    evt.preventDefault();
    (el as UElement).isMoveEvent = true;
    const { clientX, clientY } = getPosition(evt);
    const diffX = clientX - touch.x;
    const diffY = clientY - touch.y;
    let resultX = rect.x + diffX;
    /* c8 ignore start */
    if (resultX <= 0) {
      resultX = 0;
      el.style.setProperty('--left-radius', STICKY_RADIUS);
    } else if (resultX >= critical.xAxis) {
      resultX = critical.xAxis;
      el.style.setProperty('--right-radius', STICKY_RADIUS);
    } else {
      el.style.setProperty('--left-radius', FULLY_RADIUS);
      el.style.setProperty('--right-radius', FULLY_RADIUS);
    }
    let resultY = rect.y + diffY;
    if (resultY <= 0) {
      resultY = 0;
      el.style.setProperty('--top-radius', STICKY_RADIUS);
    } else if (resultY > critical.yAxis) {
      resultY = critical.yAxis;
      el.style.setProperty('--bottom-radius', STICKY_RADIUS);
    } else {
      el.style.setProperty('--top-radius', FULLY_RADIUS);
      el.style.setProperty('--bottom-radius', FULLY_RADIUS);
    }
    /* c8 ignore stop */

    el.style.left = `${resultX}px`;
    el.style.top = `${resultY}px`;
  }
  function end() {
    touch.x = 0;
    touch.y = 0;
    handleHidden();
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);

    document.removeEventListener('touchmove', move);
    document.removeEventListener('touchend', end);
  }
  function start(evt: TouchEvent | MouseEvent) {
    evt.preventDefault();
    if (hiddenTimer) {
      clearTimeout(hiddenTimer);
    }
    if (el.isHidden) {
      el.classList.remove(
        'hidden-in-top',
        'hidden-in-right',
        'hidden-in-bottom',
        'hidden-in-left',
      );
    }
    el.isMoveEvent = false;
    rect = el.getBoundingClientRect();
    critical.xAxis = window.innerWidth - rect.width;
    critical.yAxis = window.innerHeight - rect.height;

    const { clientX, clientY } = getPosition(evt);
    touch.x = clientX;
    touch.y = clientY;
    document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);

    document.addEventListener('touchmove', move, {
      capture: false,
      passive: false,
    });
    document.addEventListener('touchend', end, false);
  }

  el.addEventListener('mousedown', start, false);
  el.addEventListener('touchstart', start, { capture: false, passive: false });
  el.addEventListener(
    'mouseover',
    () => {
      el.disableHidden = true;
      if (el.isHidden) {
        el.classList.remove(
          'hidden-in-top',
          'hidden-in-right',
          'hidden-in-bottom',
          'hidden-in-left',
        );
      }
    },
    false,
  );
  el.addEventListener(
    'mouseleave',
    () => {
      el.disableHidden = false;
      handleHidden();
    },
    false,
  );
}

1	export type UElement = HTMLElement & {	2✔
2	isMoveEvent: boolean;	2✔
3	isHidden: boolean;	2✔
4	disableHidden: boolean;	2✔
5	};	2✔
6		2✔
7	const STICKY_RADIUS = '50%';	2✔
8	const FULLY_RADIUS = '100%';	2✔
9		2✔
10	function getPosition(evt: TouchEvent \| MouseEvent): Touch \| MouseEvent {	4✔
11	/* c8 ignore next 3 */	2✔
12	if (window.TouchEvent && evt instanceof TouchEvent) {	2✔
13	return evt.touches[0];	2✔
14	}	2✔
15	return evt as MouseEvent;	4✔
16	}	4✔
17		2✔
18	/* eslint-disable no-param-reassign */	2✔
19	export function moveable(el: UElement) {	12✔
20	let hiddenTimer: ReturnType<typeof setTimeout> \| null;	12✔
21	let rect: DOMRect;	12✔
22	const critical = {	12✔
23	xAxis: 0,	12✔
24	yAxis: 0,	12✔
25	};	12✔
26	const touch = { x: 0, y: 0 };	12✔
27	function handleHidden() {	12✔
28	// 第一时间计算 el.isHidden，保证点击显示弹窗行为正常	2✔
29	const { left, top } = el.getBoundingClientRect();	2✔
30	if (left >= 0 && left <= critical.xAxis) {	2✔
31	el.isHidden = false;	2✔
32	}	2✔
33		2✔
34	if (hiddenTimer) {	2!
NEW 35	clearTimeout(hiddenTimer);	×
NEW 36	}	×
37	hiddenTimer = setTimeout(() => {	2✔
NEW 38	hiddenTimer = null;	×
NEW 39	if (el.disableHidden) return;	×
NEW 40		×
NEW 41	if (left <= 0) {	×
NEW 42	el.classList.add('hidden-in-left');	×
NEW 43	} else if (left >= critical.xAxis) {	×
NEW 44	el.classList.add('hidden-in-right');	×
NEW 45	}	×
NEW 46		×
NEW 47	if (top <= 0) {	×
NEW 48	el.classList.add('hidden-in-top');	×
NEW 49	} else if (top >= critical.yAxis) {	×
NEW 50	el.classList.add('hidden-in-bottom');	×
NEW 51	}	×
NEW 52	el.isHidden = true;	×
53	}, 1000);	2✔
54	}	2✔
55	function move(evt: TouchEvent \| MouseEvent) {	12✔
56	evt.preventDefault();	2✔
57	(el as UElement).isMoveEvent = true;	2✔
58	const { clientX, clientY } = getPosition(evt);	2✔
59	const diffX = clientX - touch.x;	2✔
60	const diffY = clientY - touch.y;	2✔
61	let resultX = rect.x + diffX;	2✔
62	/* c8 ignore start */	2✔
63	if (resultX <= 0) {	2✔
64	resultX = 0;	2✔
65	el.style.setProperty('--left-radius', STICKY_RADIUS);	2✔
66	} else if (resultX >= critical.xAxis) {	2✔
67	resultX = critical.xAxis;	2✔
68	el.style.setProperty('--right-radius', STICKY_RADIUS);	2✔
69	} else {	2✔
70	el.style.setProperty('--left-radius', FULLY_RADIUS);	2✔
71	el.style.setProperty('--right-radius', FULLY_RADIUS);	2✔
72	}	2✔
73	let resultY = rect.y + diffY;	2✔
74	if (resultY <= 0) {	2✔
75	resultY = 0;	2✔
76	el.style.setProperty('--top-radius', STICKY_RADIUS);	2✔
77	} else if (resultY > critical.yAxis) {	2✔
78	resultY = critical.yAxis;	2✔
79	el.style.setProperty('--bottom-radius', STICKY_RADIUS);	2✔
80	} else {	2✔
81	el.style.setProperty('--top-radius', FULLY_RADIUS);	2✔
82	el.style.setProperty('--bottom-radius', FULLY_RADIUS);	2✔
83	}	2✔
84	/* c8 ignore stop */	2✔
85		2✔
86	el.style.left = `${resultX}px`;	2✔
87	el.style.top = `${resultY}px`;	2✔
88	}	2✔
89	function end() {	12✔
90	touch.x = 0;	2✔
91	touch.y = 0;	2✔
92	handleHidden();	2✔
93	document.removeEventListener('mousemove', move);	2✔
94	document.removeEventListener('mouseup', end);	2✔
95		2✔
96	document.removeEventListener('touchmove', move);	2✔
97	document.removeEventListener('touchend', end);	2✔
98	}	2✔
99	function start(evt: TouchEvent \| MouseEvent) {	12✔
100	evt.preventDefault();	2✔
101	if (hiddenTimer) {	2!
NEW 102	clearTimeout(hiddenTimer);	×
NEW 103	}	×
104	if (el.isHidden) {	2!
NEW 105	el.classList.remove(	×
NEW 106	'hidden-in-top',	×
NEW 107	'hidden-in-right',	×
NEW 108	'hidden-in-bottom',	×
NEW 109	'hidden-in-left',	×
NEW 110	);	×
NEW 111	}	×
112	el.isMoveEvent = false;	2✔
113	rect = el.getBoundingClientRect();	2✔
114	critical.xAxis = window.innerWidth - rect.width;	2✔
115	critical.yAxis = window.innerHeight - rect.height;	2✔
116		2✔
117	const { clientX, clientY } = getPosition(evt);	2✔
118	touch.x = clientX;	2✔
119	touch.y = clientY;	2✔
120	document.addEventListener('mousemove', move, false);	2✔
121	document.addEventListener('mouseup', end, false);	2✔
122		2✔
123	document.addEventListener('touchmove', move, {	2✔
124	capture: false,	2✔
125	passive: false,	2✔
126	});	2✔
127	document.addEventListener('touchend', end, false);	2✔
128	}	2✔
129		12✔
130	el.addEventListener('mousedown', start, false);	12✔
131	el.addEventListener('touchstart', start, { capture: false, passive: false });	12✔
132	el.addEventListener(	12✔
133	'mouseover',	12✔
134	() => {	12✔
NEW 135	el.disableHidden = true;	×
NEW 136	if (el.isHidden) {	×
NEW 137	el.classList.remove(	×
NEW 138	'hidden-in-top',	×
NEW 139	'hidden-in-right',	×
NEW 140	'hidden-in-bottom',	×
NEW 141	'hidden-in-left',	×
NEW 142	);	×
NEW 143	}	×
144	},	12✔
145	false,	12✔
146	);	12✔
147	el.addEventListener(	12✔
148	'mouseleave',	12✔
149	() => {	12✔
NEW 150	el.disableHidden = false;	×
NEW 151	handleHidden();	×
152	},	12✔
153	false,	12✔
154	);	12✔
155	}	12✔

HuolalaTech / page-spy / 9029489818

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