Skip to content

Commit b939811

Browse files
XhmikosRXhmikosR
committed
demos: formatting.
1 parent 1f89286 commit b939811

File tree

2 files changed

+221
-218
lines changed

2 files changed

+221
-218
lines changed

‎demos/css/CSSParserDemo.htm‎

Lines changed: 182 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2-
<html>
1+
<!doctype html>
2+
<html lang="en">
33
<head>
4-
<title>CSS Parser Demo</title>
5-
<!--<script type="text/javascript" src="../../dist/parserlib.js"></script>-->
6-
<script type="text/javascript" src="../../dist/parserlib-core.js"></script>
7-
<script type="text/javascript" src="../../dist/parserlib-css.js"></script>
8-
<style type="text/css">
9-
.error { color: red; }
10-
</style>
4+
<meta charset="utf-8">
5+
<title>CSS Parser Demo</title>
6+
<!--<script src="../../dist/parserlib.js"></script>-->
7+
<script src="../../dist/parserlib-core.js"></script>
8+
<script src="../../dist/parserlib-css.js"></script>
9+
<style>
10+
.error { color: red; }
11+
</style>
1112
</head>
1213
<body>
13-
<h1>CSS Parser Demo</h1>
14-
<textarea rows="10" cols="40" id="input">
15-
@charset "UTF-8";
14+
<h1>CSS Parser Demo</h1>
15+
<textarea rows="10" cols="40" id="input">
16+
@charset "UTF-8";
1617

1718
@import url("booya.css") print,screen;
1819
@import "whatup.css" screen;
@@ -22,7 +23,6 @@ <h1>CSS Parser Demo</h1>
2223
@namespace svg "http://www.w3.org/2000/svg";
2324

2425
@keyframes 'diagonal-slide' {
25-
2626
from {
2727
left: 0;
2828
top: 0;
@@ -35,188 +35,195 @@ <h1>CSS Parser Demo</h1>
3535
}
3636

3737
li.inline {
38-
background: url("something.png");
39-
display: inline;
40-
padding-left: 3px;
41-
padding-right: 7px;
42-
border-right: 1px dotted #066;
38+
background: url("something.png");
39+
display: inline;
40+
padding-left: 3px;
41+
padding-right: 7px;
42+
border-right: 1px dotted #066;
4343
}
4444

4545
li.last {
46-
display: inline;
47-
padding-left: 3px !important;
48-
padding-right: 3px;
49-
border-right: 0px;
50-
}
46+
display: inline;
47+
padding-left: 3px !important;
48+
padding-right: 3px;
49+
border-right: 0;
50+
}
5151

5252
@media print {
5353
li.inline {
54-
color: black;
54+
color: black;
5555
}
5656
}
5757

