TypeScript Builder.getHTMLElement方法代码示例

	test('Creation', function () {
		let b = new Builder(document.getElementById(fixtureId));
		b.div().hide();

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

		assert.strictEqual(part.getId(), 'myPart');

		// Memento
		let memento = part.getMemento(storage);
		assert(memento);
		memento.foo = 'bar';
		memento.bar = [1, 2, 3];

		part.shutdown();

		// Re-Create to assert memento contents
		part = new MyPart(b.getHTMLElement());

		memento = part.getMemento(storage);
		assert(memento);
		assert.strictEqual(memento.foo, 'bar');
		assert.strictEqual(memento.bar.length, 3);

		// Empty Memento stores empty object
		delete memento.foo;
		delete memento.bar;

		part.shutdown();
		part = new MyPart(b.getHTMLElement());
		memento = part.getMemento(storage);
		assert(memento);
		assert.strictEqual(Types.isEmptyObject(memento), true);
	});

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: 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()));
	}

export function createOptionElement(option: sqlops.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
	optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
	let possibleInputs: string[] = [];
	let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
	let optionWidget: any;
	let inputElement: HTMLElement;
	let missingErrorMessage = localize('optionsDialog.missingRequireField', ' is required.');
	let invalidInputMessage = localize('optionsDialog.invalidInput', 'Invalid input.  Numeric value expected.');

	if (option.valueType === ServiceOptionType.number) {
		optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
			validationOptions: {
				validation: (value: string) => {
					if (!value && option.isRequired) {
						return { type: MessageType.ERROR, content: option.displayName + missingErrorMessage };
					} else if (!types.isNumber(Number(value))) {
						return { type: MessageType.ERROR, content: invalidInputMessage };
					} else {
						return null;
					}
				}
			},
			ariaLabel: option.displayName
		});
		optionWidget.value = optionValue;
		inputElement = findElement(rowContainer, 'input');
	} else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) {
		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService, undefined, { ariaLabel: option.displayName });
		DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
		inputElement = findElement(rowContainer, 'monaco-select-box');
	} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
		optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
			validationOptions: {
				validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
			},
			ariaLabel: option.displayName
		});
		optionWidget.value = optionValue;
		if (option.valueType === ServiceOptionType.password) {
			optionWidget.inputElement.type = 'password';
		}
		inputElement = findElement(rowContainer, 'input');
	}
	optionsMap[option.name] = { optionWidget: optionWidget, option: option, optionValue: optionValue };
	inputElement.onfocus = () => onFocus(option.name);
}

	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'));
	});

	set enabled(value: boolean) {
		if (value) {
			this.$el.removeClass('disabled');
			this.$el.attr({
				'aria-disabled': 'false',
				'tabIndex': '0'
			});
		} else {
			this.$el.addClass('disabled');
			this.$el.attr('aria-disabled', String(true));
			DOM.removeTabIndexAndUpdateFocus(this.$el.getHTMLElement());
		}
	}

function insertMessage(target: Builder, msg: string): void {
	if (!ariaContainer) {
		console.warn('ARIA support needs a container. Call setARIAContainer() first.');
		return;
	}

	if (target.getHTMLElement().textContent === msg) {
		msg = nls.localize('repeated', "{0} (occurred again)", msg);
	}

	$(target).empty();
	$(target).text(msg);
}

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

		this._toDispose = [];

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

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

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

		this.$label.on([EventType.CLICK, EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
			EventHelper.stop(e, true); // prevent default click behaviour to trigger
		}).on([EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
			if (e instanceof MouseEvent && e.detail > 1) {
				return; // prevent multiple clicks to open multiple context menus (https://github.com/Microsoft/vscode/issues/41363)
			}

			if (this.visible) {
				this.hide();
			} else {
				this.show();
			}
		}).appendTo(this.$el);

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

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

		Gesture.addTarget(this.$label.getHTMLElement());
	}

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

		this._toDispose = [];

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

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

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

		this.$label.on([EventType.CLICK, EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
			EventHelper.stop(e, true); // prevent default click behaviour to trigger
		}).on([EventType.MOUSE_DOWN, GestureEventType.Tap], (e: Event) => {
			// We want to show the context menu on dropdown so that as a user you can press and hold the
			// mouse button, make a choice of action in the menu and release the mouse to trigger that
			// action.
			// Due to some weird bugs though, we delay showing the menu to unwind event stack
			// (see https://github.com/Microsoft/vscode/issues/27648)
			setTimeout(() => this.show(), 100);
		}).appendTo(this.$el);

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

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

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

	test('createEditor creates only the taskbar', (done) => {
		// If I call createEditor
		let editor: QueryEditor = getQueryEditor();
		editor.createEditor(parentBuilder.getHTMLElement());

		// The taskbar should be created
		assert.equal(!!editor.taskbar, true);
		assert.equal(!!editor.taskbarContainer, true);

		// But Nothing else should be created
		assert.equal(!!editor.getContainer(), false);
		assert.equal(!!editor.sqlEditor, false);
		assert.equal(!!editor.sqlEditorContainer, false);
		assert.equal(!!editor.resultsEditor, false);
		assert.equal(!!editor.resultsEditorContainer, false);
		assert.equal(!!editor.sash, false);
		assert.equal(!!editor._isResultsEditorVisible(), false);
		done();
	});