8814248845

Committed 24 Apr 2024 09:23AM UTC coverage: 63.271% (-0.05%) from 63.325%

Build # 8814248845

Build Type

Pull #80

github

Committed by

web-flow

Commit Message

Merge e157d6866 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 %.

34 of 55 new or added lines in 2 files covered. (61.82%)

8 existing lines in 1 file now uncovered.

5336 of 9050 relevant lines covered (58.96%)

31.02 hits per line

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

82.47

/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() {
    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;

      if (left <= 0) {
        el.classList.add('hidden-in-left');
      } else if (left >= criticalX) {
        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	const { left, width } = el.getBoundingClientRect();	2✔
26	const criticalX = window.innerWidth - width;	2✔
27	if (left >= 0 && left <= criticalX) {	2✔
28	el.isHidden = false;	2✔
29	}	2✔
30		2✔
31	if (hiddenTimer) {	2!
NEW 32	clearTimeout(hiddenTimer);	×
NEW 33	}	×
34	hiddenTimer = setTimeout(() => {	2✔
NEW 35	hiddenTimer = null;	×
NEW 36	if (el.disableHidden) return;	×
NEW 37		×
NEW 38	if (left <= 0) {	×
NEW 39	el.classList.add('hidden-in-left');	×
NEW 40	} else if (left >= criticalX) {	×
NEW 41	el.classList.add('hidden-in-right');	×
NEW 42	}	×
NEW 43	el.isHidden = true;	×
44	}, 1000);	2✔
45	}	2✔
46	function move(evt: TouchEvent \| MouseEvent) {	12✔
47	evt.preventDefault();	2✔
48	(el as UElement).isMoveEvent = true;	2✔
49	const { clientX, clientY } = getPosition(evt);	2✔
50	const diffX = clientX - touch.x;	2✔
51	const diffY = clientY - touch.y;	2✔
52	let resultX = rect.x + diffX;	2✔
53	/* c8 ignore start */	2✔
54	if (resultX < 0) {	2✔
55	resultX = 0;	2✔
56	} else if (resultX > critical.xAxis) {	2✔
57	resultX = critical.xAxis;	2✔
58	}	2✔
59	let resultY = rect.y + diffY;	2✔
60	if (resultY < 0) {	2✔
61	resultY = 0;	2✔
62	} else if (resultY > critical.yAxis) {	2✔
63	resultY = critical.yAxis;	2✔
64	}	2✔
65	/* c8 ignore stop */	2✔
66		2✔
67	el.style.left = `${resultX}px`;	2✔
68	el.style.top = `${resultY}px`;	2✔
69	}	2✔
70	function end() {	12✔
71	touch.x = 0;	2✔
72	touch.y = 0;	2✔
73	handleHidden();	2✔
74	document.removeEventListener('mousemove', move);	2✔
75	document.removeEventListener('mouseup', end);	2✔
76		2✔
77	document.removeEventListener('touchmove', move);	2✔
78	document.removeEventListener('touchend', end);	2✔
79	}	2✔
80	function start(evt: TouchEvent \| MouseEvent) {	12✔
81	evt.preventDefault();	2✔
82	if (hiddenTimer) {	2!
NEW UNCOV 83	clearTimeout(hiddenTimer);	×
NEW UNCOV 84	}	×
85	if (el.isHidden) {	2!
NEW UNCOV 86	el.classList.remove('hidden-in-left', 'hidden-in-right');	×
NEW UNCOV 87	}	×
88	el.isMoveEvent = false;	2✔
89	rect = el.getBoundingClientRect();	2✔
90	critical.xAxis = window.innerWidth - rect.width;	2✔
91	critical.yAxis = window.innerHeight - rect.height;	2✔
92		2✔
93	const { clientX, clientY } = getPosition(evt);	2✔
94	touch.x = clientX;	2✔
95	touch.y = clientY;	2✔
96	document.addEventListener('mousemove', move, false);	2✔
97	document.addEventListener('mouseup', end, false);	2✔
98		2✔
99	document.addEventListener('touchmove', move, {	2✔
100	capture: false,	2✔
101	passive: false,	2✔
102	});	2✔
103	document.addEventListener('touchend', end, false);	2✔
104	}	2✔
105		12✔
106	el.addEventListener('mousedown', start, false);	12✔
107	el.addEventListener('touchstart', start, { capture: false, passive: false });	12✔
108	el.addEventListener(	12✔
109	'mouseover',	12✔
110	() => {	12✔
NEW 111	el.disableHidden = true;	×
NEW 112	if (el.isHidden) {	×
NEW UNCOV 113	el.classList.remove('hidden-in-left', 'hidden-in-right');	×
NEW UNCOV 114	}	×
115	},	12✔
116	false,	12✔
117	);	12✔
118	el.addEventListener(	12✔
119	'mouseleave',	12✔
120	() => {	12✔
NEW UNCOV 121	el.disableHidden = false;	×
NEW UNCOV 122	handleHidden();	×
123	},	12✔
124	false,	12✔
125	);	12✔
126	}	12✔

HuolalaTech / page-spy / 8814248845

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