datascroller.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var common_1 = require("@angular/common");
  14. var shared_1 = require("../common/shared");
  15. var DataScroller = /** @class */ (function () {
  16. function DataScroller(el, renderer, zone) {
  17. this.el = el;
  18. this.renderer = renderer;
  19. this.zone = zone;
  20. this.buffer = 0.9;
  21. this.trackBy = function (index, item) { return item; };
  22. this.onLazyLoad = new core_1.EventEmitter();
  23. this.dataToRender = [];
  24. this.first = 0;
  25. this.page = 0;
  26. }
  27. DataScroller.prototype.ngOnInit = function () {
  28. this.load();
  29. };
  30. DataScroller.prototype.ngAfterViewInit = function () {
  31. var _this = this;
  32. if (this.loader) {
  33. this.loaderClickListener = this.renderer.listen(this.loader, 'click', function () {
  34. _this.load();
  35. });
  36. }
  37. else {
  38. this.bindScrollListener();
  39. }
  40. };
  41. DataScroller.prototype.ngAfterContentInit = function () {
  42. var _this = this;
  43. this.templates.forEach(function (item) {
  44. switch (item.getType()) {
  45. case 'item':
  46. _this.itemTemplate = item.template;
  47. break;
  48. default:
  49. _this.itemTemplate = item.template;
  50. break;
  51. }
  52. });
  53. };
  54. DataScroller.prototype.load = function () {
  55. if (this.lazy) {
  56. this.onLazyLoad.emit({
  57. first: this.page * this.rows,
  58. rows: this.rows
  59. });
  60. }
  61. this.page = this.page + 1;
  62. };
  63. DataScroller.prototype.shouldLoad = function () {
  64. if (this.lazy)
  65. return (this.rows * this.page < this.totalRecords);
  66. else
  67. return this.value && this.value.length && (this.rows * this.page < this.value.length);
  68. };
  69. DataScroller.prototype.reset = function () {
  70. this.page = 0;
  71. };
  72. DataScroller.prototype.isEmpty = function () {
  73. return !this.value || (this.value.length == 0);
  74. };
  75. DataScroller.prototype.bindScrollListener = function () {
  76. var _this = this;
  77. this.zone.runOutsideAngular(function () {
  78. if (_this.inline) {
  79. _this.inlineScrollListener = _this.onInlineScroll.bind(_this);
  80. _this.contentViewChild.nativeElement.addEventListener('scroll', _this.inlineScrollListener);
  81. }
  82. else {
  83. _this.windowScrollListener = _this.onWindowScroll.bind(_this);
  84. window.addEventListener('scroll', _this.windowScrollListener);
  85. }
  86. });
  87. };
  88. DataScroller.prototype.unbindScrollListener = function () {
  89. if (this.inlineScrollListener) {
  90. this.contentViewChild.nativeElement.removeEventListener('scroll', this.inlineScrollListener);
  91. }
  92. if (this.windowScrollListener) {
  93. window.removeEventListener('scroll', this.windowScrollListener);
  94. }
  95. if (this.loaderClickListener) {
  96. this.loaderClickListener();
  97. this.loaderClickListener = null;
  98. }
  99. };
  100. DataScroller.prototype.onInlineScroll = function () {
  101. var _this = this;
  102. var scrollTop = this.contentViewChild.nativeElement.scrollTop;
  103. var scrollHeight = this.contentViewChild.nativeElement.scrollHeight;
  104. var viewportHeight = this.contentViewChild.nativeElement.clientHeight;
  105. if ((scrollTop >= ((scrollHeight * this.buffer) - (viewportHeight)))) {
  106. if (this.shouldLoad()) {
  107. this.zone.run(function () {
  108. _this.load();
  109. });
  110. }
  111. }
  112. };
  113. DataScroller.prototype.onWindowScroll = function () {
  114. var _this = this;
  115. var docBody = document.body;
  116. var docElement = document.documentElement;
  117. var scrollTop = (window.pageYOffset || document.documentElement.scrollTop);
  118. var winHeight = docElement.clientHeight;
  119. var docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
  120. if (scrollTop >= ((docHeight * this.buffer) - winHeight)) {
  121. if (this.shouldLoad()) {
  122. this.zone.run(function () {
  123. _this.load();
  124. });
  125. }
  126. }
  127. };
  128. DataScroller.prototype.ngOnDestroy = function () {
  129. this.unbindScrollListener();
  130. };
  131. __decorate([
  132. core_1.Input(),
  133. __metadata("design:type", Array)
  134. ], DataScroller.prototype, "value", void 0);
  135. __decorate([
  136. core_1.Input(),
  137. __metadata("design:type", Number)
  138. ], DataScroller.prototype, "rows", void 0);
  139. __decorate([
  140. core_1.Input(),
  141. __metadata("design:type", Boolean)
  142. ], DataScroller.prototype, "lazy", void 0);
  143. __decorate([
  144. core_1.Input(),
  145. __metadata("design:type", Object)
  146. ], DataScroller.prototype, "style", void 0);
  147. __decorate([
  148. core_1.Input(),
  149. __metadata("design:type", String)
  150. ], DataScroller.prototype, "styleClass", void 0);
  151. __decorate([
  152. core_1.Input(),
  153. __metadata("design:type", Number)
  154. ], DataScroller.prototype, "buffer", void 0);
  155. __decorate([
  156. core_1.Input(),
  157. __metadata("design:type", Boolean)
  158. ], DataScroller.prototype, "inline", void 0);
  159. __decorate([
  160. core_1.Input(),
  161. __metadata("design:type", Object)
  162. ], DataScroller.prototype, "scrollHeight", void 0);
  163. __decorate([
  164. core_1.Input(),
  165. __metadata("design:type", Object)
  166. ], DataScroller.prototype, "loader", void 0);
  167. __decorate([
  168. core_1.Input(),
  169. __metadata("design:type", Number)
  170. ], DataScroller.prototype, "totalRecords", void 0);
  171. __decorate([
  172. core_1.Input(),
  173. __metadata("design:type", Function)
  174. ], DataScroller.prototype, "trackBy", void 0);
  175. __decorate([
  176. core_1.ContentChild(shared_1.Header, { static: false }),
  177. __metadata("design:type", Object)
  178. ], DataScroller.prototype, "header", void 0);
  179. __decorate([
  180. core_1.ContentChild(shared_1.Footer, { static: false }),
  181. __metadata("design:type", Object)
  182. ], DataScroller.prototype, "footer", void 0);
  183. __decorate([
  184. core_1.ContentChildren(shared_1.PrimeTemplate),
  185. __metadata("design:type", core_1.QueryList)
  186. ], DataScroller.prototype, "templates", void 0);
  187. __decorate([
  188. core_1.ViewChild('content', { static: false }),
  189. __metadata("design:type", core_1.ElementRef)
  190. ], DataScroller.prototype, "contentViewChild", void 0);
  191. __decorate([
  192. core_1.Output(),
  193. __metadata("design:type", core_1.EventEmitter)
  194. ], DataScroller.prototype, "onLazyLoad", void 0);
  195. DataScroller = __decorate([
  196. core_1.Component({
  197. selector: 'p-dataScroller',
  198. template: "\n <div [ngClass]=\"{'ui-datascroller ui-widget': true, 'ui-datascroller-inline': inline}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"ui-datascroller-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n <ng-content select=\"p-header\"></ng-content>\n </div>\n <div #content class=\"ui-datascroller-content ui-widget-content\" [ngStyle]=\"{'max-height': scrollHeight}\">\n <ul class=\"ui-datascroller-list\">\n <li *ngFor=\"let item of value | slice:first:(first + (page * rows)); trackBy: trackBy; let i = index\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ul>\n </div>\n <div class=\"ui-datascroller-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n <ng-content select=\"p-footer\"></ng-content>\n </div>\n </div>\n "
  199. }),
  200. __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.NgZone])
  201. ], DataScroller);
  202. return DataScroller;
  203. }());
  204. exports.DataScroller = DataScroller;
  205. var DataScrollerModule = /** @class */ (function () {
  206. function DataScrollerModule() {
  207. }
  208. DataScrollerModule = __decorate([
  209. core_1.NgModule({
  210. imports: [common_1.CommonModule],
  211. exports: [DataScroller, shared_1.SharedModule],
  212. declarations: [DataScroller]
  213. })
  214. ], DataScrollerModule);
  215. return DataScrollerModule;
  216. }());
  217. exports.DataScrollerModule = DataScrollerModule;
  218. //# sourceMappingURL=datascroller.js.map