|
|
| (35 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
| − |
| |
| − | /*
| |
| − | == Actual code ==
| |
| − | <source lang="javascript">
| |
| − | */
| |
| − | function collapseTable( tableIndex ) {
| |
| − | var Button = document.getElementById( 'collapseButton' + tableIndex );
| |
| − | var Table = document.getElementById( 'collapsibleTable' + tableIndex );
| |
| − | if ( !Table || !Button ) {
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | var collapseColsOptin = hasCollapsibleCol( tableIndex ); // new
| |
| − | var collapseColsOptout = hasNoncollapsibleCol( tableIndex ); // new
| |
| − | var Cols = Table.rows[0].cells; // new
| |
| − | var CollapseCols = new Array(Cols.length); // new; has to be larger if there are colspans
| |
| − |
| |
| − | if ( collapseColsOptin || collapseColsOptout ) {// new
| |
| − | // @colspan currently not handled
| |
| − | // the following two if-for-if constructs could be combined
| |
| − | if ( collapseColsOptin ) {
| |
| − | for ( var i = 0; i < Cols.length; i++ ) {
| |
| − | if ( CollapseCols[i] == null || !hasClass( Cols[i], 'collapsible' ) ) {
| |
| − | CollapseCols[i] = !collapseColsOptin;
| |
| − | } else {
| |
| − | CollapseCols[i] = collapseColsOptin;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | // 'nocollapse' takes precedence over 'collapsible', i.e.
| |
| − | // default columns are not collapsible when both types exist
| |
| − | if ( collapseColsOptout ) {
| |
| − | for ( var i = 0; i < Cols.length; i++ ) {
| |
| − | if ( CollapseCols[i] == null || !hasClass( Cols[i], 'nocollapse' ) ) {
| |
| − | CollapseCols[i] = collapseColsOptout;
| |
| − | } else {
| |
| − | CollapseCols[i] = !collapseColsOptout;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // column with first |th| should be excluded, because it holds the show/hide button
| |
| − | var Header = Table.rows[0].getElementsByTagName( 'th' )[0];
| |
| − | CollapseCols[Header.cellIndex] = false;// cellIndex doesn’t handle @colspan
| |
| − | }
| |
| − |
| |
| − | var Rows = Table.rows;
| |
| − |
| |
| − | // insert check for @colspan here, change CollapseCols accordingly
| |
| − |
| |
| − | if ( Button.firstChild.data == collapseCaption ) {// hide
| |
| − |
| |
| − | if ( collapseColsOptin || collapseColsOptout ) {// new
| |
| − | for ( var i = 0; i < Rows.length; i++ ) {
| |
| − | var Cells = Rows[i].cells;
| |
| − | for ( var j = 0; j < CollapseCols.length; j++) {
| |
| − | // if we used Cells.length the handling of rows with empty cells at the end should improve
| |
| − | // this would be a problem if the header row had empty cells at the end
| |
| − | // we could also do CollapseCols.length-Cells.length times Rows[i].insertCell(-1)
| |
| − | if ( CollapseCols[j] ) {
| |
| − | Cells[j].style.display = 'none';// needs to take @colspan into account
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var collapseRowsOptin = hasCollapsibleRow( tableIndex );// new
| |
| − | // @rowspan currently not handled
| |
| − | for ( var i = 1; i < Rows.length; i++ ) {
| |
| − | if ( collapseRowsOptin ) {// new
| |
| − | if ( hasClass( Rows[i], 'collapsible' ) ) {
| |
| − | Rows[i].style.display = 'none';
| |
| − | }
| |
| − | } else if ( !collapseColsOptin && !collapseColsOptout ) {
| |
| − | if ( !hasClass( Rows[i], 'nocollapse' ) &&
| |
| − | !( hasClass( Rows[i], 'sortbottom' ) && !hasClass( Rows[i], 'collapsible' ) )
| |
| − | ) { // new condition to exclude certain rows from collapsing
| |
| − | Rows[i].style.display = 'none';
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | Button.firstChild.data = expandCaption;
| |
| − |
| |
| − | } else {// show
| |
| − |
| |
| − | for ( var i = 0; i < Rows.length; i++ ) {
| |
| − |
| |
| − | if ( collapseColsOptin || collapseColsOptout ) {// new
| |
| − | var Cells = Rows[i].cells;
| |
| − | for ( var j = 0; j < CollapseCols.length; j++) {
| |
| − | if ( CollapseCols[j] ) {
| |
| − | Cells[j].style.display = Rows[0].style.display;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | Rows[i].style.display = Rows[0].style.display;
| |
| − | }
| |
| − |
| |
| − | Button.firstChild.data = collapseCaption;
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* new function to check whether the collapsible table has
| |
| − | * any column with the class 'collapsible'
| |
| − | */
| |
| − | function hasCollapsibleCol( tableIndex ) {
| |
| − | var Table = document.getElementById( 'collapsibleTable' + tableIndex );
| |
| − | if ( !Table ) {
| |
| − | return false;
| |
| − | }
| |
| − | var Cols = Table.rows[0].cells;
| |
| − |
| |
| − | for ( var i = 0; i < Cols.length; i++ ) {
| |
| − | if ( hasClass( Cols[i], 'collapsible' ) ) {
| |
| − | return true;
| |
| − | }
| |
| − | }
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | /* new function to check whether the collapsible table has
| |
| − | * any column with the class 'nocollapse'
| |
| − | */
| |
| − | function hasNoncollapsibleCol( tableIndex ) {
| |
| − | var Table = document.getElementById( 'collapsibleTable' + tableIndex );
| |
| − | if ( !Table ) {
| |
| − | return false;
| |
| − | }
| |
| − | var Cols = Table.rows[0].cells;
| |
| − |
| |
| − | for ( var i = 0; i < Cols.length; i++ ) {
| |
| − | if ( hasClass( Cols[i], 'nocollapse' ) ) {
| |
| − | return true;
| |
| − | }
| |
| − | }
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | /* new function to check whether the collapsible table has
| |
| − | * any row (except the header) with the class 'collapsible'
| |
| − | */
| |
| − | function hasCollapsibleRow( tableIndex ) {
| |
| − | var Table = document.getElementById( 'collapsibleTable' + tableIndex );
| |
| − | if ( !Table ) {
| |
| − | return false;
| |
| − | }
| |
| − | var Rows = Table.rows;
| |
| − |
| |
| − | for ( var i = 1; i < Rows.length; i++ ) {
| |
| − | if ( hasClass( Rows[i], 'collapsible' ) ) {
| |
| − | return true;
| |
| − | }
| |
| − | }
| |
| − | return false;
| |
| − | }
| |
| − | // </source>
| |
| − |
| |
| − |
| |
| − | /* Below was a test to show news on certain days of the year. */
| |
| − |
| |
| − | $( document ).ready(function() {
| |
| − | console.log( "document loaded" );
| |
| − |
| |
| − | var monthNames = [ "January (Januar)", "February (Februar)", "March (März)", "April", "May (Mai)", "June (Juni)", "July (Juli)", "August", "September", "October (Oktober)", "November", "December (Dezember)" ];
| |
| − |
| |
| − | var dayNames= ["Sunday (Sonntag)","Monday (Montag)","Tuesday (Dienstag)","Wednesday (Mittwoch)","Thursday (Donnerstag)","Friday (Freitag)","Saturday (Samstag)"]
| |
| − |
| |
| − | function nth(n){return["st","nd","rd"][((n+90)%100-10)%10-1]||"th"}
| |
| − |
| |
| − | var newDate = new Date();
| |
| − |
| |
| − | newDate.setDate(newDate.getDate());
| |
| − |
| |
| − | $('#FOMdate').html(dayNames[newDate.getDay()] + " the " + newDate.getUTCDate()+nth() + " of " + monthNames[newDate.getUTCMonth()] + ' ' + newDate.getUTCFullYear());
| |
| − |
| |
| − | setInterval( function() {
| |
| − |
| |
| − | var seconds = new Date().getSeconds();
| |
| − |
| |
| − | $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
| |
| − | },1000);
| |
| − |
| |
| − | setInterval( function() {
| |
| − |
| |
| − | var minutes = new Date().getMinutes();
| |
| − |
| |
| − | $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
| |
| − | },1000);
| |
| − |
| |
| − | setInterval( function() {
| |
| − |
| |
| − | var hours = new Date().getHours();
| |
| − |
| |
| − | $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
| |
| − | }, 1000)
| |
| − | });
| |
| − |
| |
| − | $(function() {
| |
| − |
| |
| − | $(".DateDiv").each(function(index) {
| |
| − | var sRange = $(this).find(".DateRange").html();
| |
| − | var arrTemp = sRange.split(" to ");
| |
| − | var dtFrom = new Date(arrTemp[0]);
| |
| − | var dtTo = new Date(arrTemp[1]);
| |
| − | var dtNow = new Date();
| |
| − | if (dtNow >= dtFrom && dtNow <= dtTo)
| |
| − | $(this).show();
| |
| − |
| |
| − | });
| |
| − |
| |
| − | var dob = $('#agedate').val();
| |
| − | if(dob != ''){
| |
| − | var str=dob.split('-');
| |
| − | var firstdate=new Date(str[0],str[1],str[2]);
| |
| − | var today = new Date();
| |
| − | var dayDiff = Math.ceil(today.getTime() - firstdate.getTime()) / (1000 * 60 * 60 * 24 * 365);
| |
| − | var age = parseInt(dayDiff);
| |
| − | $('#age').html(age+' ');
| |
| − | }
| |
| − | });
| |
| | | | |
| | //collapsible table column test, based on: https://codepen.io/feger/pen/eDybC | | //collapsible table column test, based on: https://codepen.io/feger/pen/eDybC |
| | $("#btnHideEnglish").click(function(){ | | $("#btnHideEnglish").click(function(){ |
| | console.log ('Hiding first column of table with an id of report'); | | console.log ('Hiding first column of table with an id of report'); |
| − | $( "table#report tbody tr th:nth-child(1)" ).toggle(); | + | $( "table#collapsible_report tbody tr th:nth-child(1)" ).toggle(); |
| − | $( "table#report tbody tr td:nth-child(1)" ).toggle(); | + | $( "table#collapsible_report tbody tr td:nth-child(1)" ).toggle(); |
| − | if ($(this).text() == "[Hide English]"){ | + | if ($(this).text() == "Hide English"){ |
| − | $(this).text("[Show English]"); | + | $(this).text("Show English"); |
| | } else { | | } else { |
| − | $(this).text("[Hide English]"); | + | $(this).text("Hide English"); |
| | } | | } |
| | }); | | }); |
| Line 238: |
Line 15: |
| | $("#btnHideGerman").click(function(){ | | $("#btnHideGerman").click(function(){ |
| | console.log ('Hiding second column of table with an id of report'); | | console.log ('Hiding second column of table with an id of report'); |
| − | $( "table#report tbody tr th:nth-child(2)" ).toggle(); | + | $( "table#collapsible_report tbody tr th:nth-child(2)" ).toggle(); |
| − | $( "table#report tbody tr td:nth-child(2)" ).toggle(); | + | $( "table#collapsible_report tbody tr td:nth-child(2)" ).toggle(); |
| − | if ($(this).text() == "[Hide German]"){ | + | if ($(this).text() == "Hide German"){ |
| − | $(this).text("[Show German]"); | + | $(this).text("Show German"); |
| | } else { | | } else { |
| − | $(this).text("[Hide German]"); | + | $(this).text("Hide German"); |
| | } | | } |
| | }); | | }); |
| | | | |
| − | | + | // hide the german by default, on page load, but only if the btnHideGerman element exists on the page |
| − | // uses table class | + | if (document.getElementById("btnHideGerman")) { |
| − | $("#hideEnglish").click(function(){
| + | console.log('btnHideGerman exists'); |
| − | console.log ('Hiding first column of table with an id of report'); | + | //$("#btnHideGerman").click(); |
| − | $( "table.collapsible_table tbody tr th:nth-child(1)" ).toggle(); | + | } else { |
| − | $( "table.collapsible_table tbody tr td:nth-child(1)" ).toggle();
| + | // do stuff |
| − | if ($(this).text() == "[Hide English]"){
| + | console.log('btnHideGerman does not exist'); |
| − | $(this).text("[Show English]");
| + | } |
| − | } else {
| |
| − | $(this).text("[Hide English]");
| |
| − | } | |
| − | });
| |
| − | | |
| − | $("#hideGerman").click(function(){
| |
| − | console.log ('Hiding second column of table with an id of report'); | |
| − | $( "table.collapsible_table tbody tr th:nth-child(2)" ).toggle();
| |
| − | $( "table.collapsible_table tbody tr td:nth-child(2)" ).toggle();
| |
| − | if ($(this).text() == "[Hide German]"){
| |
| − | $(this).text("[Show German]");
| |
| − | } else {
| |
| − | $(this).text("[Hide German]");
| |
| − | }
| |
| − | });
| |
