Skip to content

Commit 75c8d58

Browse files
NVNV
committed
Move CSS and JS out of parse.html into separate files
Just to make me able to edit it with Chrome DevTools Autosave
1 parent bfcc9fa commit 75c8d58

3 files changed

Lines changed: 241 additions & 243 deletions

File tree

‎docs/parse.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
html, body {
2+
background: #333;
3+
color: #EEE;
4+
font: 12px sans-serif;
5+
margin: 0;
6+
height: 100%;
7+
}
8+
body {
9+
padding-bottom: 1.7em;
10+
-webkit-box-sizing: border-box;
11+
-moz-box-sizing: border-box;
12+
box-sizing: border-box;
13+
}
14+
table {
15+
width: 100%;
16+
table-layout: fixed;
17+
margin: 0 auto;
18+
}
19+
td {
20+
vertical-align: top;
21+
}
22+
h1 {
23+
font: normal 1em sans-serif;
24+
display: inline;
25+
}
26+
#labels {
27+
color: #FFE992;
28+
width: 66%;
29+
}
30+
#labels td {
31+
width: 50%;
32+
text-align: center;
33+
}
34+
#labels td::before {
35+
content: '↱ ';
36+
color: #998e62;
37+
position: relative;
38+
top: .4em;
39+
}
40+
#labels td::after {
41+
content: ' ↴';
42+
color: #998e62;
43+
position: relative;
44+
top: .4em;
45+
}
46+
#content {
47+
width: 100%;
48+
height: 100%;
49+
}
50+
#content td {
51+
width: 33%;
52+
}
53+
#content td + td {
54+
padding-left: 1%;
55+
}
56+
#output span {
57+
color: #666;
58+
}
59+
.style-cell textarea {
60+
width: 99%;
61+
height: 100%;
62+
font: 12px monospace;
63+
white-space: pre-wrap;
64+
}
65+
.serialized-cell {
66+
border-left: 1px solid #363636;
67+
}
68+
#message {
69+
visibility: hidden;
70+
}
71+
.error #message {
72+
visibility: visible;
73+
position: absolute;
74+
top: 0;
75+
left: 34%;
76+
padding: 1em;
77+
background: black;
78+
color: #e34343;
79+
font-size: 24px;
80+
}

‎docs/parse.html‎

