From df7a020100e9f38f37c4e3a0ad8f143eb924b55d Mon Sep 17 00:00:00 2001 From: Jos Hirth Date: Sun, 6 May 2012 06:54:09 +0200 Subject: [PATCH 1/2] More feature-complete demo application. Rules can be enabled and disabled individually. Ruleset is saved when the lint button is pressed and restored on startup. --- demos/CSSLintDemo.htm | 53 +++++------------ demos/demo.css | 83 ++++++++++++++------------- demos/demo.js | 128 ++++++++++++++++++++++++++++++++++++++++++ demos/example.css | 43 ++++++++++++++ 4 files changed, 227 insertions(+), 80 deletions(-) create mode 100644 demos/demo.js create mode 100644 demos/example.css 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..9d268fa6 --- /dev/null +++ b/demos/demo.js @@ -0,0 +1,128 @@ +/*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]; + 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); + } +} From 3a443f1a76697228933b6a3e44fdd16a4f725f8d Mon Sep 17 00:00:00 2001 From: Jos Hirth Date: Wed, 9 May 2012 20:20:27 +0200 Subject: [PATCH 2/2] Filter out 'errors' rule during UI generation. Since 'errors' gets forcefully enabled in CSSLint.verify(), the UI won't serve any purpose. --- demos/demo.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/demos/demo.js b/demos/demo.js index 9d268fa6..5e449002 100644 --- a/demos/demo.js +++ b/demos/demo.js @@ -45,7 +45,10 @@ }); for (i = 0, len = rules.length; i < len; i++) { rule = rules[i]; - markup += ''; + // errors is hardcoded (2 = emit error messages), the UI won't serve any purpose + if (rule.id !== 'errors') { + markup += ''; + } } document.getElementById('rules').innerHTML = markup; }());