actionbar.ts 19.3 KB
Newer Older
E
Erich Gamma 已提交
1 2 3 4 5 6 7 8 9
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

'use strict';

import 'vs/css!./actionbar';
import nls = require('vs/nls');
B
Benjamin Pasero 已提交
10 11 12
import lifecycle = require('vs/base/common/lifecycle');
import {Promise} from 'vs/base/common/winjs.base';
import {Builder, $} from 'vs/base/browser/builder';
13
import platform = require('vs/base/common/platform');
B
Benjamin Pasero 已提交
14
import {IAction, IActionRunner, Action, ActionRunner} from 'vs/base/common/actions';
B
Benjamin Pasero 已提交
15 16 17 18 19 20
import DOM = require('vs/base/browser/dom');
import {EventType as CommonEventType} from 'vs/base/common/events';
import types = require('vs/base/common/types');
import {IEventEmitter, EventEmitter, IEmitterEvent} from 'vs/base/common/eventEmitter';
import {Gesture, EventType} from 'vs/base/browser/touch';
import {StandardKeyboardEvent} from 'vs/base/browser/keyboardEvent';
E
Erich Gamma 已提交
21 22
import {CommonKeybindings} from 'vs/base/common/keyCodes';

B
Benjamin Pasero 已提交
23
export interface IActionItem extends IEventEmitter {
B
Benjamin Pasero 已提交
24
	actionRunner: IActionRunner;
B
Benjamin Pasero 已提交
25 26 27 28 29 30
	setActionContext(context: any): void;
	render(element: HTMLElement): void;
	isEnabled(): boolean;
	focus(): void;
	blur(): void;
	dispose(): void;
E
Erich Gamma 已提交
31 32
}

B
Benjamin Pasero 已提交
33
export class BaseActionItem extends EventEmitter implements IActionItem {
E
Erich Gamma 已提交
34

B
Benjamin Pasero 已提交
35
	public builder: Builder;
A
Alex Dima 已提交
36
	public _callOnDispose: lifecycle.IDisposable[];
B
Benjamin Pasero 已提交
37
	public _context: any;
B
Benjamin Pasero 已提交
38 39 40 41
	public _action: IAction;

	private gesture: Gesture;
	private _actionRunner: IActionRunner;
E
Erich Gamma 已提交
42

B
Benjamin Pasero 已提交
43
	constructor(context: any, action: IAction) {
E
Erich Gamma 已提交
44 45 46 47 48 49
		super();

		this._callOnDispose = [];
		this._context = context || this;
		this._action = action;

B
Benjamin Pasero 已提交
50
		if (action instanceof Action) {
A
Alex Dima 已提交
51
			let l = (<Action>action).addBulkListener2((events: IEmitterEvent[]) => {
E
Erich Gamma 已提交
52

B
Benjamin Pasero 已提交
53
				if (!this.builder) {
E
Erich Gamma 已提交
54 55 56 57 58
					// we have not been rendered yet, so there
					// is no point in updating the UI
					return;
				}

B
Benjamin Pasero 已提交
59
				events.forEach((event: IEmitterEvent) => {
E
Erich Gamma 已提交
60

B
Benjamin Pasero 已提交
61
					switch (event.getType()) {
B
Benjamin Pasero 已提交
62
						case Action.ENABLED:
E
Erich Gamma 已提交
63 64
							this._updateEnabled();
							break;
B
Benjamin Pasero 已提交
65
						case Action.LABEL:
E
Erich Gamma 已提交
66 67 68
							this._updateLabel();
							this._updateTooltip();
							break;
B
Benjamin Pasero 已提交
69
						case Action.TOOLTIP:
E
Erich Gamma 已提交
70 71
							this._updateTooltip();
							break;
B
Benjamin Pasero 已提交
72
						case Action.CLASS:
E
Erich Gamma 已提交
73 74
							this._updateClass();
							break;
B
Benjamin Pasero 已提交
75
						case Action.CHECKED:
E
Erich Gamma 已提交
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
							this._updateChecked();
							break;
						default:
							this._updateUnknown(event);
							break;
					}
				});
			});
			this._callOnDispose.push(l);
		}
	}

