CSSLint · mahonnaise · May 6, 2012 · May 9, 2012
diff --git a/demos/CSSLintDemo.htm b/demos/CSSLintDemo.htm
@@ -2,14 +2,23 @@
 <html>
 <head>
     <title>CSSLint Demo</title>
-    <script type="text/javascript" src="../build/csslint.js"></script>
-    <style type="text/css">
-        .error { color: red; }
-    </style>
+    <link rel="stylesheet" href="demo.css"/>
+    <meta charset="UTF-8"/>
 </head>
 <body>
     <h1>CSSLint Demo</h1>
-    <textarea rows="50" cols="100" id="input">
+    <textarea rows="50" cols="100" id="input"></textarea>
+    <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
+    <p><input type="button" id="paste-button" value="Paste Demo CSS"/></p>
+    <div id="rules" class="checkboxList"></div>
+    <p>
+        <input type="button" id="check-all-button" value="Check All"/> <input type="button" id="uncheck-all-button" value="Uncheck All"/> <input type="button" id="lint-button" value="Run CSSLint"/>
+    </p>
+    <div id="output"></div>
+    <script src="../build/csslint.js"></script>
+    <script src="demo.js"></script>
+    <!-- demo.css -->
+<script type="text/x-inline" id="demo-css">
 @charset "UTF-8";
 
 @import url("booya.css") print,screen;
@@ -68,38 +77,6 @@ <h1>CSSLint Demo</h1>
     font-size: 2em;
     content: counter(page);
   }
-}
-    </textarea>
-    <input type="button" id="lint-btn" value="Run CSSLint">
-    <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
-    <div id="output">
-
-    </div>
-    <script>
-    (function(){
-
-        document.body.onclick = function(event){
-            event = event || window.event;
-            var target = event.target || event.srcElement,
-                results, messages, i, len;
-
-
-            if (target.id == "lint-btn"){
-                document.getElementById("output").innerHTML = "";
-                results = CSSLint.verify(document.getElementById("input").value);
-                messages = results.messages;
-                for (i=0, len=messages.length; i < len; i++){
-                    log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
-                }
-
-            }
-        };
-
-        function log(value, level){
-                var output = document.getElementById("output");
-                output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
-        }
-    })();
-    </script>
+}</script>
 </body>
 </html>
