← All changes | src/front/front.js +76 -7 1.11.0 → 1.13.0 View file →

		@@ -1,6 +1,8 @@
1	1	import copy from 'copy-to-clipboard';
2	2
	3	+const containerClass = '.wp-block-kevinbatdorf-code-block-pro';
	4	+
3	5	const handleCopyButton = () => {
4	6	const buttons = Array.from(
5	7	document.querySelectorAll(
6	8	'.code-block-pro-copy-button:not(.cbp-cb-loaded)',
		@@ -24,11 +26,9 @@
24	26	};
25	27
26	28	const handleHighlighter = () => {
27	29	const codeBlocks = Array.from(
28		- document.querySelectorAll(
29		- '.wp-block-kevinbatdorf-code-block-pro pre:not(.cbp-hl-loaded)',
30		- ),
	30	+ document.querySelectorAll(`${containerClass} pre:not(.cbp-hl-loaded)`),
31	31	);
32	32
33	33	codeBlocks.forEach((codeBlock) => {
34	34	codeBlock.classList.add('cbp-hl-loaded');
		@@ -86,9 +86,76 @@
86	86	document.fonts.add(font);
87	87	});
88	88	};
89	89
90		-const runAll = () => {
	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();
91	158	handleCopyButton();
92	159	handleHighlighter();
93	160	handleFontLoading();
94	161	};
		@@ -93,7 +160,9 @@
93	160	handleFontLoading();
94	161	};
95	162
96	163	// Functions are idempotent, so we can run them on load and DOMContentLoaded
97		-runAll();
98		-window.addEventListener('DOMContentLoaded', runAll);
99		-window.addEventListener('load', runAll);
	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);