123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. (function (factory) {
  2. if (typeof module === "object" && typeof module.exports === "object") {
  3. var v = factory(require, exports);
  4. if (v !== undefined) module.exports = v;
  5. }
  6. else if (typeof define === "function" && define.amd) {
  7. define(["require", "exports", "@angular/core", "../../config/config", "../../util/util", "../../platform/platform", "./fab"], factory);
  8. }
  9. })(function (require, exports) {
  10. "use strict";
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var config_1 = require("../../config/config");
  14. var util_1 = require("../../util/util");
  15. var platform_1 = require("../../platform/platform");
  16. var fab_1 = require("./fab");
  17. /**
  18. * @name FabList
  19. * @description
  20. * `ion-fab-list` is a container for multiple FAB buttons. They are components of `ion-fab` and allow you to specificy the buttons position, left, right, top, bottom.
  21. * @usage
  22. *
  23. * ```html
  24. * <ion-fab bottom right >
  25. * <button ion-fab>Share</button>
  26. * <ion-fab-list side="top">
  27. * <button ion-fab>Facebook</button>
  28. * <button ion-fab>Twitter</button>
  29. * <button ion-fab>Youtube</button>
  30. * </ion-fab-list>
  31. * <ion-fab-list side="left">
  32. * <button ion-fab>Vimeo</button>
  33. * </ion-fab-list>
  34. * </ion-fab>
  35. * ```
  36. * @module ionic
  37. *
  38. * @demo /docs/demos/src/fab/
  39. * @see {@link /docs/components#fab Fab Component Docs}
  40. */
  41. var FabList = (function () {
  42. function FabList(_elementRef, _renderer, config, _plt) {
  43. this._elementRef = _elementRef;
  44. this._renderer = _renderer;
  45. this._plt = _plt;
  46. this._visible = false;
  47. this._fabs = [];
  48. this._mode = config.get('mode');
  49. }
  50. Object.defineProperty(FabList.prototype, "_setbuttons", {
  51. set: function (query) {
  52. var fabs = this._fabs = query.toArray();
  53. var className = "fab-" + this._mode + "-in-list";
  54. for (var _i = 0, fabs_1 = fabs; _i < fabs_1.length; _i++) {
  55. var fab = fabs_1[_i];
  56. fab.setElementClass('fab-in-list', true);
  57. fab.setElementClass(className, true);
  58. }
  59. },
  60. enumerable: true,
  61. configurable: true
  62. });
  63. /**
  64. * @hidden
  65. */
  66. FabList.prototype.setVisible = function (val) {
  67. var _this = this;
  68. var visible = util_1.isTrueProperty(val);
  69. if (visible === this._visible) {
  70. return;
  71. }
  72. this._visible = visible;
  73. var fabs = this._fabs;
  74. var i = 1;
  75. if (visible) {
  76. fabs.forEach(function (fab) {
  77. _this._plt.timeout(function () { return fab.setElementClass('show', true); }, i * 30);
  78. i++;
  79. });
  80. }
  81. else {
  82. fabs.forEach(function (fab) { return fab.setElementClass('show', false); });
  83. }
  84. this.setElementClass('fab-list-active', visible);
  85. };
  86. /**
  87. * @internal
  88. */
  89. FabList.prototype.setElementClass = function (className, add) {
  90. this._renderer.setElementClass(this._elementRef.nativeElement, className, add);
  91. };
  92. FabList.decorators = [
  93. { type: core_1.Directive, args: [{
  94. selector: 'ion-fab-list',
  95. },] },
  96. ];
  97. /** @nocollapse */
  98. FabList.ctorParameters = function () { return [
  99. { type: core_1.ElementRef, },
  100. { type: core_1.Renderer, },
  101. { type: config_1.Config, },
  102. { type: platform_1.Platform, },
  103. ]; };
  104. FabList.propDecorators = {
  105. '_setbuttons': [{ type: core_1.ContentChildren, args: [fab_1.FabButton,] },],
  106. };
  107. return FabList;
  108. }());
  109. exports.FabList = FabList;
  110. });
  111. //# sourceMappingURL=fab-list.js.map