File modules/template_engine/components/html/component_table/table.js

Last commit: Tue Mar 1 23:03:32 2022 +0100	dankert	New: OQuery support for 'parent(selector)' and 'parents(selector)'


     1 import $ from  '../../../../cms/ui/themes/default/script/jquery-global.js';
     2 
     3 export default function(element ) {
     4 
     5 
     6 	let calculateOrderList = function() {
     7 
     8 		// Analyse the order of the objects in this folder.
     9 		let order = new Array();
    10 
    11 		$(element).find('.or-table--sortable').find('tbody > tr.or-data').each(function () {
    12 			let objectid = $(this).data('id');
    13 			order.push(objectid);
    14 		});
    15 
    16 		// Set the comma-separated list of objects into a input field.
    17 		$(element).find('input[name=order]').val(order.join(','));
    18 	};
    19 
    20 	calculateOrderList();
    21 
    22     // Manuelles Sortieren von Tabellen per Drag and drop.
    23 
    24 	let sortableElement = $(element).find('.or-table--sortable > tbody').get(0);
    25 
    26 	if   ( sortableElement ) {
    27 
    28 		let sortable = import( './sortable.min.js' );
    29 		sortable.then( Sortable => {
    30 			new Sortable(sortableElement, {onUpdate: calculateOrderList})
    31 		} );
    32 
    33 	}
    34 
    35 	// Alle Checkboxen setzen oder nicht setzen.
    36 	$(element).find('tr.headline > td > input.checkbox').click( function() {
    37 		$(this).closest('table').find('tr.or-data > td > input.or-checkbox').attr('checked',Boolean( $(this).attr('checked') ) );
    38 	});
    39 
    40     /**
    41 	 * Table-Filter.
    42      */
    43 	$(element).find('.or-table-filter > input').keyup( function() {
    44 
    45 		let filterExpression = $(this).val().toLowerCase();
    46 
    47         let table = $(this).parents('.or-table-wrapper').find('table');
    48         table.addClass('loader');
    49 
    50         setTimeout( () => {
    51             table.find('tr:not(.or-table-header)').each(function () {
    52                 let $row = $(this);
    53 				if   ( $row.text().toLowerCase().indexOf(filterExpression) > -1)
    54 					$row.removeClass('-off');
    55 				else
    56 					$row.addClass('-off');
    57 			} );
    58             table.removeClass('loader');
    59         }, 50);
    60 
    61 	} );
    62 
    63 
    64     /**
    65 	 * Table-Sortierung.
    66      */
    67 	$(element).find('table > tbody > tr.or-table-header > td, table > tbody > tr > th').click( function() {
    68 
    69 		let column = $(this);
    70         let table = column.closest('table');
    71         table.addClass('loader');
    72 
    73         let isAscending = !column.hasClass('sort-asc');
    74         table.find('tr.or-table-header > td, tr > th').removeClass('sort-asc').removeClass('sort-desc');
    75         if ( isAscending ) column.addClass('sort-asc'); else column.addClass('sort-desc');
    76 
    77         Promise.resolve().then( () => {  // Sorting should be asynchronous, because we do not want to block the UI.
    78 
    79 			let rows = table.find('tr:not(.or-table-header)').toArray().sort(comparer(column.index()))
    80 			if (!isAscending) {
    81 				rows = rows.reverse()
    82 			}
    83 			for (let i = 0; i < rows.length; i++) {
    84 				table.append( $(rows[i]) );
    85 			}
    86 			table.removeClass('loader');
    87 		});
    88 
    89 	} );
    90 
    91     function comparer(index) {
    92         return function(a, b) {
    93             let valA = getCellValue(a, index), valB = getCellValue(b, index)
    94             return isNumeric(valA) && isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    95         }
    96     }
    97 
    98     function getCellValue(row, index) {
    99         let x = $(row).children('td').eq(index);
   100         return $(row).children('td').eq(index).text();
   101     }
   102 
   103 	function isNumeric(n) {
   104 		return !isNaN(parseFloat(n)) && isFinite(n);
   105 	}
   106 
   107 };



Download modules/template_engine/components/html/component_table/table.js


History
Tue, 1 Mar 2022 23:03:32 +0100	dankert	New: OQuery support for 'parent(selector)' and 'parents(selector)'
Sun, 18 Apr 2021 01:22:09 +0200	Jan Dankert	Cleaner syntax for using a simple promise.
Sat, 17 Apr 2021 03:02:30 +0200	Jan Dankert	Fix: Table sorter (was broken since the migration to OQuery)
Thu, 1 Apr 2021 01:01:54 +0200	Jan Dankert	New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again.
Sat, 27 Mar 2021 05:14:11 +0100	Jan Dankert	Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib)
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Mon, 8 Mar 2021 15:04:16 +0100	Jan Dankert	UI Fixes: Table filter should not hide the table header; open actual object in navigation tree; load dialog name from link text.
Sun, 15 Nov 2020 21:41:39 +0100	Jan Dankert	Fix: Reordering of folder content.
Wed, 14 Oct 2020 22:20:22 +0200	Jan Dankert	Refactoring: Renamed component folders, because 'if' is no valid namespace fragment.