logviewer/static/js/dataTables.scrollResize.js

   1 /*! ScrollResize for DataTables v1.0.0
   2  * 2015 SpryMedia Ltd - datatables.net/license
   3  */
   4
   5 /**
   6  * @summary     ScrollResize
   7  * @description Automatically alter the DataTables page length to fit the table
   8      into a container
   9  * @version     1.0.0
  10  * @file        dataTables.scrollResize.js
  11  * @author      SpryMedia Ltd (www.sprymedia.co.uk)
  12  * @contact     www.sprymedia.co.uk/contact
  13  * @copyright   Copyright 2015 SpryMedia Ltd.
  14  *
  15  * License      MIT - http://datatables.net/license/mit
  16  *
  17  * This feature plug-in for DataTables will automatically change the DataTables
  18  * page length in order to fit inside its container. This can be particularly
  19  * useful for control panels and other interfaces which resize dynamically with
  20  * the user's browser window instead of scrolling.
  21  *
  22  * Page resizing in DataTables can be enabled by using any one of the following
  23  * options:
  24  *
  25  * * Setting the `scrollResize` parameter in the DataTables initialisation to
  26  *   be true - i.e. `scrollResize: true`
  27  * * Setting the `scrollResize` parameter to be true in the DataTables
  28  *   defaults (thus causing all tables to have this feature) - i.e.
  29  *   `$.fn.dataTable.defaults.scrollResize = true`.
  30  * * Creating a new instance: `new $.fn.dataTable.ScrollResize( table );` where
  31  *   `table` is a DataTable's API instance.
  32  */
  33
  34 (function($){
  35
  36 var ScrollResize = function ( dt )
  37 {
  38         var that = this;
  39         var table = dt.table();
  40
  41         this.s = {
  42                 dt:        dt,
  43                 host:      $(table.container()).parent(),
  44                 header:    $(table.header()),
  45                 footer:    $(table.footer()),
  46                 body:      $(table.body()),
  47                 container: $(table.container()),
  48                 table:     $(table.node())
  49         };
  50
  51         var host = this.s.host;
  52         if ( host.css('position') === 'static' ) {
  53                 host.css( 'position', 'relative' );
  54         }
  55
  56         dt.on( 'draw', function () {
  57                 that._size();
  58         } );
  59
  60         this._attach();
  61         this._size();
  62 };
  63
  64
  65 ScrollResize.prototype = {
  66         _size: function ()
  67         {
  68                 var settings = this.s;
  69                 var dt = settings.dt;
  70                 var t = dt.table();
  71                 var offsetTop = $( settings.table ).offset().top;
  72                 var availableHeight = settings.host.height();
  73                 var scrollBody = $('div.dataTables_scrollBody', t.container());
  74
  75                 // Subtract the height of the header, footer and the elements
  76                 // surrounding the table
  77                 availableHeight -= offsetTop;
  78                 availableHeight -= settings.container.height() - ( offsetTop + scrollBody.height() );
  79
  80                 $('div.dataTables_scrollBody', t.container()).css( {
  81                         maxHeight: availableHeight,
  82                         height: availableHeight
  83                 } );
  84
  85                 if ( dt.fixedColumns ) {
  86                         dt.fixedColumns().relayout();
  87                 }
  88         },
  89
  90         _attach: function () {
  91                 // There is no `resize` event for elements, so to trigger this effect,
  92                 // create an empty HTML document using an <iframe> which will issue a
  93                 // resize event inside itself when the document resizes. Since it is
  94                 // 100% x 100% that will occur whenever the host element is resized.
  95                 var that = this;
  96                 var obj = $('<iframe/>')
  97                         .css( {
  98                                 position: 'absolute',
  99                                 top: 0,
 100                                 left: 0,
 101                                 height: '100%',
 102                                 width: '100%',
 103                                 zIndex: -1,
 104                                 border: 0
 105                         } )
 106                         .attr( 'frameBorder', '0' )
 107                         .attr( 'src', 'about:blank' );
 108
 109                 obj[0].onload = function () {
 110                         var body = this.contentDocument.body;
 111                         var height = body.offsetHeight;
 112                         var contentDoc = this.contentDocument;
 113                         var defaultView = contentDoc.defaultView || contentDoc.parentWindow;
 114
 115                         defaultView.onresize = function () {
 116                                 // Three methods to get the iframe height, to keep all browsers happy
 117                                 var newHeight = body.clientHeight || body.offsetHeight;
 118                                 var docClientHeight = contentDoc.documentElement.clientHeight;
 119
 120                                 if ( ! newHeight && docClientHeight ) {
 121                                         newHeight = docClientHeight;
 122                                 }
 123
 124                                 if ( newHeight !== height ) {
 125                                         height = newHeight;
 126
 127                                         that._size();
 128                                 }
 129                         };
 130                 };
 131
 132                 obj
 133                         .appendTo( this.s.host )
 134                         .attr( 'data', 'about:blank' );
 135         }
 136 };
 137
 138
 139 $.fn.dataTable.ScrollResize = ScrollResize;
 140 $.fn.DataTable.ScrollResize = ScrollResize;
 141
 142 // Automatic initialisation listener
 143 $(document).on( 'init.dt', function ( e, settings ) {
 144         if ( e.namespace !== 'dt' ) {
 145                 return;
 146         }
 147
 148         var api = new $.fn.dataTable.Api( settings );
 149
 150         if ( settings.oInit.scrollResize || $.fn.dataTable.defaults.scrollResize ) {
 151                 new ScrollResize( api );
 152         }
 153 } );
 154
 155 }(jQuery));
 156