https://www.rappler.com/content/mu-plugins/rappler-ontology-next/i…//assets/data-table.js?ver=1790213280

1// @ts-nocheck
2
3jQuery( document ).ready( function ( $ ) {
4	let dataTableInitialized = false;
5	let currentIsMobile = window.matchMedia( '(max-width: 767px)' ).matches;
6
7	/**
8	 * Initialize DataTable with given responsive setting
9	 *
10	 * @param {boolean} isMobile
11	 */
12	function initializeDataTable( isMobile ) {
13		if ( dataTableInitialized ) {
14			const table = $( '#data-table' ).DataTable();
15			table.destroy();
16			// Remove any existing dt-last-visible classes before reinitializing
17			$( '#data-table thead th' ).removeClass( 'dt-last-visible' );
18		}
19
20		$( '#data-table' ).DataTable( {
21			paging: false,
22			searching: false,
23			ordering: false,
24			info: false,
25			columnDefs: [ {
26				width: '20%',
27				targets: 0
28			} ],
29			fixedColumns: true,
30			scrollCollapse: true,
31			scrollX: true,
32			responsive: isMobile,
33			// Callback after table is drawn
34			/**
35			 * Set the last visible <th> after the table is drawn
36			 */
37			drawCallback: function () {
38				setLastVisibleTh();
39			}
40		} );
41
42		dataTableInitialized = true;
43
44		// Initialize tooltips only if not mobile
45		if ( ! isMobile ) {
46			initializeTooltips();
47		}
48	}
49
50	/**
51	 * Initialize tooltips for non-mobile views
52	 */
53	function initializeTooltips() {
54		tippy( '.tooltip-icon', {
55			/**
56			 * @param reference
57			 */
58			content: ( reference ) => reference.getAttribute( 'data-tooltip' ),
59			allowHTML: true,
60			placement: 'top',
61			arrow: true,
62			maxWidth: 300,
63			theme: 'data-table-tooltip'
64		} );
65	}
66
67	/**
68	 * Set the 'dt-last-visible' class on the last visible <th>
69	 */
70	function setLastVisibleTh() {
71		const table = $( '#data-table' ).DataTable();
72		const columns = table.columns().indexes().toArray();
73
74		// Remove the class from all headers first
75		$( '#data-table thead th' ).removeClass( 'dt-last-visible' );
76
77		// Iterate from the end to find the last visible column
78		for ( let i = columns.length - 1; i >= 0; i-- ) {
79			if ( table.column( columns[i] ).visible() ) {
80				const header = $( table.column( columns[i] ).header() );
81
82				// Ensure the header is visible via jQuery
83				if ( header.is( ':visible' ) ) {
84					header.addClass( 'dt-last-visible' );
85					break;
86				}
87			}
88		}
89	}
90
91	initializeDataTable( currentIsMobile );
92	setLastVisibleTh();
93
94	/**
95	 * Debounce utility function
96	 *
97	 * @param {Function} func  The function to debounce.
98	 * @param {number} wait  The number of milliseconds to delay.
99	 * @returns {Function} The debounced function.
100	 */
101	function debounce( func, wait ) {
102		let timeout;
103		return function () {
104			const context = this,
105				args = arguments;
106			clearTimeout( timeout );
107			timeout = setTimeout( () => func.apply( context, args ), wait );
108		};
109	}
110
111	$( window ).resize( debounce( function () {
112		const isMobile = window.matchMedia( '(max-width: 767px)' ).matches;
113		if ( isMobile !== currentIsMobile ) {
114			currentIsMobile = isMobile;
115			initializeDataTable( currentIsMobile );
116			// After re-initialization, set the last visible <th>
117			setLastVisibleTh();
118		}
119	}, 250 ) );
120
121	/**
122	 * Listen for DataTable responsive events to update dt-last-visible
123	 */
124	$( '#data-table' ).on( 'responsive-display', function () {
125		setLastVisibleTh();
126	} );
127} );