TypeScript scrollableElement.DomScrollableElement類代碼示例

	protected createEditor(parent: HTMLElement): void {

		// Container for Binary
		const binaryContainerElement = document.createElement('div');
		binaryContainerElement.className = 'binary-container';
		this.binaryContainer = $(binaryContainerElement);
		this.binaryContainer.style('outline', 'none');
		this.binaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)

		// Custom Scrollbars
		this.scrollbar = new DomScrollableElement(binaryContainerElement, { horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto });
		parent.appendChild(this.scrollbar.getDomNode());
	}

	public static show(name: string, resource: URI, container: Builder, scrollbar?: DomScrollableElement): void {

		// Ensure CSS class
		$(container).addClass('monaco-resource-viewer');

		// Lookup media mime if any
		let mime: string;
		const ext = paths.extname(resource.toString());
		if (ext) {
			mime = mapExtToMediaMimes[ext.toLowerCase()];
		}

		if (!mime) {
			mime = mimes.MIME_BINARY;
		}

		// Show Image inline
		if (mime.indexOf('image/') >= 0) {
			$(container)
				.empty()
				.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
				.img({
					src: resource.toString() + '?' + Date.now() // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
				}).on(DOM.EventType.LOAD, () => {
					if (scrollbar) {
						scrollbar.scanDomNode();
					}
				});
		}

		// Embed Object (only PDF for now)
		else if (false /* PDF is currently not supported in Electron it seems */ && mime.indexOf('pdf') >= 0) {
			$(container)
				.empty()
				.style({ padding: 0, margin: 0 }) // We really do not want any paddings or margins when displaying PDFs
				.element('object')
				.attr({
					data: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
					width: '100%',
					height: '100%',
					type: mime
				});
		}

		// Embed Audio (if supported in browser)
		else if (mime.indexOf('audio/') >= 0) {
			$(container)
				.empty()
				.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
				.element('audio')
				.attr({
					src: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
					text: nls.localize('missingAudioSupport', "Sorry but playback of audio files is not supported."),
					controls: 'controls'
				}).on(DOM.EventType.LOAD, () => {
					if (scrollbar) {
						scrollbar.scanDomNode();
					}
				});
		}

		// Embed Video (if supported in browser)
		else if (mime.indexOf('video/') >= 0) {
			$(container)
				.empty()
				.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
				.element('video')
				.attr({
					src: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
					text: nls.localize('missingVideoSupport', "Sorry but playback of video files is not supported."),
					controls: 'controls'
				}).on(DOM.EventType.LOAD, () => {
					if (scrollbar) {
						scrollbar.scanDomNode();
					}
				});
		}

		// Handle generic Binary Files
		else {
			$(container)
				.empty()
				.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
				.span({
					text: nls.localize('nativeBinaryError', "The file cannot be displayed in the editor because it is either binary, very large or uses an unsupported text encoding.")
				});

			if (scrollbar) {
				scrollbar.scanDomNode();
			}
		}
	}

	public dispose(): void {

		// Destroy Container
		this.binaryContainer.destroy();
		this.scrollbar.dispose();

		super.dispose();
	}

	public layout(dimension: Dimension): void {

		// Pass on to Binary Container
		this.binaryContainer.size(dimension.width, dimension.height);
		this.scrollbar.scanDomNode();
		if (this.resourceViewerContext) {
			this.resourceViewerContext.layout(dimension);
		}
	}

				}).on(DOM.EventType.LOAD, () => {
					if (scrollbar) {
						scrollbar.scanDomNode();
					}
				});