Skip to content

Commit

Permalink
demos: formatting.
Browse files Browse the repository at this point in the history
  • Loading branch information
@XhmikosR
XhmikosR committed Dec 6, 2016
1 parent 1f89286 commit b939811
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 218 deletions.
357 changes: 182 additions & 175 deletions demos/css/CSSParserDemo.htm
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!doctype html>
<html lang="en">
<head>
<title>CSS Parser Demo</title>
<!--<script type="text/javascript" src="../../dist/parserlib.js"></script>-->
<script type="text/javascript" src="../../dist/parserlib-core.js"></script>
<script type="text/javascript" src="../../dist/parserlib-css.js"></script>
<style type="text/css">
.error { color: red; }
</style>
<meta charset="utf-8">
<title>CSS Parser Demo</title>
<!--<script src="../../dist/parserlib.js"></script>-->
<script src="../../dist/parserlib-core.js"></script>
<script src="../../dist/parserlib-css.js"></script>
<style>
.error { color: red; }
</style>
</head>
<body>
<h1>CSS Parser Demo</h1>
<textarea rows="10" cols="40" id="input">
@charset "UTF-8";
<h1>CSS Parser Demo</h1>
<textarea rows="10" cols="40" id="input">
@charset "UTF-8";

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

@keyframes 'diagonal-slide' {

from {
left: 0;
top: 0;
Expand All @@ -35,188 +35,195 @@ <h1>CSS Parser Demo</h1>
}

li.inline {
background: url("something.png");
display: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #066;
background: url("something.png");
display: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #066;
}

li.last {
display: inline;
padding-left: 3px !important;
padding-right: 3px;
border-right: 0px;
}
display: inline;
padding-left: 3px !important;
padding-right: 3px;
border-right: 0;
}

@media print {
li.inline {
color: black;
color: black;
}
}

