8826485529

Committed 25 Apr 2024 03:16AM UTC coverage: 63.244% (-0.08%) from 63.325%

Build # 8826485529

Build Type

Pull #80

github

Committed by

web-flow

Commit Message

Merge 9e3110e6a into 294b27e33

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

Run Details

1322 of 1473 branches covered (89.75%)

Branch coverage included in aggregate %.

35 of 61 new or added lines in 2 files covered. (57.38%)

9 existing lines in 1 file now uncovered.

5337 of 9056 relevant lines covered (58.93%)

30.99 hits per line

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

80.0

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

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

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, width } = el.getBoundingClientRect();
    const criticalX = window.innerWidth - width;
    if (left >= 0 && left <= criticalX) {
      el.isHidden = false;
    }

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

      // 重新计算 el.getBoundingClientRect（如果 logo 本就隐藏在右侧，宽度会变化）
      const currentRect = el.getBoundingClientRect();
      const currentCriticalX = window.innerWidth - currentRect.width;

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

HuolalaTech / page-spy / 8826485529

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