diff --git a/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.js b/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.js index c41415b2..4be8a415 100644 --- a/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.js +++ b/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.js @@ -1,14 +1,14 @@ /** * filterDropDown.js * - * Copyright (C) 2017-18 Erik Kalkoken + * Copyright (C) 2017-24 Erik Kalkoken * - * Extension for the jQuery plug-in DataTables (developed and tested with v1.10.15) + * Extension for the jQuery plug-in DataTables (developed and tested with v1.13.7) * - * Version 0.4.0 + * Version 0.5.0 **/ (($) => { - 'use strict'; + "use strict"; /** * Parse initialization array and returns filterDef array to faster and easy use, @@ -24,62 +24,80 @@ * @type {{autoSize: boolean, bootstrap_version: number, columnsIdxList: *[], columns: *[], bootstrap: boolean, label: string, ajax: null}} */ const filterDef = { - 'columns': [], - 'columnsIdxList': [], - 'bootstrap': false, - 'bootstrap_version': 3, - 'autoSize': true, - 'ajax': null, - 'label': 'Filter ' + columns: [], + columnsIdxList: [], + bootstrap: false, + bootstrap_version: 3, + autoSize: true, + ajax: null, + label: "Filter ", }; // Set filter properties if they have been defined otherwise the defaults will be used - if (('bootstrap' in initArray) && (typeof initArray.bootstrap === 'boolean')) { + if ( + "bootstrap" in initArray && + typeof initArray.bootstrap === "boolean" + ) { filterDef.bootstrap = initArray.bootstrap; } - if (('bootstrap_version' in initArray) && (typeof initArray.bootstrap_version === 'number')) { + if ( + "bootstrap_version" in initArray && + typeof initArray.bootstrap_version === "number" + ) { filterDef.bootstrap_version = initArray.bootstrap_version; } - if (('autoSize' in initArray) && (typeof initArray.autoSize === 'boolean')) { + if ( + "autoSize" in initArray && + typeof initArray.autoSize === "boolean" + ) { filterDef.autoSize = initArray.autoSize; } - if (('ajax' in initArray) && (typeof initArray.ajax === 'string')) { + if ("ajax" in initArray && typeof initArray.ajax === "string") { filterDef.ajax = initArray.ajax; } - if (('label' in initArray) && (typeof initArray.label === 'string')) { + if ("label" in initArray && typeof initArray.label === "string") { filterDef.label = initArray.label; } // Add definition for each column - if ('columns' in initArray) { + if ("columns" in initArray) { initArray.columns.forEach((initColumn) => { - if (('idx' in initColumn) && (typeof initColumn.idx === 'number')) { + if ("idx" in initColumn && typeof initColumn.idx === "number") { // Initialize column const idx = initColumn.idx; filterDef.columns[idx] = { - 'title': null, - 'maxWidth': null, - 'autoSize': true + title: null, + maxWidth: null, + autoSize: true, }; // Add to a list of indices in the same order they appear in the init array filterDef.columnsIdxList.push(idx); // Set column properties if they have been defined otherwise the defaults will be used - if (('title' in initColumn) && (typeof initColumn.title === 'string')) { + if ( + "title" in initColumn && + typeof initColumn.title === "string" + ) { filterDef.columns[idx].title = initColumn.title; } - if (('maxWidth' in initColumn) && (typeof initColumn.maxWidth === 'string')) { + if ( + "maxWidth" in initColumn && + typeof initColumn.maxWidth === "string" + ) { filterDef.columns[idx].maxWidth = initColumn.maxWidth; } - if (('autoSize' in initColumn) && (typeof initColumn.autoSize === 'boolean')) { + if ( + "autoSize" in initColumn && + typeof initColumn.autoSize === "boolean" + ) { filterDef.columns[idx].autoSize = initColumn.autoSize; } } @@ -96,7 +114,7 @@ * @param d */ const addOption = (select, d) => { - if (d !== '') { + if (d !== "") { select.append(``); } }; @@ -114,7 +132,7 @@ $(select).change(() => { const val = $.fn.dataTable.util.escapeRegex($(select).val()); - column.search(val ? `^${val}$` : '', true, false).draw(); + column.search(val ? `^${val}$` : "", true, false).draw(); }); return select; @@ -122,8 +140,8 @@ // Add filterDropDown container div, draw select elements with default options. // Use preInit so that elements are created and correctly shown before data is loaded - $(document).on('preInit.dt', (e, settings) => { - if (e.namespace !== 'dt') { + $(document).on("preInit.dt", (e, settings) => { + if (e.namespace !== "dt") { return; } @@ -138,7 +156,7 @@ // Only proceed if the filter has been defined in the current table, // otherwise don't do anything. - if (!('filterDropDown' in initObj)) { + if (!("filterDropDown" in initObj)) { return; } @@ -157,7 +175,9 @@ const filterWrapperId = `${id}_filterWrapper`; // Set CSS classes for the filter wrapper div depending on bootstrap setting - let divCssClass = `${filterWrapperId} ${(filterDef.bootstrap) ? 'form-inline' : ''}`; + let divCssClass = `${filterWrapperId} ${ + filterDef.bootstrap ? "form-inline" : "" + }`; if (filterDef.bootstrap && filterDef.bootstrap_version === 5) { divCssClass = `${filterWrapperId} input-group my-3`; } @@ -170,11 +190,12 @@ const idx = this.index(); // set title of current column - let colName = (filterDef.columns[idx].title !== null) - ? filterDef.columns[idx].title - : $(this.header()).html(); + let colName = + filterDef.columns[idx].title !== null + ? filterDef.columns[idx].title + : $(this.header()).html(); - if (colName === '') { + if (colName === "") { colName = `column ${idx + 1}`; } @@ -187,29 +208,33 @@ selectMarkup = ``; } - $('#' + filterWrapperId).append(selectMarkup); + $("#" + filterWrapperId).append(selectMarkup); // Initializing select for current column and applying event to react to changes - const select = $('#' + selectId) + const select = $("#" + selectId) .empty() .append(``); // Set max width of select elements to current width (which is defined by the size of the title) // Turn off on for very small screens for responsive design, or if autoSize has been set to false - if (filterDef.autoSize && filterDef.columns[idx].autoSize && (screen.width > 768)) { - select.css('max-width', select.outerWidth()); + if ( + filterDef.autoSize && + filterDef.columns[idx].autoSize && + screen.width > 768 + ) { + select.css("max-width", select.outerWidth()); } // Apply optional css style if defined in the init array will override automatic max width setting if (filterDef.columns[idx].maxWidth !== null) { - select.css('max-width', filterDef.columns[idx].maxWidth); + select.css("max-width", filterDef.columns[idx].maxWidth); } }); }); // Filter table and add available options to dropDowns - $(document).on('init.dt', (e, settings) => { - if (e.namespace !== 'dt') { + $(document).on("init.dt", (e, settings) => { + if (e.namespace !== "dt") { return; } @@ -223,7 +248,7 @@ const initObj = api.init(); // Only proceed if a filter has been defined in the current table, otherwise don't do anything. - if (!('filterDropDown' in initObj)) { + if (!("filterDropDown" in initObj)) { return; } @@ -235,17 +260,19 @@ const column = this; const select = initSelectForColumn(id, column); - column.data().unique().sort().each((d) => { - addOption(select, d); - }); + column + .data() + .unique() + .sort() + .each((d) => { + addOption(select, d); + }); }); } else { // Fetch column options from server for server side processing - const columnsQuery = ( - `columns=${encodeURIComponent( - api.columns(filterDef.columnsIdxList).dataSrc().join() - )}` - ); + const columnsQuery = `columns=${encodeURIComponent( + api.columns(filterDef.columnsIdxList).dataSrc().join() + )}`; $.getJSON(`${filterDef.ajax}?${columnsQuery}`, (columnsOptions) => { api.columns(filterDef.columnsIdxList).every(function () { @@ -258,7 +285,9 @@ addOption(select, d); }); } else { - console.warn(`Missing column '${columnName}' in ajax response.`); + console.warn( + `Missing column '${columnName}' in ajax response.` + ); } }); }); diff --git a/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.min.js b/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.min.js index 2e304a4e..bb36e1fc 100644 --- a/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.min.js +++ b/allianceauth/static/allianceauth/js/filterDropDown/filterDropDown.min.js @@ -1,2 +1 @@ -(c=>{"use strict";const r=t=>{const e={columns:[],columnsIdxList:[],bootstrap:!1,bootstrap_version:3,autoSize:!0,ajax:null,label:"Filter "};return"bootstrap"in t&&"boolean"==typeof t.bootstrap&&(e.bootstrap=t.bootstrap),"bootstrap_version"in t&&"number"==typeof t.bootstrap_version&&(e.bootstrap_version=t.bootstrap_version),"autoSize"in t&&"boolean"==typeof t.autoSize&&(e.autoSize=t.autoSize),"ajax"in t&&"string"==typeof t.ajax&&(e.ajax=t.ajax),"label"in t&&"string"==typeof t.label&&(e.label=t.label),"columns"in t&&t.columns.forEach(t=>{if("idx"in t&&"number"==typeof t.idx){const o=t.idx;e.columns[o]={title:null,maxWidth:null,autoSize:!0},e.columnsIdxList.push(o),"title"in t&&"string"==typeof t.title&&(e.columns[o].title=t.title),"maxWidth"in t&&"string"==typeof t.maxWidth&&(e.columns[o].maxWidth=t.maxWidth),"autoSize"in t&&"boolean"==typeof t.autoSize&&(e.columns[o].autoSize=t.autoSize)}}),e},l=(t,o)=>{""!==o&&t.append(``)},u=(t,o)=>{const e=c(`#${t}_filterSelect`+o.index());return c(e).change(()=>{const t=c.fn.dataTable.util.escapeRegex(c(e).val());o.search(t?`^${t}$`:"",!0,!1).draw()}),e};c(document).on("preInit.dt",(t,o)=>{if("dt"===t.namespace){const e=new c.fn.dataTable.Api(o),s=e.table().node().id,n=e.init();if("filterDropDown"in n){const a=r(n.filterDropDown);if(0!==a.columns.length){const i=e.table().container(),l=s+"_filterWrapper";let t=l+" "+(a.bootstrap?"form-inline":"");a.bootstrap&&5===a.bootstrap_version&&(t=l+" input-group my-3"),c(i).prepend(`