From 01b4c4775d336282421a53571798c855250b8836 Mon Sep 17 00:00:00 2001 From: Bruno Oliveira <321.bruno@gmail.com> Date: Mon, 2 Mar 2015 11:30:55 -0300 Subject: [PATCH 1/3] Scroll Infinite in ngTable Implementation de scrolling infinite in ngTable. Not jQuery or plugins, native AngularJS. --- dist/ng-table.js | 70 +++++++++++++++++++++++++++++++++++++++++++++- dist/ng-table.less | 40 ++++++++++++++++++++++++++ 2 files changed, 109 insertions(+), 1 deletion(-) diff --git a/dist/ng-table.js b/dist/ng-table.js index 64df1a6c..9a4c1633 100644 --- a/dist/ng-table.js +++ b/dist/ng-table.js @@ -483,7 +483,8 @@ app.factory('NgTableParams', ['$q', '$log', 'ngTableDefaults', function($q, $log counts: [10, 25, 50, 100], sortingIndicator: 'span', getGroups: this.getGroups, - getData: this.getData + getData: this.getData, + isPagination: true }; angular.extend(settings, ngTableDefaults.settings); @@ -949,6 +950,9 @@ app.directive('ngTablePagination', ['$compile', scope.$watch('templateUrl', function(templateUrl) { if (angular.isUndefined(templateUrl)) { return; + } + if(!scope.params.settings().isPagination){ + return; } var template = angular.element(document.createElement('div')) template.attr({ @@ -961,6 +965,70 @@ app.directive('ngTablePagination', ['$compile', }; } ]); +app.directive('ngTablePaginationScroll', [ + '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) { + 'use strict'; + return { + restrict: 'A', + scope: true, + link: function(scope, elem, attrs){ + var checkWhenEnabled, handler, scrollDistance, scrollEnabled; + $window = angular.element($window); + scrollDistance = 0; + if (attrs.infiniteScrollDistance != null) { + scope.$watch(attrs.infiniteScrollDistance, function(value) { + return scrollDistance = parseInt(value, 10); + }); + } + scrollEnabled = true; + checkWhenEnabled = false; + if (attrs.infiniteScrollDisabled != null) { + scope.$watch(attrs.infiniteScrollDisabled, function(value) { + scrollEnabled = !value; + if (scrollEnabled && checkWhenEnabled) { + checkWhenEnabled = false; + return handler(); + } + }); + } + handler = function() { + var elementBottom, remaining, shouldScroll, windowBottom, documentInfo; + documentInfo = $window[0].document.body; + windowBottom = document.documentElement.clientHeight + documentInfo.scrollTop; + elementBottom = elem[0].offsetTop + elem[0].scrollHeight; + remaining = elementBottom - windowBottom; + shouldScroll = remaining <= document.documentElement.clientHeight * scrollDistance; + if (shouldScroll && scrollEnabled && documentInfo.scrollTop) { + var total = scope.params.total(); + var qtyItems = scope.params.data.length; + var qtyPages = Math.ceil(total / scope.params.count()); + var pageCurrent = scope.params.page(); + var pageNew = pageCurrent + 1; + if(qtyItems<=total && pageNew<=qtyPages){ + scope.params.page( scope.params.page() + 1 ); + scope.$apply(scope); + } + } else if (shouldScroll) { + return checkWhenEnabled = true; + } + }; + var promise = null; + $window.on('scroll', handler); + scope.$on('$destroy', function() { + return $window.off('scroll', handler); + }); + return $timeout((function() { + if (attrs.infiniteScrollImmediateCheck) { + if (scope.$eval(attrs.infiniteScrollImmediateCheck)) { + return handler(); + } + } else { + return handler(); + } + }), 300); + } + }; +}]); angular.module('ngTable').run(['$templateCache', function ($templateCache) { $templateCache.put('ng-table/filters/select-multiple.html', ''); $templateCache.put('ng-table/filters/select.html', ''); diff --git a/dist/ng-table.less b/dist/ng-table.less index eb31a86c..bb730cf7 100644 --- a/dist/ng-table.less +++ b/dist/ng-table.less @@ -149,3 +149,43 @@ .ng-table-pagination {} .ng-table-counts {} } +.loading-indicator { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + width: 100%; + text-align: center; + padding: 0.7em; + &:before{ + display: inline-block; + margin: 0 0.4em; + min-width: 1em; + min-height: 1em; + border-top: 4px solid #646464; + border-right: 4px solid #e6e6e6; + border-left: 4px solid #e6e6e6; + border-bottom: 4px solid #646464; + content: ""; + -webkit-animation: halfspin 1s ease infinite; + -moz-animation: halfspin 1s ease infinite; + -o-animation: halfspin 1s ease infinite; + animation: halfspin 1s ease infinite; + border-radius: 100%; + } +} + +@-webkit-keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } +@-moz-keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } +@keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } \ No newline at end of file From 7f807d9f63c43de19621eba9108ac1d16559c011 Mon Sep 17 00:00:00 2001 From: Bruno Oliveira <321.bruno@gmail.com> Date: Sun, 21 Jun 2015 18:22:51 -0300 Subject: [PATCH 2/3] Scroll Infinite in ngTable (SRC files) @iyel pull request files to scroll infinite, in src files. Sorry! --- src/scripts/07-pagination-scrolling.js | 77 ++++++++++++++++++++++++ src/scripts/{07-outro.js => 08-outro.js} | 0 src/styles/ng-table.less | 40 ++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 src/scripts/07-pagination-scrolling.js rename src/scripts/{07-outro.js => 08-outro.js} (100%) diff --git a/src/scripts/07-pagination-scrolling.js b/src/scripts/07-pagination-scrolling.js new file mode 100644 index 00000000..43c69b32 --- /dev/null +++ b/src/scripts/07-pagination-scrolling.js @@ -0,0 +1,77 @@ +/** + * ngTable: Table + Angular JS + * + * @author Bruno Oliveira <321.bruno@gmail.com> + * @url https://github.com/esvit/ng-table/ + * @license New BSD License + */ + +/** + * @ngdoc directive + * @name ngTable.directive:ngTablePaginationScroll + * @restrict A + */ +app.directive('ngTablePaginationScroll', [ + '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) { + 'use strict'; + return { + restrict: 'A', + scope: true, + link: function(scope, elem, attrs){ + var checkWhenEnabled, handler, scrollDistance, scrollEnabled; + $window = angular.element($window); + scrollDistance = 0; + if (attrs.infiniteScrollDistance != null) { + scope.$watch(attrs.infiniteScrollDistance, function(value) { + return scrollDistance = parseInt(value, 10); + }); + } + scrollEnabled = true; + checkWhenEnabled = false; + if (attrs.infiniteScrollDisabled != null) { + scope.$watch(attrs.infiniteScrollDisabled, function(value) { + scrollEnabled = !value; + if (scrollEnabled && checkWhenEnabled) { + checkWhenEnabled = false; + return handler(); + } + }); + } + handler = function() { + var elementBottom, remaining, shouldScroll, windowBottom, documentInfo; + documentInfo = $window[0].document.body; + windowBottom = document.documentElement.clientHeight + documentInfo.scrollTop; + elementBottom = elem[0].offsetTop + elem[0].scrollHeight; + remaining = elementBottom - windowBottom; + shouldScroll = remaining <= document.documentElement.clientHeight * scrollDistance; + if (shouldScroll && scrollEnabled && documentInfo.scrollTop) { + var total = scope.params.total(); + var qtyItems = scope.params.data.length; + var qtyPages = Math.ceil(total / scope.params.count()); + var pageCurrent = scope.params.page(); + var pageNew = pageCurrent + 1; + if(qtyItems<=total && pageNew<=qtyPages){ + scope.params.page( scope.params.page() + 1 ); + scope.$apply(scope); + } + } else if (shouldScroll) { + return checkWhenEnabled = true; + } + }; + var promise = null; + $window.on('scroll', handler); + scope.$on('$destroy', function() { + return $window.off('scroll', handler); + }); + return $timeout((function() { + if (attrs.infiniteScrollImmediateCheck) { + if (scope.$eval(attrs.infiniteScrollImmediateCheck)) { + return handler(); + } + } else { + return handler(); + } + }), 300); + } + }; +}]); \ No newline at end of file diff --git a/src/scripts/07-outro.js b/src/scripts/08-outro.js similarity index 100% rename from src/scripts/07-outro.js rename to src/scripts/08-outro.js diff --git a/src/styles/ng-table.less b/src/styles/ng-table.less index eb31a86c..bb730cf7 100644 --- a/src/styles/ng-table.less +++ b/src/styles/ng-table.less @@ -149,3 +149,43 @@ .ng-table-pagination {} .ng-table-counts {} } +.loading-indicator { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + width: 100%; + text-align: center; + padding: 0.7em; + &:before{ + display: inline-block; + margin: 0 0.4em; + min-width: 1em; + min-height: 1em; + border-top: 4px solid #646464; + border-right: 4px solid #e6e6e6; + border-left: 4px solid #e6e6e6; + border-bottom: 4px solid #646464; + content: ""; + -webkit-animation: halfspin 1s ease infinite; + -moz-animation: halfspin 1s ease infinite; + -o-animation: halfspin 1s ease infinite; + animation: halfspin 1s ease infinite; + border-radius: 100%; + } +} + +@-webkit-keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } +@-moz-keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } +@keyframes halfspin { + to { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); } } \ No newline at end of file From e924994b1c5d2312ab4b51a7f898bd11bb1c9687 Mon Sep 17 00:00:00 2001 From: Bruno Oliveira <321.bruno@gmail.com> Date: Sun, 21 Jun 2015 18:42:19 -0300 Subject: [PATCH 3/3] Scroll Infinite in ngTable (SRC Files) Ops, missing some files! --- Gruntfile.js | 3 ++- src/scripts/03-params.js | 3 ++- src/scripts/06-pagination.js | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index a04922c0..2bda71e1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -58,8 +58,9 @@ module.exports = function(grunt) { 'src/scripts/04-*.js', 'src/scripts/05-*.js', 'src/scripts/06-*.js', + 'src/scripts/07-*.js', './.temp/scripts/views.js', - 'src/scripts/07-*.js' + 'src/scripts/08-*.js' ], dest: './dist/ng-table.js' } diff --git a/src/scripts/03-params.js b/src/scripts/03-params.js index 7b295557..b912ac15 100644 --- a/src/scripts/03-params.js +++ b/src/scripts/03-params.js @@ -434,7 +434,8 @@ app.factory('NgTableParams', ['$q', '$log', 'ngTableDefaults', function($q, $log counts: [10, 25, 50, 100], sortingIndicator: 'span', getGroups: this.getGroups, - getData: this.getData + getData: this.getData, + isPagination: true }; angular.extend(settings, ngTableDefaults.settings); diff --git a/src/scripts/06-pagination.js b/src/scripts/06-pagination.js index 4fd9caba..3da0775f 100644 --- a/src/scripts/06-pagination.js +++ b/src/scripts/06-pagination.js @@ -32,6 +32,9 @@ app.directive('ngTablePagination', ['$compile', if (angular.isUndefined(templateUrl)) { return; } + if(!scope.params.settings().isPagination){ + return; + } var template = angular.element(document.createElement('div')) template.attr({ 'ng-include': 'templateUrl'