☰

CF-Html-Viewer

View html immediately

// ==UserScript==
// @name CF-Html-Viewer
// @version 0.3.2
// @description View html immediately
// @author Iverycool
// @namespace Cyberforum
// @match https://www.cyberforum.ru/*
// @grant none
// ==/UserScript==
(function() {

const $ = (sec, node = document) => node.querySelector(sec);
const $$ = (sec, node = document) => node.querySelectorAll(sec);
const size = 1.4;
// const isFF = ~navigator.userAgent.search(/firefox/i);

const styles = {
	but: 'color: rgb(96, 96, 96); font-weight: normal; margin-left: 5px;',
	rightBut: 'color: rgb(96, 96, 96); font-weight: normal; float: right;',
	frame: 'display: block; width: 100%;',
	textarea: getStyleString({
		'position': 'absolute',
	    'margin': 0,
	    'padding': 0,
	    'border': 'transparent',
	    'background': 'transparent',
	    'color': 'transparent', 
	    'font-family': 'Consolas,Monaco,\'Andale Mono\',\'Ubuntu Mono\',monospace',
	    'font-size': '1em',
	    'line-height': size + ' !important',
	    'white-space': 'pre',
	    'caret-color': 'black',
	    'outline': 'none',
	    'resize': 'none'
	})
}
const sels = {
	codeFrame: 'div.codeframe',
	codePre: 'td.de1 > pre.de1',
	lnPre: 'td.ln > pre.de1'
}

document.addEventListener('DOMContentLoaded', () => {
	// debugger;
	init().then(() => $$('#posts div[id^="post_message_"]').forEach(register));
});


function init() {
	const prismStyle = createElem('link', document.head);
	prismStyle.rel = 'stylesheet';
	prismStyle.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css';

	const myStyle = createElem('style', document.head);
	myStyle.innerHTML = 'pre.de1, pre.de1 * { line-height: ' + size + ' !important }' +
		['html5', 'phphtml', 'css', 'javascript'].map(name =>
			`table.${name} > tbody {background: #f5f2f0 !important}`
		).join('');

	const prismScript = createElem('script', document.head);
	prismScript.type = 'text/javascript';
	prismScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js';
	return new Promise(res => prismScript.onload = res);
}


function register(post) {
	const viewer = new Viewer();
	const htmlNodes = $$('table.html5, table.phphtml', post);
	const cssNodes = $$('table.css', post);
	const jsNodes = $$('table.javascript', post);

	htmlNodes.forEach(htmlNode => {
		makeViewerLink(viewer, htmlNode);
		makeEditableLink(viewer, htmlNode, 'html');
		stylize(htmlNode, 'html');
	});

	cssNodes.forEach(cssNode => {
		makeUseLink(viewer, cssNode, 'style');
		makeEditableLink(viewer, cssNode, 'css');
		stylize(cssNode, 'css');
	});

	jsNodes.forEach(jsNode => {
		createLink({
			parentNode: $('.head', jsNode),
			style: styles.but,
			text: 'Выполнить',
			onClick: () => eval($(sels.codePre, jsNode).innerText)
		});

		makeUseLink(viewer, jsNode, 'script');
		makeEditableLink(viewer, jsNode, 'js');
		stylize(jsNode, 'js');
	});
}


class Viewer {
	style = [];
	script = [];
	mounted = false;

	create(parent, htmlCode, onClose = () => {}) {
		this.clean();
		this.mounted = true;

		this.html = htmlCode.replace(/ /g, '');
		this.container = createElem('tfoot', parent);
		createLink({
			parentNode: this.container,
			style: styles.but,
			text: 'Открыть в новом окне',
			onClick: () => this.openInNewWin()
		});

		createLink({
			parentNode: this.container,
			style: styles.but,
			text: 'Скачать страницу',
			onClick: () => this.download()
		})

		createLink({
			parentNode: this.container,
			style: styles.rightBut,
			text: 'Закрыть',
			onClick: () => (this.clean(), onClose())
		});

		this.iframe = createElem('iframe', this.container);
		this.iframe.style = styles.frame;
		this.update();
	}

	clean() {
		if (this.container) this.container.remove();
		this.iframe = null;
		this.doc = null;
		this.html = '';
		this.mounted = false;
	}

	add(id, code, type) {
		if (!this.mounted) return false;
		const ind = this[type].findIndex(el => el[0] == id);
		if (~ind) {
			this[type].splice(ind, 1, [id, code.replace(/ /g, '')])
		} else {
			this[type].push([id, code.replace(/ /g, '')]);
		}		
		return this.update();
	}

	has(id, type) {
		return !!(~this[type].findIndex(el => el[0] == id));
	}

	remove(id, type) {
		const ind = this[type].findIndex(el => el[0] == id);
		const res = (~ind) ? !!this[type].splice(ind, 1) : false;
		this.update();
		return res;
	}

	update(code) {
		if (!this.mounted) return;
		if (code) this.html = code;
		const str = this._compile();

		this.iframe.src = 'about:blank';
		return new Promise(res => {
			this.iframe.onload = () => {
				this.doc = this.iframe.contentWindow.document;
				this.doc.write(str);
				this.doc.close();
				this.updateFrameHeight();
				res();
			}
		});
	}

	updateFrameHeight() {
		const coords = getCoords(this.doc.body.lastElementChild, this.iframe.contentWindow);
		const contentHeight = coords.top + coords.height;
		const frameHeight = (contentHeight > 500) ? '500px' : contentHeight + 16 + 'px';
		this.iframe.style.height = frameHeight;
	}

	openInNewWin() {
		const str = this._compile();
		const win = window.open('about:blank');
		win.onload = () => {
			win.document.write(str);
			win.document.close();
		}
	}

	download() {
		const str = this._compile();
		const id = this.container.parentElement.querySelector(sels.codeFrame).id;
		const a = createElem('a');
		a.download = `doc-${id}.html`;
		a.href = 'data:text/html;charset=UTF-8,' + str;
		a.click();
		a.remove();
	}

	_compile() {
		const wrap = (arr, type) => 
			arr.map(([,code]) => `<${type}>${code}</${type}>`).join('');
		return wrap(this.style, 'style') + wrap(this.script, 'script') + this.html;
	}
}

function stylize(node, type) {
	const pre = $(sels.codePre, node);
	const code = Prism.highlight(pre.innerText, Prism.languages[type]);
	pre.classList.add(`language-${type}`);
	pre.innerHTML = `<code class="language-${type}">${code}</code>`;
	updateCodeFrameHeight($(sels.codeFrame, node));
}

function updateCodeFrameHeight(div) {
	let conHeight = getCoords(div.firstChild).height;
	if (conHeight < 25) conHeight = div.style.height;
	div.style.height = ((conHeight > 570) ? 590 : conHeight + 20) + 'px';
}

function makeViewerLink(viewer, htmlNode) {
	const makeObj = {
		text: 'Показать viewer',
		onClick: function() {
			viewer.create(htmlNode, $(sels.codePre, htmlNode).innerText, () => {
				this.update(makeObj);
			});
			this.update(unMakeObj);
		}
	}

	const unMakeObj = {
		text: 'Обновить viewer',
		onClick: () => viewer.update($(sels.codePre, htmlNode).innerText)
	}

	createLink({
		parentNode: $('.head', htmlNode),
		style: styles.but,
		...makeObj
	});
}

function makeUseLink(viewer, codeNode, type) {
	const id = $(sels.codeFrame, codeNode).id;

	const useObj = {
		text: 'Использовать в viewer',
		onClick: function() {
			if (viewer.add(id, $(sels.codePre, codeNode).innerText, type)) {
				this.update(unUseObj);
			}
		}
	}

	const unUseObj = {
		text: 'Отвязать от viewer',
		onClick: function() {
			viewer.remove(id, type);
			this.update(useObj);
		}
	}

	createLink({
		parentNode: $('.head', codeNode),
		style: styles.but,
		...useObj
	});	
}

function makeEditableLink(viewer, node, type) {
	const id = $(sels.codeFrame, node).id;
	let textarea, autoReloadingLink;
	const makeObj = {
		text: 'Редактировать',
		onClick: function() {
			textarea = makeInput($(sels.codePre, node), type);
			this.update(unMakeObj);
			autoReloadingLink = makeAutoReloadingLink();
		}
	}
	const unMakeObj = {
		text: 'Отменить редактирование',
		onClick: function() {
			textarea.remove();
			autoReloadingLink.remove();
			this.update(makeObj);
		}
	}

	createLink({
		parentNode: $('.head', node),
		style: styles.but,
		...makeObj
	});

	function makeAutoReloadingLink() {
		const makeObj = {
			style: styles.but + 'color: rgb(130, 130, 130);',
			text: 'AutoReloading - off',
			onClick: function() {
				textarea.onInput = function(text) {
					if (type === 'html') {
						return viewer.update(text);
					} else {
						return viewer.add(id, text, type === 'js' ? 'script' : 'style');
					}
				}
				this.update(unMakeObj);
			}
		};
		const unMakeObj = {
			style: styles.but + 'color: green',
			text: 'AutoReloading - on',
			onClick: function() {
				textarea.onInput = null;
				this.update(makeObj);
			}
		};

		return createLink({
			parentNode: $('.head', node),
			...makeObj
		});
	}
}

function makeInput(pre, type, onInput = () => {}) {
	const div = pre.closest(sels.codeFrame);
	const lnPre = div.querySelector(sels.lnPre);
	const textarea = createElem('textarea', pre.parentElement);
	const divScroll = {
		left: div.scrollLeft,
		top: div.scrollTop
	}
	div.scrollTo(0, 0);

	const preCoords = getCoords(pre);
	const divCoords = getCoords(div);
	const paddingLeft = preCoords.left - divCoords.left;
	const paddingTop = preCoords.top - divCoords.top;

	textarea.style = styles.textarea + getStyleString({
		'padding-left': paddingLeft + 'px',
		'padding-top': paddingTop + 'px'
	});
	updateTextarea();
	textarea.spellcheck = false;

	textarea.value = pre.innerText;
	textarea.scrollTo(divScroll.left, divScroll.top);
	div.scrollTo(divScroll.left, divScroll.top);

	textarea.oninput = async () => {
		const text = textarea.value;
		const textLen = text.split('\n').length;
		const code = Prism.highlight(text, Prism.languages[type]);
		pre.innerHTML = `<code class="language-${type}">${code}</code>`;
		lnPre.innerText = new Array(textLen).fill(1).map((_, i) => i + 1).join('\n');

		await (textarea.onInput || onInput)(text);
		updateCodeFrameHeight(div);
		updateTextarea();
	}
	textarea.onscroll = () => div.scrollTo(textarea.scrollLeft, textarea.scrollTop);

	function updateTextarea() {
		const tStyle = textarea.style;
		const divCoords = getCoords(div);

		tStyle.width = divCoords.width - paddingLeft + 'px';
		tStyle.height = divCoords.height - paddingTop + 'px';
		tStyle.left = divCoords.left + 'px';
		tStyle.top = divCoords.top + 'px';
	}

	return textarea;
}

// Utils
function createElem(name, parentNode = document.documentElement) {
	const elem = document.createElement(name);
	parentNode.appendChild(elem);
	return elem;
}

function createLink({parentNode = document.documentElement, style, text, onClick = () => {}}) {
	const a = createElem('a', parentNode);
	a.style = style;
	a.href = '#';
	a.innerText = text;
	a.onclick = function(ev) {
		ev.preventDefault();
		onClick.call(a, ev);
	}

	a.update = function({style: newStyle, text: newText, onClick: newOnClick}) {
		a.style = newStyle || style;
		a.innerText = newText || text;
		a.onclick = function(ev) {
			ev.preventDefault();
			(newOnClick || onClick).call(a, ev);
		}
	}

	return a;
}

function getStyleString(obj) {
	return Object.entries(obj).reduce((str, [key, value]) => str + `${key}:${value};`, '');
}

function getCoords(elem, win = window) {
  const box = elem.getBoundingClientRect();

  return {
    top: box.top + win.pageYOffset,
    left: box.left + win.pageXOffset,
    width: box.width,
    height: box.height
  }
}

})();