scripts/generateScrollerDemo.php

#!/usr/bin/php
<?php

include __DIR__ . '/../vendor/autoload.php';

$configurator = s9e\TextFormatter\Configurator\Bundles\Fatdown::getConfigurator();
$configurator->enableJavaScript();

$configurator->javascript
	->setMinifier('ClosureCompilerService')
	->cacheDir = __DIR__ . '/../tests/.cache';

$configurator->javascript->exports = ['disablePlugin', 'enablePlugin', 'preview'];

extract($configurator->finalize());

ob_start();
?><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>s9e\TextFormatter &bull; Scroller Demo</title>
	<base href="https://s9e.github.io/TextFormatter/scroller.html" />
	<style type="text/css">
		#preview
		{
			font-family: sans;
			padding: 5px;
			background-color: #f8f8f8;
			border: dashed 1px #ddd;
			border-radius: 5px;
			max-height: 40vh;
			overflow: auto;
		}
		div
		{
			max-width:800px;
		}
		pre, code
		{
			padding: 2px;
			background-color: #fff;
			border-radius: 3px;
			border: solid 1px #ddd;
		}
		pre code
		{
			border: 0;
		}
		blockquote
		{
			background-color: #fff;
			border: solid 1px #ddd;
			border-left-width: 4px;
			padding-left: 1em;
		}
		p
		{
			margin: 0;
		}
		td, th
		{
			border: solid 1px #ddd;
			background-color: #fff;
		}
		#outline
		{
			outline: solid 2px rgba(0, 0, 255, .4);
			position: fixed;
			width:  0;
			height: 0;
			left: -1000px;
			top: 0;
			transition: all .1s;
		}
	</style>

</head>
<body>
	<div id="outline"></div>
	<div style="float:left;width:80%">
		<form>
			<textarea style="width:99%" rows="15">This is a demo for an experimental live preview scroller.

Here's the list of ingredients for a traditional BLT sandwich:

 - [Bananas](https://en.wikipedia.org/wiki/Bulbasaur)
 - [Lettuce](https://en.wikipedia.org/wiki/Lettuce)
 - [Tomatos](https://en.wikipedia.org/wiki/Dan_Quayle)

All links courtesy of Wikipedia.

![Wikipedia logo](https://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg)

***

Editing this part of the text should scroll the preview area unless you just happen to have a really tall screen.

***

The parser/renderer used on this page has been generated by [this script](https://github.com/s9e/TextFormatter/blob/master/scripts/generateScrollerDemo.php). It's been minified with Google Closure Compiler to <?php printf('%.1f', strlen($js) / 1024); ?> KB (<?php printf('%.1f', strlen(gzcompress($js, 9)) / 1024); ?> KB compressed)
</textarea>
		</form>
	</div>

	<div style="float:left;">
		<form><?php

			$list = [];

			foreach ($configurator->plugins as $pluginName => $plugin)
			{
				$list[$pluginName] = '<input type="checkbox" id="' . $pluginName . '" checked="checked" onchange="toggle(this)"><label for="' . $pluginName . '">&nbsp;'. $pluginName . '</label>';
			}

			ksort($list);
			echo implode('<br>', $list);

		?></form>
	</div>

	<div style="clear:both"></div>

	<div id="preview"></div>

	<script type="text/javascript"><?php echo $js; ?>;

		var textarea = document.getElementsByTagName('textarea')[0],
			preview  = document.getElementById('preview'),
			outline  = document.getElementById('outline'),
			text     = '';

		setInterval(function()
		{
			if (textarea.value === text)
			{
				return;
			}

			var lastUpdated = s9e.TextFormatter.preview(textarea.value, preview);
			if (text !== '' && !preview.isSameNode(lastUpdated))
			{
				scrollToNode(lastUpdated);
				highlightNode(lastUpdated);
			}
			text = textarea.value;
		}, 20);

		function scrollToNode(target)
		{
			var nodes       = [target, target.previousSibling, target.parentNode],
				previewRect = preview.getBoundingClientRect(),
				i           = 0;
			do
			{
				var node = nodes[i];
				if (!node || !node.getBoundingClientRect || !node.scrollIntoView)
				{
					continue;
				}

				var rect = node.getBoundingClientRect();
				if (rect.bottom > previewRect.bottom || rect.top < previewRect.top)
				{
					node.scrollIntoView();
				}
				break;
			}
			while (++i < 3);
		}

		function highlightNode(target)
		{
			var nodes = [target, target.parentNode],
				i     = 0;
			do
			{
				var node = nodes[i];
				if (!node || !node.getBoundingClientRect)
				{
					continue;
				}

				var rect  = node.getBoundingClientRect(),
					style = outline.style;
				style.height = rect.height + 'px';
				style.width  = rect.width + 'px';
				style.top    = rect.y + 'px';
				style.left   = rect.x + 'px';

				break;
			}
			while (++i < 2);

			if (i > 1)
			{
				outline.style.width = outline.style.height = 0;
				outline.style.left = '-10px';
			}
		}

		function toggle(el)
		{
			(el.checked) ? s9e.TextFormatter.enablePlugin(el.id)
			             : s9e.TextFormatter.disablePlugin(el.id);

			text = '';
		}
	</script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>
</body>
</html><?php

file_put_contents(__DIR__ . '/../../s9e.github.io/TextFormatter/scroller.html', ob_get_clean());

echo "Done.\n";