diff --git a/demos/demo.css b/demos/demo.css
@@ -1,43 +1,42 @@
-@charset "UTF-8";
-
-@import url("booya.css") print,screen;
-@import "whatup.css" screen;
-@import "wicked.css";
-
-@namespace "http://www.w3.org/1999/xhtml";
-@namespace svg "http://www.w3.org/2000/svg";
-
-li.inline #foo {
-  background: rgba(234, 212, 200, 0.5) url("something.png");
-  display: inline;
-  padding-left: 3px;
-  padding-right: 7px;
-  border-right: 1px dotted #066;
-}
-
-li.last.first {
-  display: inline;
-  padding-left: 3px !important;
-  padding-right: 3px;
-  border-right: 0px;
-}
-
-@media print {
-    li.inline {
-      color: black;
-    }
-
-
-@charset "UTF-8"; 
-
-@page {
-  margin: 10%;
-  counter-increment: page;
-
-  @top-center {
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 2em;
-    content: counter(page);
-  }
+html {
+    font-family: arial, sans-serif;
 }
+table {
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+}
+.error {
+    color: #c20;
+}
+tr:hover > td {
+    background: #ddd;
+}
+th, td{
+    padding: 2px 4px;
+    border: 1px solid #ccc;
+}
+th {
+    text-align: left;
+}
+td {
+    vertical-align: top;
+}
+textarea {
+    -webkit-box-sizing: border-box; /* safari 3, lol */
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+    resize: vertical;
+    height: 200px;
+}
+.checkboxList {
+    display: table;
+}
+label {
+    font-size: 12px;
+    line-height: 1;
+    display: block;
+}
+label:hover {
+    background: #ddd;
+}
diff --git a/demos/demo.js b/demos/demo.js
@@ -0,0 +1,131 @@
+/*jslint plusplus: false, browser:true*/
+/*global CSSLint:false */
+
+(function () {
+    var esc, ruleCheckboxes, getRuleSet, save, load, allCheckboxesChecked, actions;
+
+    // escapes < and >
+    esc = function (text) {
+        if (!text) {
+            return '';
+        }
+        return String(text).replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    };
+
+    // saves the rule options
+    save = function (data) {
+        if (window.localStorage && window.JSON) {
+            localStorage.setItem('CSSLintOptions', JSON.stringify(data));
+        }
+    };
+
+    // loads the rule options
+    load = function () {
+        var data;
+        if (window.localStorage && window.JSON) {
+            data = localStorage.getItem('CSSLintOptions');
+            if (data) {
+                return JSON.parse(data);
+            }
+        }
+        return {};
+    };
+
+    // create rule checkboxes
+    (function () {
+        var rules, rule, i, len, markup = '', set = load();
+        rules = CSSLint.getRules();
+        rules.sort(function (a, b) {
+            if (a.id > b.id) {
+                return 1;
+            } else if (a.id < b.id) {
+                return -1;
+            }
+            return 0;
+        });
+        for (i = 0, len = rules.length; i < len; i++) {
+            rule = rules[i];
+            // errors is hardcoded (2 = emit error messages), the UI won't serve any purpose
+            if (rule.id !== 'errors') {
+                markup += '<label title="' + esc(rule.desc) + '"><input type="checkbox" data-id="' + rule.id + '"' + (set[rule.id] ? ' checked="checked"' : '') + '/>' + rule.id + '</label>';
+            }
+        }
+        document.getElementById('rules').innerHTML = markup;
+    }());
+
+    // create a ruleset from the state of the checkboxes
+    getRuleSet = function () {
+        var i, len, checkboxes, checkbox, set = {};
+        checkboxes = document.getElementById('rules').getElementsByTagName('input');
+        for (i = 0, len = checkboxes.length; i < len; i++) {
+            checkbox = checkboxes[i];
+            if (checkbox.checked) {
+                set[checkbox.getAttribute('data-id')] = 1; // 1 = warning
+            }
+        }
+        save(set);
+        return set;
+    };
+
+    // sets the checked state of all checkboxes
+    allCheckboxesChecked = function (state) {
+        var i, len, checkboxes;
+        checkboxes = document.getElementById('rules').getElementsByTagName('input');
+        for (i = 0, len = checkboxes.length; i < len; i++) {
+            checkboxes[i].checked = state;
+        }
+    };
+
+    // all action handlers
+    actions = {
+        'lint-button': function () {
+            var results, messages, message, i, len, table, ruleset;
+            document.getElementById('output').innerHTML = '';
+            results = CSSLint.verify(document.getElementById('input').value, getRuleSet());
+            messages = results.messages;
+
+            if (!messages.length) {
+                document.getElementById('output').innerHTML = 'No issues found.';
+                return;
+            }
+
+            table = '<table>' +
+                '<tr><th>type</th><th>line</th><th>col</th><th>title</th><th>description</th><th>browsers</th></tr>';
+            for (i = 0, len = messages.length; i < len; i++) {
+                message = results.messages[i];
+
+                table += '<tr class="' + esc(message.type) + '">';
+
+                table += '<td>' + esc(message.type) + '</td>';
+                table += '<td>' + esc(message.line) + '</td>';
+                table += '<td>' + esc(message.col) + '</td>';
+                table += '<td>' + esc(message.rule.name) + '</td>';
+                table += '<td>' + esc(message.message) + '<br/><code>' + esc(message.evidence) + '</code></td>';
+                table += '<td>' + esc(message.rule.browsers) + '</td>';
+
+                table += '</tr>';
+            }
+            table += '</table>';
+            document.getElementById('output').innerHTML = table;
+        },
+        'paste-button': function () {
+            document.getElementById('input').value = document.getElementById('demo-css').innerHTML;
+        },
+        'check-all-button': function () {
+            allCheckboxesChecked(true);
+        },
+        'uncheck-all-button': function () {
+            allCheckboxesChecked(false);
+        }
+    };
+
+    // handle click events
+    document.body.onclick = function (event) {
+        event = event || window.event;
+        var target = event.target || event.srcElement;
+
+        if (actions[target.id]) {
+            actions[target.id]();
+        }
+    };
+}());
diff --git a/demos/example.css b/demos/example.css
@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+@import url("booya.css") print,screen;
+@import "whatup.css" screen;
+@import "wicked.css";
+
+@namespace "http://www.w3.org/1999/xhtml";
+@namespace svg "http://www.w3.org/2000/svg";
+
+li.inline #foo {
+  background: rgba(234, 212, 200, 0.5) url("something.png");
+  display: inline;
+  padding-left: 3px;
+  padding-right: 7px;
+  border-right: 1px dotted #066;
+}
+
+li.last.first {
+  display: inline;
+  padding-left: 3px !important;
+  padding-right: 3px;
+  border-right: 0px;
+}
+
+@media print {
+    li.inline {
+      color: black;
+    }
+
+
+@charset "UTF-8"; 
+
+@page {
+  margin: 10%;
+  counter-increment: page;
+
+  @top-center {
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 2em;
+    content: counter(page);
+  }
+}