mirror of
https://github.com/microsoft/vscode.git
synced 2026-05-01 22:12:26 +01:00
debt - more builder removal
This commit is contained in:
@@ -6,9 +6,8 @@
|
||||
'use strict';
|
||||
|
||||
import 'vs/css!./contextview';
|
||||
import { Builder, $ } from 'vs/base/browser/builder';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
import { IDisposable, dispose, toDisposable } from 'vs/base/common/lifecycle';
|
||||
import { IDisposable, dispose, toDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
|
||||
|
||||
export interface IAnchor {
|
||||
x: number;
|
||||
@@ -101,39 +100,50 @@ export class ContextView {
|
||||
private static readonly BUBBLE_UP_EVENTS = ['click', 'keydown', 'focus', 'blur'];
|
||||
private static readonly BUBBLE_DOWN_EVENTS = ['click'];
|
||||
|
||||
private $container: Builder;
|
||||
private $view: Builder;
|
||||
private $container: HTMLElement;
|
||||
private $view: HTMLElement;
|
||||
private delegate: IDelegate;
|
||||
private toDispose: IDisposable[];
|
||||
private toDisposeOnClean: IDisposable;
|
||||
private toDisposeOnSetContainer: IDisposable;
|
||||
|
||||
constructor(container: HTMLElement) {
|
||||
this.$view = $('.context-view').hide();
|
||||
this.$view = DOM.$('.context-view');
|
||||
|
||||
DOM.hide(this.$view);
|
||||
|
||||
this.setContainer(container);
|
||||
|
||||
this.toDispose = [toDisposable(() => {
|
||||
this.setContainer(null);
|
||||
})];
|
||||
|
||||
this.toDisposeOnClean = null;
|
||||
}
|
||||
|
||||
public setContainer(container: HTMLElement): void {
|
||||
if (this.$container) {
|
||||
this.$container.getHTMLElement().removeChild(this.$view.getHTMLElement());
|
||||
this.$container.off(ContextView.BUBBLE_UP_EVENTS);
|
||||
this.$container.off(ContextView.BUBBLE_DOWN_EVENTS, true);
|
||||
this.toDisposeOnSetContainer = dispose(this.toDisposeOnSetContainer);
|
||||
this.$container.removeChild(this.$view);
|
||||
this.$container = null;
|
||||
}
|
||||
if (container) {
|
||||
this.$container = $(container);
|
||||
this.$view.appendTo(this.$container);
|
||||
this.$container.on(ContextView.BUBBLE_UP_EVENTS, (e: Event) => {
|
||||
this.onDOMEvent(e, <HTMLElement>document.activeElement, false);
|
||||
this.$container = container;
|
||||
this.$container.appendChild(this.$view);
|
||||
|
||||
const toDispose: IDisposable[] = [];
|
||||
|
||||
ContextView.BUBBLE_UP_EVENTS.forEach(event => {
|
||||
toDispose.push(DOM.addStandardDisposableListener(this.$container, event, (e: Event) => {
|
||||
this.onDOMEvent(e, <HTMLElement>document.activeElement, false);
|
||||
}));
|
||||
});
|
||||
this.$container.on(ContextView.BUBBLE_DOWN_EVENTS, (e: Event) => {
|
||||
this.onDOMEvent(e, <HTMLElement>document.activeElement, true);
|
||||
}, null, true);
|
||||
|
||||
ContextView.BUBBLE_DOWN_EVENTS.forEach(event => {
|
||||
toDispose.push(DOM.addStandardDisposableListener(this.$container, event, (e: Event) => {
|
||||
this.onDOMEvent(e, <HTMLElement>document.activeElement, true);
|
||||
}, true));
|
||||
});
|
||||
|
||||
this.toDisposeOnSetContainer = combinedDisposable(toDispose);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,10 +153,14 @@ export class ContextView {
|
||||
}
|
||||
|
||||
// Show static box
|
||||
this.$view.setClass('context-view').empty().style({ top: '0px', left: '0px' }).show();
|
||||
DOM.clearNode(this.$view);
|
||||
this.$view.className = 'context-view';
|
||||
this.$view.style.top = '0px';
|
||||
this.$view.style.left = '0px';
|
||||
DOM.show(this.$view);
|
||||
|
||||
// Render content
|
||||
this.toDisposeOnClean = delegate.render(this.$view.getHTMLElement());
|
||||
this.toDisposeOnClean = delegate.render(this.$view);
|
||||
|
||||
// Set active delegate
|
||||
this.delegate = delegate;
|
||||
@@ -205,7 +219,9 @@ export class ContextView {
|
||||
};
|
||||
}
|
||||
|
||||
const viewSize = this.$view.getTotalSize();
|
||||
const viewSizeWidth = DOM.getTotalWidth(this.$view);
|
||||
const viewSizeHeight = DOM.getTotalHeight(this.$view);
|
||||
|
||||
const anchorPosition = this.delegate.anchorPosition || AnchorPosition.BELOW;
|
||||
const anchorAlignment = this.delegate.anchorAlignment || AnchorAlignment.LEFT;
|
||||
|
||||
@@ -219,14 +235,17 @@ export class ContextView {
|
||||
horizontalAnchor = { offset: around.left + around.width, size: 0, position: LayoutAnchorPosition.After };
|
||||
}
|
||||
|
||||
const containerPosition = DOM.getDomNodePagePosition(this.$container.getHTMLElement());
|
||||
const top = layout(window.innerHeight, viewSize.height, verticalAnchor) - containerPosition.top;
|
||||
const left = layout(window.innerWidth, viewSize.width, horizontalAnchor) - containerPosition.left;
|
||||
const containerPosition = DOM.getDomNodePagePosition(this.$container);
|
||||
const top = layout(window.innerHeight, viewSizeHeight, verticalAnchor) - containerPosition.top;
|
||||
const left = layout(window.innerWidth, viewSizeWidth, horizontalAnchor) - containerPosition.left;
|
||||
|
||||
this.$view.removeClass('top', 'bottom', 'left', 'right');
|
||||
this.$view.addClass(anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top');
|
||||
this.$view.addClass(anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right');
|
||||
this.$view.style({ top: `${top}px`, left: `${left}px`, width: 'initial' });
|
||||
DOM.removeClasses(this.$view, 'top', 'bottom', 'left', 'right');
|
||||
DOM.addClass(this.$view, anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top');
|
||||
DOM.addClass(this.$view, anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right');
|
||||
|
||||
this.$view.style.top = `${top}px`;
|
||||
this.$view.style.left = `${left}px`;
|
||||
this.$view.style.width = 'initial';
|
||||
}
|
||||
|
||||
public hide(data?: any): void {
|
||||
@@ -241,7 +260,7 @@ export class ContextView {
|
||||
this.toDisposeOnClean = null;
|
||||
}
|
||||
|
||||
this.$view.hide();
|
||||
DOM.hide(this.$view);
|
||||
}
|
||||
|
||||
private isVisible(): boolean {
|
||||
@@ -252,7 +271,7 @@ export class ContextView {
|
||||
if (this.delegate) {
|
||||
if (this.delegate.onDOMEvent) {
|
||||
this.delegate.onDOMEvent(e, <HTMLElement>document.activeElement);
|
||||
} else if (onCapture && !DOM.isAncestor(<HTMLElement>e.target, this.$container.getHTMLElement())) {
|
||||
} else if (onCapture && !DOM.isAncestor(<HTMLElement>e.target, this.$container)) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user