Merge branch 'issue-1069-selectlist-display-none' of https://github.c…

…om/cormacmccarthy/fuelux into issue-1069-selectlist-display-none
ExactTarget · Feb 11, 2015 · bb2bc0c · bb2bc0c
2 parents 75b05bf + 2fc0e22
commit bb2bc0c
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 26 deletions.
diff --git a/dist/css/fuelux.css b/dist/css/fuelux.css
diff --git a/dist/css/fuelux.css.map b/dist/css/fuelux.css.map
diff --git a/dist/css/fuelux.min.css b/dist/css/fuelux.min.css
@@ -1,5 +1,5 @@
 /*!
- * Fuel UX EDGE - Built 2015/02/10, 3:42:38 PM 
+ * Fuel UX EDGE - Built 2015/02/11, 3:17:17 PM 
  * Previous release: v3.5.1 
  * Copyright 2012-2015 ExactTarget
  * Licensed under the BSD-3-Clause license (https://github.com/ExactTarget/fuelux/blob/master/LICENSE)
@@ -8,7 +8,6 @@
 @charset "UTF-8";
 .fuelux {
   /* TODO use bs base variables if possible */
-  /*# sourceMappingURL=fuelux.css.map */
 }
 .fuelux .clearfix {
   *zoom: 1;
@@ -610,6 +609,10 @@
   top: 0;
   float: left;
 }
+.fuelux .button-sizer .selectlist,
+.fuelux .selectlist-sizer .selectlist {
+  display: block !important;
+}
 .fuelux .button-sizer .dropdown-menu,
 .fuelux .selectlist-sizer .dropdown-menu {
   display: block;
@@ -2085,4 +2088,3 @@ END
   padding: 0;
   text-shadow: 0 1px #fff;
 }