	public get callOnDispose() {
		return this._callOnDispose;
	}

B
Benjamin Pasero 已提交
92
	public set actionRunner(actionRunner: IActionRunner) {
E
Erich Gamma 已提交
93 94 95
		this._actionRunner = actionRunner;
	}

B
Benjamin Pasero 已提交
96
	public get actionRunner(): IActionRunner {
E
Erich Gamma 已提交
97 98 99
		return this._actionRunner;
	}

B
Benjamin Pasero 已提交
100
	public getAction(): IAction {
E
Erich Gamma 已提交
101 102 103
		return this._action;
	}

B
Benjamin Pasero 已提交
104
	public isEnabled(): boolean {
E
Erich Gamma 已提交
105 106 107
		return this._action.enabled;
	}

B
Benjamin Pasero 已提交
108
	public setActionContext(newContext: any): void {
E
Erich Gamma 已提交
109 110 111
		this._context = newContext;
	}

B
Benjamin Pasero 已提交
112
	public render(container: HTMLElement): void {
E
Erich Gamma 已提交
113
		this.builder = $(container);
B
Benjamin Pasero 已提交
114
		this.gesture = new Gesture(container);
E
Erich Gamma 已提交
115

B
Benjamin Pasero 已提交
116 117
		this.builder.on(DOM.EventType.CLICK, (event: Event) => { this.onClick(event); });
		this.builder.on(EventType.Tap, e => { this.onClick(e); });
E
Erich Gamma 已提交
118

119 120 121 122
		if (platform.isMacintosh) {
			this.builder.on(DOM.EventType.CONTEXT_MENU, (event: Event) => { this.onClick(event); }); // https://github.com/Microsoft/vscode/issues/1011
		}

B
Benjamin Pasero 已提交
123
		this.builder.on('mousedown', (e: MouseEvent) => {
E
Erich Gamma 已提交
124 125 126 127 128
			if (e.button === 0 && this._action.enabled) {
				this.builder.addClass('active');
			}
		});

B
Benjamin Pasero 已提交
129
		this.builder.on(['mouseup', 'mouseout'], (e: MouseEvent) => {
E
Erich Gamma 已提交
130 131 132 133 134 135
			if (e.button === 0 && this._action.enabled) {
				this.builder.removeClass('active');
			}
		});
	}

B
Benjamin Pasero 已提交
136 137
	public onClick(event: Event): void {
		DOM.EventHelper.stop(event, true);
E
Erich Gamma 已提交
138 139 140
		this._actionRunner.run(this._action, this._context || event);
	}

B
Benjamin Pasero 已提交
141
	public focus(): void {
142 143 144
		if (this.builder) {
			this.builder.domFocus();
		}
E
Erich Gamma 已提交
145 146
	}

B
Benjamin Pasero 已提交
147
	public blur(): void {
148
		if (this.builder) {
149
			this.builder.domBlur();
150
		}
E
Erich Gamma 已提交
151 152
	}

B
Benjamin Pasero 已提交
153
	public _updateEnabled(): void {
E
Erich Gamma 已提交
154 155 156
		// implement in subclass
	}

B
Benjamin Pasero 已提交
157
	public _updateLabel(): void {
E
Erich Gamma 已提交
158 159 160
		// implement in subclass
	}

B
Benjamin Pasero 已提交
161
	public _updateTooltip(): void {
E
Erich Gamma 已提交
162 163 164
		// implement in subclass
	}

B
Benjamin Pasero 已提交
165
	public _updateClass(): void {
E
Erich Gamma 已提交
166 167 168
		// implement in subclass
	}

B
Benjamin Pasero 已提交
169
	public _updateChecked(): void {
E
Erich Gamma 已提交
170 171 172
		// implement in subclass
	}

B
Benjamin Pasero 已提交
173
	public _updateUnknown(event: IEmitterEvent): void {
E
Erich Gamma 已提交
174 175 176
		// can implement in subclass
	}

B
Benjamin Pasero 已提交
177
	public dispose(): void {
E
Erich Gamma 已提交
178 179 180 181 182 183 184 185 186 187 188 189
		super.dispose();

		if (this.builder) {
			this.builder.destroy();
			this.builder = null;
		}

		if (this.gesture) {
			this.gesture.dispose();
			this.gesture = null;
		}

A
Alex Dima 已提交
190
		this._callOnDispose = lifecycle.dispose(this._callOnDispose);
E
Erich Gamma 已提交
191 192 193
	}
}

