-
Notifications
You must be signed in to change notification settings - Fork 439
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reflow Table #181
Open
marinewater
wants to merge
16
commits into
GumbyFramework:develop
Choose a base branch
from
marinewater:develop
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Reflow Table #181
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
671e9dc
test
marinewater 120e453
Revert "test"
marinewater c6718a3
test 2
marinewater 74429fb
Revert "test 2"
marinewater 41a8f23
example for a table reflow
marinewater 4ff5eec
create JavaScript file to add headers to cells
marinewater 0e3f104
edited reflow Table headers
marinewater 1e358b6
table is now striped
marinewater 0fdf103
added breakpoint option
marinewater ca75e2d
created file
marinewater 6fb4ca8
added gumby.tablereflow.js script tag
marinewater 830e6c3
added gumby.tablereflow.js script tag
marinewater a5d73fd
compiled with gumby.tablereflow.js
marinewater 330af7b
added font sizes and weights
marinewater 0d9954b
compiled with new table.scss
marinewater 1a97ca3
Reflow Table is now in ui.html
marinewater File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,146 @@ | ||
/** | ||
* Gumby TableReflow | ||
*/ | ||
!function($) { | ||
|
||
'use strict'; | ||
|
||
function TableReflow($el) { | ||
|
||
Gumby.debug('Initializing TableReflow', $el); | ||
|
||
this.$el = $el; | ||
this.cellLabels = "ui-table-cell-label"; | ||
|
||
|
||
var scope = this; | ||
|
||
scope.refresh(); | ||
scope.updateReflow(); | ||
} | ||
|
||
TableReflow.prototype.getAttribute = function( element, key ) { | ||
var data; | ||
|
||
element = element.jquery ? element[0] : element; | ||
|
||
if ( element && element.getAttribute ) { | ||
data = element.getAttribute( "gumby-" + key ); | ||
} | ||
|
||
// Copied from core's src/data.js:dataAttr() | ||
// Convert from a string to a proper data type | ||
try { | ||
data = data === "true" ? true : | ||
data === "false" ? false : | ||
data === "null" ? null : | ||
// Only convert to a number if it doesn't change the string | ||
+data + "" === data ? +data : | ||
rbrace.test( data ) ? JSON.parse( data ) : | ||
data; | ||
} catch( err ) {} | ||
|
||
return data; | ||
} | ||
|
||
TableReflow.prototype.setHeaders = function() { | ||
var trs = this.$el.find( "thead tr" ); | ||
|
||
this.headers = this.$el.find( "tr:eq(0)" ).children(); | ||
this.allHeaders = this.headers.add( trs.children() ); | ||
} | ||
|
||
TableReflow.prototype.refresh = function( /* create */ ) { | ||
var table = this.$el, | ||
trs = table.find( "thead tr" ); | ||
|
||
// updating headers on refresh (fixes #5880) | ||
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( "gumby-" + "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 ).data( "cells", table.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( selector ) ); | ||
|
||
columnCount++; | ||
}); | ||
}); | ||
} | ||
|
||
TableReflow.prototype.updateReflow = function() { | ||
var table = this; | ||
|
||
// get headers in reverse order so that top-level headers are appended last | ||
$( table.allHeaders.get().reverse() ).each( function() { | ||
var cells = $( this ).data( "cells" ), | ||
colstart = table.getAttribute( this, "colstart" ), | ||
hierarchyClass = cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top", | ||
text = $( this ).text(), | ||
iteration, filter; | ||
|
||
if ( text !== "" ) { | ||
|
||
if ( hierarchyClass ) { | ||
iteration = parseInt( this.getAttribute( "colspan" ), 10 ); | ||
filter = ""; | ||
|
||
if ( iteration ) { | ||
filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")"; | ||
} | ||
|
||
table.addLabels( cells.filter( filter ), table.cellLabels + hierarchyClass, text ); | ||
} else { | ||
table.addLabels( cells, table.cellLabels, text ); | ||
} | ||
|
||
} | ||
}); | ||
} | ||
|
||
TableReflow.prototype.addLabels = function( cells, label, text ) { | ||
cells.not( ":has(b." + label + ")" ).prepend( "<b class='" + label + "'>" + text + "</b>" ); | ||
}; | ||
|
||
Gumby.addInitalisation('tablereflow', function() { | ||
$('.reflow').each(function() { | ||
var $this = $(this); | ||
// this element has already been initialized | ||
if($this.data('isReflow')) { | ||
return true; | ||
} | ||
// mark element as initialized | ||
$this.data('isReflow', true); | ||
new TableReflow($this); | ||
}); | ||
}); | ||
|
||
// register UI module | ||
Gumby.UIModule({ | ||
module: 'tablereflow', | ||
events: ['initialize'], | ||
init: function() { | ||
Gumby.initialize('tablereflow'); | ||
} | ||
}); | ||
|
||
|
||
|
||
}(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -87,3 +87,94 @@ table { | |
} | ||
} | ||
} | ||
|
||
/* Mobile first styles: Begin with the stacked presentation at narrow widths */ | ||
@media only all { | ||
.reflow { | ||
/* Hide the table headers */ | ||
thead { | ||
td, th { | ||
display: none; | ||
} | ||
} | ||
|
||
/* Show the table cells as a block level element */ | ||
td, th { | ||
text-align: left; | ||
display: block; | ||
@include font-size($norm); | ||
|
||
/* Make the label elements a percentage width */ | ||
b.ui-table-cell-label { | ||
padding: .4em; | ||
min-width: 30%; | ||
display: inline-block; | ||
margin: -.4em 1em -.4em -.4em; | ||
font-weight: bold; | ||
@include font-size($med); | ||
} | ||
|
||
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ | ||
b.ui-table-cell-label-top { | ||
display: block; | ||
padding: .4em 0; | ||
margin: .4em 0; | ||
text-transform: uppercase; | ||
@include font-size($large); | ||
font-weight: normal; | ||
} | ||
} | ||
|
||
/* Add a fair amount of top margin to visually separate each row when stacked */ | ||
tbody { | ||
th { | ||
margin-top: 3em; | ||
} | ||
} | ||
} | ||
} | ||
|
||
@media ( min-width: $table-reflow-breakpoint ) { | ||
.reflow { | ||
display: table-row-group; | ||
|
||
@mixin showheaderrows() { | ||
display: table-cell; | ||
margin: 0; | ||
|
||
.ui-table-cell-label { | ||
display: none; | ||
} | ||
} | ||
|
||
td, th { | ||
@include showheaderrows(); | ||
} | ||
|
||
tbody { | ||
td, th { | ||
@include showheaderrows(); | ||
} | ||
} | ||
|
||
thead { | ||
td, th { | ||
@include showheaderrows(); | ||
} | ||
} | ||
} | ||
} | ||
|
||
|
||
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */ | ||
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ | ||
@media ( max-width: $table-reflow-breakpoint ) { | ||
.ui-table-reflow { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. needs to be
instead of
|
||
td, th { | ||
width: 100%; | ||
@include box-sizing(border-box); | ||
float: left; | ||
clear: left; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello,
why ???
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know, it's UTF-8 in the gumby.scss, compass compiles it like that.