← All changes | src/front/front.js +9 -208 1.27.1 → 1.2.4 View file →

		@@ -1,220 +1,21 @@
1	1	import copy from 'copy-to-clipboard';
2	2
3		-const containerClass = '.wp-block-kevinbatdorf-code-block-pro';
4		-
5		-const handleCopyButton = () => {
	3	+addEventListener('DOMContentLoaded', () => {
6	4	const buttons = Array.from(
7		- document.querySelectorAll(
8		- '.code-block-pro-copy-button:not(.cbp-cb-loaded)',
9		- ),
	5	+ document.querySelectorAll('.code-block-pro-copy-button'),
10	6	);
11	7	buttons.forEach((button) => {
12		- button.classList.add('cbp-cb-loaded');
13	8	// Setting it to block here lets users deactivate the plugin safely
14	9	button.style.display = 'block';
15		- const handler = (event) => {
16		- const { type, key, target } = event;
17		- // if keydown event, make sure it's enter or space
18		- if (type === 'keydown' && !['Enter', ' '].includes(key)) return;
19		- event.preventDefault();
20		- const b = target?.closest('span[data-code]');
21		- const code = b?.dataset?.encoded
22		- ? decodeURIComponent(decodeURIComponent(b?.dataset?.code))
23		- : b?.dataset?.code;
24		- const content = window.cbpCopyOverride?.(code, button) ?? code;
25		- copy(content ?? '', {
	10	+ button.addEventListener('click', (event) => {
	11	+ const b = event.target?.closest('span');
	12	+ copy(b?.dataset?.code ?? '', {
26	13	format: 'text/plain',
27		- onCopy: (code) => {
28		- window.cbpCopyCallback?.(code, button);
29		- b.classList.add('cbp-copying');
30		- // Check if there is a data-text-copied attribute
31		- const hasTextCopied = b.dataset.copiedText;
32		- const innerSpan = b.querySelector('span');
33		- if (hasTextCopied) innerSpan.innerText = hasTextCopied;
34		- setTimeout(() => {
35		- b.classList.remove('cbp-copying');
36		- if (hasTextCopied) {
37		- innerSpan.innerText = b.getAttribute('aria-label');
38		- }
39		- }, 2_000);
40		- },
41	14	});
42		- };
43		- ['click', 'keydown'].forEach((evt) =>
44		- button.addEventListener(evt, handler),
45		- );
46		- });
47		-};
48		-
49		-const handleHighlighter = () => {
50		- const codeBlocks = Array.from(
51		- document.querySelectorAll(`${containerClass}:not(.cbp-hl-loaded)`),
52		- );
53		-
54		- codeBlocks.forEach((codeBlock) => {
55		- codeBlock.classList.add('cbp-hl-loaded');
56		- // Search for highlights
57		- const highlighters = new Set(
58		- codeBlock.querySelectorAll('.cbp-line-highlight'),
59		- );
60		- // If the codeblock has .cbp-highlight-hover, then get all lines
61		- if (codeBlock.classList.contains('cbp-highlight-hover')) {
62		- codeBlock
63		- .querySelectorAll('span.line')
64		- .forEach((line) => highlighters.add(line));
65		- }
66		-
67		- if (!highlighters.size) return;
68		-
69		- // If the code block expands, we need to recalculate the width
70		- new ResizeObserver(() => {
71		- // find the longest line
72		- const lines = codeBlock.querySelectorAll('span.line');
73		- codeBlock.style.setProperty('--cbp-block-width', 'unset');
74		- const longestLine = Array.from(lines).reduce((a, b) =>
75		- a.offsetWidth > b.offsetWidth ? a : b,
76		- );
77		- const highestLineHeight = Array.from(lines).reduce((a, b) =>
78		- a.offsetHeight > b.offsetHeight ? a : b,
79		- );
80		- codeBlock.style.setProperty(
81		- '--cbp-block-height',
82		- highestLineHeight.offsetHeight + 'px',
83		- );
84		- codeBlock.style.setProperty(
85		- '--cbp-block-width',
86		- longestLine.offsetWidth + 'px',
87		- );
88		- }).observe(codeBlock);
89		-
90		- // Add the highlighter if not already there
91		- highlighters.forEach((highlighter) => {
92		- if (highlighter.querySelector('.cbp-line-highlighter')) return;
93		- highlighter.insertAdjacentHTML(
94		- 'beforeend',
95		- '<span aria-hidden="true" class="cbp-line-highlighter"></span>',
96		- );
97		- });
98		- });
99		-};
100		-
101		-const handleFontLoading = () => {
102		- if (!window.codeBlockPro?.pluginUrl) return;
103		- const elements = Array.from(
104		- document.querySelectorAll(
105		- '[data-code-block-pro-font-family]:not(.cbp-ff-loaded)',
106		- ) || [],
107		- );
108		- elements.forEach((e) => e.classList.add('cbp-ff-loaded'));
109		- const fontsToLoad = new Set(
110		- elements.map((f) => f.dataset.codeBlockProFontFamily).filter(Boolean),
111		- );
112		- [...fontsToLoad].forEach(async (fontName) => {
113		- const [name, ext] = fontName.split('.');
114		- const url = `url(${window.codeBlockPro.pluginUrl}/build/fonts/${name}.${
115		- ext || 'woff2'
116		- })`;
117		- const font = new FontFace(name, url);
118		- await font.load().catch((e) => console.error(e));
119		- document.fonts.add(font);
120		- });
121		-};
122		-
123		-const handleSeeMore = () => {
124		- const seeMoreLines = Array.from(
125		- document.querySelectorAll(
126		- `${containerClass}:not(.cbp-see-more-loaded) .cbp-see-more-line`,
127		- ),
128		- );
129		- seeMoreLines.forEach((line) => {
130		- const currentContainer = line.closest(containerClass);
131		- currentContainer.classList.add('cbp-see-more-loaded');
132		- const pre = line.closest('pre');
133		- const initialHeight = pre.offsetHeight;
134		- let animationSpeed = 0;
135		- const transition = line.classList.contains('cbp-see-more-transition');
136		-
137		- if (transition) {
138		- const lineCount = pre.querySelectorAll('code > *').length;
139		- const linesBeforeCurrent = Array.from(
140		- line.closest('code').children,
141		- ).filter((l) => l.offsetTop < line.offsetTop)?.length;
142		- animationSpeed = 0.5 + (lineCount - linesBeforeCurrent) * 0.01;
143		- pre.style.transition = `max-height ${animationSpeed}s ease-out`;
144		- }
145		-
146		- // if the first child it a span then get the height of that span
147		- const headerHeight =
148		- currentContainer.children[0].tagName === 'SPAN'
149		- ? currentContainer.children[0].offsetHeight
150		- : 0;
151		- const lineHeight = parseFloat(window.getComputedStyle(line).lineHeight);
152		- pre.style.maxHeight = `${line.offsetTop + lineHeight - headerHeight}px`;
153		-
154		- const buttonContainer = line
155		- .closest(containerClass)
156		- .querySelector('.cbp-see-more-container');
157		- if (!buttonContainer) return;
158		- buttonContainer.style.display = 'flex';
159		- const button = buttonContainer.querySelector(
160		- '.cbp-see-more-simple-btn',
161		- );
162		- if (!button) return;
163		- // Starts off collapsed
164		- button.setAttribute('aria-expanded', 'false');
165		- pre.id = `cbp-see-more-${Math.random().toString(36).slice(2)}`;
166		- button.setAttribute('aria-controls', pre.id);
167		- if (currentContainer.classList.contains('padding-disabled')) {
168		- button.classList.remove('cbp-see-more-simple-btn-hover');
169		- }
170		-
171		- const handle = (event) => {
172		- event.preventDefault();
173		- // disable scrolling
174		- pre.style.setProperty('overflow', 'hidden', 'important');
	15	+ b.classList.add('copying');
175	16	setTimeout(() => {
176		- pre.style.overflow = 'auto';
177		- }, animationSpeed * 1000);
178		-
179		- pre.style.maxHeight = `${initialHeight}px`;
180		- // If there is data-see-more-collapse-string then we toggle
181		- if (!buttonContainer.dataset?.seeMoreCollapseString) {
182		- buttonContainer.remove();
183		- return;
184		- }
185		- // We're letting them collapse it
186		- if (button.getAttribute('aria-expanded') === 'true') {
187		- button.setAttribute('aria-expanded', 'false');
188		- button.innerText = buttonContainer.dataset.seeMoreString;
189		- pre.style.maxHeight = `${line.offsetTop + lineHeight - headerHeight}px`;
190		-
191		- // Move the scroll so the button is in center view
192		- line.scrollIntoView({
193		- behavior: transition ? 'smooth' : 'auto',
194		- block: 'center',
195		- });
196		- return;
197		- }
198		- button.setAttribute('aria-expanded', 'true');
199		- button.innerText = buttonContainer.dataset.seeMoreCollapseString;
200		- };
201		- button.addEventListener('click', handle);
202		- button.addEventListener('keydown', (event) => {
203		- if (event.key === 'Enter') handle(event);
	17	+ b.classList.remove('copying');
	18	+ }, 1000);
204	19	});
205	20	});
206		-};
207		-
208		-const init = () => {
209		- handleFontLoading();
210		- handleSeeMore();
211		- handleCopyButton();
212		- handleHighlighter();
213		-};
214		-
215		-// Functions are idempotent, so we can run them on load, DOMContentLoaded, et al.
216		-init();
217		-// Useful for when the DOM is modified or loaded in late
218		-window.codeBlockProInit = init;
219		-window.addEventListener('DOMContentLoaded', init);
220		-window.addEventListener('load', init);
	21	+});