B
Benjamin Pasero 已提交
194
export class Separator extends Action {
E
Erich Gamma 已提交
195

B
Benjamin Pasero 已提交
196
	public static ID = 'vs.actions.separator';
E
Erich Gamma 已提交
197

B
Benjamin Pasero 已提交
198
	constructor(label?: string, order?) {
E
Erich Gamma 已提交
199 200 201 202 203 204 205 206
		super(Separator.ID, label, label ? 'separator text' : 'separator');
		this.checked = false;
		this.enabled = false;
		this.order = order;
	}
}

export interface IActionItemOptions {
B
Benjamin Pasero 已提交
207 208 209
	icon?: boolean;
	label?: boolean;
	keybinding?: string;
E
Erich Gamma 已提交
210 211 212 213
}

export class ActionItem extends BaseActionItem {

B
Benjamin Pasero 已提交
214 215 216
	$e: Builder;
	private cssClass: string;
	private options: IActionItemOptions;
E
Erich Gamma 已提交
217

B
Benjamin Pasero 已提交
218
	constructor(context: any, action: IAction, options: IActionItemOptions = {}) {
E
Erich Gamma 已提交
219 220 221 222 223 224 225 226
		super(context, action);

		this.options = options;
		this.options.icon = options.icon !== undefined ? options.icon : false;
		this.options.label = options.label !== undefined ? options.label : true;
		this.cssClass = '';
	}

B
Benjamin Pasero 已提交
227
	public render(container: HTMLElement): void {
E
Erich Gamma 已提交
228 229
		super.render(container);

230
		this.$e = $('a.action-label').appendTo(this.builder);
231
		this.$e.attr({ role: 'button' });
E
Erich Gamma 已提交
232 233 234 235 236 237 238 239 240 241 242 243

		if (this.options.label && this.options.keybinding) {
			$('span.keybinding').text(this.options.keybinding).appendTo(this.builder);
		}

		this._updateClass();
		this._updateLabel();
		this._updateTooltip();
		this._updateEnabled();
		this._updateChecked();
	}

B
Benjamin Pasero 已提交
244
	public focus(): void {
E
Erich Gamma 已提交
245 246 247 248
		super.focus();
		this.$e.domFocus();
	}

B
Benjamin Pasero 已提交
249
	public _updateLabel(): void {
E
Erich Gamma 已提交
250 251 252 253 254
		if (this.options.label) {
			this.$e.text(this.getAction().label);
		}
	}

B
Benjamin Pasero 已提交
255
	public _updateTooltip(): void {
B
Benjamin Pasero 已提交
256
		let title: string = null;
E
Erich Gamma 已提交
257 258 259 260 261 262 263 264

		if (this.getAction().tooltip) {
			title = this.getAction().tooltip;

		} else if (!this.options.label && this.getAction().label && this.options.icon) {
			title = this.getAction().label;

			if (this.options.keybinding) {
265
				title = nls.localize({ key: 'titleLabel', comment: ['action title', 'action keybinding']}, "{0} ({1})", title, this.options.keybinding);
E
Erich Gamma 已提交
266 267 268 269 270 271 272 273
			}
		}

		if (title) {
			this.$e.attr({ title: title });
		}
	}

B
Benjamin Pasero 已提交
274
	public _updateClass(): void {
E
Erich Gamma 已提交
275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
		if (this.cssClass) {
			this.$e.removeClass(this.cssClass);
		}
		if (this.options.icon) {
			this.cssClass = this.getAction().class;
			this.$e.addClass('icon');
			if (this.cssClass) {
				this.$e.addClass(this.cssClass);
			}
			this._updateEnabled();
		} else {
			this.$e.removeClass('icon');
		}
	}

B
Benjamin Pasero 已提交
290 291
	public _updateEnabled(): void {
		if (this.getAction().enabled) {
E
Erich Gamma 已提交
292 293
			this.builder.removeClass('disabled');
			this.$e.removeClass('disabled');
294
			this.$e.attr({ tabindex: 0 });
E
Erich Gamma 已提交
295 296 297
		} else {
			this.builder.addClass('disabled');
			this.$e.addClass('disabled');
298
			DOM.removeTabIndexAndUpdateFocus(this.$e.getHTMLElement());
E
Erich Gamma 已提交
299 300 301
		}
	}

B
Benjamin Pasero 已提交
302 303
	public _updateChecked(): void {
		if (this.getAction().checked) {
E
Erich Gamma 已提交
304 305 306 307 308 309 310 311 312
			this.$e.addClass('checked');
		} else {
			this.$e.removeClass('checked');
		}
	}
}

