Difference between revisions of "MediaWiki:Common.js"

From Billy Meier
Line 251: Line 251:
 
$("#hideEnglish").click(function(){
 
$("#hideEnglish").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 .collapsible_table tbody tr th:nth-child(1)" ).fadeToggle("slow");
+
   $( "table .collapsible_table tbody tr th:nth-child(1)" ).toggle();
   $( "table .collapsible_table tbody tr td:nth-child(1)" ).fadeToggle("slow");
+
   $( "table .collapsible_table 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]");

Revision as of 19:14, 19 June 2019

/* 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
$("#btnHideEnglish").click(function(){
  console.log ('Hiding first column of table with an id of report');
  $( "table#report tbody tr th:nth-child(1)" ).toggle();
  $( "table#report tbody tr td:nth-child(1)" ).toggle();
  if ($(this).text() == "[Hide English]"){
    $(this).text("[Show English]");
  } else {
    $(this).text("[Hide English]");
  }
});

$("#btnHideGerman").click(function(){
  console.log ('Hiding second column of table with an id of report');
  $( "table#report tbody tr th:nth-child(2)" ).toggle();
  $( "table#report tbody tr td:nth-child(2)" ).toggle();
  if ($(this).text() == "[Hide German]"){
    $(this).text("[Show German]");
  } else {
    $(this).text("[Hide German]");
  }
});


// uses table class 
$("#hideEnglish").click(function(){
  console.log ('Hiding first column of table with an id of report');
  $( "table .collapsible_table tbody tr th:nth-child(1)" ).toggle();
  $( "table .collapsible_table tbody tr td:nth-child(1)" ).toggle();
  if ($(this).text() == "[Hide English]"){
    $(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]");
  }
});