diff --git a/demos/CSSLintDemo.htm b/demos/CSSLintDemo.htm index a90eb93f..3bc0921c 100644 --- a/demos/CSSLintDemo.htm +++ b/demos/CSSLintDemo.htm @@ -2,14 +2,23 @@ CSSLint Demo - - + +

CSSLint Demo

- +

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

+

+
+

+ +

+
+ + + + +} diff --git a/demos/demo.css b/demos/demo.css index b2409725..37c7a6e4 100644 --- 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; +} \ No newline at end of file diff --git a/demos/demo.js b/demos/demo.js new file mode 100644 index 00000000..5e449002 --- /dev/null +++ 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, '>'); + }; + + // 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 += ''; + } + } + 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 = '' + + ''; + for (i = 0, len = messages.length; i < len; i++) { + message = results.messages[i]; + + table += ''; + + table += ''; + table += ''; + table += ''; + table += ''; + table += ''; + table += ''; + + table += ''; + } + table += '
typelinecoltitledescriptionbrowsers
' + esc(message.type) + '' + esc(message.line) + '' + esc(message.col) + '' + esc(message.rule.name) + '' + esc(message.message) + '
' + esc(message.evidence) + '		' + esc(message.rule.browsers) + '
'; + 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](); + } + }; +}()); \ No newline at end of file diff --git a/demos/example.css b/demos/example.css new file mode 100644 index 00000000..b2409725 --- /dev/null +++ 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); + } +}