export class ProgressItem extends BaseActionItem {

B
Benjamin Pasero 已提交
313
	public render(parent: HTMLElement): void {
E
Erich Gamma 已提交
314

B
Benjamin Pasero 已提交
315
		let container = document.createElement('div');
E
Erich Gamma 已提交
316 317
		$(container).addClass('progress-item');

B
Benjamin Pasero 已提交
318
		let label = document.createElement('div');
E
Erich Gamma 已提交
319 320 321 322 323
		$(label).addClass('label');
		label.textContent = this.getAction().label;
		label.title = this.getAction().label;
		super.render(label);

B
Benjamin Pasero 已提交
324
		let progress = document.createElement('div');
E
Erich Gamma 已提交
325 326 327
		progress.textContent = '\u2026';
		$(progress).addClass('tag', 'progress');

B
Benjamin Pasero 已提交
328
		let done = document.createElement('div');
E
Erich Gamma 已提交
329 330 331
		done.textContent = '\u2713';
		$(done).addClass('tag', 'done');

B
Benjamin Pasero 已提交
332
		let error = document.createElement('div');
E
Erich Gamma 已提交
333 334 335
		error.textContent = '!';
		$(error).addClass('tag', 'error');

A
Alex Dima 已提交
336
		this.callOnDispose.push(this.addListener2(CommonEventType.BEFORE_RUN, () => {
E
Erich Gamma 已提交
337 338 339 340 341
			$(progress).addClass('active');
			$(done).removeClass('active');
			$(error).removeClass('active');
		}));

A
Alex Dima 已提交
342
		this.callOnDispose.push(this.addListener2(CommonEventType.RUN, (result) => {
E
Erich Gamma 已提交
343
			$(progress).removeClass('active');
B
Benjamin Pasero 已提交
344
			if (result.error) {
E
Erich Gamma 已提交
345 346 347 348 349 350 351 352 353 354 355 356 357 358 359
				$(done).removeClass('active');
				$(error).addClass('active');
			} else {
				$(error).removeClass('active');
				$(done).addClass('active');
			}
		}));

		container.appendChild(label);
		container.appendChild(progress);
		container.appendChild(done);
		container.appendChild(error);
		parent.appendChild(container);
	}

B
Benjamin Pasero 已提交
360
	public dispose(): void {
E
Erich Gamma 已提交
361 362 363 364 365 366 367 368 369 370
		super.dispose();
	}
}

export enum ActionsOrientation {
	HORIZONTAL = 1,
	VERTICAL = 2
}

export interface IActionItemProvider {
B
Benjamin Pasero 已提交
371
	(action: IAction): IActionItem;
E
Erich Gamma 已提交
372 373 374
}

export interface IActionBarOptions {
B
Benjamin Pasero 已提交
375 376 377
	orientation?: ActionsOrientation;
	context?: any;
	actionItemProvider?: IActionItemProvider;
B
Benjamin Pasero 已提交
378
	actionRunner?: IActionRunner;
379
	ariaLabel?: string;
E
Erich Gamma 已提交
380 381
}

B
Benjamin Pasero 已提交
382
let defaultOptions: IActionBarOptions = {
E
Erich Gamma 已提交
383 384 385 386 387
	orientation: ActionsOrientation.HORIZONTAL,
	context: null
};

export interface IActionOptions extends IActionItemOptions {
B
Benjamin Pasero 已提交
388
	index?: number;
E
Erich Gamma 已提交
389 390
}

