From 0225bdb772d1334cc1aa7ab0fc3678df0864df6b Mon Sep 17 00:00:00 2001 From: AlisaLinUwU Date: Sun, 26 Jan 2025 10:42:28 +0500 Subject: Initialize --- .../css/responsive.bootstrap4.css | 185 +++ .../css/responsive.bootstrap4.min.css | 1 + .../js/dataTables.responsive.js | 1474 ++++++++++++++++++++ .../js/dataTables.responsive.min.js | 48 + .../js/responsive.bootstrap4.js | 85 ++ .../js/responsive.bootstrap4.min.js | 12 + 6 files changed, 1805 insertions(+) create mode 100644 src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.css create mode 100644 src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css create mode 100644 src/main/resources/static/plugins/datatables-responsive/js/dataTables.responsive.js create mode 100644 src/main/resources/static/plugins/datatables-responsive/js/dataTables.responsive.min.js create mode 100644 src/main/resources/static/plugins/datatables-responsive/js/responsive.bootstrap4.js create mode 100644 src/main/resources/static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js (limited to 'src/main/resources/static/plugins/datatables-responsive') diff --git a/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.css b/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.css new file mode 100644 index 0000000..7152fc3 --- /dev/null +++ b/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.css @@ -0,0 +1,185 @@ +table.dataTable.dtr-inline.collapsed > tbody > tr > td.child, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.child, +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty { + cursor: default !important; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before { + display: none !important; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control { + position: relative; + padding-left: 30px; + cursor: pointer; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { + top: 50%; + left: 5px; + height: 1em; + width: 1em; + margin-top: -9px; + display: block; + position: absolute; + color: white; + border: 0.15em solid white; + border-radius: 1em; + box-shadow: 0 0 0.2em #444; + box-sizing: content-box; + text-align: center; + text-indent: 0 !important; + font-family: "Courier New", Courier, monospace; + line-height: 1em; + content: "+"; + background-color: #0275d8; +} +table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, +table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before { + content: "-"; + background-color: #d33333; +} +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control, +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control { + padding-left: 27px; +} +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control:before, +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control:before { + left: 4px; + height: 14px; + width: 14px; + border-radius: 14px; + line-height: 14px; + text-indent: 3px; +} +table.dataTable.dtr-column > tbody > tr > td.dtr-control, +table.dataTable.dtr-column > tbody > tr > th.dtr-control, +table.dataTable.dtr-column > tbody > tr > td.control, +table.dataTable.dtr-column > tbody > tr > th.control { + position: relative; + cursor: pointer; +} +table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, +table.dataTable.dtr-column > tbody > tr > th.dtr-control:before, +table.dataTable.dtr-column > tbody > tr > td.control:before, +table.dataTable.dtr-column > tbody > tr > th.control:before { + top: 50%; + left: 50%; + height: 0.8em; + width: 0.8em; + margin-top: -0.5em; + margin-left: -0.5em; + display: block; + position: absolute; + color: white; + border: 0.15em solid white; + border-radius: 1em; + box-shadow: 0 0 0.2em #444; + box-sizing: content-box; + text-align: center; + text-indent: 0 !important; + font-family: "Courier New", Courier, monospace; + line-height: 1em; + content: "+"; + background-color: #0275d8; +} +table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before, +table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before, +table.dataTable.dtr-column > tbody > tr.parent td.control:before, +table.dataTable.dtr-column > tbody > tr.parent th.control:before { + content: "-"; + background-color: #d33333; +} +table.dataTable > tbody > tr.child { + padding: 0.5em 1em; +} +table.dataTable > tbody > tr.child:hover { + background: transparent !important; +} +table.dataTable > tbody > tr.child ul.dtr-details { + display: inline-block; + list-style-type: none; + margin: 0; + padding: 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li { + border-bottom: 1px solid #efefef; + padding: 0.5em 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li:first-child { + padding-top: 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { + border-bottom: none; +} +table.dataTable > tbody > tr.child span.dtr-title { + display: inline-block; + min-width: 75px; + font-weight: bold; +} +div.dtr-modal { + position: fixed; + box-sizing: border-box; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 100; + padding: 10em 1em; +} +div.dtr-modal div.dtr-modal-display { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 50%; + height: 50%; + overflow: auto; + margin: auto; + z-index: 102; + overflow: auto; + background-color: #f5f5f7; + border: 1px solid black; + border-radius: 0.5em; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); +} +div.dtr-modal div.dtr-modal-content { + position: relative; + padding: 1em; +} +div.dtr-modal div.dtr-modal-close { + position: absolute; + top: 6px; + right: 6px; + width: 22px; + height: 22px; + border: 1px solid #eaeaea; + background-color: #f9f9f9; + text-align: center; + border-radius: 3px; + cursor: pointer; + z-index: 12; +} +div.dtr-modal div.dtr-modal-close:hover { + background-color: #eaeaea; +} +div.dtr-modal div.dtr-modal-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 101; + background: rgba(0, 0, 0, 0.6); +} + +@media screen and (max-width: 767px) { + div.dtr-modal div.dtr-modal-display { + width: 95%; + } +} +div.dtr-bs-modal table.table tr:first-child td { + border-top: none; +} diff --git a/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css b/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css new file mode 100644 index 0000000..28959af --- /dev/null +++ b/src/main/resources/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css @@ -0,0 +1 @@ +table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{top:50%;left:5px;height:1em;width:1em;margin-top:-9px;display:block;position:absolute;color:white;border:.15em solid white;border-radius:1em;box-shadow:0 0 .2em #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:"Courier New",Courier,monospace;line-height:1em;content:"+";background-color:#0275d8}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before{content:"-";background-color:#d33333}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control:before{left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.dtr-control,table.dataTable.dtr-column>tbody>tr>th.dtr-control,table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:.8em;width:.8em;margin-top:-0.5em;margin-left:-0.5em;display:block;position:absolute;color:white;border:.15em solid white;border-radius:1em;box-shadow:0 0 .2em #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:"Courier New",Courier,monospace;line-height:1em;content:"+";background-color:#0275d8}table.dataTable.dtr-column>tbody>tr.parent td.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent th.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:"-";background-color:#d33333}table.dataTable>tbody>tr.child{padding:.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul.dtr-details{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:.5em 0}table.dataTable>tbody>tr.child ul.dtr-details>li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul.dtr-details>li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:.5em;box-shadow:0 12px 30px rgba(0, 0, 0, 0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0, 0, 0, 0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none} diff --git a/src/main/resources/static/plugins/datatables-responsive/js/dataTables.responsive.js b/src/main/resources/static/plugins/datatables-responsive/js/dataTables.responsive.js new file mode 100644 index 0000000..bc35b1b --- /dev/null +++ b/src/main/resources/static/plugins/datatables-responsive/js/dataTables.responsive.js @@ -0,0 +1,1474 @@ +/*! Responsive 2.2.9 + * 2014-2021 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary Responsive + * @description Responsive tables plug-in for DataTables + * @version 2.2.9 + * @file dataTables.responsive.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2014-2021 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ +(function( factory ){ + if ( typeof define === 'function' && define.amd ) { + // AMD + define( ['jquery', 'datatables.net'], function ( $ ) { + return factory( $, window, document ); + } ); + } + else if ( typeof exports === 'object' ) { + // CommonJS + module.exports = function (root, $) { + if ( ! root ) { + root = window; + } + + if ( ! $ || ! $.fn.dataTable ) { + $ = require('datatables.net')(root, $).$; + } + + return factory( $, root, root.document ); + }; + } + else { + // Browser + factory( jQuery, window, document ); + } +}(function( $, window, document, undefined ) { +'use strict'; +var DataTable = $.fn.dataTable; + + +/** + * Responsive is a plug-in for the DataTables library that makes use of + * DataTables' ability to change the visibility of columns, changing the + * visibility of columns so the displayed columns fit into the table container. + * The end result is that complex tables will be dynamically adjusted to fit + * into the viewport, be it on a desktop, tablet or mobile browser. + * + * Responsive for DataTables has two modes of operation, which can used + * individually or combined: + * + * * Class name based control - columns assigned class names that match the + * breakpoint logic can be shown / hidden as required for each breakpoint. + * * Automatic control - columns are automatically hidden when there is no + * room left to display them. Columns removed from the right. + * + * In additional to column visibility control, Responsive also has built into + * options to use DataTables' child row display to show / hide the information + * from the table that has been hidden. There are also two modes of operation + * for this child row display: + * + * * Inline - when the control element that the user can use to show / hide + * child rows is displayed inside the first column of the table. + * * Column - where a whole column is dedicated to be the show / hide control. + * + * Initialisation of Responsive is performed by: + * + * * Adding the class `responsive` or `dt-responsive` to the table. In this case + * Responsive will automatically be initialised with the default configuration + * options when the DataTable is created. + * * Using the `responsive` option in the DataTables configuration options. This + * can also be used to specify the configuration options, or simply set to + * `true` to use the defaults. + * + * @class + * @param {object} settings DataTables settings object for the host table + * @param {object} [opts] Configuration options + * @requires jQuery 1.7+ + * @requires DataTables 1.10.3+ + * + * @example + * $('#example').DataTable( { + * responsive: true + * } ); + * } ); + */ +var Responsive = function ( settings, opts ) { + // Sanity check that we are using DataTables 1.10 or newer + if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.10' ) ) { + throw 'DataTables Responsive requires DataTables 1.10.10 or newer'; + } + + this.s = { + dt: new DataTable.Api( settings ), + columns: [], + current: [] + }; + + // Check if responsive has already been initialised on this table + if ( this.s.dt.settings()[0].responsive ) { + return; + } + + // details is an object, but for simplicity the user can give it as a string + // or a boolean + if ( opts && typeof opts.details === 'string' ) { + opts.details = { type: opts.details }; + } + else if ( opts && opts.details === false ) { + opts.details = { type: false }; + } + else if ( opts && opts.details === true ) { + opts.details = { type: 'inline' }; + } + + this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts ); + settings.responsive = this; + this._constructor(); +}; + +$.extend( Responsive.prototype, { + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Constructor + */ + + /** + * Initialise the Responsive instance + * + * @private + */ + _constructor: function () + { + var that = this; + var dt = this.s.dt; + var dtPrivateSettings = dt.settings()[0]; + var oldWindowWidth = $(window).innerWidth(); + + dt.settings()[0]._responsive = this; + + // Use DataTables' throttle function to avoid processor thrashing on + // resize + $(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () { + // iOS has a bug whereby resize can fire when only scrolling + // See: http://stackoverflow.com/questions/8898412 + var width = $(window).innerWidth(); + + if ( width !== oldWindowWidth ) { + that._resize(); + oldWindowWidth = width; + } + } ) ); + + // DataTables doesn't currently trigger an event when a row is added, so + // we need to hook into its private API to enforce the hidden rows when + // new data is added + dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) { + if ( $.inArray( false, that.s.current ) !== -1 ) { + $('>td, >th', tr).each( function ( i ) { + var idx = dt.column.index( 'toData', i ); + + if ( that.s.current[idx] === false ) { + $(this).css('display', 'none'); + } + } ); + } + } ); + + // Destroy event handler + dt.on( 'destroy.dtr', function () { + dt.off( '.dtr' ); + $( dt.table().body() ).off( '.dtr' ); + $(window).off( 'resize.dtr orientationchange.dtr' ); + dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control'); + + // Restore the columns that we've hidden + $.each( that.s.current, function ( i, val ) { + if ( val === false ) { + that._setColumnVis( i, true ); + } + } ); + } ); + + // Reorder the breakpoints array here in case they have been added out + // of order + this.c.breakpoints.sort( function (a, b) { + return a.width < b.width ? 1 : + a.width > b.width ? -1 : 0; + } ); + + this._classLogic(); + this._resizeAuto(); + + // Details handler + var details = this.c.details; + + if ( details.type !== false ) { + that._detailsInit(); + + // DataTables will trigger this event on every column it shows and + // hides individually + dt.on( 'column-visibility.dtr', function () { + // Use a small debounce to allow multiple columns to be set together + if ( that._timer ) { + clearTimeout( that._timer ); + } + + that._timer = setTimeout( function () { + that._timer = null; + + that._classLogic(); + that._resizeAuto(); + that._resize(true); + + that._redrawChildren(); + }, 100 ); + } ); + + // Redraw the details box on each draw which will happen if the data + // has changed. This is used until DataTables implements a native + // `updated` event for rows + dt.on( 'draw.dtr', function () { + that._redrawChildren(); + } ); + + $(dt.table().node()).addClass( 'dtr-'+details.type ); + } + + dt.on( 'column-reorder.dtr', function (e, settings, details) { + that._classLogic(); + that._resizeAuto(); + that._resize(true); + } ); + + // Change in column sizes means we need to calc + dt.on( 'column-sizing.dtr', function () { + that._resizeAuto(); + that._resize(); + }); + + // On Ajax reload we want to reopen any child rows which are displayed + // by responsive + dt.on( 'preXhr.dtr', function () { + var rowIds = []; + dt.rows().every( function () { + if ( this.child.isShown() ) { + rowIds.push( this.id(true) ); + } + } ); + + dt.one( 'draw.dtr', function () { + that._resizeAuto(); + that._resize(); + + dt.rows( rowIds ).every( function () { + that._detailsDisplay( this, false ); + } ); + } ); + }); + + dt + .on( 'draw.dtr', function () { + that._controlClass(); + }) + .on( 'init.dtr', function (e, settings, details) { + if ( e.namespace !== 'dt' ) { + return; + } + + that._resizeAuto(); + that._resize(); + + // If columns were hidden, then DataTables needs to adjust the + // column sizing + if ( $.inArray( false, that.s.current ) ) { + dt.columns.adjust(); + } + } ); + + // First pass - draw the table for the current viewport size + this._resize(); + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Private methods + */ + + /** + * Calculate the visibility for the columns in a table for a given + * breakpoint. The result is pre-determined based on the class logic if + * class names are used to control all columns, but the width of the table + * is also used if there are columns which are to be automatically shown + * and hidden. + * + * @param {string} breakpoint Breakpoint name to use for the calculation + * @return {array} Array of boolean values initiating the visibility of each + * column. + * @private + */ + _columnsVisiblity: function ( breakpoint ) + { + var dt = this.s.dt; + var columns = this.s.columns; + var i, ien; + + // Create an array that defines the column ordering based first on the + // column's priority, and secondly the column index. This allows the + // columns to be removed from the right if the priority matches + var order = columns + .map( function ( col, idx ) { + return { + columnIdx: idx, + priority: col.priority + }; + } ) + .sort( function ( a, b ) { + if ( a.priority !== b.priority ) { + return a.priority - b.priority; + } + return a.columnIdx - b.columnIdx; + } ); + + // Class logic - determine which columns are in this breakpoint based + // on the classes. If no class control (i.e. `auto`) then `-` is used + // to indicate this to the rest of the function + var display = $.map( columns, function ( col, i ) { + if ( dt.column(i).visible() === false ) { + return 'not-visible'; + } + return col.auto && col.minWidth === null ? + false : + col.auto === true ? + '-' : + $.inArray( breakpoint, col.includeIn ) !== -1; + } ); + + // Auto column control - first pass: how much width is taken by the + // ones that must be included from the non-auto columns + var requiredWidth = 0; + for ( i=0, ien=display.length ; i