diff --git a/src/vs/base/browser/ui/checkbox/checkbox.ts b/src/vs/base/browser/ui/checkbox/checkbox.ts index c017267126b..f719c755c31 100644 --- a/src/vs/base/browser/ui/checkbox/checkbox.ts +++ b/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.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.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._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 +} diff --git a/src/vs/base/browser/ui/findinput/findInput.ts b/src/vs/base/browser/ui/findinput/findInput.ts index 380e3e65702..27e6914eaaa 100644 --- a/src/vs/base/browser/ui/findinput/findInput.ts +++ b/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(); diff --git a/src/vs/workbench/parts/search/browser/searchViewlet.ts b/src/vs/workbench/parts/search/browser/searchViewlet.ts index 9d01f5296b4..8d1afe63813 100644 --- a/src/vs/workbench/parts/search/browser/searchViewlet.ts +++ b/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(); + 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(); + if (this.isGlobPattern()) { + this.showGlobHelp(); + } else { + this.inputBox.hideMessage(); + } } });