Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-04 15:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

input box: set aria-invalid based on validation

Browse Source
This commit is contained in:
Benjamin Pasero
2016-02-02 12:54:40 +01:00
parent 82d1a0b77c
commit 083495a9fb
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/browser/ui/inputbox/inputBox.ts
+19 -22
View File
@@ -20,12 +20,12 @@ import {Widget} from 'vs/base/browser/ui/widget';
let $ = dom.emmet;
export interface IInputOptions {
placeholder?:string;
ariaLabel?:string;
type?:string;
validationOptions?:IInputValidationOptions;
placeholder?: string;
ariaLabel?: string;
type?: string;
validationOptions?: IInputValidationOptions;
flexibleHeight?: boolean;
actions?:IAction[];
actions?: IAction[];
}
export interface IInputValidator {
@@ -55,9 +55,7 @@ export interface IRange {
}
export class InputBox extends Widget {
private contextViewProvider: IContextViewProvider;
private element: HTMLElement;
private input: HTMLInputElement;
private mirror: HTMLElement;
@@ -77,12 +75,11 @@ export class InputBox extends Widget {
private _onDidHeightChange = this._register(new Emitter<number>());
public onDidHeightChange: Event<number> = this._onDidHeightChange.event;
constructor(container:HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
super();
this.contextViewProvider = contextViewProvider;
this.options = options || Object.create(null);
// this.toDispose = [];
this.message = null;
this.cachedHeight = null;
this.placeholder = this.options.placeholder || '';
@@ -98,7 +95,7 @@ export class InputBox extends Widget {
let tagName = this.options.flexibleHeight ? 'textarea' : 'input';
let wrapper = dom.append(this.element, $('.wrapper'));
this.input = <HTMLInputElement> dom.append(wrapper, $(tagName + '.input'));
this.input = <HTMLInputElement>dom.append(wrapper, $(tagName + '.input'));
this.input.setAttribute('autocorrect', 'off');
this.input.setAttribute('autocapitalize', 'off');
this.input.setAttribute('spellcheck', 'false');
@@ -127,7 +124,6 @@ export class InputBox extends Widget {
// Add placeholder shim for IE because IE decides to hide the placeholder on focus (we dont want that!)
if (this.placeholder && Bal.isIE11orEarlier) {
this.onclick(this.input, (e) => {
dom.EventHelper.stop(e, true);
this.input.focus();
@@ -138,7 +134,7 @@ export class InputBox extends Widget {
}
}
setTimeout(() =>this.layout(), 0);
setTimeout(() => this.layout(), 0);
// Support actions
if (this.options.actions) {
@@ -155,7 +151,7 @@ export class InputBox extends Widget {
this._showMessage();
}
public setPlaceHolder(placeHolder:string): void {
public setPlaceHolder(placeHolder: string): void {
if (this.input) {
this.input.setAttribute('placeholder', placeHolder);
}
@@ -169,11 +165,11 @@ export class InputBox extends Widget {
return this.input;
}
public get value():string {
public get value(): string {
return this.input.value;
}
public set value(newValue:string) {
public set value(newValue: string) {
if (this.input.value !== newValue) {
this.input.value = newValue;
this.onValueChange();
@@ -213,7 +209,7 @@ export class InputBox extends Widget {
this._hideMessage();
}
public setEnabled(enabled:boolean): void {
public setEnabled(enabled: boolean): void {
if (enabled) {
this.enable();
} else {
@@ -221,15 +217,15 @@ export class InputBox extends Widget {
}
}
public get width():number {
public get width(): number {
return dom.getTotalWidth(this.input);
}
public set width(width:number) {
public set width(width: number) {
this.input.style.width = width + 'px';
}
public showMessage(message: IMessage, force?:boolean): void {
public showMessage(message: IMessage, force?: boolean): void {
this.message = message;
dom.removeClass(this.element, 'idle');
@@ -265,11 +261,12 @@ export class InputBox extends Widget {
result = this.validation(this.value);
if (!result) {
this.inputElement.removeAttribute('aria-invalid');
this.hideMessage();
} else {
this.inputElement.setAttribute('aria-invalid', 'true');
this.showMessage(result);
}
}
return !result;
@@ -311,7 +308,7 @@ export class InputBox extends Widget {
renderOptions.text = this.message.content;
}
let spanElement:HTMLElement = <any>renderHtml(renderOptions);
let spanElement: HTMLElement = <any>renderHtml(renderOptions);
dom.addClass(spanElement, this.classForType(this.message.type));
dom.append(div, spanElement);
return null;
@@ -373,4 +370,4 @@ export class InputBox extends Widget {
super.dispose();
}
}
}