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

Clean up widgets used in find widget

Browse Source
This commit is contained in:
Alex Dima
2016-01-08 13:01:37 +01:00
parent 818640bff6
commit b7f6251b50
10 changed files with 232 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/vs/base/browser/ui/inputbox/inputBox.ts
View File

@@ -5,18 +5,19 @@
'use strict';
import 'vs/css!./inputBox';
import Bal = require('vs/base/browser/browser');
import dom = require('vs/base/browser/dom');
import browser = require('vs/base/browser/browserService');
import htmlcontent = require('vs/base/common/htmlContent');
import renderer = require('vs/base/browser/htmlContentRenderer');
import ee = require('vs/base/common/eventEmitter');
import actions = require('vs/base/common/actions');
import actionBar = require('vs/base/browser/ui/actionbar/actionbar');
import lifecycle = require('vs/base/common/lifecycle');
import contextview = require('vs/base/browser/ui/contextview/contextview');
var $ = dom.emmet;
import * as Bal from 'vs/base/browser/browser';
import * as dom from 'vs/base/browser/dom';
import * as browser from 'vs/base/browser/browserService';
import {IHTMLContentElement} from 'vs/base/common/htmlContent';
import {renderHtml} from 'vs/base/browser/htmlContentRenderer';
import {IAction} from 'vs/base/common/actions';
import {ActionBar} from 'vs/base/browser/ui/actionbar/actionbar';
import {IContextViewProvider, AnchorAlignment} from 'vs/base/browser/ui/contextview/contextview';
import Event, {Emitter} from 'vs/base/common/event';
import {Widget} from 'vs/base/browser/ui/widget';
let $ = dom.emmet;
export interface IInputOptions {
placeholder?:string;
@@ -24,7 +25,7 @@ export interface IInputOptions {
type?:string;
validationOptions?:IInputValidationOptions;
flexibleHeight?: boolean;
actions?:actions.IAction[];
actions?:IAction[];
}
export interface IInputValidator {
@@ -53,14 +54,14 @@ export interface IRange {
end: number;
}
export class InputBox extends ee.EventEmitter {
export class InputBox extends Widget {
private contextViewProvider: contextview.IContextViewProvider;
private contextViewProvider: IContextViewProvider;
private element: HTMLElement;
private input: HTMLInputElement;
private mirror: HTMLElement;
private actionbar: actionBar.ActionBar;
private actionbar: ActionBar;
private options: IInputOptions;
private message: IMessage;
private placeholder: string;
@@ -69,14 +70,19 @@ export class InputBox extends ee.EventEmitter {
private showValidationMessage: boolean;
private state = 'idle';
private cachedHeight: number;
private toDispose: lifecycle.IDisposable[];
constructor(container:HTMLElement, contextViewProvider: contextview.IContextViewProvider, options?: IInputOptions) {
private _onDidChange = this._register(new Emitter<string>());
public onDidChange: Event<string> = this._onDidChange.event;
private _onDidHeightChange = this._register(new Emitter<number>());
public onDidHeightChange: Event<number> = this._onDidHeightChange.event;
constructor(container:HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
super();
this.contextViewProvider = contextViewProvider;
this.options = options || Object.create(null);
this.toDispose = [];
// this.toDispose = [];
this.message = null;
this.cachedHeight = null;
this.placeholder = this.options.placeholder || '';
@@ -89,9 +95,9 @@ export class InputBox extends ee.EventEmitter {
this.element = dom.append(container, $('.monaco-inputbox.idle'));
var tagName = this.options.flexibleHeight ? 'textarea' : 'input';
let tagName = this.options.flexibleHeight ? 'textarea' : 'input';
var wrapper = dom.append(this.element, $('.wrapper'));
let wrapper = dom.append(this.element, $('.wrapper'));
this.input = <HTMLInputElement> dom.append(wrapper, $(tagName + '.input'));
this.input.setAttribute('autocorrect', 'off');
this.input.setAttribute('autocapitalize', 'off');
@@ -112,22 +118,20 @@ export class InputBox extends ee.EventEmitter {
this.input.setAttribute('placeholder', this.placeholder);
}
this.toDispose.push(
dom.addDisposableListener(this.input, dom.EventType.INPUT, () => this.onValueChange()),
dom.addDisposableListener(this.input, dom.EventType.BLUR, () => this.onBlur()),
dom.addDisposableListener(this.input, dom.EventType.FOCUS, () => this.onFocus())
);
this.oninput(this.input, () => this.onValueChange());
this.onblur(this.input, () => this.onBlur());
this.onfocus(this.input, () => this.onFocus());
// Add placeholder shim for IE because IE decides to hide the placeholder on focus (we dont want that!)
if (this.placeholder && Bal.isIE11orEarlier) {
this.toDispose.push(dom.addDisposableListener(this.input, dom.EventType.CLICK, (e) => {
this.onclick(this.input, (e) => {
dom.EventHelper.stop(e, true);
this.input.focus();
}));
});
if (Bal.isIE9) {
this.toDispose.push(dom.addDisposableListener(this.input, 'keyup', () => this.onValueChange()));
this.onkeyup(this.input, () => this.onValueChange());
}
}
@@ -135,7 +139,7 @@ export class InputBox extends ee.EventEmitter {
// Support actions
if (this.options.actions) {
this.actionbar = new actionBar.ActionBar(this.element);
this.actionbar = this._register(new ActionBar(this.element));
this.actionbar.push(this.options.actions, { icon: true, label: false });
}
}
@@ -154,7 +158,7 @@ export class InputBox extends ee.EventEmitter {
}
}
public setContextViewProvider(contextViewProvider: contextview.IContextViewProvider): void {
public setContextViewProvider(contextViewProvider: IContextViewProvider): void {
this.contextViewProvider = contextViewProvider;
}
@@ -244,7 +248,7 @@ export class InputBox extends ee.EventEmitter {
}
public validate(): boolean {
var result: IMessage = null;
let result: IMessage = null;
if (this.validation) {
result = this.validation(this.value);
@@ -273,19 +277,19 @@ export class InputBox extends ee.EventEmitter {
return;
}
var div: HTMLElement;
var layout = () => div.style.width = dom.getTotalWidth(this.element) + 'px';
let div: HTMLElement;
let layout = () => div.style.width = dom.getTotalWidth(this.element) + 'px';
this.state = 'open';
this.contextViewProvider.showContextView({
getAnchor: () => this.element,
anchorAlignment: contextview.AnchorAlignment.RIGHT,
anchorAlignment: AnchorAlignment.RIGHT,
render: (container: HTMLElement) => {
div = dom.append(container, $('.monaco-inputbox-container'));
layout();
var renderOptions: htmlcontent.IHTMLContentElement = {
let renderOptions: IHTMLContentElement = {
tagName: 'span',
className: 'monaco-inputbox-message',
};
@@ -296,7 +300,7 @@ export class InputBox extends ee.EventEmitter {
renderOptions.text = this.message.content;
}
var spanElement:HTMLElement = <any>renderer.renderHtml(renderOptions);
let spanElement:HTMLElement = <any>renderHtml(renderOptions);
dom.addClass(spanElement, this.classForType(this.message.type));
dom.append(div, spanElement);
return null;
@@ -316,13 +320,13 @@ export class InputBox extends ee.EventEmitter {
}
private onValueChange(): void {
this.emit('change', this.value);
this._onDidChange.fire(this.value);
this.validate();
if (this.mirror) {
var lastCharCode = this.value.charCodeAt(this.value.length - 1);
var suffix = lastCharCode === 10 ? ' ' : '';
let lastCharCode = this.value.charCodeAt(this.value.length - 1);
let suffix = lastCharCode === 10 ? ' ' : '';
this.mirror.textContent = this.value + suffix;
this.layout();
}
@@ -338,14 +342,11 @@ export class InputBox extends ee.EventEmitter {
if (previousHeight !== this.cachedHeight) {
this.input.style.height = this.cachedHeight + 'px';
this.emit('heightchange', this.cachedHeight);
this._onDidHeightChange.fire(this.cachedHeight);
}
}
public dispose(): void {
this.toDispose = lifecycle.disposeAll(this.toDispose);
this._hideMessage();
this.element = null;
@@ -357,11 +358,7 @@ export class InputBox extends ee.EventEmitter {
this.validation = null;
this.showValidationMessage = null;
this.state = null;
if (this.actionbar) {
this.actionbar.dispose();
this.actionbar = null;
}
this.actionbar = null;
super.dispose();
}