backgrid-columnmanager - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

config/webpack.js

@@ -27,2 +27,3 @@ "use strict";
 			// require("backbone") is external and available on the global var Backbone
+			"jquery": "jQuery",
 			"backbone": "Backbone",
@@ -47,3 +48,3 @@ "underscore": "_",
     resolve: {
-      extensions: ["",".js"],
+      extensions: ["", ".js"],
       modulesDirectories: ["node_modules"]
@@ -50,0 +51,0 @@ }

example/js/Backgrid.ColumnManager.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("_"), require("Backbone"), require("Backgrid"));
+		module.exports = factory(require("_"), require("jQuery"), require("Backbone"), require("Backgrid"));
 	else if(typeof define === 'function' && define.amd)
-		define(["_", "Backbone", "Backgrid"], factory);
+		define(["_", "jQuery", "Backbone", "Backgrid"], factory);
 	else if(typeof exports === 'object')
-		exports["Backgrid.Extension.ColumnManager"] = factory(require("_"), require("Backbone"), require("Backgrid"));
+		exports["Backgrid.Extension.ColumnManager"] = factory(require("_"), require("jQuery"), require("Backbone"), require("Backgrid"));
 	else
-		root["Backgrid.Extension.ColumnManager"] = factory(root["_"], root["Backbone"], root["Backgrid"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
+		root["Backgrid.Extension.ColumnManager"] = factory(root["_"], root["jQuery"], root["Backbone"], root["Backgrid"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -67,4 +67,5 @@ /******/ 	// The module cache
 	var _ = __webpack_require__(1);
-	var Backbone = __webpack_require__(2);
-	var Backgrid = __webpack_require__(3);
+	var $ = __webpack_require__(2);
+	var Backbone = __webpack_require__(3);
+	var Backgrid = __webpack_require__(4);
 
@@ -110,8 +111,20 @@ /**
 	Backgrid.Extension.ColumnManager.prototype.setInitialColumnVisibility = function() {
+		var self = this;
 		// Loop columns and set renderable property according to settings
-		var initialColumnsVisible = this.options.initialColumnsVisible;
+		var initialColumnsVisible = self.options.initialColumnsVisible;
 
-		if (this.columns instanceof Backgrid.Columns && initialColumnsVisible) {
-			this.columns.each(function(col, index) {
-				col.set("renderable", index < initialColumnsVisible || col.get("alwaysVisible"));
+		if (self.columns instanceof Backgrid.Columns && initialColumnsVisible) {
+			self.columns.each(function(col, index) {
+				col.set("renderable", (col.get("alwaysVisible")) ? true : index < initialColumnsVisible);
+
+				// Look for header cell
+				if (col.get("headerCell") === Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+					col.set("headerCell", col.get("headerCell").extend({
+						columnManager: self
+					}));
+				}
+
+				if (col.get("headerCell") instanceof Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+					col.get("headerCell").columnManager = self;
+				}
 			});
@@ -353,9 +366,13 @@ }
 				// Align right by default
-				offset = $button.position().left + $button.outerWidth() - this.$el.outerWidth();
+				offset = $button.offset().left + $button.outerWidth() - this.$el.outerWidth();
 				this.$el.css("left", offset + "px");
 			}
 			else {
-				offset = $button.position().left;
+				offset = $button.offset().left;
 				this.$el.css("left", offset + "px");
 			}
+
+			// Height position
+			var offsetHeight = $button.offset().top + $button.outerHeight();
+			this.$el.css("top", offsetHeight + "px");
 		},
@@ -379,3 +396,3 @@
 	 * @extends Backbone.View
-	*/
+	 */
 	Backgrid.Extension.ColumnManagerVisibilityControl = Backbone.View.extend({
@@ -513,3 +530,3 @@ /**
 			this.view.render(); // tell the inner view to render itself
-			this.$el.append(this.view.el);
+			$(document.body).append(this.view.el);
 			return this;
@@ -570,5 +587,2 @@ },
 			this.view.trigger("dropdown:opened");
-
-			// Set position of child view
-			this.setDropdownPosition();
 		},
@@ -623,10 +637,2 @@
 			clearTimeout(this.deferCloseTimeout);
-		},
-
-		/**
-		 * @method setDropdownPosition
-		 * @private
-		 */
-		setDropdownPosition: function() {
-			this.view.$el.css("top", this.$el.height());
 		}
@@ -647,3 +653,3 @@ });
 			// Add class
-			this.$el.addClass("columnVisibility");
+			this.$el.addClass(this.column.get("name"));
 		},
@@ -655,3 +661,3 @@ render: function() {
 			var colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl({
-				columnManager: this.column.collection.columnManager
+				columnManager: this.columnManager
 			});
@@ -686,2 +692,8 @@
 
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+
 /***/ }
@@ -688,0 +700,0 @@ /******/ ])

lib/Backgrid.ColumnManager.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("_"), require("Backbone"), require("Backgrid"));
+		module.exports = factory(require("_"), require("jQuery"), require("Backbone"), require("Backgrid"));
 	else if(typeof define === 'function' && define.amd)
