Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
angular-table-resize
Advanced tools
angular-table-resize - npm Package Compare versions
Comparing version 1.0.14 to 2.0.0
@@ -1,2 +0,2 @@ | ||
| var devapp = angular.module("DemoApp", ["ngTableResize"]); | ||
| var devapp = angular.module("DemoApp", ["rzTable"]); | ||
@@ -8,6 +8,22 @@ devapp.controller('main-controller', ['$scope', '$timeout', function($scope, $timeout) { | ||
| $scope.table = undefined | ||
| $scope.notes = true; | ||
| $scope.text = "hej" | ||
| $scope.profile = 'one' | ||
| $scope.options = { | ||
| onResizeStarted: function() { | ||
| console.log("Started") | ||
| }, | ||
| onResizeEnded: function() { | ||
| console.log("Ended") | ||
| }, | ||
| onResizeInProgress: function() { | ||
| console.log("In progress") | ||
| } | ||
| } | ||
| var i = 1; | ||
@@ -14,0 +30,0 @@ |
@@ -1,4 +0,4 @@ | ||
| angular.module("ngTableResize", []); | ||
| angular.module("rzTable", []); | ||
| angular.module("ngTableResize").directive('resizeable', ['resizeStorage', '$injector', function(resizeStorage, $injector) { | ||
| angular.module("rzTable").directive('rzTable', ['resizeStorage', '$injector', '$parse', function(resizeStorage, $injector, $parse) { | ||
@@ -12,2 +12,4 @@ var mode; | ||
| var handleColumns = null; | ||
| var listener = null; | ||
| var handles = [] | ||
| var table = null; | ||
@@ -20,2 +22,8 @@ var container = null; | ||
| RzController.$inject = ['$scope', '$attrs', '$element']; | ||
| function RzController($scope) { | ||
| } | ||
| function link(scope, element, attr) { | ||
@@ -28,4 +36,7 @@ // Set global reference to table | ||
| // Set options to an empty object if undefined | ||
| scope.options = attr.rzOptions ? scope.options || {} : {} | ||
| // Add css styling/properties to table | ||
| $(table).addClass('resize'); | ||
| $(table).addClass(scope.options.tableClass || 'rz-table'); | ||
@@ -38,5 +49,2 @@ // Initialise handlers, bindings and modes | ||
| // Watch for mode changes and update all | ||
| watchModeChange(table, attr, scope) | ||
| // Watch for changes in columns | ||
@@ -49,16 +57,14 @@ watchTableChanges(table, attr, scope) | ||
| function setUpWatchers(table, attr, scope) { | ||
| scope.$watch('profile', function(newVal, oldVal) { | ||
| console.log("Hey man") | ||
| }) | ||
| function renderWatch(table, attr, scope) { | ||
| return function(oldVal, newVal) { | ||
| if (newVal !== oldVal) { | ||
| cleanUpAll(table); | ||
| initialiseAll(table, attr, scope); | ||
| } | ||
| } | ||
| } | ||
| function bindUtilityFunctions(table, attr, scope) { | ||
| if (scope.bind === undefined) return; | ||
| scope.bind = { | ||
| update: function() { | ||
| cleanUpAll(table); | ||
| initialiseAll(table, attr, scope); | ||
| } | ||
| } | ||
| function setUpWatchers(table, attr, scope) { | ||
| scope.$watch('profile', renderWatch(table, attr, scope)) | ||
| scope.$watch('mode', renderWatch(table, attr, scope)) | ||
| } | ||
@@ -69,15 +75,25 @@ | ||
| return $(table).find('th').length; | ||
| }, function (/*newColLength*/) { | ||
| cleanUpAll(table); | ||
| initialiseAll(table, attr, scope); | ||
| }); | ||
| }, renderWatch(table, attr, scope)); | ||
| } | ||
| function watchModeChange(table, attr, scope) { | ||
| scope.$watch(function() { | ||
| return scope.mode; | ||
| }, function(/*newMode*/) { | ||
| cleanUpAll(table); | ||
| initialiseAll(table, attr, scope); | ||
| }); | ||
| function bindUtilityFunctions(table, attr, scope) { | ||
| if (!attr.rzModel) return; | ||
| var model = $parse(attr.rzModel) | ||
| model.assign(scope.$parent, { | ||
| update: function() { | ||
| cleanUpAll(table) | ||
| initialiseAll(table, attr, scope) | ||
| }, | ||
| reset: function() { | ||
| resetTable(table) | ||
| this.clearStorageActive() | ||
| this.update() | ||
| }, | ||
| clearStorage: function() { | ||
| resizeStorage.clearAll() | ||
| }, | ||
| clearStorageActive: function() { | ||
| resizeStorage.clearCurrent(table, mode, profile) | ||
| } | ||
| }) | ||
| } | ||
@@ -96,3 +112,4 @@ | ||
| function deleteHandles(table) { | ||
| $(table).find('th').find('.handle').remove(); | ||
| handles.map(function(h) { h.remove() }) | ||
| handles = [] | ||
| } | ||
@@ -106,3 +123,3 @@ | ||
| saveTableSizes = angular.isDefined(scope.saveTableSizes) ? scope.saveTableSizes : true; | ||
| profile = scope.profile; | ||
| profile = scope.profile | ||
@@ -133,3 +150,3 @@ // Get the resizer object for the current mode | ||
| handleColumns.each(function(index, column) { | ||
| initHandle(table, column); | ||
| initHandle(scope, table, column); | ||
| }) | ||
@@ -139,27 +156,11 @@ | ||
| function setColumnSizes(cache) { | ||
| if (!cache) { | ||
| return; | ||
| } | ||
| $(table).width('auto'); | ||
| ctrlColumns.each(function(index, column){ | ||
| var id = $(column).attr('id'); | ||
| var cacheWidth = cache[id]; | ||
| $(column).css({ width: cacheWidth }); | ||
| }) | ||
| resizer.onTableReady(); | ||
| } | ||
| function initHandle(table, column) { | ||
| function initHandle(scope, table, column) { | ||
| // Prepend a new handle div to the column | ||
| var handle = $('<div>', { | ||
| class: 'handle' | ||
| class: scope.options.handleClass || 'rz-handle' | ||
| }); | ||
| $(column).prepend(handle); | ||
| // Make handle as tall as the table | ||
| //$(handle).height($(table).height()) | ||
| // Add handles to handles for later removal | ||
| handles.push(handle) | ||
@@ -170,6 +171,6 @@ // Use the middleware to decide which columns this handle controls | ||
| // Bind mousedown, mousemove & mouseup events | ||
| bindEventToHandle(table, handle, controlledColumn); | ||
| bindEventToHandle(scope, table, handle, controlledColumn); | ||
| } | ||
| function bindEventToHandle(table, handle, column) { | ||
| function bindEventToHandle(scope, table, handle, column) { | ||
@@ -184,2 +185,4 @@ // This event starts the dragging | ||
| scope.options.onResizeStarted && scope.options.onResizeStarted(column) | ||
| var optional = {} | ||
@@ -196,7 +199,4 @@ if (resizer.intervene) { | ||
| // Change css styles for the handle | ||
| $(handle).addClass('active'); | ||
| $(handle).addClass(scope.options.handleClassActive || 'rz-handle-active'); | ||
| // Show the resize cursor globally | ||
| $('body').addClass('table-resize'); | ||
| // Get mouse and column origin measurements | ||
@@ -207,11 +207,11 @@ var orgX = event.clientX; | ||
| // On every mouse move, calculate the new width | ||
| $(window).mousemove(calculateWidthEvent(column, orgX, orgWidth, optional)) | ||
| listener = calculateWidthEvent(scope, column, orgX, orgWidth, optional) | ||
| $(window).mousemove(listener) | ||
| // Stop dragging as soon as the mouse is released | ||
| $(window).one('mouseup', unbindEvent(handle)) | ||
| $(window).one('mouseup', unbindEvent(scope, column, handle)) | ||
| }) | ||
| } | ||
| function calculateWidthEvent(column, orgX, orgWidth, optional) { | ||
| function calculateWidthEvent(scope, column, orgX, orgWidth, optional) { | ||
| return function(event) { | ||
@@ -236,2 +236,4 @@ // Get current mouse position | ||
| scope.options.onResizeInProgress && scope.options.onResizeInProgress(column, newWidth, diffX) | ||
| // Set size | ||
@@ -249,3 +251,3 @@ $(column).width(newWidth); | ||
| try { | ||
| var mode = attr.mode ? scope.mode : 'BasicResizer'; | ||
| var mode = attr.rzMode ? scope.mode : 'BasicResizer'; | ||
| var Resizer = $injector.get(mode) | ||
@@ -260,9 +262,13 @@ return Resizer; | ||
| function unbindEvent(handle) { | ||
| function unbindEvent(scope, column, handle) { | ||
| // Event called at end of drag | ||
| return function( /*event*/ ) { | ||
| $(handle).removeClass('active'); | ||
| $(window).unbind('mousemove'); | ||
| $('body').removeClass('table-resize'); | ||
| $(handle).removeClass(scope.options.handleClassActive || 'rz-handle-active'); | ||
| if (listener) { | ||
| $(window).unbind('mousemove', listener); | ||
| } | ||
| scope.options.onResizeEnded && scope.options.onResizeEnded(column) | ||
| resizer.onEndDrag(); | ||
@@ -279,3 +285,4 @@ | ||
| $(columns).each(function(index, column) { | ||
| var id = $(column).attr('id'); | ||
| var colScope = angular.element(column).scope() | ||
| var id = colScope.rzCol || $(column).attr('id') | ||
| if (!id) return; | ||
@@ -288,2 +295,19 @@ cache[id] = resizer.saveAttr(column); | ||
| function setColumnSizes(cache) { | ||
| if (!cache) { | ||
| return; | ||
| } | ||
| $(table).width('auto'); | ||
| ctrlColumns.each(function(index, column){ | ||
| var colScope = angular.element(column).scope() | ||
| var id = colScope.rzCol || $(column).attr('id') | ||
| var cacheWidth = cache[id]; | ||
| $(column).css({ width: cacheWidth }); | ||
| }) | ||
| resizer.onTableReady(); | ||
| } | ||
| // Return this directive as a object literal | ||
@@ -293,9 +317,11 @@ return { | ||
| link: link, | ||
| controller: RzController, | ||
| scope: { | ||
| mode: '=', | ||
| profile: '=?', | ||
| mode: '=rzMode', | ||
| profile: '=?rzProfile', | ||
| // whether to save table sizes; default true | ||
| saveTableSizes: '=?', | ||
| bind: '=', | ||
| container: '@' | ||
| saveTableSizes: '=?rzSave', | ||
| options: '=?rzOptions', | ||
| model: '=rzModel', | ||
| container: '@rzContainer' | ||
| } | ||
@@ -306,4 +332,18 @@ }; | ||
| angular.module("ngTableResize").service('resizeStorage', ['$window', function($window) { | ||
| angular.module("rzTable").directive('rzCol', [function() { | ||
| // Return this directive as a object literal | ||
| return { | ||
| restrict: 'A', | ||
| priority: 650, /* before ng-if */ | ||
| link: link, | ||
| require: '^^rzTable', | ||
| scope: true | ||
| }; | ||
| function link(scope, element, attr) { | ||
| scope.rzCol = scope.$eval(attr.rzCol) | ||
| } | ||
| }]) | ||
| angular.module("rzTable").service('resizeStorage', ['$window', function($window) { | ||
| var prefix = "ngColumnResize"; | ||
@@ -324,2 +364,20 @@ | ||
| this.clearAll = function() { | ||
| var keys = [] | ||
| for (var i = 0; i < $window.localStorage.length; ++i) { | ||
| var key = localStorage.key(i) | ||
| if (key && key.startsWith(prefix)) { | ||
| keys.push(key) | ||
| } | ||
| } | ||
| keys.map(function(k) { $window.localStorage.removeItem(k) }) | ||
| } | ||
| this.clearCurrent = function(table, mode, profile) { | ||
| var key = getStorageKey(table, mode, profile); | ||
| if (key) { | ||
| $window.localStorage.removeItem(key) | ||
| } | ||
| } | ||
| function getStorageKey(table, mode, profile) { | ||
@@ -336,3 +394,3 @@ var id = table.attr('id'); | ||
| angular.module("ngTableResize").factory("ResizerModel", [function() { | ||
| angular.module("rzTable").factory("ResizerModel", [function() { | ||
@@ -408,3 +466,3 @@ function ResizerModel(table, columns, container){ | ||
| angular.module("ngTableResize").factory("BasicResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("BasicResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -489,3 +547,3 @@ function BasicResizer(table, columns, container) { | ||
| angular.module("ngTableResize").factory("FixedResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("FixedResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -568,3 +626,3 @@ function FixedResizer(table, columns, container) { | ||
| angular.module("ngTableResize").factory("OverflowResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("OverflowResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -571,0 +629,0 @@ function OverflowResizer(table, columns, container) { |
@@ -1,1 +0,1 @@ | ||
| angular.module("ngTableResize",[]),angular.module("ngTableResize").directive("resizeable",["resizeStorage","$injector",function(t,n){function e(t,n,e){T=n,S=t.container?$(t.container):$(T).parent(),$(T).addClass("resize"),c(T,e,t),i(T,e,t),u(T,e,t),r(T,e,t),o(T,e,t)}function o(t,n,e){e.$watch("profile",function(t,n){console.log("Hey man")})}function i(t,n,e){void 0!==e.bind&&(e.bind={update:function(){s(t),c(t,n,e)}})}function r(t,n,e){e.$watch(function(){return $(t).find("th").length},function(){s(t),c(t,n,e)})}function u(t,n,e){e.$watch(function(){return e.mode},function(){s(t),c(t,n,e)})}function s(t){M=!0,a(t)}function a(t){$(t).find("th").find(".handle").remove()}function c(n,e,o){z=$(n).find("th"),b=o.mode,w=!angular.isDefined(o.saveTableSizes)||o.saveTableSizes,g=o.profile;var i=m(o,e);i&&(D=new i(n,z,S),w&&(W=t.loadTableSizes(n,o.mode,o.profile)),R=D.handles(z),C=D.ctrlColumns,D.setup(),l(W),R.each(function(t,e){d(n,e)}))}function l(t){t&&($(T).width("auto"),C.each(function(n,e){var o=$(e).attr("id"),i=t[o];$(e).css({width:i})}),D.onTableReady())}function d(t,n){var e=$("<div>",{"class":"handle"});$(n).prepend(e);var o=D.handleMiddleware(e,n);h(t,e,o)}function h(t,n,e){$(n).mousedown(function(t){M&&(D.onFirstDrag(e,n),D.onTableReady(),M=!1);var o={};D.intervene&&(o=D.intervene.selector(e),o.column=o,o.orgWidth=$(o).width()),t.preventDefault(),$(n).addClass("active"),$("body").addClass("table-resize");var i=t.clientX,r=$(e).width();$(window).mousemove(f(e,i,r,o)),$(window).one("mouseup",v(n))})}function f(t,n,e,o){return function(i){var r=i.clientX,u=r-n,s=D.calculate(e,u);if(!(s<p(t)||D.restrict(s,u))){if(D.intervene){var a=D.intervene.calculator(o.orgWidth,u);if(a<p(o.column))return;if(D.intervene.restrict(a,u))return;$(o.column).width(a)}$(t).width(s)}}}function p(t){return parseInt($(t).css("min-width"))||0}function m(t,e){try{var o=e.mode?t.mode:"BasicResizer",i=n.get(o);return i}catch(r){return console.error("The resizer "+t.mode+" was not found"),null}}function v(t){return function(){$(t).removeClass("active"),$(window).unbind("mousemove"),$("body").removeClass("table-resize"),D.onEndDrag(),y()}}function y(){w&&(W||(W={}),$(z).each(function(t,n){var e=$(n).attr("id");e&&(W[e]=D.saveAttr(n))}),t.saveTableSizes(T,b,g,W))}var b,w,g,z=null,C=null,R=null,T=null,S=null,D=null,M=!0,W=null;return{restrict:"A",link:e,scope:{mode:"=",profile:"=?",saveTableSizes:"=?",bind:"=",container:"@"}}}]),angular.module("ngTableResize").service("resizeStorage",["$window",function(t){function n(t,n,o){var i=t.attr("id");return i?e+"."+t.attr("id")+"."+n+(o?"."+o:""):void console.error("Table has no id",t)}var e="ngColumnResize";this.loadTableSizes=function(e,o,i){var r=n(e,o,i),u=t.localStorage.getItem(r);return JSON.parse(u)},this.saveTableSizes=function(e,o,i,r){var u=n(e,o,i);if(u){var s=JSON.stringify(r);t.localStorage.setItem(u,s)}}}]),angular.module("ngTableResize").factory("ResizerModel",[function(){function t(t,n,e){this.table=t,this.columns=n,this.container=e,this.handleColumns=this.handles(),this.ctrlColumns=this.ctrlColumns()}return t.prototype.setup=function(){$(this.container).css({overflowX:"hidden"})},t.prototype.onTableReady=function(){$(this.table).outerWidth("100%")},t.prototype.getMinWidth=function(t){return parseInt($(t).css("min-width"))||0},t.prototype.handles=function(){return this.columns},t.prototype.ctrlColumns=function(){return this.handleColumns},t.prototype.onFirstDrag=function(){$(this.ctrlColumns).each(function(t,n){$(n).width($(n).width())})},t.prototype.handleMiddleware=function(t,n){return n},t.prototype.restrict=function(t){return!1},t.prototype.calculate=function(t,n){return t+n},t.prototype.onEndDrag=function(){},t.prototype.saveAttr=function(t){return $(t).outerWidth()},t}]),angular.module("ngTableResize").factory("BasicResizer",["ResizerModel",function(t){function n(n,r,u){t.call(this,n,r,u),this.ctrlColumns=this.columns,this.intervene={selector:e,calculator:o,restrict:i}}function e(t){return $(t).next()}function o(t,n){return t-n}function i(t){return t<25}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflowX:"hidden"}),$(this.table).css({width:"100%"})},n.prototype.handles=function(){return $(this.columns).not(":last")},n.prototype.onFirstDrag=function(){this.onEndDrag()},n.prototype.onEndDrag=function(){var t=$(this.table).outerWidth(),n=[];$(this.columns).each(function(e,o){var i=$(o).outerWidth(),r=i/t*100+"%";n.push(function(){$(o).css({width:r})})}),n.map(function(t){t()})},n.prototype.saveAttr=function(t){return $(t)[0].style.width},n}]),angular.module("ngTableResize").factory("FixedResizer",["ResizerModel",function(t){function n(n,e,o){t.call(this,n,e,o),this.fixedColumn=$(n).find("th").first(),this.bound=!1}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflowX:"hidden"}),$(this.table).css({width:"100%"}),$(this.columns).first().css({width:"auto"})},n.prototype.handles=function(){return $(this.columns).not(":last")},n.prototype.ctrlColumns=function(){return $(this.columns).not(":first")},n.prototype.onFirstDrag=function(){$(this.ctrlColumns).each(function(t,n){$(n).width($(n).width())})},n.prototype.handleMiddleware=function(t,n){return $(n).next()},n.prototype.restrict=function(t,n){return this.bound&&this.bound<n?(this.bound=!1,!1):!!(this.bound&&this.bound>n)||(this.fixedColumn.width()<=this.getMinWidth(this.fixedColumn)?(this.bound=n,$(this.fixedColumn).width(this.minWidth),!0):void 0)},n.prototype.onEndDrag=function(){this.bound=!1},n.prototype.calculate=function(t,n){return t-n},n}]),angular.module("ngTableResize").factory("OverflowResizer",["ResizerModel",function(t){function n(n,e,o){t.call(this,n,e,o)}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflow:"auto"})},n.prototype.onTableReady=function(){$(this.table).width(1)},n}]); | ||
| angular.module("rzTable",[]),angular.module("rzTable").directive("rzTable",["resizeStorage","$injector","$parse",function(t,n,e){function o(t){}function r(t,n,e){W=n,I=t.container?$(t.container):$(W).parent(),t.options=e.rzOptions?t.options||{}:{},$(W).addClass(t.options.tableClass||"rz-table"),h(W,e,t),u(W,e,t),s(W,e,t),a(W,e,t)}function i(t,n,e){return function(o,r){r!==o&&(l(t),h(t,n,e))}}function a(t,n,e){e.$watch("profile",i(t,n,e)),e.$watch("mode",i(t,n,e))}function s(t,n,e){e.$watch(function(){return $(t).find("th").length},i(t,n,e))}function u(n,o,r){if(o.rzModel){var i=e(o.rzModel);i.assign(r.$parent,{update:function(){l(n),h(n,o,r)},reset:function(){c(n),this.clearStorageActive(),this.update()},clearStorage:function(){t.clearAll()},clearStorageActive:function(){t.clearCurrent(n,b,S)}})}}function l(t){x=!0,d(t)}function c(t){$(t).outerWidth("100%"),$(t).find("th").width("auto")}function d(t){D.map(function(t){t.remove()}),D=[]}function h(n,e,o){T=$(n).find("th"),b=o.mode,C=!angular.isDefined(o.saveTableSizes)||o.saveTableSizes,S=o.profile;var r=z(o,e);r&&(O=new r(n,T,I),C&&(E=t.loadTableSizes(n,o.mode,o.profile)),M=O.handles(T),R=O.ctrlColumns,O.setup(),w(E),M.each(function(t,e){f(o,n,e)}))}function f(t,n,e){var o=$("<div>",{"class":t.options.handleClass||"rz-handle"});$(e).prepend(o),D.push(o);var r=O.handleMiddleware(o,e);p(t,n,o,r)}function p(t,n,e,o){$(e).mousedown(function(n){x&&(O.onFirstDrag(o,e),O.onTableReady(),x=!1),t.options.onResizeStarted&&t.options.onResizeStarted(o);var r={};O.intervene&&(r=O.intervene.selector(o),r.column=r,r.orgWidth=$(r).width()),n.preventDefault(),$(e).addClass(t.options.handleClassActive||"rz-handle-active");var i=n.clientX,a=$(o).width();A=m(t,o,i,a,r),$(window).mousemove(A),$(window).one("mouseup",y(t,o,e))})}function m(t,n,e,o,r){return function(i){var a=i.clientX,s=a-e,u=O.calculate(o,s);if(!(u<v(n)||O.restrict(u,s))){if(O.intervene){var l=O.intervene.calculator(r.orgWidth,s);if(l<v(r.column))return;if(O.intervene.restrict(l,s))return;$(r.column).width(l)}t.options.onResizeInProgress&&t.options.onResizeInProgress(n,u,s),$(n).width(u)}}}function v(t){return parseInt($(t).css("min-width"))||0}function z(t,e){try{var o=e.rzMode?t.mode:"BasicResizer",r=n.get(o);return r}catch(i){return console.error("The resizer "+t.mode+" was not found"),null}}function y(t,n,e){return function(){$(e).removeClass(t.options.handleClassActive||"rz-handle-active"),A&&$(window).unbind("mousemove",A),t.options.onResizeEnded&&t.options.onResizeEnded(n),O.onEndDrag(),g()}}function g(){C&&(E||(E={}),$(T).each(function(t,n){var e=angular.element(n).scope(),o=e.rzCol||$(n).attr("id");o&&(E[o]=O.saveAttr(n))}),t.saveTableSizes(W,b,S,E))}function w(t){t&&($(W).width("auto"),R.each(function(n,e){var o=angular.element(e).scope(),r=o.rzCol||$(e).attr("id"),i=t[r];$(e).css({width:i})}),O.onTableReady())}var b,C,S,T=null,R=null,M=null,A=null,D=[],W=null,I=null,O=null,x=!0,E=null;return o.$inject=["$scope","$attrs","$element"],{restrict:"A",link:r,controller:o,scope:{mode:"=rzMode",profile:"=?rzProfile",saveTableSizes:"=?rzSave",options:"=?rzOptions",model:"=rzModel",container:"@rzContainer"}}}]),angular.module("rzTable").directive("rzCol",[function(){function t(t,n,e){t.rzCol=t.$eval(e.rzCol)}return{restrict:"A",priority:650,link:t,require:"^^rzTable",scope:!0}}]),angular.module("rzTable").service("resizeStorage",["$window",function(t){function n(t,n,o){var r=t.attr("id");return r?e+"."+t.attr("id")+"."+n+(o?"."+o:""):void console.error("Table has no id",t)}var e="ngColumnResize";this.loadTableSizes=function(e,o,r){var i=n(e,o,r),a=t.localStorage.getItem(i);return JSON.parse(a)},this.saveTableSizes=function(e,o,r,i){var a=n(e,o,r);if(a){var s=JSON.stringify(i);t.localStorage.setItem(a,s)}},this.clearAll=function(){for(var n=[],o=0;o<t.localStorage.length;++o){var r=localStorage.key(o);r&&r.startsWith(e)&&n.push(r)}n.map(function(n){t.localStorage.removeItem(n)})},this.clearCurrent=function(e,o,r){var i=n(e,o,r);i&&t.localStorage.removeItem(i)}}]),angular.module("rzTable").factory("ResizerModel",[function(){function t(t,n,e){this.table=t,this.columns=n,this.container=e,this.handleColumns=this.handles(),this.ctrlColumns=this.ctrlColumns()}return t.prototype.setup=function(){$(this.container).css({overflowX:"hidden"})},t.prototype.onTableReady=function(){$(this.table).outerWidth("100%")},t.prototype.getMinWidth=function(t){return parseInt($(t).css("min-width"))||0},t.prototype.handles=function(){return this.columns},t.prototype.ctrlColumns=function(){return this.handleColumns},t.prototype.onFirstDrag=function(){$(this.ctrlColumns).each(function(t,n){$(n).width($(n).width())})},t.prototype.handleMiddleware=function(t,n){return n},t.prototype.restrict=function(t){return!1},t.prototype.calculate=function(t,n){return t+n},t.prototype.onEndDrag=function(){},t.prototype.saveAttr=function(t){return $(t).outerWidth()},t}]),angular.module("rzTable").factory("BasicResizer",["ResizerModel",function(t){function n(n,i,a){t.call(this,n,i,a),this.ctrlColumns=this.columns,this.intervene={selector:e,calculator:o,restrict:r}}function e(t){return $(t).next()}function o(t,n){return t-n}function r(t){return t<25}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflowX:"hidden"}),$(this.table).css({width:"100%"})},n.prototype.handles=function(){return $(this.columns).not(":last")},n.prototype.onFirstDrag=function(){this.onEndDrag()},n.prototype.onEndDrag=function(){var t=$(this.table).outerWidth(),n=[];$(this.columns).each(function(e,o){var r=$(o).outerWidth(),i=r/t*100+"%";n.push(function(){$(o).css({width:i})})}),n.map(function(t){t()})},n.prototype.saveAttr=function(t){return $(t)[0].style.width},n}]),angular.module("rzTable").factory("FixedResizer",["ResizerModel",function(t){function n(n,e,o){t.call(this,n,e,o),this.fixedColumn=$(n).find("th").first(),this.bound=!1}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflowX:"hidden"}),$(this.table).css({width:"100%"}),$(this.columns).first().css({width:"auto"})},n.prototype.handles=function(){return $(this.columns).not(":last")},n.prototype.ctrlColumns=function(){return $(this.columns).not(":first")},n.prototype.onFirstDrag=function(){$(this.ctrlColumns).each(function(t,n){$(n).width($(n).width())})},n.prototype.handleMiddleware=function(t,n){return $(n).next()},n.prototype.restrict=function(t,n){return this.bound&&this.bound<n?(this.bound=!1,!1):!!(this.bound&&this.bound>n)||(this.fixedColumn.width()<=this.getMinWidth(this.fixedColumn)?(this.bound=n,$(this.fixedColumn).width(this.minWidth),!0):void 0)},n.prototype.onEndDrag=function(){this.bound=!1},n.prototype.calculate=function(t,n){return t-n},n}]),angular.module("rzTable").factory("OverflowResizer",["ResizerModel",function(t){function n(n,e,o){t.call(this,n,e,o)}return n.prototype=Object.create(t.prototype),n.prototype.setup=function(){$(this.container).css({overflow:"auto"})},n.prototype.onTableReady=function(){$(this.table).width(1)},n}]); |
@@ -12,3 +12,4 @@ /*jshint esversion: 6 */ | ||
| "scripts/angular-table-resize.js", | ||
| "scripts/directives/resizeable-directive.js", | ||
| "scripts/directives/resize-table-directive.js", | ||
| "scripts/directives/resize-col-directive.js", | ||
| "scripts/services/resize-storage-service.js", | ||
@@ -22,3 +23,3 @@ "scripts/services/resizer-factory.js", | ||
| const cssFiles = [ | ||
| "css/table-resize.css" | ||
| "css/angular-table-resize.css" | ||
| ] | ||
@@ -25,0 +26,0 @@ |
@@ -0,0 +0,0 @@ // Karma configuration |
| { | ||
| "name": "angular-table-resize", | ||
| "version": "1.0.14", | ||
| "version": "2.0.0", | ||
| "description": "An AngularJS module for resizing table columns!", | ||
@@ -5,0 +5,0 @@ "main": "./dist/angular-table-resize.js", |
110
README.md
@@ -17,6 +17,6 @@ # angular-table-resize | ||
| ## Setup | ||
| ## Quick Setup | ||
| #### Link style sheets | ||
| ```html | ||
| <link rel="stylesheet" href="/angular-table-resize.min.css"> | ||
| <link rel="stylesheet" href="angular-table-resize.css"> | ||
| ``` | ||
@@ -26,34 +26,63 @@ | ||
| ```html | ||
| <script src="/jquery/dist/jquery.min.js"></script> | ||
| <script src="/angular/angular.js"></script> | ||
| <script src="jquery.js"></script> | ||
| <script src="angular.js"></script> | ||
| ``` | ||
| #### Import the Angular module | ||
| #### Import the module | ||
| ```html | ||
| <script src="/angular-table-resize.min.js"></script> | ||
| <script src="angular-table-resize.js"></script> | ||
| ``` | ||
| ## Use | ||
| Make sure your app imports the module | ||
| #### Install the module | ||
| Add the module to your application | ||
| ```javascript | ||
| angular.module('myApplication', ['ngTableResize']); | ||
| angular.module('myApplication', ['rzTable']); | ||
| ``` | ||
| On a HTML table tag put the **resizeable** directive | ||
| On a HTML table tag put the `rz-table` directive | ||
| ```html | ||
| <table resizeable mode="resizeMode" id="myTable"> | ||
| ... | ||
| <table rz-table>...</table> | ||
| ``` | ||
| That wasn't so hard was it now? | ||
| ## Attributes | ||
| * #### `rz-mode` | ||
| Changes the resizing mode of the module (see [resizing modes](#resizing-modes)). Two-way-binding to a string, that is the name of the resizer you want to use. | ||
| * #### `rz-save` | ||
| Two-way-binding to boolean variable. Whether or not to save the column sizes in local storage (see [local storage](#local-storage)). Default is `true`. | ||
| * #### `rz-options` | ||
| Two-way-binding to an object literal with optional/additional options (see [options](#options)) | ||
| * #### `rz-model` | ||
| Two-way-binding to a variable on the controller scope. The variable will be overwritten with an object literal, where you can access utility functions (see [utilities](#utilities)). | ||
| * #### `rz-profile` | ||
| Two-way-binding to a string which is a unique identifier for the currently active profile. Default is the default profile (the empty string). | ||
| * #### `rz-container` | ||
| A string which is the query selector for the container of the table. Default is the parent element of the table. | ||
| ## Local Storage | ||
| The module automatically saves the current column widths to *localStorage*. This however requires that you supply your `<table>` an *id* and all of your table headers (`<th>`) with an *id* as well. Otherwise you should set [`rz-save`](#rz-save) to false. For dynamic tables you should use the `rz-col` directive (see [dynamic tables](#dynamic-tables)). | ||
| ## Dynamic Tables | ||
| If you are generating your columns dynamically (e.g. using `ng-repeat`) you should instead of using an *id* for your table headers (`<th>`) use the `rz-col` directive. Remember that your table must still have an *id* for [local storage](#local-storage) to work. | ||
| #### Example: | ||
| ```html | ||
| <table rz-table id="myTable"> | ||
| <thead> | ||
| <th ng-repeat="col in columns" rz-col="col"></th> | ||
| </thead> | ||
| ... | ||
| </table> | ||
| ``` | ||
| The attribute **mode** references a variable on the controller, specifying the current resizing mode. | ||
| In the example above this variable could be | ||
| ```javascript | ||
| $scope.resizeMode = "BasicResizer" | ||
| ``` | ||
| #### Saving column sizes | ||
| The module automatically saves the current column width to *localStorage*. This however requires that you supply your **\<table\>** with an *id* and all of your table headers **\<th\>** with and *id* as well. | ||
| The `rz-col` directive is a two-way-binding to a string, which is the *id* for that column. | ||
| #### Resizing Modes | ||
| The resize mode can be set to any of these modes. Choose the one that works best for you. | ||
| ## Resizing Modes | ||
| The resize mode can be set to any of the following modes. You may also chose to allow the enduser to chose from the below by binding [`rz-mode`](#rz-mode) to a scope variable. Choose the one that works best for you in practice. | ||
@@ -66,4 +95,41 @@ | Resize Mode | Description | | ||
| N.B. You can implement your own resizer model to use with the module. Instructions coming soon. | ||
| ## Custom Stylesheets | ||
| If you want to use your own stylesheets in favor of the minimalistic [angular-table-resize.css](dist/angular-table-resize.css) provided by the module you may do so. You can style the existing classes, or you can overwrite the default classnames (see [`tableClass`](#tableclass-string), [`handleClass`](#handleclass-string) and [`handleClassActive`](#handleclassactive-string)). You must keep in mind that the module works best with tables which has the following styles set for the `<table>` element: | ||
| ```css | ||
| table-layout: fixed; | ||
| border-collapse: collapse; | ||
| ``` | ||
| ## Utilities | ||
| * #### `reset()` | ||
| Resets the currently active resizing profile and deletes it from local storage. Column sizes will be reset to default. | ||
| * #### `clearStorage()` | ||
| Clears all profiles saved in local storage - but does not change/reset the current column widths. You may optionally call `reset()` afterwards if you wish to do so. | ||
| * #### `clearStorageActive()` | ||
| Clears the currently active profile from local storage - but does not change/reset the current column widths. Use `reset()` instead if you want to do so. | ||
| * #### `update()` | ||
| Re-initializes the module. Be aware that the module will update itself automatically when you change any of the [attributes](#attributes) of the module. You should have a good reason to use this function. | ||
| ## Options | ||
| You may supply optional/additional options to the module for your personalization: | ||
| * #### `onResizeStarted`: *`function(column)`* | ||
| Callbacks functio. Called when a column has been started resizing | ||
| * #### `onResizeEnded`: *`function(column)`* | ||
| Callback function. Called when resizing a column has ended | ||
| * #### `onResizeInProgress`: *`function(column, newWidth, diffX)`* | ||
| Callback function. Called for every tick in the resizing process. | ||
| * #### `tableClass`: *`string`* | ||
| The class appended to the table for styling purposes. Default is `rz-table` (from [angular-table-resize.css](dist/angular-table-resize.css)). | ||
| * #### `handleClass`: *`string`* | ||
| The class appended to handles for styling purposes. Default is `rz-handle` (from [angular-table-resize.css](dist/angular-table-resize.css)). | ||
| * #### `handleClassActive`: *`string`* | ||
| The class appended to the handle, when a column is being resized. Default is `rz-handle-active` (from [angular-table-resize.css](dist/angular-table-resize.css)). |
@@ -1,1 +0,1 @@ | ||
| angular.module("ngTableResize", []); | ||
| angular.module("rzTable", []); |
@@ -1,2 +0,2 @@ | ||
| angular.module("ngTableResize").factory("BasicResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("BasicResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -3,0 +3,0 @@ function BasicResizer(table, columns, container) { |
@@ -1,2 +0,2 @@ | ||
| angular.module("ngTableResize").factory("FixedResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("FixedResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -3,0 +3,0 @@ function FixedResizer(table, columns, container) { |
@@ -1,2 +0,2 @@ | ||
| angular.module("ngTableResize").factory("OverflowResizer", ["ResizerModel", function(ResizerModel) { | ||
| angular.module("rzTable").factory("OverflowResizer", ["ResizerModel", function(ResizerModel) { | ||
@@ -3,0 +3,0 @@ function OverflowResizer(table, columns, container) { |
@@ -1,2 +0,2 @@ | ||
| angular.module("ngTableResize").service('resizeStorage', ['$window', function($window) { | ||
| angular.module("rzTable").service('resizeStorage', ['$window', function($window) { | ||
@@ -18,2 +18,20 @@ var prefix = "ngColumnResize"; | ||
| this.clearAll = function() { | ||
| var keys = [] | ||
| for (var i = 0; i < $window.localStorage.length; ++i) { | ||
| var key = localStorage.key(i) | ||
| if (key && key.startsWith(prefix)) { | ||
| keys.push(key) | ||
| } | ||
| } | ||
| keys.map(function(k) { $window.localStorage.removeItem(k) }) | ||
| } | ||
| this.clearCurrent = function(table, mode, profile) { | ||
| var key = getStorageKey(table, mode, profile); | ||
| if (key) { | ||
| $window.localStorage.removeItem(key) | ||
| } | ||
| } | ||
| function getStorageKey(table, mode, profile) { | ||
@@ -20,0 +38,0 @@ var id = table.attr('id'); |
@@ -1,2 +0,2 @@ | ||
| angular.module("ngTableResize").factory("ResizerModel", [function() { | ||
| angular.module("rzTable").factory("ResizerModel", [function() { | ||
@@ -3,0 +3,0 @@ function ResizerModel(table, columns, container){ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.04%
80672
- Lines of code
- increased by8.95%
1522
- Number of lines in readme file
- increased by98.51%
133
No dependency changes