MediaWiki:Gadget-ResearchNotes-datatable.js

/**
 * Datatables definitions
 * @example <>
 */
if( $('link[href$="datatables.min.css"]').length ){
    // do nothing
} else {
    $('<link/>', {
        rel: 'stylesheet',
        type: 'text/css',
        href: 'https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.css'
    }).appendTo('head');
}

$.ajaxSetup({ cache: true });

$.when(
    mw.loader.getScript( 'https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.js' )
)
.then(
	function () {
		if( $('#research-notes').length ) {
			var table = $('#research-notes').DataTable({
				dom: '<"top"lf>rt<"bottom"ip><"clear">',
    			columns: [
    				{ "title": "Page" },
					{ "title": "File" },
					{ "title": "URL" },
					{ "title": "Topic" },
					{ "title": "Note" },
					{ "title": "User" },
					{ "title": "Date" }
				],
				columnDefs: [
					{
						type: 'date',
						targets: [ 6 ]
					}
				],
				aaSorting: [
					[ 1, "desc" ]
				],
				pageLength: 100,
				lengthMenu: [
					[50, 100, 250, -1],
					['50 per page', '100 per page', '250 per page', 'Show all']
				],
    			language: {
    				searchPlaceholder: 'Search in notes',
					searchBuilder: {
    				title: ''
				},
				lengthMenu: '_MENU_',
			},
			initComplete: function () {

				$('input:checkbox').on('click', function () {				
                	//build a regex filter string with an or(|) condition
                    var topics = $('input:checkbox[name="topic"]:checked').map(function() {
                    	return '^' + this.value.replace('+', '.') + '$';
                	}).get().join('|');

                    //filter in column 3, with an regex, no smart filtering, not case sensitive
                    table.column(3).search(topics, true, false, false).draw(false);
                    
                    console.log(topics);
			    });
			    
                $('.clear-filter').click(function(){
                            var filter = false;
                            $(this).closest('.topics-filter-group').find('input:checkbox:checked').prop('checked', false);
                            $(this).closest('.topics-filter-group').find('.mw-ui-button').removeClass('shaded');
                            $(this).hide();
                            filter = $(this).closest('.topics-filter-group').prop('id');
                            switch (filter) {
                                case "topics":
                                    var topics = $('input:checkbox[name="topic"]:checked').map(function() {
                                        return this.value;
                                    }).get().join('|');

                                    //now filter in column 3, with no regex, no smart filtering, not case sensitive
                                    table.column(3).search(topics, true, false, false).draw(false);

                                $('#current-filters-topics').empty();

                                break;
                            }
                            updateFilters();
                        });

                $('input').click(function(){
                    var children = $(this).closest('.topics-filter-group').find($('input:checked'));
                    var close = $(this).closest('.topics-filter-group').find('.clear-filter');
                    var fbutton = $(this).closest('.topics-filter-group').find('h4');
                    if ($(children).length) {
                        close.show();
                        fbutton.addClass('shaded');
                    } else {
                        close.hide();
                        fbutton.removeClass('shaded');
                    }
                    updateFilters();
                });
                
                
                window.table=table;

                $('input[name="topic"]').change(function() {
                    var value = $(this).val(); // Get the value of the checkbox
                    var isChecked = $(this).prop('checked'); // Check if checkbox is checked

                    if (isChecked && $('#current-filters-topics').length > 0 ) {
                        // If checkbox is checked, append its value to the div
                        $('#current-filters-topics').append('<span>' + value + '</span>');
                    } else {
                        // If checkbox is unchecked, remove its value from the div
                        $('#current-filters-topics').find('span:contains(' + value + ')').remove();
                    }
                });

			    var input = document.querySelector('[id^="dt-search"]');

                input.addEventListener('keyup', function(event) {
                    updateFilters();
                });

                function updateFilters() {
                    var filterData = {
                        3: { array: [], name: 'topic' }
                    };

                    // Build unique arrays for each filter type
                    for (var key in filterData) {
                        var column = parseInt(key, 10);
                        var dataArray = filterData[key].array;

                        table.columns(column, { search: 'applied' }).data().eq(0).unique().toArray().forEach(function(item) {
                            dataArray.push.apply(dataArray, item.split(';'));
                        });

                        dataArray = Array.from(new Set(dataArray)); // Deduplicate array
                    }

                    // Filter checkboxes based on available data
                    for (var key in filterData) {
                        var dataArray = filterData[key].array;
                        var filterName = filterData[key].name;

                        var checkboxes = document.querySelectorAll('input[name="' + filterName + '"]');
                        for (var i = 0; i < checkboxes.length; i++) {
                            var checkbox = checkboxes[i];
                            var value = checkbox.value;
                            var isAvailable = dataArray.indexOf(value) !== -1;
                            if (isAvailable) {
                                checkbox.parentNode.classList.remove('d-none');
                                checkbox.parentNode.classList.add('d-flex');
                            } else {
                                checkbox.parentNode.classList.remove('d-flex');
                                checkbox.parentNode.classList.add('d-none');
                            }
                        }
                    }
                }
			}
		});
	}
});