Permalink
Browse files

Table: Add _destroy()

  • Loading branch information...
gabrielschulhof authored and arschmitz committed May 6, 2014
1 parent 855e6d5 commit 58a09c20d7d454972d9f29419c00debd3e983f0c
@@ -180,6 +180,10 @@ return $.widget( "mobile.table", $.mobile.table, {
fragment.appendChild( menuButton[ 0 ] );
table.before( fragment );
// Save the UI so it can be destroyed later
this._popup = popup;
this._menuButton = menuButton;
popup.popup();
return menu;
@@ -251,8 +255,40 @@ return $.widget( "mobile.table", $.mobile.table, {
} );
},
_destroyHeader: function( index, headerElement ) {
var priority, cells,
header = $( headerElement );
if ( !this.options.enhanced ) {
priority = $.mobile.getAttribute( headerElement, "priority" );
cells = header.add( header.jqmData( "cells" ) );
if ( priority ) {
cells.removeClass( this.options.classes.priorityPrefix + priority );
}
}
// This data has to be removed whether or not the widget is pre-rendered
header.jqmRemoveData( "input" );
},
_destroy: function() {
this._super();
if ( this.options.mode === "columntoggle" ) {
if ( this.options.enhanced ) {
// If the widget is enhanced, the checkboxes will be left alone, but the jqmData()
// attached to them has to be removed
this._menu.find( "input" ).each( function() {
$( this ).jqmRemoveData( "cells" ).jqmRemoveData( "header" );
});
} else {
this.element.removeClass( this.options.classes.columnToggleTable );
this._popup.remove();
this._menuButton.remove();
}
this.headers.not( "td" ).each( $.proxy( this, "_destroyHeader" ) );
}
return this._superApply( arguments );
}
} );
View
@@ -80,32 +80,22 @@ return $.widget( "mobile.table", {
this._setHeaders();
// Iterate over the trs
trs.each( function() {
var columnCount = 0;
// Iterate over the children of the tr
$( this ).children().each( function() {
var span = parseInt( this.getAttribute( "colspan" ), 10 ),
selector = ":nth-child(" + ( columnCount + 1 ) + ")",
j;
this.setAttribute( "data-" + $.mobile.ns + "colstart", columnCount + 1 );
if ( span ) {
for ( j = 0; j < span - 1; j++ ) {
columnCount++;
selector += ", :nth-child(" + ( columnCount + 1 ) + ")";
}
}
// Store "cells" data on header as a reference to all cells in the
// same column as this TH
$( this ).jqmData( "cells", table.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( selector ) );
columnCount++;
} );
} );
trs.each( $.proxy( this, "_refreshHeadRow" ) );
},
_destroy: function() {
var table = this.element;
if ( !this.options.enhanced ) {
table.removeClass( this.options.classes.table );
}
// We have to remove "cells" data even if the table was originally enhanced, because it is
// added during refresh
table.find( "thead tr" ).children().each( function() {
$( this ).jqmRemoveData( "cells" );
});
}
} );
});
} );
View
@@ -103,6 +103,31 @@ return $.widget( "mobile.table", $.mobile.table, {
cells
.not( ":has(b." + label + ")" )
.prepend( $( "<b class='" + label + "'></b>" ).append( contents ) );
},
_destroy: function() {
var colstartAttr;
if ( this.options.mode === "reflow" ) {
colstartAttr = "data-" + $.mobile.ns + "colstart";
// We remove these attributes because they're added during refresh, so we can't tell
// whether they've been present in the initial markup or not
this.element
.children( "thead" )
.find( "[" + colstartAttr + "]" )
.removeAttr( colstartAttr );
if ( !this.options.enhanced ) {
this.element
.removeClass( this.options.classes.reflowTable )
.children( "tbody" )
.find( "b." + this.options.classes.cellLabels )
.remove();
}
}
return this._superApply( arguments );
}
} );
@@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Table Integration Test</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad([
[ "widgets/page" ],
[
"widgets/table.columntoggle"
],
[
"columntoggle_destroy_core.js"
]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content" role="main">
<table id="columntoggle-destroy-test" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive">
<thead>
<tr>
<th data-nstest-priority="2">Rank</th>
<th>Movie Title</th>
<th data-nstest-priority="3">Year</th>
<th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-nstest-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-nstest-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<th>2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-nstest-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Table Integration Test</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad([
[ "widgets/page" ],
[
"widgets/table.columntoggle"
],
[
"columntoggle_prerendered_destroy_core.js"
]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content" role="main">
<div style="display: none;" id="columntoggle-prerendered-destroy-test-popup-placeholder"><!-- placeholder for columntoggle-prerendered-destroy-test-popup -->
<a href="#columntoggle-prerendered-destroy-test-popup" class="ui-table-columntoggle-btn ui-btn ui-btn-a ui-corner-all ui-shadow ui-mini" data-rel="popup">Columns...</a>
<table id="columntoggle-prerendered-destroy-test" data-nstest-enhanced="true" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive ui-table ui-table-columntoggle">
<thead>
<tr>
<th data-nstest-priority="2" class="ui-table-priority-2">Rank</th>
<th>Movie Title</th>
<th data-nstest-priority="3" class="ui-table-priority-3">Year</th>
<th data-nstest-priority="1" class="ui-table-priority-1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-nstest-priority="5" class="ui-table-priority-5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th class="ui-table-priority-2">1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-nstest-rel="external">Citizen Kane</a></td>
<td class="ui-table-priority-3">1941</td>
<td class="ui-table-priority-1">100%</td>
<td class="ui-table-priority-5">74</td>
</tr>
<tr>
<th class="ui-table-priority-2">2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-nstest-rel="external">Casablanca</a></td>
<td class="ui-table-priority-3">1942</td>
<td class="ui-table-priority-1">97%</td>
<td class="ui-table-priority-5">64</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-screen-hidden ui-popup-screen ui-overlay-inherit" id="columntoggle-prerendered-destroy-test-popup-screen"></div>
<div class="ui-popup-container ui-popup-hidden ui-popup-truncate" id="columntoggle-prerendered-destroy-test-popup-popup">
<div class="ui-table-columntoggle-popup ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all" id="columntoggle-prerendered-destroy-test-popup" data-nstest-enhanced="true">
<fieldset data-nstest-role="controlgroup" data-nstest-enhanced="true" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
<div class="ui-controlgroup-controls">
<div class="ui-checkbox">
<label class="ui-btn ui-corner-all ui-btn-icon-left ui-checkbox-on ui-first-child">Rank</label>
<input type="checkbox" data-nstest-enhanced="true" checked>
</div>
<div class="ui-checkbox">
<label class="ui-btn ui-corner-all ui-btn-icon-left ui-checkbox-on ui-first-child">Year</label>
<input type="checkbox" data-nstest-enhanced="true" checked>
</div>
<div class="ui-checkbox">
<label class="ui-btn ui-corner-all ui-btn-icon-left ui-checkbox-on ui-first-child">Rotten Tomato Rating</label>
<input type="checkbox" data-nstest-enhanced="true" checked>
</div>
<div class="ui-checkbox">
<label class="ui-btn ui-corner-all ui-btn-icon-left ui-checkbox-on ui-first-child">Reviews</label>
<input type="checkbox" data-nstest-enhanced="true" checked>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,37 @@
$.mobile.ns ="nstest-";
test( "Columntoggle table is destroyed/re-created correctly", function() {
var enhancedTable,
table = $( "#columntoggle-destroy-test" ),
unenhancedState = $( "body" ).clone();
table.table();
deepEqual(
table
.find( "*" )
.add( table )
.filter( ":data(" + $.camelCase( $.mobile.ns + "input" ) + ")" ).length, 4,
"Four elements have data at key 'input' after table construction" );
enhancedState = $( "body" ).clone();
table.table( "destroy" );
deepEqual(
table
.find( "*" )
.add( table )
.filter( ":data(" + $.camelCase( $.mobile.ns + "input" ) + ")" ).length, 0,
"All data at key 'input' has been removed after table destruction" );
deepEqual( $.testHelper.domEqual( $( "body" ), unenhancedState ), true,
"After enhancing and destroying the table, the DOM is identical to the original state" );
table.table();
deepEqual( $.testHelper.domEqual( $( "body" ), enhancedState ), true,
"After re-enhancing the table, the DOM is identical to the previous enhanced version" );
});
@@ -0,0 +1,36 @@
$.mobile.ns ="nstest-";
test( "Prerendered columntoggle table is destroyed/re-created correctly", function() {
var table = $( "#columntoggle-prerendered-destroy-test" ),
popup = $( "#columntoggle-prerendered-destroy-test-popup" );
// Constituent widgets are also pre-rendered, and there's no autoinit to turn them on
popup
.find( "input" )
.checkboxradio()
.end()
.find( "fieldset" )
.controlgroup()
.end()
.popup();
table.table();
deepEqual(
$( "input" ).filter( ":data(" + $.camelCase( $.mobile.ns + "header" ) + ")" ).length, 4,
"Four checkboxes have data at key 'header' after table construction" );
deepEqual(
$( "input" ).filter( ":data(" + $.camelCase( $.mobile.ns + "cells" ) + ")" ).length, 4,
"Four checkboxes have data at key 'cells' after table construction" );
table.table( "destroy" );
deepEqual(
$( "input" ).filter( ":data(" + $.camelCase( $.mobile.ns + "header" ) + ")" ).length, 0,
"Four checkboxes have data at key 'header' after table construction" );
deepEqual(
$( "input" ).filter( ":data(" + $.camelCase( $.mobile.ns + "cells" ) + ")" ).length, 0,
"Checkboxes have no data at key 'cells' after table destruction" );
});
Oops, something went wrong.

0 comments on commit 58a09c2

Please sign in to comment.