MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

        
$(function() {
	cDependent();
});

function cDependent(){
	if($('.mw-references-wrap').length > 0){
		$('.cdependent').show();
	}
}

/**
 * Creating a datatable
 * @example <>
 */

var selectors = [
    'table#listProjects',
];

var found = false;
for (var i = 0; i < selectors.length; i++) {
    if (document.querySelector(selectors[i])) {
        found = true;
        break;
    }
}

if (found === true) {
    const dtsource =
        'https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.7/b-3.2.6/b-colvis-3.2.6/b-html5-3.2.6/b-print-3.2.6/cc-1.2.0/date-1.6.3/fh-4.0.5/r-3.0.8/sc-2.4.3/sb-1.8.4/sp-2.3.5/sl-3.1.3/sr-1.4.3/datatables.min.css';

    if (!document.querySelector('link[href*="datatables.min.css"]')) {
        $('<link/>', { rel: 'stylesheet', href: dtsource }).appendTo('head');
    }

    $.ajaxSetup({ cache: true });

    $.when(
        mw.loader.getScript(
            'https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.7/b-3.2.6/b-colvis-3.2.6/b-html5-3.2.6/b-print-3.2.6/cc-1.2.0/date-1.6.3/fh-4.0.5/r-3.0.8/sc-2.4.3/sb-1.8.4/sp-2.3.5/sl-3.1.3/sr-1.4.3/datatables.min.js'
        )
    ).then(
        () => {
            window.datatablesLoaded = true;
            initDataTable();
        },
        e => mw.log.error(e.message) // Failed to load script
    );
}

function initDataTable() {

    var table = $('#listProjects').DataTable({
		layout: {
			topStart: null,
			topEnd: null,
    		top2: {
                searchPanes: {
                    cascadePanes: true,
                    initCollapsed: true
                }
            },
            top1: {
                search: {
                    className: "mx-0 w-100"
                }
            },
    		bottomStart: 'info',
    		bottomEnd: 'paging'
		},
		responsive: true,
		colReorder: true,
    	order: [[ 0, 'asc' ]],
    	columns: [
        	{ title: "Film" },
        	{ title: "Released" },
        	{ 
        		title: "Studio",
        		render: {
                    display: function (data, type, row) {
                        return data;   // normal data for table
                    },
                    sp: function (data, type, row) {
                        return data ? data.split(/\s*,\s*/).map(v => v.trim()) : [];
                    }
                },
                searchPanes: { 
                	orthogonal: 'sp', 
                	cascadePanes: true,
                },
        	},
			{ title: "Agency" },
			{ title: "Project" },
			{ 
				title: "Type",
        		render: {
                    display: function (data, type, row) {
                        return data;   // normal data for table
                    },
                    sp: function (data, type, row) {
                        return data ? data.split(/\s*,\s*/).map(v => v.trim()) : [];
                    }
                },
                searchPanes: { 
                	orthogonal: 'sp', 
                	cascadePanes: true,
                },
			},
			{ title: "Asset" },
			{ title: "Awards" },
		],
        aoColumns: [],
        lengthMenu: [
                [10, 25, 50, -1], [10, 25, 50, "All"]
        ],
        pageLength: 25,
        orderCellsTop: true,
        fixedHeader: true,
        searchBuilder: {
        	greyscale: true
    	},
        initComplete: function () {
        }
    });
}