pwa
/
Lungo2.0.js
mirror of https://github.com/xabstract/Lungo2.0.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSOM.js parse method</title>
	<script>
	var exports = {};
	function require(){
		return exports;
	}
	</script>
	<script src="../lib/CSSStyleDeclaration.js"></script>
	<script src="../lib/CSSRule.js"></script>
	<script src="../lib/CSSStyleRule.js"></script>
	<script src="../lib/CSSImportRule.js"></script>
	<script src="../lib/MediaList.js"></script>
	<script src="../lib/CSSMediaRule.js"></script>
	<script src="../lib/StyleSheet.js"></script>
	<script src="../lib/CSSStyleSheet.js"></script>
	<script src="../lib/parse.js"></script>
	<script>
	window.CSSOM = exports;
	</script>
	<style type="text/css">
	html, body {
		background: #333;
		color: #EEE;
		font: 12px sans-serif;
		margin: 0;
		height: 100%;
	}
	body {
		padding-bottom: 1.7em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	table {
		width: 100%;
		table-layout: fixed;
		margin: 0 auto;
	}
	td {
		vertical-align: top;
	}
	h1 {
		font: normal 1em sans-serif;
		display: inline;
	}
	#labels {
		color: #FFE992;
		width: 66%;
	}
	#labels td {
		width: 50%;
		text-align: center;
	}
	#labels td::before {
		content: '↱ ';
		color: #998e62;
		position: relative;
		top: .4em;
	}
	#labels td::after {
		content: ' ↴';
		color: #998e62;
		position: relative;
		top: .4em;
	}
	#content {
		width: 100%;
		height: 100%;
	}
	#content td {
		width: 33%;
	}
	#content td + td {
		padding-left: 1%;
	}
	.style-cell textarea {
		width: 99%;
		height: 100%;
		font: 12px monospace;
		white-space: pre-wrap;
	}
	.serialized-cell {
		border-left: 1px solid #363636;
	}
	#message {
		visibility: hidden;
	}
	.error #message {
		visibility: visible;
		position: absolute;
		top: 0;
		left: 34%;
		padding: 1em;
		background: black;
		color: #e34343;
		font-size: 24px;
	}
	</style>
</head>
<body>
<table id="labels">
	<tr><td><h1>CSSOM.parse</h1></td><td>.toString</td></tr>
</table>
<table id="content">
	<tr>
		<td class="style-cell">
<textarea id="style" spellcheck="false" rows="40">img {
  border: none
}</textarea></td>
		<td class="output-cell"><pre id="output"></pre></td>
		<td class="serialized-cell"><pre id="serialized"></pre></td>
	</tr>
</table>
<div id="message"></div>
<script defer>
var errors = [];
if (!("__defineGetter__" in {})) {
	errors.push("Object.prototype.__defineGetter__ isn’t supported");
}
if (errors.length) {
	document.getElementById("message").innerHTML = errors.join("<br>");
	document.body.className = "error";
	throw errors.join("\n\n");
}

var style = document.getElementById("style");
var output = document.getElementById("output");
var serialized = document.getElementById("serialized");

function outputUpdated(){
	var value = style.value;
	if (value != style.prevValue) {
		var css = CSSOM.parse(value);
		output.innerHTML = JSON.stringify(css, null, 2);
		serialized.innerHTML = css.toString();
		style.prevValue = value;
	}
}

function hashChanged(){
	var hash = location.hash;
	var splitted = hash.split("=");
	if (splitted.length < 2) {
		return;
	}
	var name = splitted[0];
	var value = splitted[1];
	if (name == "#css") {
		style.value = decodeURIComponent(value);
		outputUpdated();
	}
}

hashChanged();
outputUpdated();

window.onhashchange = hashChanged;
style.onkeyup = style.onpaste = function changed(){
	outputUpdated();
};
style.onchange = function updateLocation(){
	location.hash = "css=" + encodeURIComponent(style.value);
};
</script>
</body>
</html>