debt - more builder removal

This commit is contained in:
Benjamin Pasero
2018-08-27 07:35:04 +02:00
parent e700d600de
commit c4aa2b5da3
16 changed files with 363 additions and 346 deletions

View File

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