← All changes | src/front/front.js +103 -19 1.9.0 → 1.13.0 View file →

		@@ -1,12 +1,16 @@
1	1	import copy from 'copy-to-clipboard';
2	2
3		-// Handle copy button
4		-addEventListener('DOMContentLoaded', () => {
	3	+const containerClass = '.wp-block-kevinbatdorf-code-block-pro';
	4	+
	5	+const handleCopyButton = () => {
5	6	const buttons = Array.from(
6		- document.querySelectorAll('.code-block-pro-copy-button'),
	7	+ document.querySelectorAll(
	8	+ '.code-block-pro-copy-button:not(.cbp-cb-loaded)',
	9	+ ),
7	10	);
8	11	buttons.forEach((button) => {
	12	+ button.classList.add('cbp-cb-loaded');
9	13	// Setting it to block here lets users deactivate the plugin safely
10	14	button.style.display = 'block';
11	15	button.addEventListener('click', (event) => {
12	16	const b = event.target?.closest('span');
		@@ -18,18 +22,18 @@
18	22	b.classList.remove('copying');
19	23	}, 2000);
20	24	});
21	25	});
22		-});
	26	+};
23	27
24		-// Handle highlighter
25		-addEventListener('DOMContentLoaded', () => {
	28	+const handleHighlighter = () => {
26	29	const codeBlocks = Array.from(
27		- document.querySelectorAll('.wp-block-kevinbatdorf-code-block-pro pre'),
	30	+ document.querySelectorAll(`${containerClass} pre:not(.cbp-hl-loaded)`),
28	31	);
29	32
30	33	codeBlocks.forEach((codeBlock) => {
31		- // search for highlights
	34	+ codeBlock.classList.add('cbp-hl-loaded');
	35	+ // Search for highlights
32	36	const highlighters = codeBlock.querySelectorAll('.cbp-line-highlight');
33	37	if (!highlighters.length) return;
34	38
35	39	// We need to track the block width so we can adjust the
		@@ -36,8 +40,9 @@
36	40	// highlighter width in case of overflow
37	41	const resizeObserver = new ResizeObserver((entries) => {
38	42	entries.forEach((entry) => {
39	43	// get width of inner code block
	44	+ codeBlock.style.setProperty('--cbp-block-width', '0');
40	45	const codeWidth =
41	46	entry.target.querySelector('code').offsetWidth;
42	47	const computed =
43	48	codeWidth + 16 === entry.target.scrollWidth
		@@ -42,9 +47,8 @@
42	47	const computed =
43	48	codeWidth + 16 === entry.target.scrollWidth
44	49	? codeWidth + 16
45	50	: entry.target.scrollWidth + 16;
46		- codeBlock.style.setProperty('--cbp-block-width', '0');
47	51	codeBlock.style.setProperty(
48	52	'--cbp-block-width',
49	53	`${computed}px`,
50	54	);
		@@ -59,20 +63,20 @@
59	63	'<span aria-hidden="true" class="cbp-line-highlighter"></span>',
60	64	);
61	65	});
62	66	});
63		-});
	67	+};
64	68
65		-// Handle font loading
66		-addEventListener('DOMContentLoaded', () => {
	69	+const handleFontLoading = () => {
67	70	if (!window.codeBlockPro?.pluginUrl) return;
	71	+ const elements = Array.from(
	72	+ document.querySelectorAll(
	73	+ '[data-code-block-pro-font-family]:not(.cbp-ff-loaded)',
	74	+ ) || [],
	75	+ );
	76	+ elements.forEach((e) => e.classList.add('cbp-ff-loaded'));
68	77	const fontsToLoad = new Set(
69		- Array.from(
70		- document.querySelectorAll('[data-code-block-pro-font-family]') ??
71		- [],
72		- )
73		- .map((f) => f.dataset.codeBlockProFontFamily)
74		- .filter(Boolean),
	78	+ elements.map((f) => f.dataset.codeBlockProFontFamily).filter(Boolean),
75	79	);
76	80	[...fontsToLoad].forEach(async (fontName) => {
77	81	const font = new FontFace(
78	82	fontName,
		@@ -80,5 +84,85 @@
80	84	);
81	85	await font.load();
82	86	document.fonts.add(font);
83	87	});
84		-});
	88	+};
	89	+
	90	+const handleSeeMore = () => {
	91	+ const seeMoreLines = Array.from(
	92	+ document.querySelectorAll(
	93	+ `${containerClass}:not(.cbp-see-more-loaded) .cbp-see-more-line`,
	94	+ ),
	95	+ );
	96	+ seeMoreLines.forEach((line) => {
	97	+ const currentContainer = line.closest(containerClass);
	98	+ currentContainer.classList.add('cbp-see-more-loaded');
	99	+ const pre = line.closest('pre');
	100	+ const initialHeight = pre.offsetHeight;
	101	+ let animationSpeed = 0;
	102	+
	103	+ if (line.classList.contains('cbp-see-more-transition')) {
	104	+ const lineCount = pre.querySelectorAll('code > *').length;
	105	+ const linesBeforeCurrent = Array.from(
	106	+ line.closest('code').children,
	107	+ ).filter((l) => l.offsetTop < line.offsetTop)?.length;
	108	+ animationSpeed = 0.5 + (lineCount - linesBeforeCurrent) * 0.01;
	109	+ pre.style.transition = `max-height ${animationSpeed}s ease-out`;
	110	+ }
	111	+
	112	+ // if the first child it a span then get the height of that span
	113	+ const headerHeight =
	114	+ currentContainer.children[0].tagName === 'SPAN'
	115	+ ? currentContainer.children[0].offsetHeight
	116	+ : 0;
	117	+ const lineHeight = parseFloat(window.getComputedStyle(line).lineHeight);
	118	+ pre.style.maxHeight = `${line.offsetTop + lineHeight - headerHeight}px`;
	119	+
	120	+ const buttonContainer = line
	121	+ .closest(containerClass)
	122	+ .querySelector('.cbp-see-more-container');
	123	+ if (!buttonContainer) return;
	124	+ buttonContainer.style.display = 'flex';
	125	+ const button = buttonContainer.querySelector(
	126	+ '.cbp-see-more-simple-btn',
	127	+ );
	128	+ if (!button) return;
	129	+ if (currentContainer.classList.contains('padding-disabled')) {
	130	+ button.classList.remove('cbp-see-more-simple-btn-hover');
	131	+ }
	132	+ button.style.transition = `all ${
	133	+ Math.max(animationSpeed, 1) / 1.5
	134	+ }s linear`;
	135	+
	136	+ const handle = (event) => {
	137	+ event.preventDefault();
	138	+ button.classList.remove('cbp-see-more-simple-btn-hover');
	139	+ pre.style.maxHeight = initialHeight + 'px';
	140	+ setTimeout(() => {
	141	+ button.style.opacity = 0;
	142	+ button.style.transform = 'translateY(-100%)';
	143	+ setTimeout(
	144	+ () => button.remove(),
	145	+ Math.max(animationSpeed, 1) * 1000,
	146	+ );
	147	+ }, animationSpeed * 1000);
	148	+ };
	149	+ button.addEventListener('click', handle);
	150	+ button.addEventListener('keypress', (event) => {
	151	+ if (event.key === 'Enter') handle(event);
	152	+ });
	153	+ });
	154	+};
	155	+
	156	+const init = () => {
	157	+ handleSeeMore();
	158	+ handleCopyButton();
	159	+ handleHighlighter();
	160	+ handleFontLoading();
	161	+};
	162	+
	163	+// Functions are idempotent, so we can run them on load and DOMContentLoaded
	164	+init();
	165	+// Useful for when the DOM is modified or loaded in late
	166	+window.codeBlockProInit = init;
	167	+window.addEventListener('DOMContentLoaded', init);
	168	+window.addEventListener('load', init);