-		define(["_", "Backbone", "Backgrid"], factory);
+		define(["_", "jQuery", "Backbone", "Backgrid"], factory);
 	else if(typeof exports === 'object')
-		exports["Backgrid.Extension.ColumnManager"] = factory(require("_"), require("Backbone"), require("Backgrid"));
+		exports["Backgrid.Extension.ColumnManager"] = factory(require("_"), require("jQuery"), require("Backbone"), require("Backgrid"));
 	else
-		root["Backgrid.Extension.ColumnManager"] = factory(root["_"], root["Backbone"], root["Backgrid"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
+		root["Backgrid.Extension.ColumnManager"] = factory(root["_"], root["jQuery"], root["Backbone"], root["Backgrid"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -67,4 +67,5 @@ /******/ 	// The module cache
 	var _ = __webpack_require__(1);
-	var Backbone = __webpack_require__(2);
-	var Backgrid = __webpack_require__(3);
+	var $ = __webpack_require__(2);
+	var Backbone = __webpack_require__(3);
+	var Backgrid = __webpack_require__(4);
 
@@ -110,8 +111,20 @@ /**
 	Backgrid.Extension.ColumnManager.prototype.setInitialColumnVisibility = function() {
+		var self = this;
 		// Loop columns and set renderable property according to settings
-		var initialColumnsVisible = this.options.initialColumnsVisible;
+		var initialColumnsVisible = self.options.initialColumnsVisible;
 
-		if (this.columns instanceof Backgrid.Columns && initialColumnsVisible) {
-			this.columns.each(function(col, index) {
-				col.set("renderable", index < initialColumnsVisible || col.get("alwaysVisible"));
+		if (self.columns instanceof Backgrid.Columns && initialColumnsVisible) {
+			self.columns.each(function(col, index) {
+				col.set("renderable", (col.get("alwaysVisible")) ? true : index < initialColumnsVisible);
+
+				// Look for header cell
+				if (col.get("headerCell") === Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+					col.set("headerCell", col.get("headerCell").extend({
+						columnManager: self
+					}));
+				}
+
+				if (col.get("headerCell") instanceof Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+					col.get("headerCell").columnManager = self;
+				}
 			});
@@ -353,9 +366,13 @@ }
 				// Align right by default
-				offset = $button.position().left + $button.outerWidth() - this.$el.outerWidth();
+				offset = $button.offset().left + $button.outerWidth() - this.$el.outerWidth();
 				this.$el.css("left", offset + "px");
 			}
 			else {
-				offset = $button.position().left;
+				offset = $button.offset().left;
 				this.$el.css("left", offset + "px");
 			}
+
+			// Height position
+			var offsetHeight = $button.offset().top + $button.outerHeight();
+			this.$el.css("top", offsetHeight + "px");
 		},
@@ -379,3 +396,3 @@
 	 * @extends Backbone.View
-	*/
+	 */
 	Backgrid.Extension.ColumnManagerVisibilityControl = Backbone.View.extend({
@@ -513,3 +530,3 @@ /**
 			this.view.render(); // tell the inner view to render itself
-			this.$el.append(this.view.el);
+			$(document.body).append(this.view.el);
 			return this;
@@ -570,5 +587,2 @@ },
 			this.view.trigger("dropdown:opened");
-
-			// Set position of child view
-			this.setDropdownPosition();
 		},
@@ -623,10 +637,2 @@
 			clearTimeout(this.deferCloseTimeout);
-		},
-
-		/**
-		 * @method setDropdownPosition
-		 * @private
-		 */
-		setDropdownPosition: function() {
-			this.view.$el.css("top", this.$el.height());
 		}
@@ -647,3 +653,3 @@ });
 			// Add class
-			this.$el.addClass("columnVisibility");
+			this.$el.addClass(this.column.get("name"));
 		},
@@ -655,3 +661,3 @@ render: function() {
 			var colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl({
-				columnManager: this.column.collection.columnManager
+				columnManager: this.columnManager
 			});
@@ -686,2 +692,8 @@
 
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+
 /***/ }
@@ -688,0 +700,0 @@ /******/ ])

lib/Backgrid.ColumnManager.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("Backbone"),require("Backgrid"),require("_")):"function"==typeof define&&define.amd?define(["Backbone","Backgrid","_"],t):"object"==typeof exports?exports["Backgrid.Extension.ColumnManager"]=t(require("Backbone"),require("Backgrid"),require("_")):e["Backgrid.Extension.ColumnManager"]=t(e.Backbone,e.Backgrid,e._)}(this,function(e,t,i){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";var n=i(3),o=i(1),s=i(2);s.Extension.ColumnManager=function(e,t){var i={initialColumnsVisible:null};this.options=n.extend({},i,t),e instanceof s.Columns?(this.columns=e,e.columnManager=this,this.setInitialColumnVisibility()):console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns")},s.Extension.ColumnManager.prototype.setInitialColumnVisibility=function(){var e=this.options.initialColumnsVisible;this.columns instanceof s.Columns&&e&&this.columns.each(function(t,i){t.set("renderable",e>i||t.get("alwaysVisible"))})},s.Extension.ColumnManager.prototype.getColumn=function(e){return(n.isNumber(e)||n.isString(e))&&(e=this.columns.get(e)),e instanceof s.Column?e:!1},s.Extension.ColumnManager.prototype.hideColumn=function(e){var t=this.getColumn(e);t&&t.set("renderable",!1)},s.Extension.ColumnManager.prototype.showColumn=function(e){var t=this.getColumn(e);t&&t.set("renderable",!0)},s.Extension.ColumnManager.prototype.toggleColumnVisibility=function(e){var t=this.getColumn(e);t&&(t.get("renderable")?this.hideColumn(t):this.showColumn(t))},s.Extension.ColumnManager.prototype.getColumnCollection=function(){return this.columns};var l=o.View.extend({className:"columnmanager-dropdown-item",tagName:"li",initialize:function(e){this.columnManager=e.columnManager,this.column=e.column,this.template=e.template,n.bindAll(this,"render","toggleVisibility"),this.column.on("change:renderable",this.render,this),this.el.addEventListener("click",this.toggleVisibility,!0)},render:function(){return this.$el.empty(),this.$el.append(this.template({label:this.column.get("label")})),this.column.get("renderable")?this.$el.addClass(this.column.get("renderable")?"visible":null):this.$el.removeClass("visible"),this},toggleVisibility:function(e){e&&this.stopPropagation(e),this.columnManager.toggleColumnVisibility(this.column)},stopPropagation:function(e){e.stopPropagation(),e.stopImmediatePropagation(),e.preventDefault()}}),r=o.View.extend({className:"columnmanager-dropdown-container",initialize:function(e){this.options=e,this.columnManager=e.columnManager,this.ItemView=e.DropdownItemView instanceof o.View?e.DropdownItemView:l,this.button=e.button,this.on("dropdown:opened",this.open,this),this.on("dropdown:closed",this.close,this),this.columnManager.columns.on("add remove",this.render,this)},render:function(){var e=this;return e.$el.empty(),this.columnManager.columns.each(function(t){t.get("alwaysVisible")||e.$el.append(new e.ItemView({column:t,columnManager:e.columnManager,template:e.options.dropdownItemTemplate}).render().el)}),this},open:function(){this.$el.addClass("open");var e,t=this.$el.parent().find(".dropdown-button").first();if("auto"===this.options.align){var i=document.body.clientWidth||document.body.clientWidth;e=t.offset().left+this.$el.outerWidth()>i?"left":"right"}else e="left"===this.options.align||"right"===this.options.align?"right"===this.options.align?"right":"left":"right";var n;"left"===e?(n=t.position().left+t.outerWidth()-this.$el.outerWidth(),this.$el.css("left",n+"px")):(n=t.position().left,this.$el.css("left",n+"px"))},close:function(){this.$el.removeClass("open")}});s.Extension.ColumnManagerVisibilityControl=o.View.extend({tagName:"div",className:"columnmanager-visibilitycontrol",defaultEvents:{click:"stopPropagation"},defaultOpts:{width:null,closeOnEsc:!0,closeOnClick:!0,openOnInit:!1,columnManager:null,buttonTemplate:n.template("<button class='dropdown-button'>...</button>"),DropdownView:r,dropdownAlign:"auto",DropdownItemView:l,dropdownItemTemplate:n.template("<span class='indicator'></span><span class='column-label'><%= label %></span>")},initialize:function(e){this.options=n.extend({},this.defaultOpts,e),this.events=n.extend({},this.defaultEvents,this.events||{}),this.columnManager=e.columnManager,!this.columnManager instanceof s.Extension.ColumnManager&&console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns"),n.bindAll(this,"deferClose","stopDeferClose","closeOnEsc","toggle","render"),document.body.addEventListener("click",this.deferClose,!0),this.el.addEventListener("click",this.stopDeferClose,!0),this.options.closeOnEsc&&document.body.addEventListener("keyup",this.closeOnEsc,!1),this.el.addEventListener("click",this.toggle,!1),this.setup(),this.view.on("dropdown:close",this.close,this),this.view.on("dropdown:open",this.open,this)},delayStart:function(){clearTimeout(this.closeTimeout),this.delayTimeout=setTimeout(this.open.bind(this),this.options.delay)},delayEnd:function(){clearTimeout(this.delayTimeout),this.closeTimeout=setTimeout(this.close.bind(this),300)},setup:function(){this.options.width&&this.$el.width(this.options.width+"px");var e={columnManager:this.columnManager,DropdownItemView:this.options.DropdownItemView,dropdownItemTemplate:this.options.dropdownItemTemplate,align:this.options.dropdownAlign};this.view=this.options.DropdownView instanceof o.View?new this.options.DropdownView(e):new r(e)},render:function(){return this.$el.empty(),this.$el.append(this.options.buttonTemplate()),this.view.render(),this.$el.append(this.view.el),this},stopPropagation:function(e){e.stopPropagation(),e.stopImmediatePropagation(),e.preventDefault()},toggle:function(e){this.isOpen!==!0?this.open(e):this.close(e)},open:function(e){clearTimeout(this.closeTimeout),clearTimeout(this.deferCloseTimeout),e&&e.stopPropagation(),this.isOpen||(this.isOpen=!0,this.$el.addClass("open"),this.trigger("dropdown:opened"),this.view.trigger("dropdown:opened"),this.setDropdownPosition())},close:function(){this.isOpen&&(this.isOpen=!1,this.$el.removeClass("open"),this.trigger("dropdown:closed"),this.view.trigger("dropdown:closed"))},closeOnEsc:function(e){27===e.which&&this.deferClose()},deferClose:function(){this.deferCloseTimeout=setTimeout(this.close.bind(this),0)},stopDeferClose:function(){clearTimeout(this.deferCloseTimeout)},setDropdownPosition:function(){this.view.$el.css("top",this.$el.height())}}),s.Extension.ColumnManager.ColumnVisibilityHeaderCell=s.HeaderCell.extend({initialize:function(){s.HeaderCell.prototype.initialize.apply(this,arguments),this.$el.addClass("columnVisibility")},render:function(){this.$el.empty();var e=new s.Extension.ColumnManagerVisibilityControl({columnManager:this.column.collection.columnManager});return this.$el.html(e.render().el),this.delegateEvents(),this}})},function(t){t.exports=e},function(e){e.exports=t},function(e){e.exports=i}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("Backbone"),require("Backgrid"),require("_"),require("jQuery")):"function"==typeof define&&define.amd?define(["Backbone","Backgrid","_","jQuery"],t):"object"==typeof exports?exports["Backgrid.Extension.ColumnManager"]=t(require("Backbone"),require("Backgrid"),require("_"),require("jQuery")):e["Backgrid.Extension.ColumnManager"]=t(e.Backbone,e.Backgrid,e._,e.jQuery)}(this,function(e,t,n,i){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var i=n(3),o=n(4),s=n(1),l=n(2);l.Extension.ColumnManager=function(e,t){var n={initialColumnsVisible:null};this.options=i.extend({},n,t),e instanceof l.Columns?(this.columns=e,e.columnManager=this,this.setInitialColumnVisibility()):console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns")},l.Extension.ColumnManager.prototype.setInitialColumnVisibility=function(){var e=this,t=e.options.initialColumnsVisible;e.columns instanceof l.Columns&&t&&e.columns.each(function(n,i){n.set("renderable",n.get("alwaysVisible")?!0:t>i),n.get("headerCell")===l.Extension.ColumnManager.ColumnVisibilityHeaderCell&&n.set("headerCell",n.get("headerCell").extend({columnManager:e})),n.get("headerCell")instanceof l.Extension.ColumnManager.ColumnVisibilityHeaderCell&&(n.get("headerCell").columnManager=e)})},l.Extension.ColumnManager.prototype.getColumn=function(e){return(i.isNumber(e)||i.isString(e))&&(e=this.columns.get(e)),e instanceof l.Column?e:!1},l.Extension.ColumnManager.prototype.hideColumn=function(e){var t=this.getColumn(e);t&&t.set("renderable",!1)},l.Extension.ColumnManager.prototype.showColumn=function(e){var t=this.getColumn(e);t&&t.set("renderable",!0)},l.Extension.ColumnManager.prototype.toggleColumnVisibility=function(e){var t=this.getColumn(e);t&&(t.get("renderable")?this.hideColumn(t):this.showColumn(t))},l.Extension.ColumnManager.prototype.getColumnCollection=function(){return this.columns};var r=s.View.extend({className:"columnmanager-dropdown-item",tagName:"li",initialize:function(e){this.columnManager=e.columnManager,this.column=e.column,this.template=e.template,i.bindAll(this,"render","toggleVisibility"),this.column.on("change:renderable",this.render,this),this.el.addEventListener("click",this.toggleVisibility,!0)},render:function(){return this.$el.empty(),this.$el.append(this.template({label:this.column.get("label")})),this.column.get("renderable")?this.$el.addClass(this.column.get("renderable")?"visible":null):this.$el.removeClass("visible"),this},toggleVisibility:function(e){e&&this.stopPropagation(e),this.columnManager.toggleColumnVisibility(this.column)},stopPropagation:function(e){e.stopPropagation(),e.stopImmediatePropagation(),e.preventDefault()}}),a=s.View.extend({className:"columnmanager-dropdown-container",initialize:function(e){this.options=e,this.columnManager=e.columnManager,this.ItemView=e.DropdownItemView instanceof s.View?e.DropdownItemView:r,this.button=e.button,this.on("dropdown:opened",this.open,this),this.on("dropdown:closed",this.close,this),this.columnManager.columns.on("add remove",this.render,this)},render:function(){var e=this;return e.$el.empty(),this.columnManager.columns.each(function(t){t.get("alwaysVisible")||e.$el.append(new e.ItemView({column:t,columnManager:e.columnManager,template:e.options.dropdownItemTemplate}).render().el)}),this},open:function(){this.$el.addClass("open");var e,t=this.$el.parent().find(".dropdown-button").first();if("auto"===this.options.align){var n=document.body.clientWidth||document.body.clientWidth;e=t.offset().left+this.$el.outerWidth()>n?"left":"right"}else e="left"===this.options.align||"right"===this.options.align?"right"===this.options.align?"right":"left":"right";var i;"left"===e?(i=t.offset().left+t.outerWidth()-this.$el.outerWidth(),this.$el.css("left",i+"px")):(i=t.offset().left,this.$el.css("left",i+"px"));var o=t.offset().top+t.outerHeight();this.$el.css("top",o+"px")},close:function(){this.$el.removeClass("open")}});l.Extension.ColumnManagerVisibilityControl=s.View.extend({tagName:"div",className:"columnmanager-visibilitycontrol",defaultEvents:{click:"stopPropagation"},defaultOpts:{width:null,closeOnEsc:!0,closeOnClick:!0,openOnInit:!1,columnManager:null,buttonTemplate:i.template("<button class='dropdown-button'>...</button>"),DropdownView:a,dropdownAlign:"auto",DropdownItemView:r,dropdownItemTemplate:i.template("<span class='indicator'></span><span class='column-label'><%= label %></span>")},initialize:function(e){this.options=i.extend({},this.defaultOpts,e),this.events=i.extend({},this.defaultEvents,this.events||{}),this.columnManager=e.columnManager,!this.columnManager instanceof l.Extension.ColumnManager&&console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns"),i.bindAll(this,"deferClose","stopDeferClose","closeOnEsc","toggle","render"),document.body.addEventListener("click",this.deferClose,!0),this.el.addEventListener("click",this.stopDeferClose,!0),this.options.closeOnEsc&&document.body.addEventListener("keyup",this.closeOnEsc,!1),this.el.addEventListener("click",this.toggle,!1),this.setup(),this.view.on("dropdown:close",this.close,this),this.view.on("dropdown:open",this.open,this)},delayStart:function(){clearTimeout(this.closeTimeout),this.delayTimeout=setTimeout(this.open.bind(this),this.options.delay)},delayEnd:function(){clearTimeout(this.delayTimeout),this.closeTimeout=setTimeout(this.close.bind(this),300)},setup:function(){this.options.width&&this.$el.width(this.options.width+"px");var e={columnManager:this.columnManager,DropdownItemView:this.options.DropdownItemView,dropdownItemTemplate:this.options.dropdownItemTemplate,align:this.options.dropdownAlign};this.view=this.options.DropdownView instanceof s.View?new this.options.DropdownView(e):new a(e)},render:function(){return this.$el.empty(),this.$el.append(this.options.buttonTemplate()),this.view.render(),o(document.body).append(this.view.el),this},stopPropagation:function(e){e.stopPropagation(),e.stopImmediatePropagation(),e.preventDefault()},toggle:function(e){this.isOpen!==!0?this.open(e):this.close(e)},open:function(e){clearTimeout(this.closeTimeout),clearTimeout(this.deferCloseTimeout),e&&e.stopPropagation(),this.isOpen||(this.isOpen=!0,this.$el.addClass("open"),this.trigger("dropdown:opened"),this.view.trigger("dropdown:opened"))},close:function(){this.isOpen&&(this.isOpen=!1,this.$el.removeClass("open"),this.trigger("dropdown:closed"),this.view.trigger("dropdown:closed"))},closeOnEsc:function(e){27===e.which&&this.deferClose()},deferClose:function(){this.deferCloseTimeout=setTimeout(this.close.bind(this),0)},stopDeferClose:function(){clearTimeout(this.deferCloseTimeout)}}),l.Extension.ColumnManager.ColumnVisibilityHeaderCell=l.HeaderCell.extend({initialize:function(){l.HeaderCell.prototype.initialize.apply(this,arguments),this.$el.addClass(this.column.get("name"))},render:function(){this.$el.empty();var e=new l.Extension.ColumnManagerVisibilityControl({columnManager:this.columnManager});return this.$el.html(e.render().el),this.delegateEvents(),this}})},function(t){t.exports=e},function(e){e.exports=t},function(e){e.exports=n},function(e){e.exports=i}])});

package.json

 {
   "name": "backgrid-columnmanager",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A backgrid column manager. Adds the ability to show/hide columns.",
@@ -5,0 +5,0 @@ "main": "lib/Backgrid.ColumnManager.js",

README.md

@@ -7,3 +7,3 @@ # Backgrid.ColumnManager
 ## Example usage
-```
+```javascript
 // Create column collection
@@ -10,0 +10,0 @@ var columns = new Backgrid.Columns([...]);

src/Backgrid.ColumnManager.js

@@ -11,2 +11,3 @@ "use strict";
 var _ = require("underscore");
+var $ = require("jquery");
 var Backbone = require("backbone");
@@ -54,8 +55,20 @@ var Backgrid = require("backgrid");
 Backgrid.Extension.ColumnManager.prototype.setInitialColumnVisibility = function() {
+	var self = this;
 	// Loop columns and set renderable property according to settings
-	var initialColumnsVisible = this.options.initialColumnsVisible;
+	var initialColumnsVisible = self.options.initialColumnsVisible;
 
-	if (this.columns instanceof Backgrid.Columns && initialColumnsVisible) {
-		this.columns.each(function(col, index) {
-			col.set("renderable", index < initialColumnsVisible || col.get("alwaysVisible"));
+	if (self.columns instanceof Backgrid.Columns && initialColumnsVisible) {
+		self.columns.each(function(col, index) {
+			col.set("renderable", (col.get("alwaysVisible")) ? true : index < initialColumnsVisible);
+
+			// Look for header cell
+			if (col.get("headerCell") === Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+				col.set("headerCell", col.get("headerCell").extend({
+					columnManager: self
+				}));
+			}
+
+			if (col.get("headerCell") instanceof Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) {
+				col.get("headerCell").columnManager = self;
+			}
 		});
@@ -297,9 +310,13 @@ }
 			// Align right by default
-			offset = $button.position().left + $button.outerWidth() - this.$el.outerWidth();
+			offset = $button.offset().left + $button.outerWidth() - this.$el.outerWidth();
 			this.$el.css("left", offset + "px");
 		}
 		else {
-			offset = $button.position().left;
+			offset = $button.offset().left;
 			this.$el.css("left", offset + "px");
 		}
+
+		// Height position
+		var offsetHeight = $button.offset().top + $button.outerHeight();
+		this.$el.css("top", offsetHeight + "px");
 	},
@@ -323,3 +340,3 @@
  * @extends Backbone.View
-*/
+ */
 Backgrid.Extension.ColumnManagerVisibilityControl = Backbone.View.extend({
@@ -457,3 +474,3 @@ /**
 		this.view.render(); // tell the inner view to render itself
-		this.$el.append(this.view.el);
+		$(document.body).append(this.view.el);
 		return this;
@@ -514,5 +531,2 @@ },
 		this.view.trigger("dropdown:opened");
-
-		// Set position of child view
-		this.setDropdownPosition();
 	},
@@ -567,10 +581,2 @@
 		clearTimeout(this.deferCloseTimeout);
-	},
-
-	/**
-	 * @method setDropdownPosition
-	 * @private
-	 */
-	setDropdownPosition: function() {
-		this.view.$el.css("top", this.$el.height());
 	}
@@ -591,3 +597,3 @@ });
 		// Add class
-		this.$el.addClass("columnVisibility");
+		this.$el.addClass(this.column.get("name"));
 	},
@@ -599,3 +605,3 @@ render: function() {
 		var colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl({
-			columnManager: this.column.collection.columnManager
+			columnManager: this.columnManager
 		});
@@ -602,0 +608,0 @@

No alert changes

Improved metrics

Total package byte prevSize

751027

increased by0.11%

Lines of code

7807

increased by0.31%

No dependency changes