From 6d590071aefa2ba66d39046924632b480c063778 Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Wed, 5 Apr 2017 16:11:09 +0300 Subject: [PATCH 01/10] Fix Issue #29: Added initial structure --- .../css/angular-data-grid.bootstrap.css | 17 +++++ demo/bootstrap/index.html | 3 +- .../scss/angular-data-grid.bootstrap.scss | 20 +++++ dist/dataGrid.js | 3 +- dist/dataGrid.min.js | 2 +- dist/loading-bar.min.js | 2 +- dist/pagination.min.js | 2 +- src/js/andrey_c_changes/directive2.js | 75 +++++++++++++++++++ src/js/andrey_c_changes/styles.css | 43 +++++++++++ src/js/dataGrid.js | 3 +- 10 files changed, 164 insertions(+), 6 deletions(-) create mode 100644 src/js/andrey_c_changes/directive2.js create mode 100644 src/js/andrey_c_changes/styles.css diff --git a/demo/bootstrap/css/angular-data-grid.bootstrap.css b/demo/bootstrap/css/angular-data-grid.bootstrap.css index bccdc69..c57f4e5 100644 --- a/demo/bootstrap/css/angular-data-grid.bootstrap.css +++ b/demo/bootstrap/css/angular-data-grid.bootstrap.css @@ -21,3 +21,20 @@ .sortable.sort-descent:after { content: "\f0dd"; vertical-align: top; } + +.fixed { + top: 0; + position: fixed; + width: auto; + border: none; + display: table; + z-index: 99; } + .fixed tr { + background-color: #fff; } + +.tbody-offset:before { + height: 60px; + content: " "; + color: white; + /* bacground color */ + display: block; } diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html index b0919de..46de58f 100644 --- a/demo/bootstrap/index.html +++ b/demo/bootstrap/index.html @@ -158,7 +158,7 @@

Additional Demos

- +
@@ -238,5 +238,6 @@

Additional Demos