B
Benjamin Pasero 已提交
391
export class ActionBar extends EventEmitter implements IActionRunner {
E
Erich Gamma 已提交
392

B
Benjamin Pasero 已提交
393
	public options: IActionBarOptions;
394

B
Benjamin Pasero 已提交
395
	private _actionRunner: IActionRunner;
E
Erich Gamma 已提交
396 397 398
	private _context: any;

	// Items
B
Benjamin Pasero 已提交
399
	public items: IActionItem[];
400

B
Benjamin Pasero 已提交
401
	private focusedItem: number;
402
	private focusTracker: DOM.IFocusTracker;
E
Erich Gamma 已提交
403 404

	// Elements
B
Benjamin Pasero 已提交
405 406
	public domNode: HTMLElement;
	private actionsList: HTMLElement;
E
Erich Gamma 已提交
407

B
Benjamin Pasero 已提交
408
	private toDispose: lifecycle.IDisposable[];
E
Erich Gamma 已提交
409

B
Benjamin Pasero 已提交
410 411 412
	constructor(container: HTMLElement, options?: IActionBarOptions);
	constructor(container: Builder, options?: IActionBarOptions);
	constructor(container: any, options: IActionBarOptions = defaultOptions) {
E
Erich Gamma 已提交
413 414 415 416 417 418 419
		super();
		this.options = options;
		this._context = options.context;
		this.toDispose = [];
		this._actionRunner = this.options.actionRunner;

		if (!this._actionRunner) {
B
Benjamin Pasero 已提交
420
			this._actionRunner = new ActionRunner();
E
Erich Gamma 已提交
421 422 423 424 425 426 427 428 429 430 431
			this.toDispose.push(this._actionRunner);
		}

		this.toDispose.push(this.addEmitter2(this._actionRunner));

		this.items = [];
		this.focusedItem = undefined;

		this.domNode = document.createElement('div');
		this.domNode.className = 'monaco-action-bar';

B
Benjamin Pasero 已提交
432
		let isVertical = this.options.orientation === ActionsOrientation.VERTICAL;
E
Erich Gamma 已提交
433 434 435 436
		if (isVertical) {
			this.domNode.className += ' vertical';
		}

B
Benjamin Pasero 已提交
437
		$(this.domNode).on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
B
Benjamin Pasero 已提交
438 439
			let event = new StandardKeyboardEvent(e);
			let eventHandled = true;
E
Erich Gamma 已提交
440

B
Benjamin Pasero 已提交
441
			if (event.equals(isVertical ? CommonKeybindings.UP_ARROW : CommonKeybindings.LEFT_ARROW)) {
E
Erich Gamma 已提交
442
				this.focusPrevious();
B
Benjamin Pasero 已提交
443
			} else if (event.equals(isVertical ? CommonKeybindings.DOWN_ARROW : CommonKeybindings.RIGHT_ARROW)) {
E
Erich Gamma 已提交
444 445 446
				this.focusNext();
			} else if (event.equals(CommonKeybindings.ESCAPE)) {
				this.cancel();
447
			} else if (event.equals(CommonKeybindings.ENTER) || event.equals(CommonKeybindings.SPACE)) {
E
Erich Gamma 已提交
448 449 450 451 452
				// Nothing, just staying out of the else branch
			} else {
				eventHandled = false;
			}

B
Benjamin Pasero 已提交
453
			if (eventHandled) {
E
Erich Gamma 已提交
454 455 456 457 458 459
				event.preventDefault();
				event.stopPropagation();
			}
		});

		// Prevent native context menu on actions
B
Benjamin Pasero 已提交
460
		$(this.domNode).on(DOM.EventType.CONTEXT_MENU, (e: Event) => {
E
Erich Gamma 已提交
461 462 463 464
			e.preventDefault();
			e.stopPropagation();
		});

B
Benjamin Pasero 已提交
465
		$(this.domNode).on(DOM.EventType.KEY_UP, (e: KeyboardEvent) => {
B
Benjamin Pasero 已提交
466
			let event = new StandardKeyboardEvent(e);
E
Erich Gamma 已提交
467

468
			// Run action on Enter/Space
469
			if (event.equals(CommonKeybindings.ENTER) || event.equals(CommonKeybindings.SPACE)) {
E
Erich Gamma 已提交
470 471 472 473
				this.doTrigger(event);
				event.preventDefault();
				event.stopPropagation();
			}
474 475

			// Recompute focused item
476
			else if (event.equals(CommonKeybindings.TAB) || event.equals(CommonKeybindings.SHIFT_TAB)) {
477 478
				this.updateFocusedItem();
			}
E
Erich Gamma 已提交
479 480
		});

