mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-25 17:23:10 -05:00
move code from parts to contrib (#8319)
This commit is contained in:
Anthony Dresser
570
src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts
Normal file
570
src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts
Normal file
@@ -0,0 +1,570 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import * as nls from 'vs/nls';
|
||||
import { onUnexpectedError } from 'vs/base/common/errors';
|
||||
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
|
||||
import * as platform from 'vs/base/common/platform';
|
||||
import * as strings from 'vs/base/common/strings';
|
||||
import * as dom from 'vs/base/browser/dom';
|
||||
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
|
||||
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
|
||||
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
|
||||
import { FindInput, IFindInputStyles } from 'vs/base/browser/ui/findinput/findInput';
|
||||
import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { Widget } from 'vs/base/browser/ui/widget';
|
||||
import { Sash, IHorizontalSashLayoutProvider, ISashEvent, Orientation } from 'vs/base/browser/ui/sash/sash';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPositionPreference } from 'vs/editor/browser/editorBrowser';
|
||||
import { FIND_IDS, CONTEXT_FIND_INPUT_FOCUSED } from 'vs/editor/contrib/find/findModel';
|
||||
import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
|
||||
import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import * as colors from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IEditorAction } from 'vs/editor/common/editorCommon';
|
||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
|
||||
const NLS_FIND_INPUT_LABEL = nls.localize('label.find', "Find");
|
||||
const NLS_FIND_INPUT_PLACEHOLDER = nls.localize('placeholder.find', "Find");
|
||||
const NLS_PREVIOUS_MATCH_BTN_LABEL = nls.localize('label.previousMatchButton', "Previous match");
|
||||
const NLS_NEXT_MATCH_BTN_LABEL = nls.localize('label.nextMatchButton', "Next match");
|
||||
const NLS_CLOSE_BTN_LABEL = nls.localize('label.closeButton', "Close");
|
||||
const NLS_MATCHES_COUNT_LIMIT_TITLE = nls.localize('title.matchesCountLimit', "Your search returned a large number of results, only the first 999 matches will be highlighted.");
|
||||
const NLS_MATCHES_LOCATION = nls.localize('label.matchesLocation', "{0} of {1}");
|
||||
const NLS_NO_RESULTS = nls.localize('label.noResults', "No Results");
|
||||
|
||||
const FIND_WIDGET_INITIAL_WIDTH = 411;
|
||||
const PART_WIDTH = 275;
|
||||
const FIND_INPUT_AREA_WIDTH = PART_WIDTH - 54;
|
||||
|
||||
let MAX_MATCHES_COUNT_WIDTH = 69;
|
||||
|
||||
export const PROFILER_MAX_MATCHES = 999;
|
||||
|
||||
export const ACTION_IDS = {
|
||||
FIND_NEXT: 'findNext',
|
||||
FIND_PREVIOUS: 'findPrev'
|
||||
};
|
||||
|
||||
export interface ITableController {
|
||||
focus(): void;
|
||||
getConfiguration(): any;
|
||||
layoutOverlayWidget(widget: IOverlayWidget): void;
|
||||
addOverlayWidget(widget: IOverlayWidget): void;
|
||||
getAction(id: string): IEditorAction;
|
||||
onDidChangeConfiguration(fn: (e: IConfigurationChangedEvent) => void): IDisposable;
|
||||
}
|
||||
|
||||
export interface IConfigurationChangedEvent {
|
||||
layoutInfo?: boolean;
|
||||
}
|
||||
|
||||
export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSashLayoutProvider {
|
||||
private static ID = 'editor.contrib.findWidget';
|
||||
private _tableController: ITableController;
|
||||
private _state: FindReplaceState;
|
||||
private _contextViewProvider: IContextViewProvider;
|
||||
private _keybindingService: IKeybindingService;
|
||||
|
||||
private _domNode: HTMLElement;
|
||||
private _findInput: FindInput;
|
||||
|
||||
private _matchesCount: HTMLElement;
|
||||
private _prevBtn: SimpleButton;
|
||||
private _nextBtn: SimpleButton;
|
||||
private _closeBtn: SimpleButton;
|
||||
|
||||
private _isVisible: boolean;
|
||||
|
||||
private _focusTracker: dom.IFocusTracker;
|
||||
private _findInputFocussed: IContextKey<boolean>;
|
||||
|
||||
private _resizeSash: Sash;
|
||||
|
||||
private searchTimeoutHandle: any;
|
||||
|
||||
constructor(
|
||||
tableController: ITableController,
|
||||
state: FindReplaceState,
|
||||
contextViewProvider: IContextViewProvider,
|
||||
keybindingService: IKeybindingService,
|
||||
contextKeyService: IContextKeyService,
|
||||
themeService: IThemeService
|
||||
) {
|
||||
super();
|
||||
this._tableController = tableController;
|
||||
this._state = state;
|
||||
this._contextViewProvider = contextViewProvider;
|
||||
this._keybindingService = keybindingService;
|
||||
|
||||
this._isVisible = false;
|
||||
|
||||
this._register(this._state.onFindReplaceStateChange((e) => this._onStateChanged(e)));
|
||||
this._buildDomNode();
|
||||
this._updateButtons();
|
||||
|
||||
let checkEditorWidth = () => {
|
||||
let editorWidth = this._tableController.getConfiguration().layoutInfo.width;
|
||||
let collapsedFindWidget = false;
|
||||
let reducedFindWidget = false;
|
||||
let narrowFindWidget = false;
|
||||
let widgetWidth = dom.getTotalWidth(this._domNode);
|
||||
|
||||
if (widgetWidth > FIND_WIDGET_INITIAL_WIDTH) {
|
||||
// as the widget is resized by users, we may need to change the max width of the widget as the editor width changes.
|
||||
this._domNode.style.maxWidth = `${editorWidth - 28 - 15}px`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (FIND_WIDGET_INITIAL_WIDTH + 28 >= editorWidth) {
|
||||
reducedFindWidget = true;
|
||||
}
|
||||
if (FIND_WIDGET_INITIAL_WIDTH + 28 - MAX_MATCHES_COUNT_WIDTH >= editorWidth) {
|
||||
narrowFindWidget = true;
|
||||
}
|
||||
if (FIND_WIDGET_INITIAL_WIDTH + 28 - MAX_MATCHES_COUNT_WIDTH >= editorWidth + 50) {
|
||||
collapsedFindWidget = true;
|
||||
}
|
||||
dom.toggleClass(this._domNode, 'collapsed-find-widget', collapsedFindWidget);
|
||||
dom.toggleClass(this._domNode, 'narrow-find-widget', narrowFindWidget);
|
||||
dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget);
|
||||
|
||||
if (!narrowFindWidget && !collapsedFindWidget) {
|
||||
// the minimal left offset of findwidget is 15px.
|
||||
this._domNode.style.maxWidth = `${editorWidth - 28 - 15}px`;
|
||||
}
|
||||
|
||||
};
|
||||
checkEditorWidth();
|
||||
|
||||
this._register(this._tableController.onDidChangeConfiguration((e: IConfigurationChangedEvent) => {
|
||||
if (e.layoutInfo) {
|
||||
checkEditorWidth();
|
||||
}
|
||||
}));
|
||||
|
||||
this._findInputFocussed = CONTEXT_FIND_INPUT_FOCUSED.bindTo(contextKeyService);
|
||||
this._focusTracker = this._register(dom.trackFocus(this._findInput.inputBox.inputElement));
|
||||
this._focusTracker.onDidFocus(() => {
|
||||
this._findInputFocussed.set(true);
|
||||
});
|
||||
this._focusTracker.onDidBlur(() => {
|
||||
this._findInputFocussed.set(false);
|
||||
});
|
||||
|
||||
this._tableController.addOverlayWidget(this);
|
||||
|
||||
this._applyTheme(themeService.getTheme());
|
||||
this._register(themeService.onThemeChange(this._applyTheme.bind(this)));
|
||||
}
|
||||
|
||||
// ----- IOverlayWidget API
|
||||
|
||||
public getId(): string {
|
||||
return FindWidget.ID;
|
||||
}
|
||||
|
||||
public getDomNode(): HTMLElement {
|
||||
return this._domNode;
|
||||
}
|
||||
|
||||
public getPosition(): IOverlayWidgetPosition {
|
||||
if (this._isVisible) {
|
||||
return {
|
||||
preference: OverlayWidgetPositionPreference.TOP_RIGHT_CORNER
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ----- React to state changes
|
||||
|
||||
private _onStateChanged(e: FindReplaceStateChangedEvent): void {
|
||||
if (e.searchString) {
|
||||
this._findInput.setValue(this._state.searchString);
|
||||
this._updateButtons();
|
||||
}
|
||||
if (e.isRevealed) {
|
||||
if (this._state.isRevealed) {
|
||||
this._reveal(true);
|
||||
} else {
|
||||
this._hide(true);
|
||||
}
|
||||
}
|
||||
if (e.isRegex) {
|
||||
this._findInput.setRegex(this._state.isRegex);
|
||||
}
|
||||
if (e.wholeWord) {
|
||||
this._findInput.setWholeWords(this._state.wholeWord);
|
||||
}
|
||||
if (e.matchCase) {
|
||||
this._findInput.setCaseSensitive(this._state.matchCase);
|
||||
}
|
||||
if (e.searchString || e.matchesCount || e.matchesPosition) {
|
||||
let showRedOutline = (this._state.searchString.length > 0 && this._state.matchesCount === 0);
|
||||
dom.toggleClass(this._domNode, 'no-results', showRedOutline);
|
||||
|
||||
this._updateMatchesCount();
|
||||
}
|
||||
}
|
||||
|
||||
private _updateMatchesCount(): void {
|
||||
this._matchesCount.style.minWidth = MAX_MATCHES_COUNT_WIDTH + 'px';
|
||||
if (this._state.matchesCount >= PROFILER_MAX_MATCHES) {
|
||||
this._matchesCount.title = NLS_MATCHES_COUNT_LIMIT_TITLE;
|
||||
} else {
|
||||
this._matchesCount.title = '';
|
||||
}
|
||||
|
||||
// remove previous content
|
||||
if (this._matchesCount.firstChild) {
|
||||
this._matchesCount.removeChild(this._matchesCount.firstChild);
|
||||
}
|
||||
|
||||
let label: string;
|
||||
if (this._state.matchesCount > 0) {
|
||||
let matchesCount: string = String(this._state.matchesCount);
|
||||
if (this._state.matchesCount >= PROFILER_MAX_MATCHES) {
|
||||
matchesCount = PROFILER_MAX_MATCHES + '+';
|
||||
}
|
||||
let matchesPosition: string = String(this._state.matchesPosition);
|
||||
if (matchesPosition === '0') {
|
||||
matchesPosition = '?';
|
||||
}
|
||||
label = strings.format(NLS_MATCHES_LOCATION, matchesPosition, matchesCount);
|
||||
} else {
|
||||
label = NLS_NO_RESULTS;
|
||||
}
|
||||
this._matchesCount.appendChild(document.createTextNode(label));
|
||||
|
||||
MAX_MATCHES_COUNT_WIDTH = Math.max(MAX_MATCHES_COUNT_WIDTH, this._matchesCount.clientWidth);
|
||||
}
|
||||
|
||||
// ----- actions
|
||||
|
||||
private _updateButtons(): void {
|
||||
this._findInput.setEnabled(this._isVisible);
|
||||
this._closeBtn.setEnabled(this._isVisible);
|
||||
|
||||
let findInputIsNonEmpty = (this._state.searchString.length > 0);
|
||||
this._prevBtn.setEnabled(this._isVisible && findInputIsNonEmpty);
|
||||
this._nextBtn.setEnabled(this._isVisible && findInputIsNonEmpty);
|
||||
}
|
||||
|
||||
private _reveal(animate: boolean): void {
|
||||
if (!this._isVisible) {
|
||||
this._isVisible = true;
|
||||
|
||||
this._updateButtons();
|
||||
|
||||
setTimeout(() => {
|
||||
dom.addClass(this._domNode, 'visible');
|
||||
this._domNode.setAttribute('aria-hidden', 'false');
|
||||
if (!animate) {
|
||||
dom.addClass(this._domNode, 'noanimation');
|
||||
setTimeout(() => {
|
||||
dom.removeClass(this._domNode, 'noanimation');
|
||||
}, 200);
|
||||
}
|
||||
}, 0);
|
||||
this._tableController.layoutOverlayWidget(this);
|
||||
}
|
||||
}
|
||||
|
||||
private _hide(focusTheEditor: boolean): void {
|
||||
if (this._isVisible) {
|
||||
this._isVisible = false;
|
||||
|
||||
this._updateButtons();
|
||||
|
||||
dom.removeClass(this._domNode, 'visible');
|
||||
this._domNode.setAttribute('aria-hidden', 'true');
|
||||
if (focusTheEditor) {
|
||||
this._tableController.focus();
|
||||
}
|
||||
this._tableController.layoutOverlayWidget(this);
|
||||
}
|
||||
}
|
||||
|
||||
private _applyTheme(theme: ITheme) {
|
||||
let inputStyles: IFindInputStyles = {
|
||||
inputActiveOptionBorder: theme.getColor(colors.inputActiveOptionBorder),
|
||||
inputBackground: theme.getColor(colors.inputBackground),
|
||||
inputForeground: theme.getColor(colors.inputForeground),
|
||||
inputBorder: theme.getColor(colors.inputBorder),
|
||||
inputValidationInfoBackground: theme.getColor(colors.inputValidationInfoBackground),
|
||||
inputValidationInfoBorder: theme.getColor(colors.inputValidationInfoBorder),
|
||||
inputValidationWarningBackground: theme.getColor(colors.inputValidationWarningBackground),
|
||||
inputValidationWarningBorder: theme.getColor(colors.inputValidationWarningBorder),
|
||||
inputValidationErrorBackground: theme.getColor(colors.inputValidationErrorBackground),
|
||||
inputValidationErrorBorder: theme.getColor(colors.inputValidationErrorBorder)
|
||||
};
|
||||
this._findInput.style(inputStyles);
|
||||
}
|
||||
|
||||
// ----- Public
|
||||
|
||||
public focusFindInput(): void {
|
||||
this._findInput.focus();
|
||||
}
|
||||
|
||||
public highlightFindOptions(): void {
|
||||
this._findInput.highlightFindOptions();
|
||||
}
|
||||
|
||||
private _onFindInputMouseDown(e: IMouseEvent): void {
|
||||
// on linux, middle key does pasting.
|
||||
if (e.middleButton) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
private _onFindInputKeyDown(e: IKeyboardEvent): void {
|
||||
|
||||
if (e.equals(KeyCode.Enter)) {
|
||||
this._tableController.getAction(ACTION_IDS.FIND_NEXT).run().then(null, onUnexpectedError);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.equals(KeyMod.Shift | KeyCode.Enter)) {
|
||||
this._tableController.getAction(ACTION_IDS.FIND_NEXT).run().then(null, onUnexpectedError);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.equals(KeyCode.Tab)) {
|
||||
this._findInput.focusOnCaseSensitive();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.equals(KeyMod.CtrlCmd | KeyCode.DownArrow)) {
|
||||
this._tableController.focus();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// ----- sash
|
||||
public getHorizontalSashTop(sash: Sash): number {
|
||||
return 0;
|
||||
}
|
||||
public getHorizontalSashLeft?(sash: Sash): number {
|
||||
return 0;
|
||||
}
|
||||
public getHorizontalSashWidth?(sash: Sash): number {
|
||||
return 500;
|
||||
}
|
||||
|
||||
// ----- initialization
|
||||
|
||||
private _keybindingLabelFor(actionId: string): string {
|
||||
let kb = this._keybindingService.lookupKeybinding(actionId);
|
||||
if (!kb) {
|
||||
return '';
|
||||
}
|
||||
return ` (${kb.getLabel()})`;
|
||||
}
|
||||
|
||||
private _buildFindPart(): HTMLElement {
|
||||
// Find input
|
||||
this._findInput = this._register(new FindInput(null, this._contextViewProvider, true, {
|
||||
width: FIND_INPUT_AREA_WIDTH,
|
||||
label: NLS_FIND_INPUT_LABEL,
|
||||
placeholder: NLS_FIND_INPUT_PLACEHOLDER,
|
||||
appendCaseSensitiveLabel: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
|
||||
appendWholeWordsLabel: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
|
||||
appendRegexLabel: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
|
||||
validation: (value: string): InputBoxMessage => {
|
||||
if (value.length === 0) {
|
||||
return null;
|
||||
}
|
||||
if (!this._findInput.getRegex()) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
/* tslint:disable:no-unused-expression */
|
||||
new RegExp(value);
|
||||
/* tslint:enable:no-unused-expression */
|
||||
return null;
|
||||
} catch (e) {
|
||||
return { content: e.message };
|
||||
}
|
||||
}
|
||||
}));
|
||||
this._findInput.setRegex(!!this._state.isRegex);
|
||||
this._findInput.setCaseSensitive(!!this._state.matchCase);
|
||||
this._findInput.setWholeWords(!!this._state.wholeWord);
|
||||
this._register(this._findInput.onKeyDown((e) => this._onFindInputKeyDown(e)));
|
||||
this._register(this._findInput.onInput(() => {
|
||||
let self = this;
|
||||
if (self.searchTimeoutHandle) {
|
||||
clearTimeout(self.searchTimeoutHandle);
|
||||
}
|
||||
|
||||
this.searchTimeoutHandle = setTimeout(function () {
|
||||
self._state.change({ searchString: self._findInput.getValue() }, true);
|
||||
}, 300);
|
||||
}));
|
||||
this._register(this._findInput.onDidOptionChange(() => {
|
||||
this._state.change({
|
||||
isRegex: this._findInput.getRegex(),
|
||||
wholeWord: this._findInput.getWholeWords(),
|
||||
matchCase: this._findInput.getCaseSensitive()
|
||||
}, true);
|
||||
}));
|
||||
if (platform.isLinux) {
|
||||
this._register(this._findInput.onMouseDown((e) => this._onFindInputMouseDown(e)));
|
||||
}
|
||||
|
||||
this._matchesCount = document.createElement('div');
|
||||
this._matchesCount.className = 'matchesCount';
|
||||
this._updateMatchesCount();
|
||||
|
||||
// Previous button
|
||||
this._prevBtn = this._register(new SimpleButton({
|
||||
label: NLS_PREVIOUS_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.PreviousMatchFindAction),
|
||||
className: 'previous',
|
||||
onTrigger: () => {
|
||||
this._tableController.getAction(ACTION_IDS.FIND_PREVIOUS).run().then(null, onUnexpectedError);
|
||||
},
|
||||
onKeyDown: (e) => { }
|
||||
}));
|
||||
|
||||
// Next button
|
||||
this._nextBtn = this._register(new SimpleButton({
|
||||
label: NLS_NEXT_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.NextMatchFindAction),
|
||||
className: 'next',
|
||||
onTrigger: () => {
|
||||
this._tableController.getAction(ACTION_IDS.FIND_NEXT).run().then(null, onUnexpectedError);
|
||||
},
|
||||
onKeyDown: (e) => { }
|
||||
}));
|
||||
|
||||
let findPart = document.createElement('div');
|
||||
findPart.className = 'find-part';
|
||||
findPart.appendChild(this._findInput.domNode);
|
||||
findPart.appendChild(this._matchesCount);
|
||||
findPart.appendChild(this._prevBtn.domNode);
|
||||
findPart.appendChild(this._nextBtn.domNode);
|
||||
|
||||
// Close button
|
||||
this._closeBtn = this._register(new SimpleButton({
|
||||
label: NLS_CLOSE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.CloseFindWidgetCommand),
|
||||
className: 'close-fw',
|
||||
onTrigger: () => {
|
||||
this._state.change({ isRevealed: false, searchScope: null }, false);
|
||||
},
|
||||
onKeyDown: () => { }
|
||||
}));
|
||||
|
||||
findPart.appendChild(this._closeBtn.domNode);
|
||||
|
||||
return findPart;
|
||||
}
|
||||
|
||||
private _buildDomNode(): void {
|
||||
// Find part
|
||||
let findPart = this._buildFindPart();
|
||||
|
||||
// Widget
|
||||
this._domNode = document.createElement('div');
|
||||
this._domNode.className = 'editor-widget find-widget';
|
||||
this._domNode.setAttribute('aria-hidden', 'true');
|
||||
|
||||
this._domNode.appendChild(findPart);
|
||||
|
||||
this._buildSash();
|
||||
}
|
||||
|
||||
private _buildSash() {
|
||||
this._resizeSash = new Sash(this._domNode, this, { orientation: Orientation.VERTICAL });
|
||||
let originalWidth = FIND_WIDGET_INITIAL_WIDTH;
|
||||
|
||||
this._register(this._resizeSash.onDidStart((e: ISashEvent) => {
|
||||
originalWidth = dom.getTotalWidth(this._domNode);
|
||||
}));
|
||||
|
||||
this._register(this._resizeSash.onDidChange((evt: ISashEvent) => {
|
||||
let width = originalWidth + evt.startX - evt.currentX;
|
||||
|
||||
if (width < FIND_WIDGET_INITIAL_WIDTH) {
|
||||
// narrow down the find widget should be handled by CSS.
|
||||
return;
|
||||
}
|
||||
|
||||
let maxWidth = parseFloat(dom.getComputedStyle(this._domNode).maxWidth) || 0;
|
||||
if (width > maxWidth) {
|
||||
return;
|
||||
}
|
||||
this._domNode.style.width = `${width}px`;
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
interface ISimpleButtonOpts {
|
||||
label: string;
|
||||
className: string;
|
||||
onTrigger: () => void;
|
||||
onKeyDown: (e: IKeyboardEvent) => void;
|
||||
}
|
||||
|
||||
class SimpleButton extends Widget {
|
||||
|
||||
private _opts: ISimpleButtonOpts;
|
||||
private _domNode: HTMLElement;
|
||||
|
||||
constructor(opts: ISimpleButtonOpts) {
|
||||
super();
|
||||
this._opts = opts;
|
||||
|
||||
this._domNode = document.createElement('div');
|
||||
this._domNode.title = this._opts.label;
|
||||
this._domNode.tabIndex = 0;
|
||||
this._domNode.className = 'button ' + this._opts.className;
|
||||
this._domNode.setAttribute('role', 'button');
|
||||
this._domNode.setAttribute('aria-label', this._opts.label);
|
||||
|
||||
this.onclick(this._domNode, (e) => {
|
||||
this._opts.onTrigger();
|
||||
e.preventDefault();
|
||||
});
|
||||
this.onkeydown(this._domNode, (e) => {
|
||||
if (e.equals(KeyCode.Space) || e.equals(KeyCode.Enter)) {
|
||||
this._opts.onTrigger();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
this._opts.onKeyDown(e);
|
||||
});
|
||||
}
|
||||
|
||||
public get domNode(): HTMLElement {
|
||||
return this._domNode;
|
||||
}
|
||||
|
||||
public isEnabled(): boolean {
|
||||
return (this._domNode.tabIndex >= 0);
|
||||
}
|
||||
|
||||
public focus(): void {
|
||||
this._domNode.focus();
|
||||
}
|
||||
|
||||
public setEnabled(enabled: boolean): void {
|
||||
dom.toggleClass(this._domNode, 'disabled', !enabled);
|
||||
this._domNode.setAttribute('aria-disabled', String(!enabled));
|
||||
this._domNode.tabIndex = enabled ? 0 : -1;
|
||||
}
|
||||
|
||||
public setExpanded(expanded: boolean): void {
|
||||
this._domNode.setAttribute('aria-expanded', String(!!expanded));
|
||||
}
|
||||
|
||||
public toggleClass(className: string, shouldHaveIt: boolean): void {
|
||||
dom.toggleClass(this._domNode, className, shouldHaveIt);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user