5858
@page {
59-
margin: 10%;
60-
counter-increment: page;
61-
62-
@top-center {
63-
font-family: sans-serif;
64-
font-weight: bold;
65-
font-size: 2em;
66-
content: counter(page);
67-
}
59+
margin: 10%;
60+
counter-increment: page;
61+
62+
@top-center {
63+
font-family: sans-serif;
64+
font-weight: bold;
65+
font-size: 2em;
66+
content: counter(page);
67+
}
6868
}
69-
</textarea>
70-
<p><input type="checkbox" id="starHack" /><label for="starHack">Accept star hack</label>&nbsp;&nbsp;<input type="checkbox" id="ieFilters" /><label for="ieFilters">Accept IE filters</label>&nbsp;&nbsp;<input type="checkbox" id="strictMode" /><label for="strictMode">Strict mode</label></p>
71-
<input type="button" onclick="parse()" value="parse">
72-
<p>(You may want to keep the CSS kinda small, this could take a while.)</p>
73-
<div id="output">
74-
75-
</div>
76-
<script type="text/javascript">
77-
78-
function parse(){
79-
document.getElementById("output").innerHTML = "";
80-
var parser = new parserlib.css.Parser({ starHack: document.getElementById("starHack").checked,
81-
ieFilters: document.getElementById("ieFilters").checked,
82-
strict: document.getElementById("strictMode").checked});
83-
parser.addListener("startstylesheet", function(){
84-
log("Starting style sheet");
85-
});
86-
87-
parser.addListener("endstylesheet", function(){
88-
log("Ending style sheet");
89-
});
90-
91-
parser.addListener("charset", function(event){
92-
log("Charset is " + event.charset);
93-
});
94-
95-
parser.addListener("namespace", function(event){
96-
log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
97-
});
98-
99-
parser.addListener("startfontface", function(event){
100-
log("Starting font face");
101-
});
102-
103-
parser.addListener("endfontface", function(event){
104-
log("Ending font face");
105-
});
106-
107-
parser.addListener("startkeyframes", function(event){
108-
log("Starting keyframes with name=" + event.name);
109-
});
110-
111-
parser.addListener("startkeyframerule", function(event){
112-
log("Starting keyframe rule with " + event.keys.length + " keys(s)");
113-
114-
for (var i=0,len=event.keys.length; i < len; i++){
115-
var key = event.keys[i];
116-
117-
log(" " + key + " (" + key.line + "," + key.col + ")");
118-
}
69+
</textarea>
70+
71+
<p>
72+
<input type="checkbox" id="starHack" />
73+
<label for="starHack">Accept star hack</label>&nbsp;&nbsp;
74+
<input type="checkbox" id="ieFilters" />
75+
<label for="ieFilters">Accept IE filters</label>&nbsp;&nbsp;
76+
<input type="checkbox" id="strictMode" />
77+
<label for="strictMode">Strict mode</label>
78+
</p>
79+
80+
<input type="button" onclick="parse()" value="parse">
81+
82+
<p>(You may want to keep the CSS kinda small, this could take a while.)</p>
83+
84+
<div id="output"></div>
85+
86+
<script>
87+
88+
function parse() {
89+
document.getElementById("output").innerHTML = "";
90+
var parser = new parserlib.css.Parser({
91+
starHack: document.getElementById("starHack").checked,
92+
ieFilters: document.getElementById("ieFilters").checked,
93+
strict: document.getElementById("strictMode").checked
94+
});
95+
96+
parser.addListener("startstylesheet", function() {
97+
log("Starting style sheet");
98+
});
99+
100+
parser.addListener("endstylesheet", function() {
101+
log("Ending style sheet");
102+
});
103+
104+
parser.addListener("charset", function(event) {
105+
log("Charset is " + event.charset);
106+
});
107+
108+
parser.addListener("namespace", function(event) {
109+
log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
110+
});
111+
112+
parser.addListener("startfontface", function(event) {
113+
log("Starting font face");
114+
});
115+
116+
parser.addListener("endfontface", function(event) {
117+
log("Ending font face");
118+
});
119+
120+
parser.addListener("startkeyframes", function(event) {
121+
log("Starting keyframes with name=" + event.name);
122+
});
123+
124+
parser.addListener("startkeyframerule", function(event) {
125+
log("Starting keyframe rule with " + event.keys.length + " keys(s)");
126+
127+
for (var i = 0, len=event.keys.length; i < len; i++) {
128+
var key = event.keys[i];
129+
130+
log(" " + key + " (" + key.line + "," + key.col + ")");
131+
}
132+
});
133+
134+
parser.addListener("endkeyframerule", function(event) {
135+
log("Ending keyframe rule with keys [" + event.keys + "]");
136+
});
137+
138+
parser.addListener("endkeyframes", function(event) {
139+
log("Ending keyframes with name=" + event.name);
140+
});
141+
142+
parser.addListener("startpage", function(event) {
143+
log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
144+
});
145+
146+
147+
parser.addListener("endpage", function(event) {
148+
log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
149+
});
119150

120-
});
121-
122-
parser.addListener("endkeyframerule", function(event){
123-
log("Ending keyframe rule with keys [" + event.keys + "]");
124-
});
125-
126-
parser.addListener("endkeyframes", function(event){
127-
log("Ending keyframes with name=" + event.name);
128-
});
129-
130-
parser.addListener("startpage", function(event){
131-
log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
132-
});
133-
134-
135-
parser.addListener("endpage", function(event){
136-
log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
137-
});
138-
139-
parser.addListener("startpagemargin", function(event){
140-
log("Starting page margin " + event.margin);
141-
});
142-
143-
144-
parser.addListener("endpagemargin", function(event){
145-
log("Ending page margin " + event.margin);
146-
});
147-
148-
149-
parser.addListener("import", function(event){
150-
log("Importing " + event.uri + " for media types [" + event.media + "]");
151-
});
152-
153-
parser.addListener("startrule", function(event){
154-
log("Starting rule with " + event.selectors.length + " selector(s)");
155-
156-
for (var i=0,len=event.selectors.length; i < len; i++){
157-
var selector = event.selectors[i];
158-
159-
log(" Selector #1 (" + selector.line + "," + selector.col + ")");
160-
161-
for (var j=0,count=selector.parts.length; j < count; j++){
162-
log(" Unit #" + (j+1));
163-
164-
if (selector.parts[j] instanceof parserlib.css.SelectorPart){
165-
log(" Element name: " + selector.parts[j].elementName);
166-
167-
for (var k=0; k < selector.parts[j].modifiers.length; k++){
168-
log(" Modifier: " + selector.parts[j].modifiers[k]);
151+
parser.addListener("startpagemargin", function(event) {
152+
log("Starting page margin " + event.margin);
153+
});
154+
155+
156+
parser.addListener("endpagemargin", function(event) {
157+
log("Ending page margin " + event.margin);
158+
});
159+
160+
161+
parser.addListener("import", function(event) {
162+
log("Importing " + event.uri + " for media types [" + event.media + "]");
163+
});
164+
165+
parser.addListener("startrule", function(event) {
166+
log("Starting rule with " + event.selectors.length + " selector(s)");
167+
168+
for (var i = 0, len=event.selectors.length; i < len; i++) {
169+
var selector = event.selectors[i];
170+
171+
log(" Selector #1 (" + selector.line + "," + selector.col + ")");
172+
173+
for (var j = 0, count=selector.parts.length; j < count; j++) {
174+
log(" Unit #" + (j + 1));
175+
176+
if (selector.parts[j] instanceof parserlib.css.SelectorPart) {
177+
log(" Element name: " + selector.parts[j].elementName);
178+
179+
for (var k=0; k < selector.parts[j].modifiers.length; k++) {
180+
log(" Modifier: " + selector.parts[j].modifiers[k]);
181+
}
182+
} else {
183+
log(" Combinator: " + selector.parts[j]);
169184
}
170-
} else{
171-
log(" Combinator: " + selector.parts[j]);
185+
172186
}
173-
174-
187+
175188
}
176-
177-
178-
}
179189

180-
});
181-
182-
parser.addListener("endrule", function(event){
183-
log("Ending rule with selectors [" + event.selectors + "]");
184-
});
185-
186-
parser.addListener("property", function(event){
187-
log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
188-
if (event.invalid){
189-
log(" Not valid: " + event.invalid.message);
190-
}
191-
});
192-
193-
parser.addListener("startmedia", function(event){
194-
log("Starting media [" + event.media + "]");
195-
});
196-
197-
parser.addListener("error", function(event){
198-
log("Parse error: " + event.message + " (" + event.line + "," + event.col + ")", "error");
199-
});
200-
201-
parser.addListener("endmedia", function(event){
202-
log("Ending media [" + event.media + "]");
203-
});
204-
205-
try {
206-
parser.parse(document.getElementById("input").value);
207-
} catch (ex){
208-
log("Parse error: " + ex.message, "error");
209-
}
210-
}
190+
});
211191

192+
parser.addListener("endrule", function(event) {
193+
log("Ending rule with selectors [" + event.selectors + "]");
194+
});
212195

213-
function log(value, level){
214-
var output = document.getElementById("output");
215-
output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
216-
}
196+
parser.addListener("property", function(event) {
197+
log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
198+
if (event.invalid) {
199+
log(" Not valid: " + event.invalid.message);
200+
}
201+
});
202+
203+
parser.addListener("startmedia", function(event) {
204+
log("Starting media [" + event.media + "]");
205+
});
217206

207+
parser.addListener("error", function(event) {
208+
log("Parse error: " + event.message + " (" + event.line + "," + event.col + ")", "error");
209+
});
218210

211+
parser.addListener("endmedia", function(event) {
212+
log("Ending media [" + event.media + "]");
213+
});
214+
215+
try {
216+
parser.parse(document.getElementById("input").value);
217+
} catch (ex){
218+
log("Parse error: " + ex.message, "error");
219+
}
220+
}
221+
222+
function log(value, level) {
223+
var output = document.getElementById("output");
224+
output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
225+
}
219226

220-
</script>
227+
</script>
221228
</body>
222229
</html>

0 commit comments

Comments
 (0)