javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(): update examples and usage

Browse Source
This commit is contained in:
mhartington
2018-05-31 10:56:02 -04:00
parent 89a7d169e9
commit 5ad35ccc00
25 changed files with 370 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
core/src/components/menu-controller/menu-controller.ts
View File

@ -9,11 +9,11 @@ import { menuRevealAnimation } from './animations/reveal';
tag: 'ion-menu-controller'
})
export class MenuController {
private menus: Menu[] = [];
private menuAnimations = new Map<string, AnimationBuilder>();
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ connect: 'ion-animation-controller' })
animationCtrl!: HTMLIonAnimationControllerElement;
constructor() {
this.registerAnimation('reveal', menuRevealAnimation);
@ -22,9 +22,7 @@ export class MenuController {
}
/**
* Programatically open the Menu.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {Promise} returns a promise when the menu is fully opened
* Open the Menu.
*/
@Method()
open(menuId?: string): Promise<boolean> {
@ -36,17 +34,13 @@ export class MenuController {
}
/**
* Programatically close the Menu. If no `menuId` is given as the first
* Close the Menu. If no `menuId` is given as the first
* argument then it'll close any menu which is open. If a `menuId`
* is given then it'll close that exact menu.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {Promise} returns a promise when the menu is fully closed
*/
@Method()
close(menuId?: string): Promise<boolean> {
const menu = (menuId)
? this.get(menuId)
: this.getOpen();
const menu = menuId ? this.get(menuId) : this.getOpen();
if (menu) {
return menu.close();
@ -57,8 +51,6 @@ export class MenuController {
/**
* Toggle the menu. If it's closed, it will open, and if opened, it
* will close.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {Promise} returns a promise when the menu has been toggled
*/
@Method()
toggle(menuId?: string): Promise<boolean> {
@ -74,11 +66,9 @@ export class MenuController {
* left menus, but only one of them should be able to be opened at the same
* time. If there are multiple menus on the same side, then enabling one menu
* will also automatically disable all the others that are on the same side.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {HTMLIonMenuElement} Returns the instance of the menu, which is useful for chaining.
*/
@Method()
enable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement|null {
enable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null {
const menu = this.get(menuId);
if (menu) {
menu.disabled = !shouldEnable;
@ -88,12 +78,12 @@ export class MenuController {
/**
* Used to enable or disable the ability to swipe open the menu.
* @param {boolean} shouldEnable True if it should be swipe-able, false if not.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {HTMLIonMenuElement} Returns the instance of the menu, which is useful for chaining.
*/
@Method()
swipeEnable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement|null {
swipeEnable(
shouldEnable: boolean,
menuId?: string
): HTMLIonMenuElement | null {
const menu = this.get(menuId);
if (menu) {
menu.swipeEnabled = shouldEnable;
@ -102,22 +92,19 @@ export class MenuController {
}
/**
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {boolean} Returns true if the specified menu is currently open, otherwise false.
* If the menuId is not specified, it returns true if ANY menu is currenly open.
*/
@Method()
isOpen(menuId?: string): boolean {
if (menuId) {
const menu = this.get(menuId);
return menu && menu.isOpen() || false;
return (menu && menu.isOpen()) || false;
}
return !!this.getOpen();
}
/**
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {boolean} Returns true if the menu is currently enabled, otherwise false.
* Returns true or false if the menuId is enabled or not
*/
@Method()
isEnabled(menuId?: string): boolean {
@ -134,8 +121,6 @@ export class MenuController {
* it'll return the enabled menu on that side. Otherwise, if a `menuId` is
* provided, then it'll try to find the menu using the menu's `id`
* property. If a menu is not found then it'll return `null`.
* @param {string} [menuId] Optionally get the menu by its id, or side.
* @return {HTMLIonMenuElement} Returns the instance of the menu if found, otherwise `null`.
*/
@Method()
get(menuId?: string): HTMLIonMenuElement | null {
@ -147,7 +132,7 @@ export class MenuController {
console.error('menu.side=right is deprecated, use "end" instead');
return null;
}
if (menuId === 'start' || menuId === 'end' ) {
if (menuId === 'start' || menuId === 'end') {
// there could be more than one menu on the same side
// so first try to get the enabled one
const menu = this.find(m => m.side === menuId && !m.disabled);
@ -158,7 +143,6 @@ export class MenuController {
// didn't find a menu side that is enabled
// so try to get the first menu side found
return this.find(m => m.side === menuId) || null;
} else if (menuId) {
// the menuId was not left or right
// so try to get the menu by its "id"
@ -172,19 +156,19 @@ export class MenuController {
}
// get the first menu in the array, if one exists
return (this.menus.length > 0 ? this.menus[0].el : null);
return this.menus.length > 0 ? this.menus[0].el : null;
}
/**
* @return {Menu} Returns the instance of the menu already opened, otherwise `null`.
* Returns the instance of the menu already opened, otherwise `null`.
*/
@Method()
getOpen(): HTMLIonMenuElement|null {
getOpen(): HTMLIonMenuElement | null {
return this.find(m => m.isOpen());
}
/**
* @return {Array<HTMLIonMenuElement>} Returns an array of all menu instances.
* Returns an array of all menu instances.
*/
@Method()
getMenus(): HTMLIonMenuElement[] {
@ -192,17 +176,13 @@ export class MenuController {
}
/**
* @hidden
* @return {boolean} if any menu is currently animating
* If any menu is currently animating
*/
@Method()
isAnimating(): boolean {
return this.menus.some(menu => menu.isAnimating);
}
/**
* @hidden
*/
@Method()
_register(menu: Menu) {
if (this.menus.indexOf(menu) < 0) {
@ -210,9 +190,6 @@ export class MenuController {
}
}
/**
* @hidden
*/
@Method()
_unregister(menu: Menu) {
const index = this.menus.indexOf(menu);
@ -221,9 +198,6 @@ export class MenuController {
}
}
/**
* @hidden
*/
@Method()
_setActiveMenu(menu: Menu) {
// if this menu should be enabled
@ -232,14 +206,15 @@ export class MenuController {
const side = menu.side;
this.menus
.filter(m => m.side === side && m !== menu)
.forEach(m => m.disabled = true);
.forEach(m => (m.disabled = true));
}
/**
* @hidden
*/
@Method()
_setOpen(menu: Menu, shouldOpen: boolean, animated: boolean): Promise<boolean> {
_setOpen(
menu: Menu,
shouldOpen: boolean,
animated: boolean
): Promise<boolean> {
if (this.isAnimating()) {
return Promise.resolve(false);
}
@ -252,9 +227,6 @@ export class MenuController {
return menu._setOpen(shouldOpen, animated);
}
/**
* @hidden
*/
@Method()
createAnimation(type: string, menuCmp: Menu): Promise<Animation> {
const animationBuilder = this.menuAnimations.get(type);
@ -269,14 +241,13 @@ export class MenuController {
this.menuAnimations.set(name, animation);
}
private find(predicate: (menu: Menu) => boolean): HTMLIonMenuElement|null {
private find(predicate: (menu: Menu) => boolean): HTMLIonMenuElement | null {
const instance = this.menus.find(predicate);
if (instance) {
return instance.el;
}
return null;
}
}
export { menuOverlayAnimation, menuPushAnimation, menuRevealAnimation };