more polish and linting

This commit is contained in:
Benjamin Pasero
2016-01-19 07:41:48 +01:00
parent 04e1468803
commit 6bd608e81a
5 changed files with 121 additions and 128 deletions

View File

@@ -7,12 +7,10 @@
'use strict';
import 'vs/css!./contextview';
import Builder = require('vs/base/browser/builder');
import {Builder, $} from 'vs/base/browser/builder';
import DOM = require('vs/base/browser/dom');
import Lifecycle = require('vs/base/common/lifecycle');
import EventEmitter = require('vs/base/common/eventEmitter');
var $ = Builder.$;
import {IDisposable, disposeAll} from 'vs/base/common/lifecycle';
import {EventEmitter} from 'vs/base/common/eventEmitter';
export interface IAnchor {
x: number;
@@ -30,20 +28,20 @@ export enum AnchorPosition {
}
export interface IDelegate {
getAnchor(): HTMLElement|IAnchor;
render(container: HTMLElement): Lifecycle.IDisposable;
getAnchor(): HTMLElement | IAnchor;
render(container: HTMLElement): IDisposable;
layout?(): void;
anchorAlignment?:AnchorAlignment; // default: left
anchorPosition?:AnchorPosition; // default: below
canRelayout?:boolean; // default: true
onDOMEvent?(e:Event, activeElement: HTMLElement):void;
onHide?(data?: any):void;
anchorAlignment?: AnchorAlignment; // default: left
anchorPosition?: AnchorPosition; // default: below
canRelayout?: boolean; // default: true
onDOMEvent?(e: Event, activeElement: HTMLElement): void;
onHide?(data?: any): void;
}
export interface IContextViewProvider {
showContextView(delegate: IDelegate): void;
hideContextView(): void;
layout():void;
layout(): void;
}
export interface IPosition {
@@ -58,8 +56,8 @@ export interface ISize {
export interface IView extends IPosition, ISize { }
export function layout(view: ISize, around: IView, inside: IView, anchorPosition: AnchorPosition, anchorAlignment: AnchorAlignment) : IPosition {
var top: number, left: number;
export function layout(view: ISize, around: IView, inside: IView, anchorPosition: AnchorPosition, anchorAlignment: AnchorAlignment): IPosition {
let top: number, left: number;
if (anchorPosition === AnchorPosition.BELOW) {
top = around.top + around.height - inside.top;
@@ -88,16 +86,16 @@ export function layout(view: ISize, around: IView, inside: IView, anchorPosition
return { top: top, left: left };
}
export class ContextView extends EventEmitter.EventEmitter {
export class ContextView extends EventEmitter {
private static BUBBLE_UP_EVENTS = ['click', 'keydown', 'focus', 'blur'];
private static BUBBLE_DOWN_EVENTS = ['click'];
private $container: Builder.Builder;
private $view: Builder.Builder;
private $container: Builder;
private $view: Builder;
private delegate: IDelegate;
private toDispose: Lifecycle.IDisposable[];
private toDisposeOnClean: Lifecycle.IDisposable;
private toDispose: IDisposable[];
private toDisposeOnClean: IDisposable;
constructor(container: HTMLElement) {
super();
@@ -122,11 +120,11 @@ export class ContextView extends EventEmitter.EventEmitter {
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.on(ContextView.BUBBLE_UP_EVENTS, (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);
this.$container.on(ContextView.BUBBLE_DOWN_EVENTS, (e: Event) => {
this.onDOMEvent(e, <HTMLElement>document.activeElement, true);
}, null, true);
}
}
@@ -168,16 +166,16 @@ export class ContextView extends EventEmitter.EventEmitter {
private doLayout(): void {
// Get anchor
var anchor = this.delegate.getAnchor();
let anchor = this.delegate.getAnchor();
// Compute around
var around: IView;
let around: IView;
// Get the element's position and size (to anchor the view)
if (DOM.isHTMLElement(anchor)) {
var $anchor = $(<HTMLElement> anchor);
var elementPosition = $anchor.getPosition();
var elementSize = $anchor.getTotalSize();
let $anchor = $(<HTMLElement>anchor);
let elementPosition = $anchor.getPosition();
let elementSize = $anchor.getTotalSize();
around = {
top: elementPosition.top,
@@ -186,7 +184,7 @@ export class ContextView extends EventEmitter.EventEmitter {
height: elementSize.height
};
} else {
var realAnchor = <IAnchor> anchor;
let realAnchor = <IAnchor>anchor;
around = {
top: realAnchor.y,
@@ -197,8 +195,8 @@ export class ContextView extends EventEmitter.EventEmitter {
}
// Get the container's position
var insidePosition = this.$container.getPosition();
var inside = {
let insidePosition = this.$container.getPosition();
let inside = {
top: insidePosition.top,
left: insidePosition.left,
height: window.innerHeight,
@@ -206,13 +204,13 @@ export class ContextView extends EventEmitter.EventEmitter {
};
// Get the view's size
var viewSize = this.$view.getTotalSize();
var view = { width: viewSize.width, height: viewSize.height };
let viewSize = this.$view.getTotalSize();
let view = { width: viewSize.width, height: viewSize.height };
var anchorPosition = this.delegate.anchorPosition || AnchorPosition.BELOW;
var anchorAlignment = this.delegate.anchorAlignment || AnchorAlignment.LEFT;
let anchorPosition = this.delegate.anchorPosition || AnchorPosition.BELOW;
let anchorAlignment = this.delegate.anchorAlignment || AnchorAlignment.LEFT;
var result = layout(view, around, inside, anchorPosition, anchorAlignment);
let result = layout(view, around, inside, anchorPosition, anchorAlignment);
this.$view.removeClass('top', 'bottom', 'left', 'right');
this.$view.addClass(anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top');
@@ -242,8 +240,8 @@ export class ContextView extends EventEmitter.EventEmitter {
private onDOMEvent(e: Event, element: HTMLElement, onCapture: boolean): void {
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())) {
this.delegate.onDOMEvent(e, <HTMLElement>document.activeElement);
} else if (onCapture && !DOM.isAncestor(<HTMLElement>e.target, this.$container.getHTMLElement())) {
this.hide();
}
}
@@ -253,6 +251,6 @@ export class ContextView extends EventEmitter.EventEmitter {
super.dispose();
this.hide();
this.toDispose = Lifecycle.disposeAll(this.toDispose);
this.toDispose = disposeAll(this.toDispose);
}
}