TypeScript builder.Builder類代碼示例

	test('Part Layout with Content only', function () {
		let b = new Builder(document.getElementById(fixtureId));
		b.div().hide();

		let part = new MyPart3();
		part.create(b.getHTMLElement());

		assert(!document.getElementById('myPart.title'));
		assert(document.getElementById('myPart.content'));
	});

export function findElement(container: Builder, className: string): HTMLElement {
	var elementBuilder: Builder = container;
	while (elementBuilder.getHTMLElement()) {
		var htmlElement = elementBuilder.getHTMLElement();
		if (htmlElement.className.startsWith(className)) {
			break;
		}
		elementBuilder = elementBuilder.child(0);
	}
	return elementBuilder.getHTMLElement();
}

	constructor(container: any) {
		super();

		this.$el = $('a.monaco-button').attr({
			'tabIndex': '0',
			'role': 'button'
		}).appendTo(container);

		this.$el.on(DOM.EventType.CLICK, (e) => {
			if (!this.enabled) {
				DOM.EventHelper.stop(e);
				return;
			}

			this.emit(DOM.EventType.CLICK, e);
		});

		this.$el.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
			let event = new StandardKeyboardEvent(e);
			let eventHandled = false;
			if (this.enabled && event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
				this.emit(DOM.EventType.CLICK, e);
				eventHandled = true;
			} else if (event.equals(KeyCode.Escape)) {
				this.$el.domBlur();
				eventHandled = true;
			}

			if (eventHandled) {
				DOM.EventHelper.stop(event, true);
			}
		});
	}

		this.$el.on(DOM.EventType.MOUSE_OVER, (e: MouseEvent) => {
			if (!this.$el.hasClass('disabled')) {
				const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
				if (hoverBackground) {
					this.$el.style('background-color', hoverBackground);
				}
			}
		});

	private applyStyles(): void {
		if (this.$el) {
			const background = this.buttonBackground ? this.buttonBackground.toString() : null;
			const foreground = this.buttonForeground ? this.buttonForeground.toString() : null;

			this.$el.style('color', foreground);
			this.$el.style('background-color', background);
		}
	}

	constructor(container: any, options?: IButtonOptions) {
		super();

		this.options = options || Object.create(null);
		mixin(this.options, defaultOptions, false);

		this.buttonBackground = this.options.buttonBackground;
		this.buttonHoverBackground = this.options.buttonHoverBackground;
		this.buttonForeground = this.options.buttonForeground;
		this.buttonBorder = this.options.buttonBorder;

		this.$el = $('a.monaco-button').attr({
			'tabIndex': '0',
			'role': 'button'
		}).appendTo(container);

		this.$el.on(DOM.EventType.CLICK, (e) => {
			if (!this.enabled) {
				DOM.EventHelper.stop(e);
				return;
			}

			this.emit(DOM.EventType.CLICK, e);
		});

		this.$el.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
			let event = new StandardKeyboardEvent(e);
			let eventHandled = false;
			if (this.enabled && event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
				this.emit(DOM.EventType.CLICK, e);
				eventHandled = true;
			} else if (event.equals(KeyCode.Escape)) {
				this.$el.domBlur();
				eventHandled = true;
			}

			if (eventHandled) {
				DOM.EventHelper.stop(event, true);
			}
		});

		this.$el.on(DOM.EventType.MOUSE_OVER, (e: MouseEvent) => {
			if (!this.$el.hasClass('disabled')) {
				const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
				if (hoverBackground) {
					this.$el.style('background-color', hoverBackground);
				}
			}
		});

		this.$el.on(DOM.EventType.MOUSE_OUT, (e: MouseEvent) => {
			this.applyStyles(); // restore standard styles
		});

		this.applyStyles();
	}

	private off(): void {
		this.bit.style.width = 'inherit';
		this.bit.style.opacity = '1';
		this.element.removeClass(css_active);
		this.element.removeClass(css_infinite);
		this.element.removeClass(css_discrete);

		this.workedVal = 0;
		this.totalWork = undefined;
	}

	public setContainer(container: HTMLElement): void {
		if (this.$el) {
			this.$el.off(['click', 'mousedown']);
			this.$el = null;
		}
		if (container) {
			this.$el = $(container);
			this.$el.on('mousedown', (e: Event) => this.onMouseDown(e as MouseEvent));
		}
	}

	/**
	 * Use this mode to indicate progress that has no total number of work units.
	 */
	public infinite(): ProgressBar {
		this.bit.style.width = '2%';
		this.bit.style.opacity = '1';

		this.element.removeClass(css_discrete);
		this.element.removeClass(css_done);
		this.element.addClass(css_active);
		this.element.addClass(css_infinite);

		return this;
	}

	constructor(container: HTMLElement, options: IBaseDropdownOptions) {
		super();

		this.toDispose = [];

		this.$el = $('.dropdown').appendTo(container);

		this.$label = $('.dropdown-label');

		if (options.tick || options.action) {
			this.$label.addClass('tick');
		}

		let labelRenderer = options.labelRenderer;

		if (!labelRenderer && options.action) {
			this.$action = $('.dropdown-action').appendTo(this.$el);

			let item = new ActionItem(null, options.action, {
				icon: true,
				label: true
			});

			item.actionRunner = this;
			item.render(this.$action.getHTMLElement());

			labelRenderer = (container: HTMLElement): IDisposable => {
				container.innerText = '';
				return item;
			};
		}

		if (!labelRenderer) {
			labelRenderer = (container: HTMLElement): IDisposable => {
				$(container).text(options.label || '');
				return null;
			};
		}

		this.$label.on(['mousedown', EventType.Tap], (e: Event) => {
			e.preventDefault();
			e.stopPropagation();

			this.toggleDropdown();
		}).appendTo(this.$el);

		let cleanupFn = labelRenderer(this.$label.getHTMLElement());

		if (cleanupFn) {
			this.toDispose.push(cleanupFn);
		}

		this.toDispose.push(new Gesture(this.$label.getHTMLElement()));
	}