481
		this.focusTracker = DOM.trackFocus(this.domNode);
482
		this.focusTracker.addBlurListener(() => {
B
Benjamin Pasero 已提交
483
			if (document.activeElement === this.domNode || !DOM.isAncestor(document.activeElement, this.domNode)) {
484
				this.emit(DOM.EventType.BLUR, {});
485 486 487 488
				this.focusedItem = undefined;
			}
		});

489
		this.focusTracker.addFocusListener(() => this.updateFocusedItem());
E
Erich Gamma 已提交
490 491 492

		this.actionsList = document.createElement('ul');
		this.actionsList.className = 'actions-container';
493 494 495 496 497
		this.actionsList.setAttribute('role', 'toolbar');
		if (this.options.ariaLabel) {
			this.actionsList.setAttribute('aria-label', this.options.ariaLabel);
		}

E
Erich Gamma 已提交
498 499
		this.domNode.appendChild(this.actionsList);

B
Benjamin Pasero 已提交
500
		container = (container instanceof Builder) ? container.getHTMLElement() : container;
E
Erich Gamma 已提交
501 502 503
		container.appendChild(this.domNode);
	}

504 505 506 507 508 509 510 511
	public setAriaLabel(label: string): void {
		if (label) {
			this.actionsList.setAttribute('aria-label', label);
		} else{
			this.actionsList.removeAttribute('aria-label');
		}
	}

512 513 514 515 516 517 518 519 520 521
	private updateFocusedItem(): void {
		for (let i = 0; i < this.actionsList.children.length; i++) {
			let elem = this.actionsList.children[i];
			if (DOM.isAncestor(document.activeElement, elem)) {
				this.focusedItem = i;
				break;
			}
		}
	}

E
Erich Gamma 已提交
522 523 524 525 526 527 528 529 530
	public get context(): any {
		return this._context;
	}

	public set context(context: any) {
		this._context = context;
		this.items.forEach(i => i.setActionContext(context));
	}

B
Benjamin Pasero 已提交
531
	public get actionRunner(): IActionRunner {
E
Erich Gamma 已提交
532 533 534
		return this._actionRunner;
	}

B
Benjamin Pasero 已提交
535
	public set actionRunner(actionRunner: IActionRunner) {
E
Erich Gamma 已提交
536 537 538 539 540 541
		if (actionRunner) {
			this._actionRunner = actionRunner;
			this.items.forEach(item => item.actionRunner = actionRunner);
		}
	}

B
Benjamin Pasero 已提交
542
	public getContainer(): Builder {
E
Erich Gamma 已提交
543 544 545
		return $(this.domNode);
	}

B
Benjamin Pasero 已提交
546 547
	public push(actions: IAction, options?: IActionOptions): void;
	public push(actions: IAction[], options?: IActionOptions): void;
B
Benjamin Pasero 已提交
548 549
	public push(actions: any, options: IActionOptions = {}): void {
		if (!Array.isArray(actions)) {
E
Erich Gamma 已提交
550 551 552
			actions = [actions];
		}

B
Benjamin Pasero 已提交
553
		let index = types.isNumber(options.index) ? options.index : null;
E
Erich Gamma 已提交
554

B
Benjamin Pasero 已提交
555 556
		actions.forEach((action: IAction) => {
			let actionItemElement = document.createElement('li');
E
Erich Gamma 已提交
557 558 559
			actionItemElement.className = 'action-item';
			actionItemElement.setAttribute('role', 'presentation');

B
Benjamin Pasero 已提交
560
			let item: IActionItem = null;
E
Erich Gamma 已提交
561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584

			if (this.options.actionItemProvider) {
				item = this.options.actionItemProvider(action);
			}

			if (!item) {
				item = new ActionItem(this.context, action, options);
			}

			item.actionRunner = this._actionRunner;
			item.setActionContext(this.context);
			this.addEmitter(item);
			item.render(actionItemElement);

			if (index === null || index < 0 || index >= this.actionsList.children.length) {
				this.actionsList.appendChild(actionItemElement);
			} else {
				this.actionsList.insertBefore(actionItemElement, this.actionsList.children[index++]);
			}

			this.items.push(item);
		});
	}