+ \ No newline at end of file diff --git a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss index 3f008cf..6729625 100644 --- a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss +++ b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss @@ -27,4 +27,24 @@ content: "\f0dd"; vertical-align: top; } +} + +.fixed { + top: 0; + position: fixed; + width: auto; + border: none; + display: table; + z-index: 99; + tr { + background-color: #fff; + } +} + + +.tbody-offset:before { + height: 60px; + content:" "; + color:white; /* bacground color */ + display:block; } \ No newline at end of file diff --git a/dist/dataGrid.js b/dist/dataGrid.js index 1ae356c..7ed9847 100644 --- a/dist/dataGrid.js +++ b/dist/dataGrid.js @@ -12,7 +12,7 @@ return []; } }) - .controller('gridController', ['$scope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $element, $filter, $location, filtersFactory) { + .controller('gridController', ['$scope', '$rootScope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $rootScope, $element, $filter, $location, filtersFactory) { // values by default $scope._gridOptions = $scope.$eval($element.attr('grid-options')); $scope._gridActions = $scope.$eval($element.attr('grid-actions')); @@ -84,6 +84,7 @@ } else { applyFilters(); } + $rootScope.$broadcast('gridReloaded'); }; $scope._gridActions.refresh = $scope.reloadGrid; diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js index c0ba104..2789310 100644 --- a/dist/dataGrid.min.js +++ b/dist/dataGrid.min.js @@ -1 +1 @@ -!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&c())}function s(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&p(),n.search(i),t&&e.$apply()}function c(){var t=n.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||p()}function l(){var t="",i=n.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function p(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();d(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function d(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?c():p())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){o()}),e.$on("$stateChangeSuccess",function(t,e){o()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?s(t):p()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}(); \ No newline at end of file +!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}(); \ No newline at end of file diff --git a/dist/loading-bar.min.js b/dist/loading-bar.min.js index f0fdc27..2d76439 100644 --- a/dist/loading-bar.min.js +++ b/dist/loading-bar.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(e){var n=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(n,t,a,r,i,c){function o(){a.cancel(d),c.complete(),u=0,s=0}function l(n){var a,r=t.get("$http"),i=e.defaults;!n.cache&&!i.cache||n.cache===!1||"GET"!==n.method&&"JSONP"!==n.method||(a=angular.isObject(n.cache)?n.cache:angular.isObject(i.cache)?i.cache:r);var c=void 0!==a?void 0!==a.get(n.url):!1;return void 0!==n.cached&&c!==n.cached?n.cached:(n.cached=c,c)}var d,s=0,u=0,g=c.latencyThreshold;return{request:function(e){return e.ignoreLoadingBar||l(e)||(r.$broadcast("cfpLoadingBar:loading",{url:e.url}),0===s&&(d=a(function(){c.start()},g)),s++,c.set(u/s)),e},response:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),e):(i.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),e)},responseError:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),n.reject(e)):(i.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),n.reject(e))}}}];e.interceptors.push(n)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='
',this.loadingBarTemplate='
',this.$get=["$injector","$document","$timeout","$rootScope",function(e,n,t,a){function r(){s||(s=e.get("$animate"));var r=n.find(h).eq(0);t.cancel(g),m||(a.$broadcast("cfpLoadingBar:started"),m=!0,b&&s.enter(p,r,angular.element(r[0].lastChild)),$&&s.enter(v,r,angular.element(r[0].lastChild)),i(S))}function i(e){if(m){var n=100*e+"%";f.css("width",n),B=e,t.cancel(u),u=t(function(){c()},250)}}function c(){if(!(o()>=1)){var e=0,n=o();e=n>=0&&.25>n?(3*Math.random()+3)/100:n>=.25&&.65>n?3*Math.random()/100:n>=.65&&.9>n?2*Math.random()/100:n>=.9&&.99>n?.005:0;var t=o()+e;i(t)}}function o(){return B}function l(){B=0,m=!1}function d(){s||(s=e.get("$animate")),a.$broadcast("cfpLoadingBar:completed"),i(1),t.cancel(g),g=t(function(){var e=s.leave(p,l);e&&e.then&&e.then(l),s.leave(v)},500)}var s,u,g,h=this.parentSelector,p=angular.element(this.loadingBarTemplate),f=p.find("div").eq(0),v=angular.element(this.spinnerTemplate),m=!1,B=0,$=this.includeSpinner,b=this.includeBar,S=this.startSize;return{start:r,set:i,status:o,inc:c,complete:d,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}(); \ No newline at end of file +!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(e){var n=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(n,t,a,r,i,c){function o(){a.cancel(d),c.complete(),u=0,s=0}function l(n){var a,r=t.get("$http"),i=e.defaults;!n.cache&&!i.cache||n.cache===!1||"GET"!==n.method&&"JSONP"!==n.method||(a=angular.isObject(n.cache)?n.cache:angular.isObject(i.cache)?i.cache:r);var c=void 0!==a&&void 0!==a.get(n.url);return void 0!==n.cached&&c!==n.cached?n.cached:(n.cached=c,c)}var d,s=0,u=0,g=c.latencyThreshold;return{request:function(e){return e.ignoreLoadingBar||l(e)||(r.$broadcast("cfpLoadingBar:loading",{url:e.url}),0===s&&(d=a(function(){c.start()},g)),s++,c.set(u/s)),e},response:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),e):(i.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),e)},responseError:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),n.reject(e)):(i.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),n.reject(e))}}}];e.interceptors.push(n)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='
',this.loadingBarTemplate='
',this.$get=["$injector","$document","$timeout","$rootScope",function(e,n,t,a){function r(){s||(s=e.get("$animate"));var r=n.find(h).eq(0);t.cancel(g),m||(a.$broadcast("cfpLoadingBar:started"),m=!0,b&&s.enter(p,r,angular.element(r[0].lastChild)),$&&s.enter(v,r,angular.element(r[0].lastChild)),i(S))}function i(e){if(m){var n=100*e+"%";f.css("width",n),B=e,t.cancel(u),u=t(function(){c()},250)}}function c(){if(!(o()>=1)){var e=0,n=o();e=n>=0&&n<.25?(3*Math.random()+3)/100:n>=.25&&n<.65?3*Math.random()/100:n>=.65&&n<.9?2*Math.random()/100:n>=.9&&n<.99?.005:0;var t=o()+e;i(t)}}function o(){return B}function l(){B=0,m=!1}function d(){s||(s=e.get("$animate")),a.$broadcast("cfpLoadingBar:completed"),i(1),t.cancel(g),g=t(function(){var e=s.leave(p,l);e&&e.then&&e.then(l),s.leave(v)},500)}var s,u,g,h=this.parentSelector,p=angular.element(this.loadingBarTemplate),f=p.find("div").eq(0),v=angular.element(this.spinnerTemplate),m=!1,B=0,$=this.includeSpinner,b=this.includeBar,S=this.startSize;return{start:r,set:i,status:o,inc:c,complete:d,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}(); \ No newline at end of file diff --git a/dist/pagination.min.js b/dist/pagination.min.js index 3dcecb4..eea082a 100644 --- a/dist/pagination.min.js +++ b/dist/pagination.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&a>g;s&&(o?(t=Math.max(e-Math.floor(g/2),1),i=t+g-1,i>a&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;i>=l;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(a>i){if(!c||a-2>i){var v=r(i+1,"...",!1);n.push(v)}if(c){if(i===a-2){var m=r(a-1,a-1,!1);n.push(m)}var $=r(a,a,!1);n.push($)}}}return n}var l=this,g=angular.isDefined(a.maxSize)?e.$parent.$eval(a.maxSize):i.maxSize,o=angular.isDefined(a.rotate)?e.$parent.$eval(a.rotate):i.rotate,u=angular.isDefined(a.forceEllipses)?e.$parent.$eval(a.forceEllipses):i.forceEllipses,c=angular.isDefined(a.boundaryLinkNumbers)?e.$parent.$eval(a.boundaryLinkNumbers):i.boundaryLinkNumbers;e.boundaryLinks=angular.isDefined(a.boundaryLinks)?e.$parent.$eval(a.boundaryLinks):i.boundaryLinks,e.directionLinks=angular.isDefined(a.directionLinks)?e.$parent.$eval(a.directionLinks):i.directionLinks,t.create(this,e,a),a.maxSize&&e.$parent.$watch(n(a.maxSize),function(e){g=parseInt(e,10),l.render()});var p=this.render;this.render=function(){p(),e.page>0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("gridPagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["gridPagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","")}])}(); \ No newline at end of file +!function(){"use strict";angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&ga&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;l<=i;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(i0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("gridPagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["gridPagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","")}])}(); \ No newline at end of file diff --git a/src/js/andrey_c_changes/directive2.js b/src/js/andrey_c_changes/directive2.js new file mode 100644 index 0000000..858245f --- /dev/null +++ b/src/js/andrey_c_changes/directive2.js @@ -0,0 +1,75 @@ +angular.module('myApp') + .directive('fixedHeader2', ['$window', '$timeout', function ($window, $timeout) { + var window = angular.element($window); + + return { + restrict: 'A', + link: function (scope, element, attrs) { + var elementOffsetFrom = attrs.offsetFromElementId ? + angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : + window; + + function resizeFixed() { + var thElements = element.find("th"); + for (var i = 0; i < thElements.length; i++) { + var tdElement = element.find("td").eq(i)[0]; + if (!tdElement) { + return; + } + var tdElementWidth = tdElement.offsetWidth; + angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); + } + } + + function bindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"); + tbodyLeftPos = tbody[0].getBoundingClientRect().left; + thead.addClass('fixed'); + if (attrs.offsetFromElementId) { + var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; + var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; + angular.element(thead[0]).css({ "top": offset }); + } + angular.element(thead[0]).css({"left": tbodyLeftPos}); + tbody.addClass("tbody-offset"); + } + + function unBindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"); + thead.removeClass('fixed'); + angular.element(thead[0]).css({"left": ""}); + angular.element(thead[0]).css({"top": ""}); + tbody.removeClass("tbody-offset"); + } + + function scrollFixed() { + var offset = attrs.offsetFromElementId ? + elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : + $window.pageYOffset, + tableOffsetTop = attrs.offsetFromElementId ? + element[0].getBoundingClientRect().top : + element[0].getBoundingClientRect().top + offset, + tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; + + if(offset < tableOffsetTop || offset > tableOffsetBottom) { + unBindFixedToHeader(); + } + else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { + bindFixedToHeader(); + } + resizeFixed(); + } + + scope.$on('gridReloaded', function() { + $timeout(function(){ + resizeFixed(); + scrollFixed(); + }, 0); + }); + window.on('resize', resizeFixed); + window.on('scroll', scrollFixed); + } + } + }]); \ No newline at end of file diff --git a/src/js/andrey_c_changes/styles.css b/src/js/andrey_c_changes/styles.css new file mode 100644 index 0000000..7217aaf --- /dev/null +++ b/src/js/andrey_c_changes/styles.css @@ -0,0 +1,43 @@ +/*bootstrap*/ + +.fixed { + top: 0; + position: fixed; + width: auto; + border: none; + display: table; + z-index: 99; + tr { + background-color: #fff; + } +} + + +.tbody-offset:before { + height: 60px; + content:" "; + color:white; /* bacground color */ + display:block; +} + + +/*material*/ +.fixed { + top: 0; + position: fixed; + width: auto; + border: 1px solid rgba(0,0,0,.12); + display: table; + z-index: 99; + tr { + background-color: #fff; + } +} + + +.tbody-offset:before { + height: 60px; + content:" "; + color:white; /* bacground color */ + display:block; +} \ No newline at end of file diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js index 1ae356c..7ed9847 100644 --- a/src/js/dataGrid.js +++ b/src/js/dataGrid.js @@ -12,7 +12,7 @@ return []; } }) - .controller('gridController', ['$scope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $element, $filter, $location, filtersFactory) { + .controller('gridController', ['$scope', '$rootScope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $rootScope, $element, $filter, $location, filtersFactory) { // values by default $scope._gridOptions = $scope.$eval($element.attr('grid-options')); $scope._gridActions = $scope.$eval($element.attr('grid-actions')); @@ -84,6 +84,7 @@ } else { applyFilters(); } + $rootScope.$broadcast('gridReloaded'); }; $scope._gridActions.refresh = $scope.reloadGrid; From dabe10409471972a30ffe393a2847b1d694e0faf Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Wed, 5 Apr 2017 22:38:13 +0300 Subject: [PATCH 02/10] Fix #29: Added samples for bootstrap and material-design themes. Added dataGridUtils module and fixed-header directive --- demo/fixed-header/angular-md-grid.html | 202 +++++++++++++++ demo/fixed-header/bootstrap-grid.html | 244 ++++++++++++++++++ .../css/angular-data-grid.bootstrap.css | 26 ++ .../css/angular-data-grid.material.css | 86 ++++++ demo/fixed-header/css/fixed-header.css | 14 + demo/fixed-header/js/bootstrap/demoApp.js | 24 ++ .../js/material-design/demoApp.js | 23 ++ .../angular-data-grid.bootstrap.scss | 34 +++ demo/fixed-header/scss/fixed-header.scss | 19 ++ .../angular-data-grid.material.scss | 111 ++++++++ .../angular-data-grid.variables.scss | 6 + dist/dataGridUtils.js | 85 ++++++ dist/dataGridUtils.min.js | 1 + gulpfile.js | 9 + src/js/andrey_c_changes/directive2.js | 75 ------ src/js/andrey_c_changes/styles.css | 43 --- src/js/dataGridUtils.js | 85 ++++++ 17 files changed, 969 insertions(+), 118 deletions(-) create mode 100644 demo/fixed-header/angular-md-grid.html create mode 100644 demo/fixed-header/bootstrap-grid.html create mode 100644 demo/fixed-header/css/angular-data-grid.bootstrap.css create mode 100644 demo/fixed-header/css/angular-data-grid.material.css create mode 100644 demo/fixed-header/css/fixed-header.css create mode 100644 demo/fixed-header/js/bootstrap/demoApp.js create mode 100644 demo/fixed-header/js/material-design/demoApp.js create mode 100644 demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss create mode 100644 demo/fixed-header/scss/fixed-header.scss create mode 100644 demo/fixed-header/scss/material-design/angular-data-grid.material.scss create mode 100644 demo/fixed-header/scss/material-design/angular-data-grid.variables.scss create mode 100644 dist/dataGridUtils.js create mode 100644 dist/dataGridUtils.min.js delete mode 100644 src/js/andrey_c_changes/directive2.js delete mode 100644 src/js/andrey_c_changes/styles.css create mode 100644 src/js/dataGridUtils.js diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html new file mode 100644 index 0000000..0ddc722 --- /dev/null +++ b/demo/fixed-header/angular-md-grid.html @@ -0,0 +1,202 @@ + + + + + Angular Data Grid - Material Design + + + + + + + + +
+ +
+ Angular Data Grid — Material Design + + + + + Change theme + arrow_drop_down + + + + + Bootstrap Design + + + Material Design + + + +
+ + +
+
+

Angular Data Grid sample using Material Design styling

+ +

Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality. + Out-of-box Angular Material layout and + input controls used, + along with Material Design Light default CSS for + grid styling. + Project GitHub

+
+
+
+
+ + + +
+
+ +
+
+ +
+
+ Clear Dates + +
+
+
+
+
+ {{filtered.length}} items total +
+
+
+ + + + 10 + 25 + 50 + 75 + + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+ Order # + + + All Statuses + + {{option.text}} + + + + Date Placed + + Total +
+ +
+
+
+ + + + 10 + 25 + 50 + 75 + + +
+
+
+ CodePen +
+

See the Pen eJWWpM by AngularDataGrid (@AngularDataGrid) on CodePen. +

+ +
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html new file mode 100644 index 0000000..9192782 --- /dev/null +++ b/demo/fixed-header/bootstrap-grid.html @@ -0,0 +1,244 @@ + + + + + Angular Data Grid - Bootstrap Design + + + + + + + + +
+
+

Angular Data Grid sample using out-of-box Bootstrap styling

+ Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality. + Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling. + Project GitHub +
+

Additional Demos

+ +
+
+
+
+
+ + +
+
+
+
+ + +
+ + + + +
+
+
+
+
+ + +
+ + + + +
+
+
+ Clear Dates +
+
+
+
+
+
+
+
+
+
+ {{filtered.length}} items total +
+
+
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+ Order # + + Date Placed + + + + Total +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+ +
+

See the Pen xZddZm by AngularDataGrid (@AngularDataGrid) on CodePen.

+ +
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/fixed-header/css/angular-data-grid.bootstrap.css b/demo/fixed-header/css/angular-data-grid.bootstrap.css new file mode 100644 index 0000000..b0d7f10 --- /dev/null +++ b/demo/fixed-header/css/angular-data-grid.bootstrap.css @@ -0,0 +1,26 @@ +.table > thead > tr > th { + vertical-align: middle; } + +.margin-bottom-basic { + margin-bottom: 15px; } + +.pagination { + margin: 0; } + +.items-per-page { + margin-left: 15px; } + +.sortable:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; } + +.sortable.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; } + +.sortable.sort-descent:after { + content: "\f0dd"; + vertical-align: top; } + +.fixed { + border: none; } diff --git a/demo/fixed-header/css/angular-data-grid.material.css b/demo/fixed-header/css/angular-data-grid.material.css new file mode 100644 index 0000000..1bd30cb --- /dev/null +++ b/demo/fixed-header/css/angular-data-grid.material.css @@ -0,0 +1,86 @@ +th:focus, +a:focus { + outline: none; } + +.codepen-wrap { + margin-top: 15px; } + +.mdl-data-table { + width: 100%; } + .mdl-data-table th { + cursor: pointer; } + +.mdl-data-table tr { + transition: none !important; } + +th md-select { + margin: 0; } + +.md-errors-spacer { + display: none; } + +.pagination { + padding: 0; + font-size: 0; + display: inline-block; } + .pagination > li { + display: inline-block; + vertical-align: middle; + height: 30px; + border: 1px solid #ddd; + border-left: 0; } + .pagination > li:first-child { + border-left: 1px solid #ddd; + border-radius: 2px 0 0 2px; } + .pagination > li:last-child { + border-radius: 0 2px 2px 0; } + .pagination a { + color: #444; + font-size: 13px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } + .pagination .active { + background: #3f51b5; + border-color: #3f51b5; } + .pagination .active a { + color: #fff; } + .pagination-page.active { + background: #3f51b5; } + .pagination-page.active a { + color: #fff; } + +.material-icons, .sortable span:before, .sortable span:after { + font-family: 'Material Icons'; + font-size: 18px; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } + +.sortable span { + position: relative; } + .sortable span:before { + content: 'arrow_drop_down'; + position: absolute; + right: -18px; + top: -2px; } + .sortable span:after { + content: 'arrow_drop_up'; + position: absolute; + right: -18px; + top: -9px; } + +.sortable.sort-ascent span:before { + display: none; } + +.sortable.sort-ascent span:after { + top: -5px; } + +.sortable.sort-descent span:before { + top: -5px; } + +.sortable.sort-descent span:after { + display: none; } + +.fixed { + border: 1px solid rgba(0, 0, 0, 0.12); } diff --git a/demo/fixed-header/css/fixed-header.css b/demo/fixed-header/css/fixed-header.css new file mode 100644 index 0000000..dabfd36 --- /dev/null +++ b/demo/fixed-header/css/fixed-header.css @@ -0,0 +1,14 @@ +.fixed { + top: 0; + position: fixed; + width: auto; + display: table; + z-index: 99; } + .fixed tr { + background-color: #fff; } + +.tbody-offset:before { + height: 60px; + content: " "; + color: white; + display: block; } diff --git a/demo/fixed-header/js/bootstrap/demoApp.js b/demo/fixed-header/js/bootstrap/demoApp.js new file mode 100644 index 0000000..46c1ccd --- /dev/null +++ b/demo/fixed-header/js/bootstrap/demoApp.js @@ -0,0 +1,24 @@ +angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'dataGridUtils']) + .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { + + $scope.gridOptions = { + data: [], + urlSync: true + }; + + myAppFactory.getData().then(function (responseData) { + $scope.gridOptions.data = responseData.data; + }); + + }]) + .factory('myAppFactory', function ($http) { + return { + getData: function () { + return $http({ + method: 'GET', + url: 'https://angular-data-grid.github.io/demo/data.json' + }); + } + } + }); + diff --git a/demo/fixed-header/js/material-design/demoApp.js b/demo/fixed-header/js/material-design/demoApp.js new file mode 100644 index 0000000..2c4a332 --- /dev/null +++ b/demo/fixed-header/js/material-design/demoApp.js @@ -0,0 +1,23 @@ +angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial', 'dataGridUtils']) + .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { + + $scope.gridOptions = { + data: [], + urlSync: true + }; + myAppFactory.getData().then(function (responseData) { + $scope.gridOptions.data = responseData.data; + }); + + }]) + .factory('myAppFactory', function ($http) { + return { + getData: function () { + return $http({ + method: 'GET', + url: 'https://angular-data-grid.github.io/demo/data.json' + }); + } + } + }); + diff --git a/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss new file mode 100644 index 0000000..b1feab2 --- /dev/null +++ b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss @@ -0,0 +1,34 @@ +.table > thead > tr > th { + vertical-align: middle; +} + +.margin-bottom-basic { + margin-bottom: 15px; +} + +.pagination { + margin: 0; +} + +.items-per-page { + margin-left: 15px; +} + +.sortable { + &:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; + } + &.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; + } + &.sort-descent:after { + content: "\f0dd"; + vertical-align: top; + } +} + +.fixed { + border: none; +} \ No newline at end of file diff --git a/demo/fixed-header/scss/fixed-header.scss b/demo/fixed-header/scss/fixed-header.scss new file mode 100644 index 0000000..3caa4af --- /dev/null +++ b/demo/fixed-header/scss/fixed-header.scss @@ -0,0 +1,19 @@ +.fixed { + top: 0; + position: fixed; + width: auto; + display: table; + z-index: 99; + tr { + background-color: #fff; + } +} + +.tbody-offset { + &:before { + height: 60px; + content: " "; + color: white; + display: block; + } +} \ No newline at end of file diff --git a/demo/fixed-header/scss/material-design/angular-data-grid.material.scss b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss new file mode 100644 index 0000000..cb61c4d --- /dev/null +++ b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss @@ -0,0 +1,111 @@ +@import 'angular-data-grid.variables'; + +th:focus, +a:focus { + outline: none; +} +.codepen-wrap { + margin-top: 15px; +} +.mdl-data-table { + width: 100%; + th { + cursor: pointer; + } +} +.mdl-data-table tr { + transition: none !important; +} +th md-select { + margin: 0; +} +.md-errors-spacer { + display: none; +} +.pagination { + padding: 0; + font-size: 0; + display: inline-block; + & > li{ + display: inline-block; + vertical-align: middle; + height: 30px; + border: 1px solid $foregroundPagination; + border-left: 0; + &:first-child { + border-left: 1px solid $foregroundPagination; + border-radius: 2px 0 0 2px; + } + &:last-child { + border-radius: 0 2px 2px 0; + } + } + a { + color: $foregroundDefault; + font-size: 13px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; + } + .active { + background: $backgroundActive; + border-color: $backgroundActive; + a { + color: $foregroundActive; + } + } + &-page { + &.active { + background: $backgroundActive; + a { + color: $foregroundActive; + } + } + } +} +.material-icons { + font-family: 'Material Icons'; + font-size: 18px; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} +.sortable { + span { + position: relative; + &:before { + @extend .material-icons; + content: 'arrow_drop_down'; + position: absolute; + right: -18px; + top: -2px; + } + &:after { + @extend .material-icons; + content: 'arrow_drop_up'; + position: absolute; + right: -18px; + top: -9px; + } + } + &.sort-ascent { + span:before { + display: none; + } + span:after { + top: -5px + } + } + &.sort-descent { + span:before { + top: -5px + } + span:after { + display: none; + } + } +} + +.fixed { + border: 1px solid $borderColor; +} \ No newline at end of file diff --git a/demo/fixed-header/scss/material-design/angular-data-grid.variables.scss b/demo/fixed-header/scss/material-design/angular-data-grid.variables.scss new file mode 100644 index 0000000..47940b8 --- /dev/null +++ b/demo/fixed-header/scss/material-design/angular-data-grid.variables.scss @@ -0,0 +1,6 @@ +$backgroundActive: rgb(63, 81, 181); +$foregroundActive: #fff; +$foregroundPagination: #ddd; +$foregroundDefault: #444; +$backgroundIcons: #333; +$borderColor: rgba(0,0,0,.12); \ No newline at end of file diff --git a/dist/dataGridUtils.js b/dist/dataGridUtils.js new file mode 100644 index 0000000..1a967dc --- /dev/null +++ b/dist/dataGridUtils.js @@ -0,0 +1,85 @@ +(function () { + 'use strict'; + angular.module('dataGridUtils', []) + .directive('fixedHeader', FixedHeader); + + FixedHeader.$inject = ['$window', '$timeout']; + + function FixedHeader($window, $timeout) { + var window = angular.element($window); + + return { + restrict: 'A', + link: link + }; + + function link(scope, element, attrs) { + var elementOffsetFrom = attrs.offsetFromElementId ? + angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : + window; + + function resizeFixed() { + var thElements = element.find("th"); + for (var i = 0; i < thElements.length; i++) { + var tdElement = element.find("td").eq(i)[0]; + if (!tdElement) { + return; + } + var tdElementWidth = tdElement.offsetWidth; + angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); + } + } + + function bindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"), + tbodyLeftPos = tbody[0].getBoundingClientRect().left; + thead.addClass('fixed'); + if (attrs.offsetFromElementId) { + var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; + var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; + angular.element(thead[0]).css({ "top": offset }); + } + angular.element(thead[0]).css({"left": tbodyLeftPos}); + tbody.addClass("tbody-offset"); + } + + function unBindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"); + thead.removeClass('fixed'); + angular.element(thead[0]).css({"left": ""}); + angular.element(thead[0]).css({"top": ""}); + tbody.removeClass("tbody-offset"); + } + + function scrollFixed() { + var offset = attrs.offsetFromElementId ? + elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : + $window.pageYOffset, + tableOffsetTop = attrs.offsetFromElementId ? + element[0].getBoundingClientRect().top : + element[0].getBoundingClientRect().top + offset, + tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; + + if(offset < tableOffsetTop || offset > tableOffsetBottom) { + unBindFixedToHeader(); + } + else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { + bindFixedToHeader(); + } + resizeFixed(); + } + + scope.$on('gridReloaded', function() { + $timeout(function(){ + resizeFixed(); + scrollFixed(); + }, 0); + }); + window.on('resize', resizeFixed); + window.on('scroll', scrollFixed); + } + } + +})(); \ No newline at end of file diff --git a/dist/dataGridUtils.min.js b/dist/dataGridUtils.min.js new file mode 100644 index 0000000..552765f --- /dev/null +++ b/dist/dataGridUtils.min.js @@ -0,0 +1 @@ +!function(){"use strict";function e(e,t){function n(n,f,i){function l(){for(var e=f.find("th"),t=0;to?r():t>=n&&t<=o&&d(),l()}var s=i.offsetFromElementId?angular.element(document.querySelector("#"+i.offsetFromElementId))[0]:o;n.$on("gridReloaded",function(){t(function(){l(),a()},0)}),o.on("resize",l),o.on("scroll",a)}var o=angular.element(e);return{restrict:"A",link:n}}angular.module("dataGridUtils",[]).directive("fixedHeader",e),e.$inject=["$window","$timeout"]}(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d3a2af8..9b175be 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -41,6 +41,15 @@ gulp.src('./demo/100k/scss/angular-data-grid.bootstrap.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./demo/100k/css/')); + gulp.src('./demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./demo/fixed-header/css/')); + gulp.src('./demo/fixed-header/scss/material-design/angular-data-grid.material.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./demo/fixed-header/css/')); + gulp.src('./demo/fixed-header/scss/fixed-header.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./demo/fixed-header/css/')); }); gulp.task('build', ['js', 'sass']); diff --git a/src/js/andrey_c_changes/directive2.js b/src/js/andrey_c_changes/directive2.js deleted file mode 100644 index 858245f..0000000 --- a/src/js/andrey_c_changes/directive2.js +++ /dev/null @@ -1,75 +0,0 @@ -angular.module('myApp') - .directive('fixedHeader2', ['$window', '$timeout', function ($window, $timeout) { - var window = angular.element($window); - - return { - restrict: 'A', - link: function (scope, element, attrs) { - var elementOffsetFrom = attrs.offsetFromElementId ? - angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : - window; - - function resizeFixed() { - var thElements = element.find("th"); - for (var i = 0; i < thElements.length; i++) { - var tdElement = element.find("td").eq(i)[0]; - if (!tdElement) { - return; - } - var tdElementWidth = tdElement.offsetWidth; - angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); - } - } - - function bindFixedToHeader() { - var thead = angular.element(element.find("thead")), - tbody = element.find("tbody"); - tbodyLeftPos = tbody[0].getBoundingClientRect().left; - thead.addClass('fixed'); - if (attrs.offsetFromElementId) { - var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; - var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; - angular.element(thead[0]).css({ "top": offset }); - } - angular.element(thead[0]).css({"left": tbodyLeftPos}); - tbody.addClass("tbody-offset"); - } - - function unBindFixedToHeader() { - var thead = angular.element(element.find("thead")), - tbody = element.find("tbody"); - thead.removeClass('fixed'); - angular.element(thead[0]).css({"left": ""}); - angular.element(thead[0]).css({"top": ""}); - tbody.removeClass("tbody-offset"); - } - - function scrollFixed() { - var offset = attrs.offsetFromElementId ? - elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : - $window.pageYOffset, - tableOffsetTop = attrs.offsetFromElementId ? - element[0].getBoundingClientRect().top : - element[0].getBoundingClientRect().top + offset, - tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; - - if(offset < tableOffsetTop || offset > tableOffsetBottom) { - unBindFixedToHeader(); - } - else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { - bindFixedToHeader(); - } - resizeFixed(); - } - - scope.$on('gridReloaded', function() { - $timeout(function(){ - resizeFixed(); - scrollFixed(); - }, 0); - }); - window.on('resize', resizeFixed); - window.on('scroll', scrollFixed); - } - } - }]); \ No newline at end of file diff --git a/src/js/andrey_c_changes/styles.css b/src/js/andrey_c_changes/styles.css deleted file mode 100644 index 7217aaf..0000000 --- a/src/js/andrey_c_changes/styles.css +++ /dev/null @@ -1,43 +0,0 @@ -/*bootstrap*/ - -.fixed { - top: 0; - position: fixed; - width: auto; - border: none; - display: table; - z-index: 99; - tr { - background-color: #fff; - } -} - - -.tbody-offset:before { - height: 60px; - content:" "; - color:white; /* bacground color */ - display:block; -} - - -/*material*/ -.fixed { - top: 0; - position: fixed; - width: auto; - border: 1px solid rgba(0,0,0,.12); - display: table; - z-index: 99; - tr { - background-color: #fff; - } -} - - -.tbody-offset:before { - height: 60px; - content:" "; - color:white; /* bacground color */ - display:block; -} \ No newline at end of file diff --git a/src/js/dataGridUtils.js b/src/js/dataGridUtils.js new file mode 100644 index 0000000..1a967dc --- /dev/null +++ b/src/js/dataGridUtils.js @@ -0,0 +1,85 @@ +(function () { + 'use strict'; + angular.module('dataGridUtils', []) + .directive('fixedHeader', FixedHeader); + + FixedHeader.$inject = ['$window', '$timeout']; + + function FixedHeader($window, $timeout) { + var window = angular.element($window); + + return { + restrict: 'A', + link: link + }; + + function link(scope, element, attrs) { + var elementOffsetFrom = attrs.offsetFromElementId ? + angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : + window; + + function resizeFixed() { + var thElements = element.find("th"); + for (var i = 0; i < thElements.length; i++) { + var tdElement = element.find("td").eq(i)[0]; + if (!tdElement) { + return; + } + var tdElementWidth = tdElement.offsetWidth; + angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); + } + } + + function bindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"), + tbodyLeftPos = tbody[0].getBoundingClientRect().left; + thead.addClass('fixed'); + if (attrs.offsetFromElementId) { + var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; + var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; + angular.element(thead[0]).css({ "top": offset }); + } + angular.element(thead[0]).css({"left": tbodyLeftPos}); + tbody.addClass("tbody-offset"); + } + + function unBindFixedToHeader() { + var thead = angular.element(element.find("thead")), + tbody = element.find("tbody"); + thead.removeClass('fixed'); + angular.element(thead[0]).css({"left": ""}); + angular.element(thead[0]).css({"top": ""}); + tbody.removeClass("tbody-offset"); + } + + function scrollFixed() { + var offset = attrs.offsetFromElementId ? + elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : + $window.pageYOffset, + tableOffsetTop = attrs.offsetFromElementId ? + element[0].getBoundingClientRect().top : + element[0].getBoundingClientRect().top + offset, + tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; + + if(offset < tableOffsetTop || offset > tableOffsetBottom) { + unBindFixedToHeader(); + } + else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { + bindFixedToHeader(); + } + resizeFixed(); + } + + scope.$on('gridReloaded', function() { + $timeout(function(){ + resizeFixed(); + scrollFixed(); + }, 0); + }); + window.on('resize', resizeFixed); + window.on('scroll', scrollFixed); + } + } + +})(); \ No newline at end of file From 887a507c65b0b7d3d0570ff10b415ea54aa286fe Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Thu, 6 Apr 2017 00:46:18 +0300 Subject: [PATCH 03/10] Fix #29: Code refactoring --- .../css/angular-data-grid.bootstrap.css | 2 +- .../css/angular-data-grid.material.css | 2 +- demo/fixed-header/css/fixed-header.css | 4 +- .../angular-data-grid.bootstrap.scss | 2 +- demo/fixed-header/scss/fixed-header.scss | 2 +- .../angular-data-grid.material.scss | 2 +- dist/dataGridUtils.js | 40 +++++++++---------- dist/dataGridUtils.min.js | 2 +- src/js/dataGridUtils.js | 40 +++++++++---------- 9 files changed, 48 insertions(+), 48 deletions(-) diff --git a/demo/fixed-header/css/angular-data-grid.bootstrap.css b/demo/fixed-header/css/angular-data-grid.bootstrap.css index b0d7f10..5c9f450 100644 --- a/demo/fixed-header/css/angular-data-grid.bootstrap.css +++ b/demo/fixed-header/css/angular-data-grid.bootstrap.css @@ -22,5 +22,5 @@ content: "\f0dd"; vertical-align: top; } -.fixed { +.fixed-header { border: none; } diff --git a/demo/fixed-header/css/angular-data-grid.material.css b/demo/fixed-header/css/angular-data-grid.material.css index 1bd30cb..3ee617f 100644 --- a/demo/fixed-header/css/angular-data-grid.material.css +++ b/demo/fixed-header/css/angular-data-grid.material.css @@ -82,5 +82,5 @@ th md-select { .sortable.sort-descent span:after { display: none; } -.fixed { +.fixed-header { border: 1px solid rgba(0, 0, 0, 0.12); } diff --git a/demo/fixed-header/css/fixed-header.css b/demo/fixed-header/css/fixed-header.css index dabfd36..8ed62ae 100644 --- a/demo/fixed-header/css/fixed-header.css +++ b/demo/fixed-header/css/fixed-header.css @@ -1,10 +1,10 @@ -.fixed { +.fixed-header { top: 0; position: fixed; width: auto; display: table; z-index: 99; } - .fixed tr { + .fixed-header tr { background-color: #fff; } .tbody-offset:before { diff --git a/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss index b1feab2..39a0305 100644 --- a/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss +++ b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss @@ -29,6 +29,6 @@ } } -.fixed { +.fixed-header { border: none; } \ No newline at end of file diff --git a/demo/fixed-header/scss/fixed-header.scss b/demo/fixed-header/scss/fixed-header.scss index 3caa4af..9412506 100644 --- a/demo/fixed-header/scss/fixed-header.scss +++ b/demo/fixed-header/scss/fixed-header.scss @@ -1,4 +1,4 @@ -.fixed { +.fixed-header { top: 0; position: fixed; width: auto; diff --git a/demo/fixed-header/scss/material-design/angular-data-grid.material.scss b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss index cb61c4d..a96a0fe 100644 --- a/demo/fixed-header/scss/material-design/angular-data-grid.material.scss +++ b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss @@ -106,6 +106,6 @@ th md-select { } } -.fixed { +.fixed-header { border: 1px solid $borderColor; } \ No newline at end of file diff --git a/dist/dataGridUtils.js b/dist/dataGridUtils.js index 1a967dc..a83911d 100644 --- a/dist/dataGridUtils.js +++ b/dist/dataGridUtils.js @@ -14,9 +14,9 @@ }; function link(scope, element, attrs) { - var elementOffsetFrom = attrs.offsetFromElementId ? - angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : - window; + var elementOffsetFrom = attrs.offsetFromElement ? + document.querySelector(attrs.offsetFromElement) : + window; function resizeFixed() { var thElements = element.find("th"); @@ -26,53 +26,53 @@ return; } var tdElementWidth = tdElement.offsetWidth; - angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); + angular.element(thElements[i]).css({'width': tdElementWidth + 'px'}); } } function bindFixedToHeader() { - var thead = angular.element(element.find("thead")), + var thead = element.find("thead"), tbody = element.find("tbody"), tbodyLeftPos = tbody[0].getBoundingClientRect().left; - thead.addClass('fixed'); - if (attrs.offsetFromElementId) { - var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; + thead.addClass('fixed-header'); + if (attrs.offsetFromElement) { + var topElement = document.querySelector(attrs.offsetFromElement); var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; - angular.element(thead[0]).css({ "top": offset }); + thead.css({"top": offset}); } - angular.element(thead[0]).css({"left": tbodyLeftPos}); + thead.css({"left": tbodyLeftPos}); tbody.addClass("tbody-offset"); } function unBindFixedToHeader() { - var thead = angular.element(element.find("thead")), + var thead = element.find("thead"), tbody = element.find("tbody"); - thead.removeClass('fixed'); - angular.element(thead[0]).css({"left": ""}); - angular.element(thead[0]).css({"top": ""}); + thead.removeClass('fixed-header'); + thead.css({"left": ""}); + thead.css({"top": ""}); tbody.removeClass("tbody-offset"); } function scrollFixed() { - var offset = attrs.offsetFromElementId ? + var offset = attrs.offsetFromElement ? elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : $window.pageYOffset, - tableOffsetTop = attrs.offsetFromElementId ? + tableOffsetTop = attrs.offsetFromElement ? element[0].getBoundingClientRect().top : element[0].getBoundingClientRect().top + offset, tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; - if(offset < tableOffsetTop || offset > tableOffsetBottom) { + if (offset < tableOffsetTop || offset > tableOffsetBottom) { unBindFixedToHeader(); } - else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { + else if (offset >= tableOffsetTop && offset <= tableOffsetBottom) { bindFixedToHeader(); } resizeFixed(); } - scope.$on('gridReloaded', function() { - $timeout(function(){ + scope.$on('gridReloaded', function () { + $timeout(function () { resizeFixed(); scrollFixed(); }, 0); diff --git a/dist/dataGridUtils.min.js b/dist/dataGridUtils.min.js index 552765f..6742b18 100644 --- a/dist/dataGridUtils.min.js +++ b/dist/dataGridUtils.min.js @@ -1 +1 @@ -!function(){"use strict";function e(e,t){function n(n,f,i){function l(){for(var e=f.find("th"),t=0;to?r():t>=n&&t<=o&&d(),l()}var s=i.offsetFromElementId?angular.element(document.querySelector("#"+i.offsetFromElementId))[0]:o;n.$on("gridReloaded",function(){t(function(){l(),a()},0)}),o.on("resize",l),o.on("scroll",a)}var o=angular.element(e);return{restrict:"A",link:n}}angular.module("dataGridUtils",[]).directive("fixedHeader",e),e.$inject=["$window","$timeout"]}(); \ No newline at end of file +!function(){"use strict";function e(e,t){function n(n,f,i){function d(){for(var e=f.find("th"),t=0;to?s():t>=n&&t<=o&&r(),d()}var a=i.offsetFromElement?document.querySelector(i.offsetFromElement):o;n.$on("gridReloaded",function(){t(function(){d(),l()},0)}),o.on("resize",d),o.on("scroll",l)}var o=angular.element(e);return{restrict:"A",link:n}}angular.module("dataGridUtils",[]).directive("fixedHeader",e),e.$inject=["$window","$timeout"]}(); \ No newline at end of file diff --git a/src/js/dataGridUtils.js b/src/js/dataGridUtils.js index 1a967dc..a83911d 100644 --- a/src/js/dataGridUtils.js +++ b/src/js/dataGridUtils.js @@ -14,9 +14,9 @@ }; function link(scope, element, attrs) { - var elementOffsetFrom = attrs.offsetFromElementId ? - angular.element(document.querySelector('#' + attrs.offsetFromElementId))[0] : - window; + var elementOffsetFrom = attrs.offsetFromElement ? + document.querySelector(attrs.offsetFromElement) : + window; function resizeFixed() { var thElements = element.find("th"); @@ -26,53 +26,53 @@ return; } var tdElementWidth = tdElement.offsetWidth; - angular.element(thElements[i]).css({ 'width': tdElementWidth + 'px' }); + angular.element(thElements[i]).css({'width': tdElementWidth + 'px'}); } } function bindFixedToHeader() { - var thead = angular.element(element.find("thead")), + var thead = element.find("thead"), tbody = element.find("tbody"), tbodyLeftPos = tbody[0].getBoundingClientRect().left; - thead.addClass('fixed'); - if (attrs.offsetFromElementId) { - var topElement = angular.element(document.querySelector(attrs.offsetFromElementId))[0]; + thead.addClass('fixed-header'); + if (attrs.offsetFromElement) { + var topElement = document.querySelector(attrs.offsetFromElement); var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight; - angular.element(thead[0]).css({ "top": offset }); + thead.css({"top": offset}); } - angular.element(thead[0]).css({"left": tbodyLeftPos}); + thead.css({"left": tbodyLeftPos}); tbody.addClass("tbody-offset"); } function unBindFixedToHeader() { - var thead = angular.element(element.find("thead")), + var thead = element.find("thead"), tbody = element.find("tbody"); - thead.removeClass('fixed'); - angular.element(thead[0]).css({"left": ""}); - angular.element(thead[0]).css({"top": ""}); + thead.removeClass('fixed-header'); + thead.css({"left": ""}); + thead.css({"top": ""}); tbody.removeClass("tbody-offset"); } function scrollFixed() { - var offset = attrs.offsetFromElementId ? + var offset = attrs.offsetFromElement ? elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight : $window.pageYOffset, - tableOffsetTop = attrs.offsetFromElementId ? + tableOffsetTop = attrs.offsetFromElement ? element[0].getBoundingClientRect().top : element[0].getBoundingClientRect().top + offset, tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight; - if(offset < tableOffsetTop || offset > tableOffsetBottom) { + if (offset < tableOffsetTop || offset > tableOffsetBottom) { unBindFixedToHeader(); } - else if(offset >= tableOffsetTop && offset <= tableOffsetBottom) { + else if (offset >= tableOffsetTop && offset <= tableOffsetBottom) { bindFixedToHeader(); } resizeFixed(); } - scope.$on('gridReloaded', function() { - $timeout(function(){ + scope.$on('gridReloaded', function () { + $timeout(function () { resizeFixed(); scrollFixed(); }, 0); From 20853001d7646fc1d84551c76060d7a0712222de Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Thu, 6 Apr 2017 16:12:35 +0300 Subject: [PATCH 04/10] Fix Issue #29: Modifications to css for fixed-header --- demo/fixed-header/css/angular-data-grid.bootstrap.css | 6 ++++++ demo/fixed-header/css/angular-data-grid.material.css | 6 ++++++ demo/fixed-header/css/fixed-header.css | 4 ---- .../scss/bootstrap/angular-data-grid.bootstrap.scss | 10 ++++++++++ demo/fixed-header/scss/fixed-header.scss | 5 ----- .../material-design/angular-data-grid.material.scss | 10 ++++++++++ 6 files changed, 32 insertions(+), 9 deletions(-) diff --git a/demo/fixed-header/css/angular-data-grid.bootstrap.css b/demo/fixed-header/css/angular-data-grid.bootstrap.css index 5c9f450..51ae7a2 100644 --- a/demo/fixed-header/css/angular-data-grid.bootstrap.css +++ b/demo/fixed-header/css/angular-data-grid.bootstrap.css @@ -24,3 +24,9 @@ .fixed-header { border: none; } + .fixed-header tr { + background-color: #fff; } + +.tbody-offset:before { + color: white; + height: 60px; } diff --git a/demo/fixed-header/css/angular-data-grid.material.css b/demo/fixed-header/css/angular-data-grid.material.css index 3ee617f..91518d4 100644 --- a/demo/fixed-header/css/angular-data-grid.material.css +++ b/demo/fixed-header/css/angular-data-grid.material.css @@ -84,3 +84,9 @@ th md-select { .fixed-header { border: 1px solid rgba(0, 0, 0, 0.12); } + .fixed-header tr { + background-color: #fff; } + +.tbody-offset:before { + color: white; + height: 60px; } diff --git a/demo/fixed-header/css/fixed-header.css b/demo/fixed-header/css/fixed-header.css index 8ed62ae..29c52fc 100644 --- a/demo/fixed-header/css/fixed-header.css +++ b/demo/fixed-header/css/fixed-header.css @@ -4,11 +4,7 @@ width: auto; display: table; z-index: 99; } - .fixed-header tr { - background-color: #fff; } .tbody-offset:before { - height: 60px; content: " "; - color: white; display: block; } diff --git a/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss index 39a0305..bedaac1 100644 --- a/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss +++ b/demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss @@ -31,4 +31,14 @@ .fixed-header { border: none; + tr { + background-color: #fff; + } +} + +.tbody-offset { + &:before { + color: white; + height: 60px; + } } \ No newline at end of file diff --git a/demo/fixed-header/scss/fixed-header.scss b/demo/fixed-header/scss/fixed-header.scss index 9412506..fc880cf 100644 --- a/demo/fixed-header/scss/fixed-header.scss +++ b/demo/fixed-header/scss/fixed-header.scss @@ -4,16 +4,11 @@ width: auto; display: table; z-index: 99; - tr { - background-color: #fff; - } } .tbody-offset { &:before { - height: 60px; content: " "; - color: white; display: block; } } \ No newline at end of file diff --git a/demo/fixed-header/scss/material-design/angular-data-grid.material.scss b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss index a96a0fe..88a20c7 100644 --- a/demo/fixed-header/scss/material-design/angular-data-grid.material.scss +++ b/demo/fixed-header/scss/material-design/angular-data-grid.material.scss @@ -108,4 +108,14 @@ th md-select { .fixed-header { border: 1px solid $borderColor; + tr { + background-color: #fff; + } +} + +.tbody-offset { + &:before { + color: white; + height: 60px; + } } \ No newline at end of file From b8c6c5a12a662577f7cf2316cf680f29be07c267 Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Thu, 6 Apr 2017 16:22:54 +0300 Subject: [PATCH 05/10] Fix Issue #29: Removed unused code --- .../css/angular-data-grid.bootstrap.css | 17 ---------------- demo/bootstrap/index.html | 3 +-- .../scss/angular-data-grid.bootstrap.scss | 20 ------------------- 3 files changed, 1 insertion(+), 39 deletions(-) diff --git a/demo/bootstrap/css/angular-data-grid.bootstrap.css b/demo/bootstrap/css/angular-data-grid.bootstrap.css index c57f4e5..bccdc69 100644 --- a/demo/bootstrap/css/angular-data-grid.bootstrap.css +++ b/demo/bootstrap/css/angular-data-grid.bootstrap.css @@ -21,20 +21,3 @@ .sortable.sort-descent:after { content: "\f0dd"; vertical-align: top; } - -.fixed { - top: 0; - position: fixed; - width: auto; - border: none; - display: table; - z-index: 99; } - .fixed tr { - background-color: #fff; } - -.tbody-offset:before { - height: 60px; - content: " "; - color: white; - /* bacground color */ - display: block; } diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html index 46de58f..b0919de 100644 --- a/demo/bootstrap/index.html +++ b/demo/bootstrap/index.html @@ -158,7 +158,7 @@

Additional Demos

- +
@@ -238,6 +238,5 @@

Additional Demos

- \ No newline at end of file diff --git a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss index 6729625..3f008cf 100644 --- a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss +++ b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss @@ -27,24 +27,4 @@ content: "\f0dd"; vertical-align: top; } -} - -.fixed { - top: 0; - position: fixed; - width: auto; - border: none; - display: table; - z-index: 99; - tr { - background-color: #fff; - } -} - - -.tbody-offset:before { - height: 60px; - content:" "; - color:white; /* bacground color */ - display:block; } \ No newline at end of file From d15c9486c23cba92d844c52ecc85cf4c4c2a330d Mon Sep 17 00:00:00 2001 From: Andrey Chayko Date: Fri, 7 Apr 2017 14:52:55 +0300 Subject: [PATCH 06/10] Fix Issue #29: Changed file structure --- demo/fixed-header/angular-md-grid.html | 5 +- demo/fixed-header/bootstrap-grid.html | 5 +- .../css/angular-data-grid.bootstrap.css | 32 ----- .../css/angular-data-grid.material.css | 92 ------------- .../css/fixed-header.bootstrap.css | 8 ++ .../css/fixed-header.material.css | 8 ++ .../angular-data-grid.bootstrap.scss | 44 ------- .../scss/fixed-header.bootstrap.scss | 14 ++ .../scss/fixed-header.material.scss | 14 ++ .../angular-data-grid.material.scss | 121 ------------------ .../angular-data-grid.variables.scss | 6 - .../css/fixedHeader}/fixed-header.css | 0 dist/dataGridUtils.js | 6 +- dist/dataGridUtils.min.js | 2 +- gulpfile.js | 19 ++- src/js/directives/dataGridUtils.js | 4 + .../directives/fixedHeader}/fixed-header.scss | 1 + .../fixedHeader/fixedHeader.js} | 2 +- 18 files changed, 76 insertions(+), 307 deletions(-) delete mode 100644 demo/fixed-header/css/angular-data-grid.bootstrap.css delete mode 100644 demo/fixed-header/css/angular-data-grid.material.css create mode 100644 demo/fixed-header/css/fixed-header.bootstrap.css create mode 100644 demo/fixed-header/css/fixed-header.material.css delete mode 100644 demo/fixed-header/scss/bootstrap/angular-data-grid.bootstrap.scss create mode 100644 demo/fixed-header/scss/fixed-header.bootstrap.scss create mode 100644 demo/fixed-header/scss/fixed-header.material.scss delete mode 100644 demo/fixed-header/scss/material-design/angular-data-grid.material.scss delete mode 100644 demo/fixed-header/scss/material-design/angular-data-grid.variables.scss rename {demo/fixed-header/css => dist/css/fixedHeader}/fixed-header.css (100%) create mode 100644 src/js/directives/dataGridUtils.js rename {demo/fixed-header/scss => src/js/directives/fixedHeader}/fixed-header.scss (71%) rename src/js/{dataGridUtils.js => directives/fixedHeader/fixedHeader.js} (98%) diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html index 0ddc722..bd0db66 100644 --- a/demo/fixed-header/angular-md-grid.html +++ b/demo/fixed-header/angular-md-grid.html @@ -7,8 +7,9 @@ - - + + +
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html index 9192782..586112e 100644 --- a/demo/fixed-header/bootstrap-grid.html +++ b/demo/fixed-header/bootstrap-grid.html @@ -6,8 +6,9 @@ - - + + +