Clean up Checkbox widget

src/vs/base/browser/ui/checkbox/checkbox.ts

@@ -6,77 +6,81 @@
 'use strict';
 
 import 'vs/css!./checkbox';
-import nls = require('vs/nls');
-import Builder = require('vs/base/browser/builder');
-import mouse = require('vs/base/browser/mouseEvent');
-import keyboard = require('vs/base/browser/keyboardEvent');
+
+import * as nls from 'vs/nls';
+import {StandardMouseEvent} from 'vs/base/browser/mouseEvent';
+import {StandardKeyboardEvent} from 'vs/base/browser/keyboardEvent';
 import {KeyCode} from 'vs/base/common/keyCodes';
+import {IDisposable, disposeAll} from 'vs/base/common/lifecycle';
+import * as DomUtils from 'vs/base/browser/dom';
 
-var $ = Builder.$;
+export interface ICheckboxOpts {
+	actionClassName: string;
+	title: string;
+	isChecked: boolean;
+	onChange: () => void;
+}
 
-export class Checkbox {
+export class Checkbox implements IDisposable {
 
-	private actionClassName: string;
-	private title: string;
-	public isChecked: boolean;
-	private onChange: () => void;
-	private listenersToRemove: { (): void; }[];
+	private _opts: ICheckboxOpts;
+	private _toDispose: IDisposable[];
 	public domNode: HTMLElement;
 
-	constructor(actionClassName: string, title: string, isChecked: boolean, onChange: () => void) {
-		this.actionClassName = actionClassName;
-		this.title = title;
-		this.isChecked = isChecked;
-		this.onChange = onChange;
+	private _checked: boolean;
 
-		this.listenersToRemove = [];
+	constructor(opts:ICheckboxOpts) {
+		this._opts = opts;
+		this._checked = this._opts.isChecked;
+		this._toDispose = [];
 
 		this.domNode = document.createElement('div');
-		this.domNode.title = title;
-		this.render();
-
-		$(this.domNode).attr({
-			'aria-checked': 'false',
-			'aria-label': this.title,
-			'tabindex': 0,
-			'role': 'checkbox'
-		});
-
-		$(this.domNode).on('click', (e: MouseEvent) => {
-			var ev = new mouse.StandardMouseEvent(e);
-			this.isChecked = !this.isChecked;
-			this.render();
-			this.onChange();
+		this.domNode.title = this._opts.title;
+		this.domNode.className = this._className();
+		this.domNode.tabIndex = 0;
+		this.domNode.setAttribute('role', 'checkbox');
+		this.domNode.setAttribute('aria-checked', String(this._checked));
+		this.domNode.setAttribute('aria-label', this._opts.title);
+
+		this._toDispose.push(DomUtils.addDisposableListener(this.domNode, 'click', (e:MouseEvent) => {
+			var ev = new StandardMouseEvent(e);
+			this._checked = !this._checked;
+			this.domNode.className = this._className();
+			this._opts.onChange();
 			ev.preventDefault();
-		}, this.listenersToRemove);
+		}));
 
-		$(this.domNode).on('keydown', (browserEvent: KeyboardEvent) => {
-			var keyboardEvent = new keyboard.StandardKeyboardEvent(browserEvent);
+		this._toDispose.push(DomUtils.addDisposableListener(this.domNode, 'keydown', (browserEvent: KeyboardEvent) => {
+			var keyboardEvent = new StandardKeyboardEvent(browserEvent);
 			if (keyboardEvent.keyCode === KeyCode.Space || keyboardEvent.keyCode === KeyCode.Enter) {
-				this.isChecked = !this.isChecked;
-				this.render();
-				this.onChange();
+				this._checked = !this._checked;
+				this.domNode.className = this._className();
+				this._opts.onChange();
 				keyboardEvent.preventDefault();
 			}
-		}, this.listenersToRemove);
+		}));
+	}
+
+	public dispose(): void {
+		this._toDispose = disposeAll(this._toDispose);
 	}
 
 	public focus(): void {
 		this.domNode.focus();
 	}
 
-	private render(): void {
-		this.domNode.className = this.className();
+	public get checked(): boolean {
+		return this._checked;
 	}
 
-	public setChecked(newIsChecked: boolean): void {
-		this.isChecked = newIsChecked;
-		$(this.domNode).attr('aria-checked', this.isChecked);
-		this.render();
+	public set checked(newIsChecked:boolean) {
+		this._checked = newIsChecked;
+		this.domNode.setAttribute('aria-checked', String(this._checked));
+		this.domNode.className = this._className();
 	}
 
-	private className(): string {
-		return 'custom-checkbox ' + this.actionClassName + ' ' + (this.isChecked ? 'checked' : 'unchecked');
+	private _className(): string {
+		return 'custom-checkbox ' + this._opts.actionClassName + ' ' + (this._checked ? 'checked' : 'unchecked');
 	}
 
 	public width(): number {
@@ -85,16 +89,11 @@ export class Checkbox {
 
 	public enable(): void {
 		this.domNode.tabIndex = 0;
+		this.domNode.setAttribute('aria-disabled', String(false));
 	}
 
 	public disable(): void {
 		this.domNode.tabIndex = -1;
+		this.domNode.setAttribute('aria-disabled', String(true));
 	}
-
-	public destroy(): void {
-		this.listenersToRemove.forEach((element) => {
-			element();
-		});
-		this.listenersToRemove = [];
-	}
-}
\ No newline at end of file
+}

src/vs/base/browser/ui/findinput/findInput.ts

@@ -74,9 +74,9 @@ export class FindInput {
 	}
 
 	public destroy(): void {
-		this.regex.destroy();
-		this.wholeWords.destroy();
-		this.caseSensitive.destroy();
+		this.regex.dispose();
+		this.wholeWords.dispose();
+		this.caseSensitive.dispose();
 		this.listenersToRemove.forEach((element) => {
 			element();
 		});
@@ -144,29 +144,29 @@ export class FindInput {
 	}
 
 	public getCaseSensitive():boolean {
-		return this.caseSensitive.isChecked;
+		return this.caseSensitive.checked;
 	}
 
 	public setCaseSensitive(value:boolean): void {
-		this.caseSensitive.setChecked(value);
+		this.caseSensitive.checked = value;
 		this.setInputWidth();
 	}
 
 	public getWholeWords():boolean {
-		return this.wholeWords.isChecked;
+		return this.wholeWords.checked;
 	}
 
 	public setWholeWords(value:boolean): void {
-		this.wholeWords.setChecked(value);
+		this.wholeWords.checked = value;
 		this.setInputWidth();
 	}
 
 	public getRegex():boolean {
-		return this.regex.isChecked;
+		return this.regex.checked;
 	}
 
 	public setRegex(value:boolean): void {
-		this.regex.setChecked(value);
+		this.regex.checked = value;
 		this.setInputWidth();
 	}
 
@@ -193,23 +193,38 @@ export class FindInput {
 			}
 		});
 
-		this.regex = new Checkbox.Checkbox('regex', NLS_REGEX_CHECKBOX_LABEL + appendRegexLabel, false, () => {
-			this.onOptionChange(null);
-			this.inputBox.focus();
-			this.setInputWidth();
-			this.validate();
+		this.regex = new Checkbox.Checkbox({
+			actionClassName: 'regex',
+			title: NLS_REGEX_CHECKBOX_LABEL + appendRegexLabel,
+			isChecked: false,
+			onChange: () => {
+				this.onOptionChange(null);
+				this.inputBox.focus();
+				this.setInputWidth();
+				this.validate();
+			}
 		});
-		this.wholeWords = new Checkbox.Checkbox('whole-word', NLS_WHOLE_WORD_CHECKBOX_LABEL + appendWholeWordsLabel, false, () => {
-			this.onOptionChange(null);
-			this.inputBox.focus();
-			this.setInputWidth();
-			this.validate();
+		this.wholeWords = new Checkbox.Checkbox({
+			actionClassName: 'whole-word',
+			title: NLS_WHOLE_WORD_CHECKBOX_LABEL + appendWholeWordsLabel,
+			isChecked: false,
+			onChange: () => {
+				this.onOptionChange(null);
+				this.inputBox.focus();
+				this.setInputWidth();
+				this.validate();
+			}
 		});
-		this.caseSensitive = new Checkbox.Checkbox('case-sensitive', NLS_CASE_SENSITIVE_CHECKBOX_LABEL + appendCaseSensitiveLabel, false, () => {
-			this.onOptionChange(null);
-			this.inputBox.focus();
-			this.setInputWidth();
-			this.validate();
+		this.caseSensitive = new Checkbox.Checkbox({
+			actionClassName: 'case-sensitive',
+			title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + appendCaseSensitiveLabel,
+			isChecked: false,
+			onChange: () => {
+				this.onOptionChange(null);
+				this.inputBox.focus();
+				this.setInputWidth();
+				this.validate();
+			}
 		});
 		this.setInputWidth();
 

src/vs/workbench/parts/search/browser/searchViewlet.ts

@@ -451,7 +451,7 @@ class PatternInput {
 	}
 
 	public destroy(): void {
-		this.pattern.destroy();
+		this.pattern.dispose();
 		this.listenersToRemove.forEach((element) => {
 			element();
 		});
@@ -523,11 +523,11 @@ class PatternInput {
 	}
 
 	public isGlobPattern(): boolean {
-		return this.pattern.isChecked;
+		return this.pattern.checked;
 	}
 
 	public setIsGlobPattern(value: boolean): void {
-		this.pattern.setChecked(value);
+		this.pattern.checked = value;
 		this.setInputWidth();
 	}
 
@@ -550,15 +550,20 @@ class PatternInput {
 			}
 		});
 
-		this.pattern = new Checkbox('pattern', nls.localize('patternDescription', "Use Glob Patterns"), false, () => {
-			this.onOptionChange(null);
-			this.inputBox.focus();
-			this.setInputWidth();
-
-			if (this.isGlobPattern()) {
-				this.showGlobHelp();
-			} else {
-				this.inputBox.hideMessage();
+		this.pattern = new Checkbox({
+			actionClassName: 'pattern',
+			title: nls.localize('patternDescription', "Use Glob Patterns"),
+			isChecked: false,
+			onChange: () => {
+				this.onOptionChange(null);
+				this.inputBox.focus();
+				this.setInputWidth();
+
+				if (this.isGlobPattern()) {
+					this.showGlobHelp();
+				} else {
+					this.inputBox.hideMessage();
+				}
 			}
 		});