alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
151 lines (126 loc) • 4.15 kB
JavaScript
/*! PageResize for DataTables v1.0.0
* 2015 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary PageResize
* @description Automatically alter the DataTables page length to fit the table
into a container
* @version 1.0.0
* @file dataTables.pageResize.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2015 SpryMedia Ltd.
*
* License MIT - http://datatables.net/license/mit
*
* This feature plug-in for DataTables will automatically change the DataTables
* page length in order to fit inside its container. This can be particularly
* useful for control panels and other interfaces which resize dynamically with
* the user's browser window instead of scrolling.
*
* Page resizing in DataTables can be enabled by using any one of the following
* options:
*
* * Adding the class `pageResize` to the HTML table
* * Setting the `pageResize` parameter in the DataTables initialisation to
* be true - i.e. `pageResize: true`
* * Setting the `pageResize` parameter to be true in the DataTables
* defaults (thus causing all tables to have this feature) - i.e.
* `$.fn.dataTable.defaults.pageResize = true`.
* * Creating a new instance: `new $.fn.dataTable.PageResize( table );` where
* `table` is a DataTable's API instance.
*
* For more detailed information please see:
* http://datatables.net/blog/2015-04-10
*/
(function($){
var PageResize = function ( dt )
{
var table = dt.table();
this.s = {
dt: dt,
host: $(table.container()).parent(),
header: $(table.header()),
footer: $(table.footer()),
body: $(table.body()),
container: $(table.container()),
table: $(table.node())
};
var host = this.s.host;
if ( host.css('position') === 'static' ) {
host.css( 'position', 'relative' );
}
this._attach();
this._size();
};
PageResize.prototype = {
_size: function ()
{
var settings = this.s;
var dt = settings.dt;
var t = dt.table();
var offsetTop = $( settings.table ).offset().top;
var rowHeight = $( 'tr', settings.body ).eq(0).height();
var availableHeight = settings.host.height();
var scrolling = t.header().parentNode !== t.body().parentNode;
// Subtract the height of the header, footer and the elements
// surrounding the table
if ( ! scrolling ) {
availableHeight -= settings.header.height();
availableHeight -= settings.footer.height();
}
availableHeight -= offsetTop;
availableHeight -= settings.container.height() - ( offsetTop + settings.table.height() );
var drawRows = Math.floor( availableHeight / rowHeight );
if ( ! isNaN( drawRows ) && drawRows !== Infinity && drawRows !== dt.page.len() ) {
dt.page.len( drawRows ).draw();
}
},
_attach: function () {
// There is no `resize` event for elements, so to trigger this effect,
// create an empty HTML document using an <object> which will issue a
// resize event inside itself when the document resizes. Since it is
// 100% x 100% that will occur whenever the host element is resized.
var that = this;
var obj = $('<object/>')
.css( {
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: -1
} )
.attr( 'type', 'text/html' );
obj[0].onload = function () {
var body = this.contentDocument.body;
var height = body.offsetHeight;
this.contentDocument.defaultView.onresize = function () {
var newHeight = body.clientHeight || body.offsetHeight;
if ( newHeight !== height ) {
height = newHeight;
that._size();
}
};
};
obj
.appendTo( this.s.host )
.attr( 'data', 'about:blank' );
}
};
$.fn.dataTable.PageResize = PageResize;
$.fn.DataTable.PageResize = PageResize;
// Automatic initialisation listener
$(document).on( 'init.dt', function ( e, settings ) {
if ( e.namespace !== 'dt' ) {
return;
}
var api = new $.fn.dataTable.Api( settings );
if ( $( api.table().node() ).hasClass( 'pageResize' ) ||
settings.oInit.pageResize ||
$.fn.dataTable.defaults.pageResize )
{
new PageResize( api );
}
} );
}(jQuery));