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',
						className: 'text-nowrap',
						targets: [ 6 ]
					},
					{
						visible: false,
						searchable: true,
						sortable: false,
						targets: [ 3 ]
					},
				],
				aaSorting: [
					[ 1, "desc" ]
				],
				pageLength: 100,
				lengthMenu: [
					[50, 100, 250, -1],
					['50 per page', '100 per page', '250 per page', 'Show all']
				],
    			language: {
    				search: '',
    				searchPlaceholder: 'Search in notes',
					searchBuilder: {
    					title: ''
					},
				lengthMenu: '_MENU_',
			},
			initComplete: function () {
				
				updateFilters();

				// OR filtering
				$('input:checkbox').on('click', function () {
					applyFilters();
				});
				
				// Clear filters
				$('.clear-filter').click(function(){
					$('#topics').find('input:checkbox:checked').prop('checked', false);
					applyFilters();
				});
				
				// Update filters on texts search
				var input = document.querySelector('.dt-search input[type="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(','));
                        });f

                        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');
                            }
                        }
                    }
                }
                
                function applyFilters(){
					//build a regex filter string with an or(|) condition
                    var topic = $('input:checkbox[name="topic"]:checked').map(function() {
						return this.value;
					}).get().join('|');

					//filter in column 3, with an regex, no smart filtering, not case sensitive
					table.column(3).search(topic, true, false, false).draw(false);
					
					var monitor = $('#monitor');
					$(monitor).html(topic);
					
					updateFilters();
				}
			}
		});
	}		
});