Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
Merge branch 'issue-1069-selectlist-display-none' of https://github.c…
Browse files Browse the repository at this point in the history 
…om/cormacmccarthy/fuelux into issue-1069-selectlist-display-none
  • Loading branch information
@BenjaminNeilDavis
BenjaminNeilDavis committed Feb 12, 2015
2 parents 34a4f3f + 9c63b52 commit 59813bd
Show file tree
Hide file tree
Showing 13 changed files with 146 additions and 27 deletions.
9 changes: 6 additions & 3 deletions dist/css/fuelux.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/fuelux.css.map
View file

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions dist/css/fuelux.min.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Fuel UX EDGE - Built 2015/02/10, 3:42:38 PM
* Fuel UX EDGE - Built 2015/02/12, 1:54:42 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)
Expand All @@ -8,7 +8,6 @@
@charset "UTF-8";
.fuelux {
/* TODO use bs base variables if possible */
/*# sourceMappingURL=fuelux.css.map */
}
.fuelux .clearfix {
*zoom: 1;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -2085,4 +2088,3 @@ END
padding: 0;
text-shadow: 0 1px #fff;
}
/*# sourceMappingURL=fuelux.css.map */
Binary file modified dist/fuelux.zip
View file
Binary file not shown.
30 changes: 17 additions & 13 deletions dist/js/fuelux.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Fuel UX EDGE - Built 2015/02/10, 3:42:38 PM
* Fuel UX EDGE - Built 2015/02/12, 1:54:42 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)
Expand Down Expand Up @@ -2297,7 +2297,7 @@
( function( $ ) {

/*
* Fuel UX Button Dropdown
* Fuel UX Selectlist
* https://github.com/ExactTarget/fuelux
*
* Copyright (c) 2014 ExactTarget
Expand Down Expand Up @@ -2410,6 +2410,10 @@
}
} );

if ( width <= 1 ) {
return;
}

this.$button.css( 'width', width );
this.$dropdownMenu.css( 'width', width );

Expand Down Expand Up @@ -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() {
Expand All @@ -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 ) {
Expand All @@ -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() {} );
}
}
Expand Down Expand Up @@ -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' ) ) {
Expand Down Expand Up @@ -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() {} );
}
}
Expand Down
6 changes: 3 additions & 3 deletions dist/js/fuelux.min.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions js/selectlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,10 @@
}
});

if (width <= 1) {
return;
}

this.$button.css('width', width);
this.$dropdownMenu.css('width', width);

Expand Down
5 changes: 4 additions & 1 deletion less/misc.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,15 @@ input, textarea {
left:-9999px;
}

.button-sizer, .selectlist-sizer {
.button-sizer, .selectlist-sizer{
display: inline-block;
position: absolute;
visibility: hidden;
top: 0;
float: left;
.selectlist {
display: block !important;
}
.dropdown-menu {
display: block;
min-width: inherit;
Expand Down
2 changes: 1 addition & 1 deletion less/selectlist.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion test/fuelux-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion test/fuelux.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
69 changes: 69 additions & 0 deletions test/markup/selectlist-markup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,72 @@
</ul>
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div class="btn-group selectlist" id="MySelectlist7">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>

<div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="MySelectlist8">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>


<div class="btn-group selectlist hidden" data-resize="auto" data-initialize="selectlist" id="MySelectlist9">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>

<button type="button" class="btn btn-default" id="btnShowSelect4">show</button>
31 changes: 31 additions & 0 deletions test/selectlist-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -23,6 +25,35 @@ 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();
var minWidth;

//measure all children of selectlist to be tested (add them all to a span and see how wide the span is) and make sure the selectlist is actually big enough to fit that
var $textLengthTester = $('<span id="textLengthTester" style="display:inline-block;"></span>').appendTo('body');
$selectlist8.find('li').each(function(index, element){
$('<p style="padding: 0 12px 0 28px;">' + $(element).text() + '</p>').appendTo($textLengthTester);
});
minWidth = $textLengthTester.width();
ok(($selectlist8.width() >= minWidth), 'selectlist autoresized to ' + $selectlist8.width() + ' should be greater than ' + minWidth);


//hidden selectlists have no size
ok($selectlist9.width() === 0, 'selectlist hidden, sized 0');

//remove hidden to prepare to measure its new size
$selectlist9.removeClass('hidden');

//measure all children of selectlist to be tested (add them all to a span and see how wide the span is) and make sure the selectlist is actually big enough to fit that
$textLengthTester = $('<span id="textLengthTester" style="display:inline-block;"></span>').appendTo('body');
$selectlist9.find('li').each(function(index, element){
$('<p style="padding: 0 12px 0 28px;">' + $(element).text() + '</p>').appendTo($textLengthTester);
});
minWidth = $textLengthTester.width();
ok(($selectlist9.width() >= minWidth), 'selectlist was hidden, now shown, sized ' + $selectlist9.width() + ' should be greater than ' + minWidth);
});

test("should set disabled state", function () {
var $selectlist = $(html).find('#MySelectlist').selectlist();
$selectlist.selectlist('disable');
Expand Down

0 comments on commit 59813bd

Please sign in to comment.