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

Solution needed for selectlist [data-resize]=auto when display: none- fixes #1069 #1073

Merged
merged 7 commits into from
Feb 12, 2015
Merged

Solution needed for selectlist [data-resize]=auto when display: none- fixes #1069 #1073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f652040
fixes #1069 make math for padding-right work, make sure sizer gets di…
cmcculloh Feb 12, 2015
93bcf7e
adds unit tests
cmcculloh Feb 12, 2015
5451fad
compile dist so unit tests pass
cmcculloh Feb 12, 2015
7489858
(issue-1069-selectlist-display-none) strengthen unit test to actually…
cmcculloh Feb 12, 2015
168270f
(issue-1069-selectlist-display-none) compile dist so that unit tests …
cmcculloh Feb 12, 2015
9c63b52
(issue-1069-selectlist-display-none) removes extraneous var statement
cmcculloh Feb 12, 2015
59813bd
Merge branch 'issue-1069-selectlist-display-none' of https://github.c…
BenjaminNeilDavis Feb 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions dist/css/fuelux.css
View file
Open in desktop

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
Open in desktop

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions dist/css/fuelux.min.css
View file
Open in desktop
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
Open in desktop
Binary file not shown.
30 changes: 17 additions & 13 deletions dist/js/fuelux.js
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions js/selectlist.js
View file
Open in desktop
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
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uncomfortable with an !important here. is there a place we can do the following

  • check if visible
  • if hidden
    • change visibility transparent
    • show
    • measure
    • reset

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just for the dummy selectlist I create. The element I append to the body to get the width of the dropdown items then remove once I have a width.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets provide a more explicit class name then to make it clear it's a dummy
.dummy-selectlist

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If "sizer" is good enough for the js variable name, why are we deviating from that in the CSS? Now it is inconsistent and even more confusing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sizer is fine. We can move back. I wasn't looking at the context of the css class.

}
.dropdown-menu {
display: block;
min-width: inherit;
Expand Down
2 changes: 1 addition & 1 deletion less/selectlist.less
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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