B
Benjamin Pasero 已提交
585
	public clear(): void {
B
Benjamin Pasero 已提交
586
		let item: IActionItem;
E
Erich Gamma 已提交
587 588 589 590 591 592
		while (item = this.items.pop()) {
			item.dispose();
		}
		$(this.actionsList).empty();
	}

B
Benjamin Pasero 已提交
593
	public length(): number {
E
Erich Gamma 已提交
594 595 596
		return this.items.length;
	}

B
Benjamin Pasero 已提交
597
	public isEmpty(): boolean {
E
Erich Gamma 已提交
598 599 600
		return this.items.length === 0;
	}

B
Benjamin Pasero 已提交
601 602
	public onContentsChange(): void {
		this.emit(CommonEventType.CONTENTS_CHANGED);
E
Erich Gamma 已提交
603 604
	}

B
Benjamin Pasero 已提交
605
	public focus(selectFirst?: boolean): void {
E
Erich Gamma 已提交
606 607 608 609 610 611 612
		if (selectFirst && typeof this.focusedItem === 'undefined') {
			this.focusedItem = 0;
		}

		this.updateFocus();
	}

B
Benjamin Pasero 已提交
613
	private focusNext(): void {
E
Erich Gamma 已提交
614 615 616 617
		if (typeof this.focusedItem === 'undefined') {
			this.focusedItem = this.items.length - 1;
		}

B
Benjamin Pasero 已提交
618 619
		let startIndex = this.focusedItem;
		let item: IActionItem;
E
Erich Gamma 已提交
620 621 622 623 624 625 626 627 628 629 630 631 632

		do {
			this.focusedItem = (this.focusedItem + 1) % this.items.length;
			item = this.items[this.focusedItem];
		} while (this.focusedItem !== startIndex && !item.isEnabled());

		if (this.focusedItem === startIndex && !item.isEnabled()) {
			this.focusedItem = undefined;
		}

		this.updateFocus();
	}

B
Benjamin Pasero 已提交
633
	private focusPrevious(): void {
E
Erich Gamma 已提交
634 635 636 637
		if (typeof this.focusedItem === 'undefined') {
			this.focusedItem = 0;
		}

B
Benjamin Pasero 已提交
638 639
		let startIndex = this.focusedItem;
		let item: IActionItem;
E
Erich Gamma 已提交
640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657

		do {
			this.focusedItem = this.focusedItem - 1;

			if (this.focusedItem < 0) {
				this.focusedItem = this.items.length - 1;
			}

			item = this.items[this.focusedItem];
		} while (this.focusedItem !== startIndex && !item.isEnabled());

		if (this.focusedItem === startIndex && !item.isEnabled()) {
			this.focusedItem = undefined;
		}

		this.updateFocus();
	}

B
Benjamin Pasero 已提交
658
	private updateFocus(): void {
E
Erich Gamma 已提交
659 660 661 662 663
		if (typeof this.focusedItem === 'undefined') {
			this.domNode.focus();
			return;
		}

B
Benjamin Pasero 已提交
664 665
		for (let i = 0; i < this.items.length; i++) {
			let item = this.items[i];
E
Erich Gamma 已提交
666

B
Benjamin Pasero 已提交
667
			let actionItem = <any>item;
E
Erich Gamma 已提交
668

B
Benjamin Pasero 已提交
669 670
			if (i === this.focusedItem) {
				if (types.isFunction(actionItem.focus)) {
E
Erich Gamma 已提交
671 672 673
					actionItem.focus();
				}
			} else {
B
Benjamin Pasero 已提交
674
				if (types.isFunction(actionItem.blur)) {
E
Erich Gamma 已提交
675 676 677 678 679 680 681
					actionItem.blur();
				}
			}
		}
	}

	private doTrigger(event): void {
B
Benjamin Pasero 已提交
682
		if (typeof this.focusedItem === 'undefined') {
683
			return; //nothing to focus
E
Erich Gamma 已提交
684 685 686
		}

		// trigger action
B
Benjamin Pasero 已提交
687
		let actionItem = (<BaseActionItem>this.items[this.focusedItem]);
E
Erich Gamma 已提交
688 689 690
		this.run(actionItem._action, actionItem._context || event).done();
	}

