diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts index 8dcf672acf1..b7b4120c57d 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.ts +++ b/src/vs/base/browser/ui/actionbar/actionbar.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ - 'use strict'; import 'vs/css!./actionbar'; diff --git a/src/vs/base/browser/ui/contextview/contextview.ts b/src/vs/base/browser/ui/contextview/contextview.ts index 08d8b599fc2..19d005aa692 100644 --- a/src/vs/base/browser/ui/contextview/contextview.ts +++ b/src/vs/base/browser/ui/contextview/contextview.ts @@ -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, document.activeElement, false); + this.$container.on(ContextView.BUBBLE_UP_EVENTS, (e: Event) => { + this.onDOMEvent(e, document.activeElement, false); }); - this.$container.on(ContextView.BUBBLE_DOWN_EVENTS, (e:Event) => { - this.onDOMEvent(e, document.activeElement, true); + this.$container.on(ContextView.BUBBLE_DOWN_EVENTS, (e: Event) => { + this.onDOMEvent(e, 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 = $( anchor); - var elementPosition = $anchor.getPosition(); - var elementSize = $anchor.getTotalSize(); + let $anchor = $(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 = anchor; + let realAnchor = 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, document.activeElement); - } else if (onCapture && !DOM.isAncestor( e.target, this.$container.getHTMLElement())) { + this.delegate.onDOMEvent(e, document.activeElement); + } else if (onCapture && !DOM.isAncestor(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); } } \ No newline at end of file diff --git a/src/vs/base/browser/ui/dropdown/dropdown.ts b/src/vs/base/browser/ui/dropdown/dropdown.ts index 248dea13089..936c4d57ae2 100644 --- a/src/vs/base/browser/ui/dropdown/dropdown.ts +++ b/src/vs/base/browser/ui/dropdown/dropdown.ts @@ -6,40 +6,38 @@ 'use strict'; import 'vs/css!./dropdown'; -import Builder = require('vs/base/browser/builder'); -import WinJS = require('vs/base/common/winjs.base'); -import Touch = require('vs/base/browser/touch'); -import Actions = require('vs/base/common/actions'); -import ActionBar = require('vs/base/browser/ui/actionbar/actionbar'); -import EventEmitter = require('vs/base/common/eventEmitter'); -import Lifecycle = require('vs/base/common/lifecycle'); -import ContextView = require('vs/base/browser/ui/contextview/contextview'); -import Menu = require('vs/base/browser/ui/menu/menu'); - -var $ = Builder.$; +import {Builder, $} from 'vs/base/browser/builder'; +import {Promise} from 'vs/base/common/winjs.base'; +import {Gesture, EventType} from 'vs/base/browser/touch'; +import {ActionRunner, IAction} from 'vs/base/common/actions'; +import {ActionBar, ActionItem, IActionItem} from 'vs/base/browser/ui/actionbar/actionbar'; +import {EventEmitter} from 'vs/base/common/eventEmitter'; +import {IDisposable, disposeAll} from 'vs/base/common/lifecycle'; +import {ContextView, IContextViewProvider} from 'vs/base/browser/ui/contextview/contextview'; +import {Menu, IMenuOptions} from 'vs/base/browser/ui/menu/menu'; export interface ILabelRenderer { - (container: HTMLElement): Lifecycle.IDisposable; + (container: HTMLElement): IDisposable; } export interface IBaseDropdownOptions { tick?: boolean; label?: string; labelRenderer?: ILabelRenderer; - action?: Actions.IAction; + action?: IAction; } -export class BaseDropdown extends Actions.ActionRunner { +export class BaseDropdown extends ActionRunner { - /*protected*/ toDispose: Lifecycle.IDisposable[]; + /*protected*/ toDispose: IDisposable[]; - /*protected*/ $el: Builder.Builder; - private $boxContainer: Builder.Builder; - private $action: Builder.Builder; - private $label: Builder.Builder; - private $contents: Builder.Builder; + /*protected*/ $el: Builder; + private $boxContainer: Builder; + private $action: Builder; + private $label: Builder; + private $contents: Builder; - constructor (container: HTMLElement, options: IBaseDropdownOptions) { + constructor(container: HTMLElement, options: IBaseDropdownOptions) { super(); this.toDispose = []; @@ -52,12 +50,12 @@ export class BaseDropdown extends Actions.ActionRunner { this.$label.addClass('tick'); } - var labelRenderer = options.labelRenderer; + let labelRenderer = options.labelRenderer; if (!labelRenderer && options.action) { this.$action = $('.dropdown-action').appendTo(this.$el); - var item = new ActionBar.ActionItem(null, options.action, { + let item = new ActionItem(null, options.action, { icon: true, label: true }); @@ -65,33 +63,33 @@ export class BaseDropdown extends Actions.ActionRunner { item.actionRunner = this; item.render(this.$action.getHTMLElement()); - labelRenderer = (container: HTMLElement): Lifecycle.IDisposable => { + labelRenderer = (container: HTMLElement): IDisposable => { container.innerText = ''; return item; }; } if (!labelRenderer) { - labelRenderer = (container: HTMLElement): Lifecycle.IDisposable => { + labelRenderer = (container: HTMLElement): IDisposable => { $(container).text(options.label || ''); return null; }; } - this.$label.on(['click', Touch.EventType.Tap], (e:Event) => { + this.$label.on(['click', EventType.Tap], (e: Event) => { e.preventDefault(); e.stopPropagation(); this.toggleDropdown(); }).appendTo(this.$el); - var cleanupFn = labelRenderer(this.$label.getHTMLElement()); + let cleanupFn = labelRenderer(this.$label.getHTMLElement()); if (cleanupFn) { this.toDispose.push(cleanupFn); } - this.toDispose.push(new Touch.Gesture(this.$label.getHTMLElement())); + this.toDispose.push(new Gesture(this.$label.getHTMLElement())); } public set tooltip(tooltip: string) { @@ -114,7 +112,7 @@ export class BaseDropdown extends Actions.ActionRunner { // noop } - /*protected*/ public onEvent(e:Event, activeElement: HTMLElement): void { + /*protected*/ public onEvent(e: Event, activeElement: HTMLElement): void { this.hide(); } @@ -122,7 +120,7 @@ export class BaseDropdown extends Actions.ActionRunner { super.dispose(); this.hide(); - this.toDispose = Lifecycle.disposeAll(this.toDispose); + this.toDispose = disposeAll(this.toDispose); if (this.$boxContainer) { this.$boxContainer.destroy(); @@ -142,23 +140,23 @@ export class BaseDropdown extends Actions.ActionRunner { } export interface IDropdownOptions extends IBaseDropdownOptions { - contextViewProvider: ContextView.IContextViewProvider; + contextViewProvider: IContextViewProvider; } export class Dropdown extends BaseDropdown { - /*protected*/ _contextViewProvider: ContextView.IContextViewProvider; + /*protected*/ _contextViewProvider: IContextViewProvider; - constructor (container: HTMLElement, options: IDropdownOptions) { + constructor(container: HTMLElement, options: IDropdownOptions) { super(container, options); this.contextViewProvider = options.contextViewProvider; } - /*protected*/ public set contextViewProvider(contextViewProvider: ContextView.IContextViewProvider) { + /*protected*/ public set contextViewProvider(contextViewProvider: IContextViewProvider) { this._contextViewProvider = contextViewProvider; } - /*protected*/ public get contextViewProvider(): ContextView.IContextViewProvider { + /*protected*/ public get contextViewProvider(): IContextViewProvider { return this._contextViewProvider; } @@ -188,17 +186,17 @@ export class Dropdown extends BaseDropdown { } } - /*protected*/ public renderContents(container: HTMLElement): Lifecycle.IDisposable { + /*protected*/ public renderContents(container: HTMLElement): IDisposable { return null; } } export interface IContextMenuDelegate { getAnchor(): any; - getActions(): WinJS.Promise; - getActionItem?(action: Actions.IAction): ActionBar.IActionItem; - getActionsContext?():any; - getMenuClassName?():string; + getActions(): Promise; + getActionItem?(action: IAction): IActionItem; + getActionsContext?(): any; + getMenuClassName?(): string; onHide?(didCancel: boolean): void; } @@ -207,12 +205,12 @@ export interface IContextMenuProvider { } export interface IActionProvider { - getActions(): Actions.IAction[]; + getActions(): IAction[]; } export interface IDropdownMenuOptions extends IBaseDropdownOptions { contextMenuProvider: IContextMenuProvider; - actions?: Actions.IAction[]; + actions?: IAction[]; actionProvider?: IActionProvider; menuClassName?: string; } @@ -220,13 +218,13 @@ export interface IDropdownMenuOptions extends IBaseDropdownOptions { export class DropdownMenu extends BaseDropdown { /*protected*/ _contextMenuProvider: IContextMenuProvider; - private _menuOptions: Menu.IMenuOptions; + private _menuOptions: IMenuOptions; /*protected*/ currentContainer: HTMLElement; - /*protected*/ _actions: Actions.IAction[]; + /*protected*/ _actions: IAction[]; /*protected*/ actionProvider: IActionProvider; private menuClassName: string; - constructor (container:HTMLElement, options: IDropdownMenuOptions) { + constructor(container: HTMLElement, options: IDropdownMenuOptions) { super(container, options); this._contextMenuProvider = options.contextMenuProvider; @@ -244,15 +242,15 @@ export class DropdownMenu extends BaseDropdown { return this._contextMenuProvider; } - public set menuOptions(options: Menu.IMenuOptions) { + public set menuOptions(options: IMenuOptions) { this._menuOptions = options; } - public get menuOptions(): Menu.IMenuOptions { + public get menuOptions(): IMenuOptions { return this._menuOptions; } - /*protected*/ public get actions(): Actions.IAction[] { + /*protected*/ public get actions(): IAction[] { if (this.actionProvider) { return this.actionProvider.getActions(); } @@ -260,7 +258,7 @@ export class DropdownMenu extends BaseDropdown { return this._actions; } - /*protected*/ public set actions(actions:Actions.IAction[]) { + /*protected*/ public set actions(actions: IAction[]) { this._actions = actions; } @@ -269,7 +267,7 @@ export class DropdownMenu extends BaseDropdown { this._contextMenuProvider.showContextMenu({ getAnchor: () => this.$el.getHTMLElement(), - getActions: () => WinJS.Promise.as(this.actions), + getActions: () => Promise.as(this.actions), getActionsContext: () => this.menuOptions ? this.menuOptions.context : null, getActionItem: (action) => this.menuOptions && this.menuOptions.actionItemProvider ? this.menuOptions.actionItemProvider(action) : null, getMenuClassName: () => this.menuClassName, @@ -285,7 +283,7 @@ export class DropdownMenu extends BaseDropdown { } } -export class DropdownGroup extends EventEmitter.EventEmitter { +export class DropdownGroup extends EventEmitter { private el: HTMLElement; diff --git a/src/vs/base/browser/ui/dropdown/linksDropdown.ts b/src/vs/base/browser/ui/dropdown/linksDropdown.ts index 669d81a34f1..a969339a681 100644 --- a/src/vs/base/browser/ui/dropdown/linksDropdown.ts +++ b/src/vs/base/browser/ui/dropdown/linksDropdown.ts @@ -4,26 +4,26 @@ *--------------------------------------------------------------------------------------------*/ 'use strict'; -import WinJS = require('vs/base/common/winjs.base'); -import Platform = require('vs/base/common/platform'); -import Types = require('vs/base/common/types'); -import Actions = require('vs/base/common/actions'); -import Dropdown = require('vs/base/browser/ui/dropdown/dropdown'); +import {Promise} from 'vs/base/common/winjs.base'; +import {isMacintosh} from 'vs/base/common/platform'; +import {isFunction} from 'vs/base/common/types'; +import {Action} from 'vs/base/common/actions'; +import {DropdownMenu, IDropdownMenuOptions} from 'vs/base/browser/ui/dropdown/dropdown'; -export interface ILinksDropdownMenuOptions extends Dropdown.IDropdownMenuOptions { +export interface ILinksDropdownMenuOptions extends IDropdownMenuOptions { tooltip: string; } -export class LinksDropdownMenu extends Dropdown.DropdownMenu { +export class LinksDropdownMenu extends DropdownMenu { - constructor (container:HTMLElement, options: ILinksDropdownMenuOptions) { + constructor(container: HTMLElement, options: ILinksDropdownMenuOptions) { super(container, options); this.tooltip = options.tooltip; } - /*protected*/ public onEvent(e:Event, activeElement: HTMLElement):void { - if (e instanceof KeyboardEvent && ((e).ctrlKey || (Platform.isMacintosh && (e).metaKey))) { + /*protected*/ public onEvent(e: Event, activeElement: HTMLElement): void { + if (e instanceof KeyboardEvent && ((e).ctrlKey || (isMacintosh && (e).metaKey))) { return; // allow to use Ctrl/Meta in workspace dropdown menu } @@ -31,25 +31,25 @@ export class LinksDropdownMenu extends Dropdown.DropdownMenu { } } -export class LinkDropdownAction extends Actions.Action { +export class LinkDropdownAction extends Action { - constructor(id:string, name:string, clazz:string, url:()=>string, forceOpenInNewTab?:boolean); - constructor(id:string, name:string, clazz:string, url:string, forceOpenInNewTab?:boolean); - constructor(id:string, name:string, clazz:string, url:any, forceOpenInNewTab?:boolean) { - super(id, name, clazz, true, (e:Event)=>{ - var urlString = url; + constructor(id: string, name: string, clazz: string, url: () => string, forceOpenInNewTab?: boolean); + constructor(id: string, name: string, clazz: string, url: string, forceOpenInNewTab?: boolean); + constructor(id: string, name: string, clazz: string, url: any, forceOpenInNewTab?: boolean) { + super(id, name, clazz, true, (e: Event) => { + let urlString = url; - if (Types.isFunction(url)) { + if (isFunction(url)) { urlString = url(); } - if (forceOpenInNewTab || (e instanceof MouseEvent && ((e).ctrlKey || (Platform.isMacintosh && (e).metaKey)))) { + if (forceOpenInNewTab || (e instanceof MouseEvent && ((e).ctrlKey || (isMacintosh && (e).metaKey)))) { window.open(urlString, '_blank'); } else { window.location.href = urlString; } - return WinJS.Promise.as(true); + return Promise.as(true); }); } } \ No newline at end of file diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index 3504df52ed8..75fb3fd239d 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -6,34 +6,32 @@ 'use strict'; import 'vs/css!./menu'; -import Lifecycle = require('vs/base/common/lifecycle'); -import Builder = require('vs/base/browser/builder'); -import Actions = require('vs/base/common/actions'); -import ActionBar = require('vs/base/browser/ui/actionbar/actionbar'); -import EventEmitter = require('vs/base/common/eventEmitter'); - -var $ = Builder.$; +import {IDisposable} from 'vs/base/common/lifecycle'; +import {Builder, $} from 'vs/base/browser/builder'; +import {IActionRunner, IAction} from 'vs/base/common/actions'; +import {ActionBar, IActionItemProvider, ActionsOrientation} from 'vs/base/browser/ui/actionbar/actionbar'; +import {EventEmitter} from 'vs/base/common/eventEmitter'; export interface IMenuOptions { - context?:any; - actionItemProvider?:ActionBar.IActionItemProvider; - actionRunner?:Actions.IActionRunner; + context?: any; + actionItemProvider?: IActionItemProvider; + actionRunner?: IActionRunner; } -export class Menu extends EventEmitter.EventEmitter { +export class Menu extends EventEmitter { - private actionBar: ActionBar.ActionBar; - private listener: Lifecycle.IDisposable; + private actionBar: ActionBar; + private listener: IDisposable; - constructor (container:HTMLElement, actions:Actions.IAction[], options:IMenuOptions = {}) { + constructor(container: HTMLElement, actions: IAction[], options: IMenuOptions = {}) { super(); $(container).addClass('monaco-menu-container'); - var $menu = $('.monaco-menu').appendTo(container); + let $menu = $('.monaco-menu').appendTo(container); - this.actionBar = new ActionBar.ActionBar($menu, { - orientation: ActionBar.ActionsOrientation.VERTICAL, + this.actionBar = new ActionBar($menu, { + orientation: ActionsOrientation.VERTICAL, actionItemProvider: options.actionItemProvider, context: options.context, actionRunner: options.actionRunner