1 | import { Component, ContentChild, ContentChildren } from '@angular/core';
|
2 | import { Platform } from '../../platform/platform';
|
3 | import { UIEventManager } from '../../gestures/ui-event-manager';
|
4 | import { FabButton } from './fab';
|
5 | import { FabList } from './fab-list';
|
6 | /**
|
7 | * @name FabContainer
|
8 | * @module ionic
|
9 | *
|
10 | * @description
|
11 | * `<ion-fab>` is not a FAB button by itself but a container that assist the fab button (`<button ion-fab>`) allowing it
|
12 | * to be placed in fixed position that does not scroll with the content. It is also used to implement "material design speed dial",
|
13 | * ie. a FAB buttons displays a small lists of related actions when clicked.
|
14 | *
|
15 | * @property [top] - Places the container on the top of the content
|
16 | * @property [bottom] - Places the container on the bottom of the content
|
17 | * @property [left] - Places the container on the left
|
18 | * @property [right] - Places the container on the right
|
19 | * @property [middle] - Places the container on the middle vertically
|
20 | * @property [center] - Places the container on the center horizontally
|
21 | * @property [edge] - Used to place the container between the content and the header/footer
|
22 | *
|
23 | * @usage
|
24 | *
|
25 | * ```html
|
26 | * <!-- this fab is placed at top right -->
|
27 | * <ion-content>
|
28 | * <ion-fab top right>
|
29 | * <button ion-fab>Button</button>
|
30 | * </ion-fab>
|
31 | *
|
32 | * <!-- this fab is placed at the center of the content viewport -->
|
33 | * <ion-fab center middle>
|
34 | * <button ion-fab>Button</button>
|
35 | * </ion-fab>
|
36 | * </ion-content>
|
37 | * ```
|
38 | *
|
39 | * Ionic's FAB also supports "material design's fab speed dial". It is a normal fab button
|
40 | * that shows a list of related actions when clicked.
|
41 | *
|
42 | * The same `ion-fab` container can contain several `ion-fab-list` with different side values:
|
43 | * `top`, `bottom`, `left` and `right`. For example, if you want to have a list of button that are
|
44 | * on the top of the main button, you should use `side="top"` and so on. By default, if side is ommited, `side="bottom"`.
|
45 | *
|
46 | * ```html
|
47 | * <ion-content>
|
48 | * <!-- this fab is placed at bottom right -->
|
49 | * <ion-fab bottom right >
|
50 | * <button ion-fab>Share</button>
|
51 | * <ion-fab-list side="top">
|
52 | * <button ion-fab>Facebook</button>
|
53 | * <button ion-fab>Twitter</button>
|
54 | * <button ion-fab>Youtube</button>
|
55 | * </ion-fab-list>
|
56 | * <ion-fab-list side="left">
|
57 | * <button ion-fab>Vimeo</button>
|
58 | * </ion-fab-list>
|
59 | * </ion-fab>
|
60 | * </ion-content>
|
61 | * ```
|
62 | *
|
63 | * A FAB speed dial can also be closed programatically.
|
64 | *
|
65 | * ```html
|
66 | * <ion-content>
|
67 | * <ion-fab bottom right #fab>
|
68 | * <button ion-fab>Share</button>
|
69 | * <ion-fab-list side="top">
|
70 | * <button ion-fab (click)="share('facebook', fab)">Facebook</button>
|
71 | * <button ion-fab (click)="share('twitter', fab)">Twitter</button>
|
72 | * </ion-fab-list>
|
73 | * </ion-fab>
|
74 | * </ion-content>
|
75 | * ```
|
76 | *
|
77 | * ```ts
|
78 | * share(socialNet: string, fab: FabContainer) {
|
79 | * fab.close();
|
80 | * console.log("Sharing in", socialNet);
|
81 | * }
|
82 | * ```
|
83 | *
|
84 | * @demo /docs/demos/src/fab/
|
85 | * @see {@link /docs/components#fabs FAB Component Docs}
|
86 | */
|
87 | var FabContainer = (function () {
|
88 | function FabContainer(plt) {
|
89 | /**
|
90 | * @hidden
|
91 | */
|
92 | this._listsActive = false;
|
93 | this._events = new UIEventManager(plt);
|
94 | }
|
95 | /**
|
96 | * @hidden
|
97 | */
|
98 | FabContainer.prototype.ngAfterContentInit = function () {
|
99 | var mainButton = this._mainButton;
|
100 | if (!mainButton || !mainButton.getNativeElement()) {
|
101 | console.error('FAB container needs a main <button ion-fab>');
|
102 | return;
|
103 | }
|
104 | this._events.listen(mainButton.getNativeElement(), 'click', this.clickHandler.bind(this), { zone: true });
|
105 | };
|
106 | /**
|
107 | * @hidden
|
108 | */
|
109 | FabContainer.prototype.clickHandler = function (ev) {
|
110 | if (this.canActivateList(ev)) {
|
111 | this.toggleList();
|
112 | }
|
113 | };
|
114 | /**
|
115 | * @hidden
|
116 | */
|
117 | FabContainer.prototype.canActivateList = function (ev) {
|
118 | if (this._fabLists.length > 0 && this._mainButton && ev.target) {
|
119 | var ele = ev.target.closest('ion-fab>[ion-fab]');
|
120 | return (ele && ele === this._mainButton.getNativeElement());
|
121 | }
|
122 | return false;
|
123 | };
|
124 | /**
|
125 | * @hidden
|
126 | */
|
127 | FabContainer.prototype.toggleList = function () {
|
128 | this.setActiveLists(!this._listsActive);
|
129 | };
|
130 | /**
|
131 | * @hidden
|
132 | */
|
133 | FabContainer.prototype.setActiveLists = function (isActive) {
|
134 | if (isActive === this._listsActive) {
|
135 | return;
|
136 | }
|
137 | var lists = this._fabLists.toArray();
|
138 | for (var _i = 0, lists_1 = lists; _i < lists_1.length; _i++) {
|
139 | var list = lists_1[_i];
|
140 | list.setVisible(isActive);
|
141 | }
|
142 | this._mainButton.setActiveClose(isActive);
|
143 | this._listsActive = isActive;
|
144 | };
|
145 | /**
|
146 | * Close an active FAB list container
|
147 | */
|
148 | FabContainer.prototype.close = function () {
|
149 | this.setActiveLists(false);
|
150 | };
|
151 | /**
|
152 | * @hidden
|
153 | */
|
154 | FabContainer.prototype.ngOnDestroy = function () {
|
155 | this._events.destroy();
|
156 | };
|
157 | FabContainer.decorators = [
|
158 | { type: Component, args: [{
|
159 | selector: 'ion-fab',
|
160 | template: '<ng-content></ng-content>'
|
161 | },] },
|
162 | ];
|
163 | /** @nocollapse */
|
164 | FabContainer.ctorParameters = function () { return [
|
165 | { type: Platform, },
|
166 | ]; };
|
167 | FabContainer.propDecorators = {
|
168 | '_mainButton': [{ type: ContentChild, args: [FabButton,] },],
|
169 | '_fabLists': [{ type: ContentChildren, args: [FabList,] },],
|
170 | };
|
171 | return FabContainer;
|
172 | }());
|
173 | export { FabContainer };
|
174 | //# sourceMappingURL=fab-container.js.map |
\ | No newline at end of file |