B
Benjamin Pasero 已提交
691
	private cancel(): void {
B
Benjamin Pasero 已提交
692 693 694 695
		if (document.activeElement instanceof HTMLElement) {
			(<HTMLElement>document.activeElement).blur(); // remove focus from focussed action
		}

B
Benjamin Pasero 已提交
696
		this.emit(CommonEventType.CANCEL);
E
Erich Gamma 已提交
697 698
	}

B
Benjamin Pasero 已提交
699
	public run(action: IAction, context?: any): Promise {
E
Erich Gamma 已提交
700 701 702
		return this._actionRunner.run(action, context);
	}

B
Benjamin Pasero 已提交
703
	public dispose(): void {
E
Erich Gamma 已提交
704 705 706 707 708
		if (this.items !== null) {
			this.clear();
		}
		this.items = null;

709 710 711 712 713
		if (this.focusTracker) {
			this.focusTracker.dispose();
			this.focusTracker = null;
		}

J
Joao Moreno 已提交
714
		this.toDispose = lifecycle.dispose(this.toDispose);
E
Erich Gamma 已提交
715 716 717 718 719 720 721 722 723 724 725

		this.getContainer().destroy();

		super.dispose();
	}
}

export class SelectActionItem extends BaseActionItem {
	private select: HTMLSelectElement;
	private options: string[];
	private selected: number;
I
isidor 已提交
726
	protected toDispose: lifecycle.IDisposable[];
E
Erich Gamma 已提交
727

B
Benjamin Pasero 已提交
728
	constructor(ctx: any, action: IAction, options: string[], selected: number) {
E
Erich Gamma 已提交
729 730 731 732 733 734 735 736 737 738 739 740 741
		super(ctx, action);

		this.select = document.createElement('select');
		this.select.className = 'action-bar-select';

		this.options = options;
		this.selected = selected;

		this.toDispose = [];

		this.registerListeners();
	}

B
Benjamin Pasero 已提交
742
	public setOptions(options: string[], selected: number): void {
E
Erich Gamma 已提交
743 744 745 746 747 748 749
		this.options = options;
		this.selected = selected;

		this.doSetOptions();
	}

	private registerListeners(): void {
B
Benjamin Pasero 已提交
750
		this.toDispose.push(DOM.addStandardDisposableListener(this.select, 'change', (e) => {
I
isidor 已提交
751
			this.actionRunner.run(this._action, this.getActionContext(e.target.value)).done();
E
Erich Gamma 已提交
752 753 754
		}));
	}

I
isidor 已提交
755 756 757 758
	protected getActionContext(option: string) {
		return option;
	}

759 760 761 762 763 764 765 766 767 768 769 770
	public focus(): void {
		if (this.select) {
			this.select.focus();
		}
	}

	public blur(): void {
		if (this.select) {
			this.select.blur();
		}
	}

B
Benjamin Pasero 已提交
771 772
	public render(container: HTMLElement): void {
		DOM.addClass(container, 'select-container');
E
Erich Gamma 已提交
773 774 775 776 777 778 779 780
		container.appendChild(this.select);
		this.doSetOptions();
	}

	private doSetOptions(): void {
		this.select.options.length = 0;

		this.options.forEach((option) => {
I
isidor 已提交
781
			this.select.add(this.createOption(option));
E
Erich Gamma 已提交
782 783 784 785 786 787 788 789
		});

		if (this.selected >= 0) {
			this.select.selectedIndex = this.selected;
		}
	}

	private createOption(value: string): HTMLOptionElement {
B
Benjamin Pasero 已提交
790
		let option = document.createElement('option');
E
Erich Gamma 已提交
791 792 793 794 795 796 797
		option.value = value;
		option.text = value;

		return option;
	}

	public dispose(): void {
J
Joao Moreno 已提交
798
		this.toDispose = lifecycle.dispose(this.toDispose);
E
Erich Gamma 已提交
799 800 801 802

		super.dispose();
	}
}