Difference between revisions of "MediaWiki:Common.js"

From Billy Meier
(Undo revision 46336 by Jamesm (talk))
Tag: Undo
 
(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]");
 
  }
 
});
 

Latest revision as of 22:33, 14 September 2021

/* Any JavaScript here will be loaded for all users on every page load. */

//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#collapsible_report tbody tr th:nth-child(1)" ).toggle();
  $( "table#collapsible_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#collapsible_report tbody tr th:nth-child(2)" ).toggle();
  $( "table#collapsible_report tbody tr td:nth-child(2)" ).toggle();
  if ($(this).text() == "Hide German"){
    $(this).text("Show German");
  } else {
    $(this).text("Hide German");
  }
});

// hide the german by default, on page load, but only if the btnHideGerman element exists on the page
if (document.getElementById("btnHideGerman")) {
  console.log('btnHideGerman exists');
  //$("#btnHideGerman").click();
} else {
  // do stuff
  console.log('btnHideGerman does not exist');
}