@page {
margin: 10%;
counter-increment: page;

@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
margin: 10%;
counter-increment: page;

@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
</textarea>
<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>
<input type="button" onclick="parse()" value="parse">
<p>(You may want to keep the CSS kinda small, this could take a while.)</p>
<div id="output">

</div>
<script type="text/javascript">

function parse(){
document.getElementById("output").innerHTML = "";
var parser = new parserlib.css.Parser({ starHack: document.getElementById("starHack").checked,
ieFilters: document.getElementById("ieFilters").checked,
strict: document.getElementById("strictMode").checked});
parser.addListener("startstylesheet", function(){
log("Starting style sheet");
});

parser.addListener("endstylesheet", function(){
log("Ending style sheet");
});

parser.addListener("charset", function(event){
log("Charset is " + event.charset);
});

parser.addListener("namespace", function(event){
log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
});

parser.addListener("startfontface", function(event){
log("Starting font face");
});

parser.addListener("endfontface", function(event){
log("Ending font face");
});

parser.addListener("startkeyframes", function(event){
log("Starting keyframes with name=" + event.name);
});

parser.addListener("startkeyframerule", function(event){
log("Starting keyframe rule with " + event.keys.length + " keys(s)");

for (var i=0,len=event.keys.length; i < len; i++){
var key = event.keys[i];

log(" " + key + " (" + key.line + "," + key.col + ")");
}
</textarea>

<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>

<input type="button" onclick="parse()" value="parse">

<p>(You may want to keep the CSS kinda small, this could take a while.)</p>

<div id="output"></div>

<script>

function parse() {
document.getElementById("output").innerHTML = "";
var parser = new parserlib.css.Parser({
starHack: document.getElementById("starHack").checked,
ieFilters: document.getElementById("ieFilters").checked,
strict: document.getElementById("strictMode").checked
});

parser.addListener("startstylesheet", function() {
log("Starting style sheet");
});

parser.addListener("endstylesheet", function() {
log("Ending style sheet");
});

parser.addListener("charset", function(event) {
log("Charset is " + event.charset);
});

parser.addListener("namespace", function(event) {
log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
});

parser.addListener("startfontface", function(event) {
log("Starting font face");
});

parser.addListener("endfontface", function(event) {
log("Ending font face");
});

parser.addListener("startkeyframes", function(event) {
log("Starting keyframes with name=" + event.name);
});

parser.addListener("startkeyframerule", function(event) {
log("Starting keyframe rule with " + event.keys.length + " keys(s)");

for (var i = 0, len=event.keys.length; i < len; i++) {
var key = event.keys[i];

log(" " + key + " (" + key.line + "," + key.col + ")");
}
});

parser.addListener("endkeyframerule", function(event) {
log("Ending keyframe rule with keys [" + event.keys + "]");
});

parser.addListener("endkeyframes", function(event) {
log("Ending keyframes with name=" + event.name);
});

parser.addListener("startpage", function(event) {
log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
});


parser.addListener("endpage", function(event) {
log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
});

});

parser.addListener("endkeyframerule", function(event){
log("Ending keyframe rule with keys [" + event.keys + "]");
});

parser.addListener("endkeyframes", function(event){
log("Ending keyframes with name=" + event.name);
});

parser.addListener("startpage", function(event){
log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
});


parser.addListener("endpage", function(event){
log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
});

parser.addListener("startpagemargin", function(event){
log("Starting page margin " + event.margin);
});


parser.addListener("endpagemargin", function(event){
log("Ending page margin " + event.margin);
});


parser.addListener("import", function(event){
log("Importing " + event.uri + " for media types [" + event.media + "]");
});

parser.addListener("startrule", function(event){
log("Starting rule with " + event.selectors.length + " selector(s)");

for (var i=0,len=event.selectors.length; i < len; i++){
var selector = event.selectors[i];

log(" Selector #1 (" + selector.line + "," + selector.col + ")");

for (var j=0,count=selector.parts.length; j < count; j++){
log(" Unit #" + (j+1));

if (selector.parts[j] instanceof parserlib.css.SelectorPart){
log(" Element name: " + selector.parts[j].elementName);

for (var k=0; k < selector.parts[j].modifiers.length; k++){
log(" Modifier: " + selector.parts[j].modifiers[k]);
parser.addListener("startpagemargin", function(event) {
log("Starting page margin " + event.margin);
});


parser.addListener("endpagemargin", function(event) {
log("Ending page margin " + event.margin);
});


parser.addListener("import", function(event) {
log("Importing " + event.uri + " for media types [" + event.media + "]");
});

parser.addListener("startrule", function(event) {
log("Starting rule with " + event.selectors.length + " selector(s)");

for (var i = 0, len=event.selectors.length; i < len; i++) {
var selector = event.selectors[i];

log(" Selector #1 (" + selector.line + "," + selector.col + ")");

for (var j = 0, count=selector.parts.length; j < count; j++) {
log(" Unit #" + (j + 1));

if (selector.parts[j] instanceof parserlib.css.SelectorPart) {
log(" Element name: " + selector.parts[j].elementName);

for (var k=0; k < selector.parts[j].modifiers.length; k++) {
log(" Modifier: " + selector.parts[j].modifiers[k]);
}
} else {
log(" Combinator: " + selector.parts[j]);
}
} else{
log(" Combinator: " + selector.parts[j]);

}



}


}

});

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

parser.addListener("property", function(event){
log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
if (event.invalid){
log(" Not valid: " + event.invalid.message);
}
});

parser.addListener("startmedia", function(event){
log("Starting media [" + event.media + "]");
});

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

parser.addListener("endmedia", function(event){
log("Ending media [" + event.media + "]");
});

try {
parser.parse(document.getElementById("input").value);
} catch (ex){
log("Parse error: " + ex.message, "error");
}
}
});

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

function log(value, level){
var output = document.getElementById("output");
output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
}
parser.addListener("property", function(event) {
log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
if (event.invalid) {
log(" Not valid: " + event.invalid.message);
}
});

parser.addListener("startmedia", function(event) {
log("Starting media [" + event.media + "]");
});

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

parser.addListener("endmedia", function(event) {
log("Ending media [" + event.media + "]");
});

try {
parser.parse(document.getElementById("input").value);
} catch (ex){
log("Parse error: " + ex.message, "error");
}
}

function log(value, level) {
var output = document.getElementById("output");
output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
}

</script>
</script>
</body>
</html>
Loading

0 comments on commit b939811

Please sign in to comment.