Hashbrown777/clonepage.js

## clonepage.js
(function ({element, asBody, embedUrls, convertPseudo}) {
	let copy = open().document;
	copy.open();
	copy.write('<!doctype html>\n<html><head></head><body></body></html>');
	copy.close();

	if (asBody) {
		for (const name of element.getAttributeNames())
			copy.body.setAttribute(name, element.getAttribute(name));
		for (const node of element.children)
			copy.body.appendChild(copy.importNode(node, true));
		copy = [[copy.body, element]];
	}
	else {
		copy = [[
			copy.body.appendChild(copy.importNode(element, true)),
			element
		]];

		if (asBody == null) {
			copy.push([
				copy[0][0].parentElement,
				{computedStyleMap:document.body.computedStyleMap.bind(document.body)}
			]);
		}
	}
	let current;

	const toHyphenate = /^(moz|webkit|ms|o)(?=[A-Z])|[A-Z]/g;
	const doHyphenate = (what) => ('-' + what.toLowerCase());
	function pseudo(element, which) {
		if (!(element instanceof Element))
			return;
		element = getComputedStyle(element, ':' + which);
		if (element.content == 'none')
			return;

		const computedStyleMap = new Map();
		for (let index = 0; index < element.length; ++index) {
			computedStyleMap.set(
				element[index].replace(toHyphenate, doHyphenate),
				element[element[index]]
			);
		}

		element = current.ownerDocument.createElement('span');
		element.className = which;
		copy.push([element, {computedStyleMap:() => (computedStyleMap)}]);
		current[(which == 'after') ? 'append' : 'prepend'](element);
	}

	const cssUrl = /(?<=^|[^a-zA-Z0-9_-])url\(\s*['"]?((?<!['"])[^\s)'"]+|(?<=')(?:[^'\\]|\\.)+(?=')|(?<=")(?:[^"\\]|\\.)+(?="))['"]?\s*\)/;
	const urls = {length:0};
	const getUrl = (fallback, url) => {
		if (!urls[url]) {
			const key = `--fetched${++urls.length}`;
			urls[url] = `var(${key})`;

			(async (css) => {
				const file = new FileReader();
				file.onloadend = () => {
					css.setProperty(key, `url('${file.result}')`);
				};
				file.onerror = () => {
					css.setProperty(key, fallback);
				};
				try {
					file.readAsDataURL(await (await fetch(url)).blob());
				}
				catch (e) {
					file.onerror();
				}
			})(current.ownerDocument.documentElement.style);
		}
		return urls[url];
	};

	while (copy.length) {
		[current, element] = copy.pop();
		for (
			let next = [current.lastElementChild, element.lastElementChild];
			next[1];
			next = [next[0].previousElementSibling, next[1].previousElementSibling]
		)
			copy.push(next);
		pseudo(element, 'after');
		pseudo(element, 'before');
		element = element.computedStyleMap();


		current.removeAttribute('style');
		const style = current.computedStyleMap();
		const output = [];
		for (let [name, value] of element.entries()) {
			value = value.toString();
			if (style.getAll(name).toString() != value) {
				output.push(`${name}:${value.replace(cssUrl, getUrl)};`);
			}
		}
		if (!output.length)
			continue;

		if (
			convertPseudo ||
			element.get('content').toString() == 'normal'
		) {
			current.setAttribute('style', output.join(''));
			continue;
		}

		if (!current.parentElement.hasAttribute('data-pseudo')) {
			current.parentElement.setAttribute(
				'data-pseudo',
				current.ownerDocument.head.children.length
			);
		}

		current
			.ownerDocument
			.head
			.appendChild(current.ownerDocument.createElement('style'))
			.textContent
		= `[data-pseudo="${
			current.parentElement.getAttribute('data-pseudo')
		}"]:${current.className} {
			${output.join('\n')}
			content:${element.get('content')};
		}`;

		current.remove();
	}
})({
	element   : $0,
	embedUrls : true,

	//set to null if you want to copy the body styles
	asBody : false,

	//You can elect to switch this to true to effectively convert pseudo elements to real ones.
	//However you'll need to parse `element.get('content')` and insert that into `current.textContent` which is non-trivial,
	//since it's not just a matter of stripping quotes or parsing as json.
	//For example:
	// - in css encapsulating characters can be single quotes and unicode escape sequences are '\1234' not '\u1234'
	// - the string could be an evaluated join or parenthesised à la `( "hello" "there" )`
	// - they can even use css variables or references like 'attr()'
	convertPseudo : false
})
	(function ({element, asBody, embedUrls, convertPseudo}) {
	let copy = open().document;
	copy.open();
	copy.write('<!doctype html>\n<html><head></head><body></body></html>');
	copy.close();

	if (asBody) {
	for (const name of element.getAttributeNames())
	copy.body.setAttribute(name, element.getAttribute(name));
	for (const node of element.children)
	copy.body.appendChild(copy.importNode(node, true));
	copy = [[copy.body, element]];
	}
	else {
	copy = [[
	copy.body.appendChild(copy.importNode(element, true)),
	element
	]];

	if (asBody == null) {
	copy.push([
	copy[0][0].parentElement,
	{computedStyleMap:document.body.computedStyleMap.bind(document.body)}
	]);
	}
	}
	let current;

	const toHyphenate = /^(moz\|webkit\|ms\|o)(?=[A-Z])\|[A-Z]/g;
	const doHyphenate = (what) => ('-' + what.toLowerCase());
	function pseudo(element, which) {
	if (!(element instanceof Element))
	return;
	element = getComputedStyle(element, ':' + which);
	if (element.content == 'none')
	return;

	const computedStyleMap = new Map();
	for (let index = 0; index < element.length; ++index) {
	computedStyleMap.set(
	element[index].replace(toHyphenate, doHyphenate),
	element[element[index]]
	);
	}

	element = current.ownerDocument.createElement('span');
	element.className = which;
	copy.push([element, {computedStyleMap:() => (computedStyleMap)}]);
	current[(which == 'after') ? 'append' : 'prepend'](element);
	}

	const cssUrl = /(?<=^\|[^a-zA-Z0-9_-])url\(\s['"]?((?<!['"])[^\s)'"]+\|(?<=')(?:[^'\\]\|\\.)+(?=')\|(?<=")(?:[^"\\]\|\\.)+(?="))['"]?\s\)/;
	const urls = {length:0};
	const getUrl = (fallback, url) => {
	if (!urls[url]) {
	const key = `--fetched${++urls.length}`;
	urls[url] = `var(${key})`;

	(async (css) => {
	const file = new FileReader();
	file.onloadend = () => {
	css.setProperty(key, `url('${file.result}')`);
	};
	file.onerror = () => {
	css.setProperty(key, fallback);
	};
	try {
	file.readAsDataURL(await (await fetch(url)).blob());
	}
	catch (e) {
	file.onerror();
	}
	})(current.ownerDocument.documentElement.style);
	}
	return urls[url];
	};

	while (copy.length) {
	[current, element] = copy.pop();
	for (
	let next = [current.lastElementChild, element.lastElementChild];
	next[1];
	next = [next[0].previousElementSibling, next[1].previousElementSibling]
	)
	copy.push(next);
	pseudo(element, 'after');
	pseudo(element, 'before');
	element = element.computedStyleMap();


	current.removeAttribute('style');
	const style = current.computedStyleMap();
	const output = [];
	for (let [name, value] of element.entries()) {
	value = value.toString();
	if (style.getAll(name).toString() != value) {
	output.push(`${name}:${value.replace(cssUrl, getUrl)};`);
	}
	}
	if (!output.length)
	continue;

	if (
	convertPseudo \|\|
	element.get('content').toString() == 'normal'
	) {
	current.setAttribute('style', output.join(''));
	continue;
	}

	if (!current.parentElement.hasAttribute('data-pseudo')) {
	current.parentElement.setAttribute(
	'data-pseudo',
	current.ownerDocument.head.children.length
	);
	}

	current
	.ownerDocument
	.head
	.appendChild(current.ownerDocument.createElement('style'))
	.textContent
	= `[data-pseudo="${
	current.parentElement.getAttribute('data-pseudo')
	}"]:${current.className} {
	${output.join('\n')}
	content:${element.get('content')};
	}`;

	current.remove();
	}
	})({
	element : $0,
	embedUrls : true,

	//set to null if you want to copy the body styles
	asBody : false,

	//You can elect to switch this to true to effectively convert pseudo elements to real ones.
	//However you'll need to parse `element.get('content')` and insert that into `current.textContent` which is non-trivial,
	//since it's not just a matter of stripping quotes or parsing as json.
	//For example:
	// - in css encapsulating characters can be single quotes and unicode escape sequences are '\1234' not '\u1234'
	// - the string could be an evaluated join or parenthesised à la `( "hello" "there" )`
	// - they can even use css variables or references like 'attr()'
	convertPseudo : false
	})