MediaWiki:Gadget-ResearchNotes-datatable.js

/**
 * Datatables definitions
 * @example <>
 */

mw.loader.load( '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', 'text/css' );

$.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 cuser = mw.config.get( 'wgUserName');
			var table = $('#research-notes').DataTable({
				responsive: {
        			details: {
            			display: DataTable.Responsive.display.modal({
            				header: function (row) {
                    				var data = row.data();
                    				return 'Details for ' + data[0];
                				}
            				}),
            			renderer: DataTable.Responsive.renderer.tableAll()
        			}
    			},
				dom: '<"top"Qlf>rt<"bottom"ip><"clear">',
    			columns: [
    				{ "title": "Page" },
					{ "title": "File" },
					{ "title": "URL" },
					{ "title": "Topic" },
					{ "title": "Note",	"className": 'none' },
					{ "title": "User" },
					{ "title": "Date" }
				],
				columnDefs: [
					{
						type: 'date',
						className: 'text-nowrap',
						targets: [ 6 ]
					},
					{
						visible: false,
						searchable: true,
						sortable: false,
						targets: [ 3 ]
					},
					{
						responsivePriority: 1,
						targets: [ 0 ]
					}
				],
				aaSorting: [
					[ 0, "asc" ]
				],
				pageLength: 100,
				lengthMenu: [
					[50, 100, 250, -1],
					['50 per page', '100 per page', '250 per page', 'Show all']
				],
				searchBuilder: {
					columns: [ 5, 6 ],
					depthLimit: 1,
					greyscale: true,
					preDefined: {
                    	criteria: [
                        	{
                            	condition: '=',
                            	data: 'User',
                            	value: [cuser]
                        	},
                        	{
                            	condition: 'between',
                            	data: 'Date',
                        	},
                        ],
                        logic: 'AND'
					}
				},
    			language: {
    				search: '',
    				searchPlaceholder: 'Search in notes',
					searchBuilder: {
    					title: ''
					},
				lengthMenu: '_MENU_',
			},
			initComplete: function () {
				
				var checkboxes = document.querySelectorAll('input[name="topic"]');

				// Toggle filter dropdown
				$('#toggle-filters').on('click', function () {
					updateFilterList();
					toggleFilters();
				});
				
				// Hide filter dropdown
				$('#hide-filters').on('click', function () {
					toggleFilters();
				});
				
				$('input:checkbox').on('click', function () {
					applyFilters();
				});
				
				// 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) {
                    updateFilterList();
                });
                
                function toggleFilters(){
                	$('#topics-filter').toggleClass('d-none d-flex');
                	positionFilters();
                }
                
                function applyFilters(){
					//build a regex filter string with an or(|) condition
                    var topic = $('input:checkbox[name="topic"]:checked').map(function() {
						return this.value.trim();
					}).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);
					
					updateFilterList();
				}
				
				function updateFilterList(){

					var dataArray =[];
					
					table.columns(3, { search: 'applied' }).data().eq(0).unique().toArray().forEach(function(item) {
    					item.split(',').forEach(function(subItem) {
        					dataArray.push(subItem.trim());
    					});
					});
						
					dataArray = Array.from(new Set(dataArray)); // Deduplicate array

                    // Filter checkboxes based on available data
					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 positionFilters() {
    				var dropdownButton = document.getElementById('toggle-filters');
					var dropdownMenu = document.getElementById('topics-filter');
					
					dropdownMenu.style.display = 'block';
        			// Get the width of the dropdown menu and the viewport
        			var dropdownWidth = dropdownMenu.offsetWidth;
        			var viewportWidth = window.innerWidth;

					dropdownButton.addEventListener('click', function(event) {
						var cursorX = event.clientX;
						if (( cursorX / 2 ) + dropdownWidth > viewportWidth) {
				            leftPosition = viewportWidth - dropdownWidth;
        				} else {
        					leftPosition = ( cursorX / 2 );
        				}
        				// Set the position of the dropdown menu
        				dropdownMenu.style.left = leftPosition + 'px';
    				});
                }
                
                function displaySearchBuilder() {
    				var sbToggle = document.getElementById('search-builder');
					var sbDisplay = $('.dtsb-searchBuilder');
					
					sbToggle.addEventListener('click', function(event) {
        				$(sbDisplay).toggle();
        				this.classList.toggle('mw-ui-progressive');
    				});
                }
                
                displaySearchBuilder();
                $('#research-notes').show();
			}
		});
	}		
});