Lines changed: 2 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -4,88 +4,7 @@
44
<meta charset="utf-8">
55
<title>CSSOM.js parse method</title>
66
<script src="../src/loader.js"></script>
7-
<style type="text/css">
8-
html, body {
9-
background: #333;
10-
color: #EEE;
11-
font: 12px sans-serif;
12-
margin: 0;
13-
height: 100%;
14-
}
15-
body {
16-
padding-bottom: 1.7em;
17-
-webkit-box-sizing: border-box;
18-
-moz-box-sizing: border-box;
19-
box-sizing: border-box;
20-
}
21-
table {
22-
width: 100%;
23-
table-layout: fixed;
24-
margin: 0 auto;
25-
}
26-
td {
27-
vertical-align: top;
28-
}
29-
h1 {
30-
font: normal 1em sans-serif;
31-
display: inline;
32-
}
33-
#labels {
34-
color: #FFE992;
35-
width: 66%;
36-
}
37-
#labels td {
38-
width: 50%;
39-
text-align: center;
40-
}
41-
#labels td::before {
42-
content: '↱ ';
43-
color: #998e62;
44-
position: relative;
45-
top: .4em;
46-
}
47-
#labels td::after {
48-
content: ' ↴';
49-
color: #998e62;
50-
position: relative;
51-
top: .4em;
52-
}
53-
#content {
54-
width: 100%;
55-
height: 100%;
56-
}
57-
#content td {
58-
width: 33%;
59-
}
60-
#content td + td {
61-
padding-left: 1%;
62-
}
63-
#output span {
64-
color: #666;
65-
}
66-
.style-cell textarea {
67-
width: 99%;
68-
height: 100%;
69-
font: 12px monospace;
70-
white-space: pre-wrap;
71-
}
72-
.serialized-cell {
73-
border-left: 1px solid #363636;
74-
}
75-
#message {
76-
visibility: hidden;
77-
}
78-
.error #message {
79-
visibility: visible;
80-
position: absolute;
81-
top: 0;
82-
left: 34%;
83-
padding: 1em;
84-
background: black;
85-
color: #e34343;
86-
font-size: 24px;
87-
}
88-
</style>
7+
<link rel="stylesheet" href="parse.css">
898
</head>
909
<body>
9110
<table id="labels">
@@ -102,166 +21,6 @@
10221
</tr>
10322
</table>
10423
<div id="message"></div>
105-
<script defer>
106-
/**
107-
* @param {number} depth
108-
* @return {string}
109-
*/
110-
function makeIndent(depth) {
111-
var INDENT = ' ';
112-
if (depth == 1) {
113-
return INDENT;
114-
} else if (depth < 1) {
115-
return '';
116-
}
117-
118-
if (depth in makeIndent.cache) {
119-
return makeIndent.cache[depth];
120-
} else {
121-
var result = INDENT;
122-
for (var i = depth; --i;) {
123-
result += INDENT;
124-
}
125-
makeIndent.cache[depth] = result;
126-
return result;
127-
}
128-
}
129-
makeIndent.cache = {};
130-
131-
132-
/**
133-
* buildPath(2) -> '../..'
134-
* @param {number} level
135-
* @return {string}
136-
*/
137-
function buildPath(level) {
138-
if (level == 0) {
139-
return '.';
140-
} else {
141-
var result = '..';
142-
for (var i = 1; i < level; i++) {
143-
result += '/..';
144-
}
145-
return result;
146-
}
147-
}
148-
149-
150-
/**
151-
* stringifyObjectKey('color') -> 'color'
152-
* stringifyObjectKey('background-color') -> '"background-color"'
153-
* @param {string} key
154-
* @return {string}
155-
*/
156-
function stringifyObjectKey(key) {
157-
return /^[a-zA-Z_$][A-Za-z0-9_$]*$/.test(key) ?
158-
key :
159-
'"' + escapeDoubleQuotes(key) + '"';
160-
}
161-
162-
163-
/**
164-
* @param {string} string
165-
* @return {string}
166-
* @see http://stackoverflow.com/questions/7382115/escape-quotes-in-a-string-with-backslash
167-
*/
168-
function escapeDoubleQuotes(string) {
169-
return string.replace(/(\\*)(")/g, function(all, backslashes, quote) {
170-
return backslashes.length % 2 ?
171-
all :
172-
backslashes + '\\' + quote;
173-
});
174-
}
175-
176-
177-
/**
178-
* @param {Object} object
179-
* @param {number} [depth]
180-
* @param {Array} [stack]
181-
* @return {string}
182-
*/
183-
function inspect(object, depth, stack) {
184-
depth ? depth++ : (depth = 1);
185-
stack = stack || (stack = []);
186-
187-
switch (typeof object) {
188-
case 'object':
189-
var level = stack.indexOf(object);
190-
if (level != -1) {
191-
return buildPath(level);
192-
}
193-
stack = [object].concat(stack);
194-
195-
var properties = [];
196-
var indent = makeIndent(depth);
197-
for (var key in object) {
198-
if (object.hasOwnProperty(key)) {
199-
properties.push(indent + stringifyObjectKey(key) + '<span>: </span>' + inspect(object[key], depth, stack));
200-
}
201-
}
202-
var indentInside = makeIndent(depth - 1);
203-
return '<span>{</span>\n' + properties.join('<span>,</span>\n') + '\n' + indentInside + '<span>}</span>';
204-
205-
case 'string':
206-
return '"' + object + '"';
207-
208-
default:
209-
return object.toString();
210-
}
211-
}
212-
213-
214-
215-
var errors = [];
216-
if (!("__defineGetter__" in {})) {
217-
errors.push("Object.prototype.__defineGetter__ isn’t supported");
218-
}
219-
if (errors.length) {
220-
document.getElementById("message").innerHTML = errors.join("<br>");
221-
document.body.className = "error";
222-
throw errors.join("\n\n");
223-
}
224-
225-
var style = document.getElementById("style");
226-
var output = document.getElementById("output");
227-
var serialized = document.getElementById("serialized");
228-
229-
function outputUpdated(){
230-
var value = style.value;
231-
if (value != style.prevValue) {
232-
var css = CSSOM.parse(value);
233-
output.innerHTML = inspect(css);
234-
serialized.innerHTML = css.toString();
235-
style.prevValue = value;
236-
}
237-
}
238-
239-
function hashChanged(){
240-
var hash = location.hash;
241-
var splitted = hash.split("=");
242-
if (splitted.length < 2) {
243-
return;
244-
}
245-
var name = splitted[0];
246-
var value = splitted[1];
247-
if (name == "#css") {
248-
style.value = decodeURIComponent(value);
249-
outputUpdated();
250-
}
251-
}
252-
253-
window.onload = function() {
254-
hashChanged();
255-
outputUpdated();
256-
};
257-
258-
window.onhashchange = hashChanged;
259-
style.onkeyup = style.onpaste = function changed(){
260-
outputUpdated();
261-
};
262-
style.onchange = function updateLocation(){
263-
location.hash = "css=" + encodeURIComponent(style.value);
264-
};
265-
</script>
24+
<script src="parse.js" defer></script>
26625
</body>
26726
</html>

0 commit comments

Comments
 (0)