From 1fa759c57b3cf07a5dd21c8e0cbfb48ab60cbb42 Mon Sep 17 00:00:00 2001 From: Alex Staroselsky Date: Sun, 26 Jun 2016 15:12:00 -0500 Subject: [PATCH] Added interfaces for Angular Material $mdPanel service, MdPanelPosition type, and MdPanelAnimation type as part of release 1.1.0-rc.5 (2016-06-03). Updated IDialogService show method to include previously added IPromptDialog. --- angular-material/angular-material-tests.ts | 48 ++++++++++++++ angular-material/angular-material.d.ts | 74 +++++++++++++++++++++- 2 files changed, 121 insertions(+), 1 deletion(-) diff --git a/angular-material/angular-material-tests.ts b/angular-material/angular-material-tests.ts index cecaf07e67..c707c3e62c 100644 --- a/angular-material/angular-material-tests.ts +++ b/angular-material/angular-material-tests.ts @@ -110,3 +110,51 @@ myApp.controller('SidenavController', ($scope: ng.IScope, $mdSidenav: ng.materia myApp.controller('ToastController', ($scope: ng.IScope, $mdToast: ng.material.IToastService) => { $scope['openToast'] = () => $mdToast.show($mdToast.simple().textContent('Hello!')); }); + +myApp.controller('PanelController', ($scope: ng.IScope, $mdPanel: ng.material.IPanelService) => { + $scope['createPanel'] = () => { + var config = { + template: '

Hello!

', + hasBackdrop: true, + disableParentScroll: true, + zIndex: 150 + }; + + $mdPanel.create(config); + + var panelRef = $mdPanel.create(config); + panelRef.open() + .then((ref: ng.material.IPanelRef) => { + ref.addClass('foo'); + ref.removeClass('bar'); + ref.close(); + }) + .finally(() => { + panelRef = undefined; + }); + }; + + $scope['openPanel'] = () => { + $mdPanel.open({ + template: '

Hello!

', + hasBackdrop: true, + disableParentScroll: true, + zIndex: 150 + }) + .then((panelRef: ng.material.IPanelRef) => { + panelRef.addClass('foo'); + panelRef.removeClass('bar'); + panelRef.close(); + }); + }; + + $scope['newPanelPosition'] = () => { + $mdPanel.newPanelPosition().absolute().center(); + $mdPanel.newPanelPosition().relativeTo('.demo-menu-open-button').addPanelPosition("ALIGN_START", "BELOW"); + }; + + $scope['newPanelAnimation'] = () => { + $mdPanel.newPanelAnimation().openFrom('.some-target'); + $mdPanel.newPanelAnimation().openFrom({top: 0, left: 0}); + }; +}); diff --git a/angular-material/angular-material.d.ts b/angular-material/angular-material.d.ts index bb144d15d4..09fcec3539 100644 --- a/angular-material/angular-material.d.ts +++ b/angular-material/angular-material.d.ts @@ -92,7 +92,7 @@ declare namespace angular.material { } interface IDialogService { - show(dialog: IDialogOptions|IAlertDialog|IConfirmDialog): angular.IPromise; + show(dialog: IDialogOptions|IAlertDialog|IConfirmDialog|IPromptDialog): angular.IPromise; confirm(): IConfirmDialog; alert(): IAlertDialog; prompt(): IPromptDialog; @@ -277,4 +277,76 @@ declare namespace angular.material { grey: IPalette; 'blue-grey': IPalette; } + + interface IPanelConfig { + template?: string; + templateUrl?: string; + controller?: string|Function; + controllerAs?: string; + bindToController?: boolean; // default: true + locals?: {[index: string]: any}; + resolve?: {[index: string]: angular.IPromise} + attachTo?: string|JQuery|Element; + panelClass?: string; + zIndex?: number; // default: 80 + position?: IPanelPosition; + clickOutsideToClose?: boolean; // default: false + escapeToClose?: boolean; // default: false + trapFocus?: boolean; // default: false + focusOnOpen?: boolean; // default: true + fullscreen?: boolean; // default: false + animation?: IPanelAnimation; + hasBackdrop?: boolean // default: false + disableParentScroll?: boolean; // default: false + onDomAdded?: Function; + onOpenComplete?: Function; + onRemoving?: Function; + onDomRemoved?: Function; + origin?: string|JQuery|Element; + } + + interface IPanelRef { + id: string; + config: IPanelConfig; + isAttached: boolean; + open(): angular.IPromise; + close(): angular.IPromise; + attach(): angular.IPromise; + detach(): angular.IPromise; + show(): angular.IPromise; + hide(): angular.IPromise; + destroy(): void; + addClass(newClass: string): void; + removeClass(oldClass: string): void; + toggleClass(toggleClass: string): void; + focusOnOpen(): void; + } + + interface IPanelPosition { + absolute(): IPanelPosition; + relativeTo(someElement: string|JQuery|Element): IPanelPosition; + top(opt_top: string): IPanelPosition; // default: '0' + bottom(opt_bottom: string): IPanelPosition; // default: '0' + left(opt_left: string): IPanelPosition; // default: '0' + right(opt_right: string): IPanelPosition; // default: '0' + centerHorizontally(): IPanelPosition; + centerVertically(): IPanelPosition; + center(): IPanelPosition; + addPanelPosition(xPosition: string, yPosition: string): IPanelPosition; + withOffsetX(offsetX: string): IPanelPosition; + withOffsetY(offsetY: string): IPanelPosition; + } + + interface IPanelAnimation { + openFrom(from: string|Element|Event|{top: number, left: number}): IPanelAnimation; + closeTo(to: string|Element|{top: number, left: number}): IPanelAnimation; + withAnimation(cssClass: string|{open: string, close: string}): IPanelAnimation; + } + + interface IPanelService { + create(opt_config: IPanelConfig): IPanelRef; + open(opt_config: IPanelConfig): angular.IPromise; + newPanelPosition(): IPanelPosition; + newPanelAnimation(): IPanelAnimation; + } }