Permalink
Browse files

new look

  • Loading branch information...
1 parent 4f2bf65 commit 097ba532870c9c358f6c535d0712171d56a3f2a6 @douglascrockford committed May 20, 2012
Showing with 700 additions and 623 deletions.
  1. +158 −103 init_ui.js
  2. +22 −18 intercept.js
  3. +262 −244 jslint.html
  4. +237 −236 jslint.js
  5. +21 −22 lint.html
  6. BIN sweater_70.png
View
@@ -1,5 +1,5 @@
// init_ui.js
-// 2011-12-08
+// 2012-05-09
// This is the web browser companion to fulljslint.js. It is an ADsafe
// lib file that implements a web ui by adding behavior to the widget's
@@ -10,176 +10,231 @@
// option = {adsafe: true, fragment: false}
-/*properties check, cookie, each, edition, get, getCheck, getTitle, getValue,
- has, indent, isArray, join, jslint, length, lib, maxerr, maxlen, on,
- predef, push, q, select, set, split, stringify, style, target, tree, value
+/*properties
+ cookie, each, edition, forEach, get, getStyle, getTitle, getValue,
+ indent, isArray, join, jslint, keys, klass, length, lib, maxerr, maxlen, on,
+ predef, preventDefault, push, q, select, set, split, style, target, value
*/
-
ADSAFE.lib("init_ui", function (lib) {
'use strict';
return function (dom) {
- var table = dom.q('#JSLINT_TABLE'),
- boxes = table.q('span'),
+ var edition = dom.q('#JSLINT_EDITION'),
+ errors = dom.q('#JSLINT_ERRORS'),
+ errors_div = errors.q('>div'),
indent = dom.q('#JSLINT_INDENT'),
- input = dom.q('#JSLINT_INPUT'),
- jslintstring = dom.q('#JSLINT_JSLINTSTRING'),
+ jslint_dir = dom.q('#JSLINT_JSLINT'),
+ jslint_str = jslint_dir.q('>textarea'),
maxerr = dom.q('#JSLINT_MAXERR'),
maxlen = dom.q('#JSLINT_MAXLEN'),
option = lib.cookie.get(),
- output = dom.q('#JSLINT_OUTPUT'),
- tree = dom.q('#JSLINT_TREE'),
- predefined = dom.q('#JSLINT_PREDEF');
+ options = dom.q('#JSLINT_OPTIONS'),
+ predefined = dom.q('#JSLINT_PREDEF'),
+ properties = dom.q('#JSLINT_PROPERTIES'),
+ properties_str = properties.q('>textarea'),
+ report = dom.q('#JSLINT_REPORT'),
+ report_div = report.q('>div'),
+ source = dom.q('#JSLINT_SOURCE'),
+ source_str = source.q('>textarea'),
+ tristate = {};
+
+ function clear() {
+ errors.style('display', 'none');
+ report.style('display', 'none');
+ properties.style('display', 'none');
+ errors_div.value('');
+ report_div.value('');
+ properties_str.value('');
+ source_str.select('');
+ }
- function show_jslint_control() {
+ function clear_all() {
+ source_str.value('');
+ clear();
+ }
+
+ function preventDefault(e) {
+ return e.preventDefault();
+ }
+
+ function show_jslint_directive() {
// Build and display a /*jslint*/ control comment.
// The comment can be copied into a .js file.
- var a = [];
+ var a = [], result;
- boxes.each(function (bunch) {
- var name = bunch.getTitle(),
- value = ADSAFE.get(option, name);
+ ADSAFE.keys(tristate).forEach(function (title) {
+ var value = ADSAFE.get(option, title);
if (typeof value === 'boolean') {
- if (name !== 'adsafe' && name !== 'safe') {
- a.push(name + ': ' + value);
- }
- bunch.style('backgroundColor', value ? 'black' : 'white');
- } else {
- bunch.style('backgroundColor', 'gainsboro');
+ a.push(title + ': ' + String(value));
}
});
+ if (typeof option.indent === 'number' && option.indent >= 0) {
+ a.push('indent: ' + String(option.indent));
+ }
if (typeof option.maxerr === 'number' && option.maxerr >= 0) {
a.push('maxerr: ' + String(option.maxerr));
}
if (typeof option.maxlen === 'number' && option.maxlen >= 0) {
a.push('maxlen: ' + String(option.maxlen));
}
- if (typeof option.indent === 'number' && option.indent >= 0) {
- a.push('indent: ' + String(option.indent));
- }
- jslintstring.value('/*jslint ' + a.join(', ') + ' */');
+ result = '/*jslint ' + a.join(', ') + ' */';
+ jslint_str.value(result);
+ jslint_dir.style('display', result.length > 12 ? 'block' : 'none');
// Make a JSON cookie of the option object.
lib.cookie.set(option);
}
+ function wire_tristate(bunch) {
+ bunch.each(function (b) {
+ var title = b.getTitle(),
+ dfn = b.q('>button'),
+ label = b.q('>var');
+ ADSAFE.set(tristate, title, label);
+
+ function mouseover(e) {
+ dfn.style('backgroundColor', 'cornflowerblue');
+ e.preventDefault();
+ }
+
+ function mouseout() {
+ dfn.style('backgroundColor', 'lightsteelblue');
+ }
+
+ function mousedown() {
+ dfn.style('backgroundColor', 'steelblue');
+ }
+
+ function click() {
+ var state = ADSAFE.get(option, title);
+ if (state === true) {
+ ADSAFE.set(option, title, false);
+ label
+ .value('false')
+ .klass('false');
+ } else if (state === false) {
+ ADSAFE.set(option, title, undefined);
+ label
+ .value('default')
+ .klass('');
+ } else {
+ ADSAFE.set(option, title, true);
+ label
+ .value('true')
+ .klass('true');
+ }
+ show_jslint_directive();
+ }
+
+ dfn
+ .on('mouseover', mouseover)
+ .on('mouseout', mouseout)
+ .on('mousedown', mousedown)
+ .on('mouseup', mouseover)
+ .on('mousemove', preventDefault)
+ .on('click', click);
+ label
+ .on('mouseover', mouseover)
+ .on('mouseout', mouseout)
+ .on('mousedown', mousedown)
+ .on('mouseup', mouseover)
+ .on('mousemove', preventDefault)
+ .on('click', click);
+ mouseout();
+ });
+ }
+
+
function show_options() {
- indent.value(String(option.indent));
+ indent.value(String(option.indent || ''));
maxlen.value(String(option.maxlen || ''));
- maxerr.value(String(option.maxerr));
+ maxerr.value(String(option.maxerr || ''));
predefined.value(ADSAFE.isArray(option.predef)
- ? option.predef.join(',')
+ ? option.predef.join(' ')
: '');
- show_jslint_control();
+ ADSAFE.keys(tristate).forEach(function (title) {
+ var value = ADSAFE.get(option, title);
+ if (typeof value === 'boolean') {
+ ADSAFE.get(tristate, title)
+ .klass(String(value))
+ .value(String(value));
+ } else {
+ ADSAFE.get(tristate, title)
+ .klass('')
+ .value('default');
+ }
+ });
+ show_jslint_directive();
}
- function update_box(event) {
-
-// Boxes are tristate, cycling true, false, undefined.
-
- var title = event.target.getTitle();
- if (title) {
- ADSAFE.set(option, title,
- ADSAFE.get(option, title) === true
- ? false
- : ADSAFE.get(option, title) === false
- ? undefined
- : true);
- }
- show_jslint_control();
+ function clear_options() {
+ option = {};
+ show_options();
}
function update_number(event) {
var value = event.target.getValue();
if (value.length === 0 || +value < 0 || !isFinite(value)) {
value = '';
- ADSAFE.set(option, event.target.getTitle(), undefined);
+ ADSAFE.set(option, event.target.getTitle(), '');
} else {
ADSAFE.set(option, event.target.getTitle(), +value);
}
event.target.value(String(value));
- show_jslint_control();
+ show_jslint_directive();
}
function update_list(event) {
- var value = event.target.getValue().split(/\s*,\s*/);
+ var value = event.target.getValue().split(/[\s,;'"]+/);
ADSAFE.set(option, event.target.getTitle(), value);
- event.target.value(value.join(', '));
- show_jslint_control();
+ event.target.value(value.join(' '));
+ show_jslint_directive();
}
// Restore the options from a JSON cookie.
if (!option || typeof option !== 'object') {
- option = {
- indent: 4,
- maxerr: 50
- };
- } else {
- option.indent = typeof option.indent === 'number' && option.indent >= 0
- ? option.indent
- : 4;
- option.maxerr = typeof option.maxerr === 'number' && option.maxerr >= 0
- ? option.maxerr
- : 50;
+ option = {};
}
- show_options();
-
-
-// Display the edition.
-
- dom.q('#JSLINT_EDITION').value('Edition ' + lib.edition());
-
-// Add click event handlers to the [JSLint] and [clear] buttons.
-
- dom.q('input&jslint').on('click', function () {
- tree.value('');
-
-// Call JSLint and display the report.
-
- tree.value(String(lib.jslint(input.getValue(), option, output) / 1000) + ' seconds.');
- input.select();
+ wire_tristate(options.q('div.tristate>div[title]'));
+ source.q('>button').on('click', clear_all);
+ dom.q('#JSLINT_BUTTON').on('click', function () {
+ clear();
+ if (lib.jslint(source_str.getValue(), option,
+ errors_div, report_div, properties_str, edition)) {
+ errors.style('display', 'block');
+ }
+ report.style('display', 'block');
+ if (properties_str.getValue().length > 21) {
+ properties.style('display', 'block');
+ }
+ source_str.select();
return false;
});
-
- dom.q('input&tree').on('click', function () {
- output.value('Tree:');
- tree.value(JSON.stringify(lib.tree(), [
- 'label', 'id', 'string', 'number', 'arity', 'name', 'first',
- 'second', 'third', 'block', 'else', 'quote', 'flag', 'type'
- ], 4));
- input.select();
+ errors.q('>button').on('click', clear);
+ report.q('>button').on('click', clear);
+ properties.q('>button').on('click', function () {
+ properties_str.select();
});
-
- dom.q('input&clear').on('click', function () {
- output.value('');
- tree.value('');
- input.value('').select();
+ options.q('>button').on('click', clear_options);
+ jslint_dir.q('>button').on('click', function () {
+ jslint_str.select();
});
+ clear();
+ show_options();
+// Display the edition.
- dom.q('#JSLINT_CLEARALL').on('click', function () {
- option = {
- indent: 4,
- maxerr: 50
- };
- show_options();
- });
+ edition.value('Edition ' + lib.edition());
- table.on('click', update_box);
indent.on('change', update_number);
maxerr.on('change', update_number);
maxlen.on('change', update_number);
predefined.on('change', update_list);
- input
- .on('change', function () {
- output.value('');
- })
- .select();
};
});
Oops, something went wrong.

0 comments on commit 097ba53

Please sign in to comment.