| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- /*
- * tablesaw: A set of plugins for responsive tables
- * Mode Switch: UI element to allow the user to change table modes: stack/swipe/columntoggle
- * Copyright (c) 2013 Filament Group, Inc.
- * MIT License
- */
- ;(function( win, $ ) {
- var S = {
- selectors: {
- init: 'table[data-tablesaw-mode-switch]'
- },
- attributes: {
- excludeMode: 'data-tablesaw-mode-exclude'
- },
- classes: {
- main: 'tablesaw-modeswitch',
- toolbar: 'tablesaw-toolbar'
- },
- modes: [ 'stack', 'swipe', 'columntoggle' ],
- init: function( table ) {
- var $table = $( table ),
- ignoreMode = $table.attr( S.attributes.excludeMode ),
- $toolbar = $table.prev().filter( '.tablesaw-bar' ),
- modeVal = '',
- $switcher = $( '<div>' ).addClass( S.classes.main + ' ' + S.classes.toolbar ).html(function() {
- var html = [ '<label>' + Tablesaw.i18n.columns + ':' ],
- dataMode = $table.attr( 'data-tablesaw-mode' ),
- isSelected;
- html.push( '<span class="btn btn-small"> <select>' );
- for( var j=0, k = S.modes.length; j<k; j++ ) {
- if( ignoreMode && ignoreMode.toLowerCase() === S.modes[ j ] ) {
- continue;
- }
- isSelected = dataMode === S.modes[ j ];
- if( isSelected ) {
- modeVal = S.modes[ j ];
- }
- html.push( '<option' +
- ( isSelected ? ' selected' : '' ) +
- ' value="' + S.modes[ j ] + '">' + Tablesaw.i18n.modes[ j ] + '</option>' );
- }
- html.push( '</select></span></label>' );
- return html.join('');
- });
- var $otherToolbarItems = $toolbar.find( '.tablesaw-advance' ).eq( 0 );
- if( $otherToolbarItems.length ) {
- $switcher.insertBefore( $otherToolbarItems );
- } else {
- $switcher.appendTo( $toolbar );
- }
- $switcher.find( '.btn' ).tablesawbtn();
- $switcher.find( 'select' ).bind( 'change', S.onModeChange );
- },
- onModeChange: function() {
- var $t = $( this ),
- $switcher = $t.closest( '.' + S.classes.main ),
- $table = $t.closest( '.tablesaw-bar' ).nextUntil( $table ).eq( 0 ),
- val = $t.val();
- $switcher.remove();
- $table.data( 'table' ).destroy();
- $table.attr( 'data-tablesaw-mode', val );
- $table.table();
- }
- };
- $( win.document ).on( "tablesawcreate", function( e, Tablesaw ) {
- if( Tablesaw.$table.is( S.selectors.init ) ) {
- S.init( Tablesaw.table );
- }
- });
- })( this, jQuery );
|