-/*# sourceMappingURL=fuelux.css.map */
diff --git a/dist/fuelux.zip b/dist/fuelux.zip
diff --git a/dist/js/fuelux.js b/dist/js/fuelux.js
@@ -1,5 +1,5 @@
 /*!
- * Fuel UX EDGE - Built 2015/02/10, 3:42:38 PM
+ * Fuel UX EDGE - Built 2015/02/11, 3:17:17 PM
  * Previous release: v3.5.1
  * Copyright 2012-2015 ExactTarget
  * Licensed under the BSD-3-Clause license (https://github.com/ExactTarget/fuelux/blob/master/LICENSE)
@@ -2297,7 +2297,7 @@
 	( function( $ ) {
 
 		/*
-		 * Fuel UX Button Dropdown
+		 * Fuel UX Selectlist
 		 * https://github.com/ExactTarget/fuelux
 		 *
 		 * Copyright (c) 2014 ExactTarget
@@ -2410,6 +2410,10 @@
 					}
 				} );
 
+				if ( width <= 1 ) {
+					return;
+				}
+
 				this.$button.css( 'width', width );
 				this.$dropdownMenu.css( 'width', width );
 
@@ -5644,7 +5648,7 @@
 					return false;
 				},
 				renderItem: function( helpers ) {
-					renderRow.call( this, helpers.container, helpers.data, helpers.subset, helpers.index );
+					renderRow.call( this, helpers.container, helpers.subset, helpers.index );
 					return false;
 				},
 				after: function() {
@@ -5666,11 +5670,11 @@
 		}
 
 		//ADDITIONAL METHODS
-		function renderColumn( $row, data, rowIndex, columns, index ) {
-			var className = columns[ index ].className;
-			var content = data.items[ rowIndex ][ columns[ index ].property ];
+		function renderColumn( $row, rows, rowIndex, columns, columnIndex ) {
+			var className = columns[ columnIndex ].className;
+			var content = rows[ rowIndex ][ columns[ columnIndex ].property ];
 			var $col = $( '<td></td>' );
-			var width = columns[ index ]._auto_width;
+			var width = columns[ columnIndex ]._auto_width;
 
 			$col.addClass( ( ( className !== undefined ) ? className : '' ) ).append( content );
 			if ( width !== undefined ) {
@@ -5681,9 +5685,9 @@
 			if ( this.viewOptions.list_columnRendered ) {
 				this.viewOptions.list_columnRendered( {
 					container: $row,
-					columnAttr: columns[ index ].property,
+					columnAttr: columns[ columnIndex ].property,
 					item: $col,
-					rowData: data.items[ rowIndex ]
+					rowData: rows[ rowIndex ]
 				}, function() {} );
 			}
 		}
@@ -5763,15 +5767,15 @@
 			$tr.append( $header );
 		}
 
-		function renderRow( $tbody, data, subset, index ) {
+		function renderRow( $tbody, rows, index ) {
 			var $row = $( '<tr></tr>' );
 			var self = this;
 			var i, l;
 
 			if ( this.viewOptions.list_selectable ) {
 				$row.addClass( 'selectable' );
 				$row.attr( 'tabindex', 0 ); // allow items to be tabbed to / focused on
-				$row.data( 'item_data', subset[ index ] );
+				$row.data( 'item_data', rows[ index ] );
 				$row.on( 'click.fu.repeaterList', function() {
 					var $item = $( this );
 					if ( $item.hasClass( 'selected' ) ) {
@@ -5804,14 +5808,14 @@
 			$tbody.append( $row );
 
 			for ( i = 0, l = this.list_columns.length; i < l; i++ ) {
-				renderColumn.call( this, $row, data, index, this.list_columns, i );
+				renderColumn.call( this, $row, rows, index, this.list_columns, i );
 			}
 
 			if ( this.viewOptions.list_rowRendered ) {
 				this.viewOptions.list_rowRendered( {
 					container: $tbody,
 					item: $row,
-					rowData: data
+					rowData: rows[ index ]
 				}, function() {} );
 			}
 		}

diff --git a/dist/js/fuelux.min.js b/dist/js/fuelux.min.js
diff --git a/less/selectlist.less b/less/selectlist.less
@@ -18,7 +18,7 @@
 	}
 	.btn.dropdown-toggle {
 		text-align: left;
-		padding-right: 2 * @selectlist-horizontal-padding + @selectlist-caret-width;
+		padding-right: unit((2 * @selectlist-horizontal-padding + @selectlist-caret-width), px);
 
 		.caret {
 			.vertical-align();

diff --git a/test/fuelux-test.js b/test/fuelux-test.js
@@ -6,7 +6,7 @@ define(function(require){
 	var $ = require('jquery');
 
 	QUnit.start(); // starting qunit, or phantom js will have a problem
-	
+
 	// Needed for saucelab testing
 	var log = [];
 	var testName;

diff --git a/test/fuelux.html b/test/fuelux.html
@@ -5,6 +5,9 @@
 		<title>Fuel UX Test Suite</title>
 
 		<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen">
+		<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
+		<link href="../dist/css/fuelux.css" rel="stylesheet" type="text/css">
+
 
 		<script src="../bower_components/moment/min/moment-with-locales.js"></script>
 		<script src="../bower_components/qunit/qunit/qunit.js"></script>
@@ -61,7 +64,7 @@
 			})();
 		</script>
 	</head>
-	<body>
+	<body class="fuelux">
 		<h1 id="qunit-header">Fuel UX Test Suite</h1>
 		<h2 id="qunit-banner"></h2>
 		<div id="qunit-testrunner-toolbar"></div>

diff --git a/test/selectlist-test.js b/test/selectlist-test.js
@@ -9,6 +9,8 @@ define(function(require){
 	//var html = require('text!dev.html!strip');
 	html = $('<div>'+html+'</div>');
 
+	$('body').append(html);
+
 	require('bootstrap');
 	require('fuelux/selectlist');
 
@@ -23,6 +25,21 @@ define(function(require){
 		ok($selectlist.selectlist() === $selectlist, 'selectlist should be initialized');
 	});
 
+	test("should autosize correctly", function () {
+		var $selectlist8 = $('body').find('#MySelectlist8').selectlist();
+		var $selectlist9 = $('body').find('#MySelectlist9').selectlist();
+
+		// stop();
+		// setTimeout(function() {
+			ok(($selectlist8.width() >= 147 && $selectlist8.width() <= 152), 'selectlist autoresized');
+			ok($selectlist9.width() === 0, 'selectlist hidden, sized 0');
+
+			$selectlist9.removeClass('hidden');
+			ok(($selectlist9.width() >= 147 && $selectlist9.width() <= 152), 'selectlist was hidden, now shown, sized 149');
+		// 	start();
+		// }, 1000);
+	});
+
 	test("should set disabled state", function () {
 		var $selectlist = $(html).find('#MySelectlist').selectlist();
 		$selectlist.selectlist('disable');