MediaWiki:Common.js: Difference between revisions

From Future Of Mankind
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 57: Line 57:
         } else if (leftPosition + tooltipWidth > windowWidth) {
         } else if (leftPosition + tooltipWidth > windowWidth) {
             leftPosition = windowWidth - tooltipWidth - 10; // Align to the right edge with a small margin
             leftPosition = windowWidth - tooltipWidth - 10; // Align to the right edge with a small margin
            // Adjust the triangle position
            tooltip.find('.triangle').css('left', 'auto').css('right', '10px'); // Position triangle to the right
        } else {
            // Reset triangle position if tooltip is not at the edge
            tooltip.find('.triangle').css('left', '50%').css('right', 'auto'); // Center triangle
         }
         }


Line 70: Line 65:
         var tooltipHeight = tooltip.outerHeight();
         var tooltipHeight = tooltip.outerHeight();
         var topPosition = $(this).offset().top - tooltipHeight - 10; // Position above the element
         var topPosition = $(this).offset().top - tooltipHeight - 10; // Position above the element
         if (topPosition < 0) {
         if (topPosition < 0) {
             topPosition = $(this).offset().top + $(this).outerHeight() + 10; // Position below the element if it goes off-screen
             topPosition = $(this).offset().top + $(this).outerHeight() + 10; // Position below the element if it goes off-screen
            // Adjust the triangle position to point upwards
            tooltip.find('.triangle').css('top', '100%').css('bottom', 'auto'); // Position triangle below
        } else {
            // Adjust the triangle position to point downwards
            tooltip.find('.triangle').css('top', 'auto').css('bottom', '100%'); // Position triangle above
         }
         }



Revision as of 10:38, 10 September 2024

/* 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:last-child > tr > th:first-child, table#collapsible_report > tbody:last-child > tr > td:first-child").toggle();
    $(this).text($(this).text() == "Hide English" ? "Show English" : "Hide English");
    $("table#collapsible_report").css({
        "width": $(this).text() == "Show English" ? "80%" : "100%"
    });
});

$(".btnHideHigh-German").click(function() {
    console.log('Hiding first column of table with an id of report');
    $("table#collapsible_report > tbody:last-child > tr > th:last-child, table#collapsible_report > tbody:last-child > tr > td:last-child").toggle();
    $(this).text($(this).text() == "Hide High German" ? "Show High German" : "Hide High German");
    $("table#collapsible_report").css({
        "width": $(this).text() == "Show High German" ? "80%" : "100%"
    });
});

$(".btnHideGerman").click(function() {
    console.log('Hiding first column of table with an id of report');
    $("table#collapsible_report > tbody:last-child > tr > th:last-child, table#collapsible_report > tbody:last-child > tr > td:last-child").toggle();
    $(this).text($(this).text() == "Hide German" ? "Show German" : "Hide German");
    $("table#collapsible_report").css({
        "width": $(this).text() == "Show German" ? "80%" : "100%"
    });
});

// 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');
}


$(document).ready(function() {
    $('.WD-Gewalt').hover(function() {
        // Set the tooltip content from the data attribute
        $(this).attr('data-tooltip', 'Explanation from Ptaah: Gewalt has nothing to do with the terms ‹heftig› (violent) and ‹Heftigkeit› (violence), because the old Lyrian term with regard to ‹Gewalt› means ‹Gewila›, and it is defined as using, with all the coercive means that are at one’s disposal, physical, psychical, mental, and consciousness-based powers, abilities and skills, in order to carry out and carry through terrible actions and deeds.');

        // Get the tooltip element
        var tooltip = $(this).find(':before');

        // Calculate the position of the tooltip
        var tooltipWidth = tooltip.outerWidth();
        var leftPosition = $(this).offset().left + ($(this).outerWidth() / 2) - (tooltipWidth / 2);
        var windowWidth = $(window).width();

        // Adjust the tooltip position if it goes off-screen horizontally
        if (leftPosition < 0) {
            leftPosition = 0; // Align to the left edge
        } else if (leftPosition + tooltipWidth > windowWidth) {
            leftPosition = windowWidth - tooltipWidth - 10; // Align to the right edge with a small margin
        }

        // Set the adjusted horizontal position
        tooltip.css('left', leftPosition + 'px');

        // Adjust tooltip position if it goes off-screen vertically
        var tooltipHeight = tooltip.outerHeight();
        var topPosition = $(this).offset().top - tooltipHeight - 10; // Position above the element

        if (topPosition < 0) {
            topPosition = $(this).offset().top + $(this).outerHeight() + 10; // Position below the element if it goes off-screen
            // Adjust the triangle position to point upwards
            tooltip.find('.triangle').css('top', '100%').css('bottom', 'auto'); // Position triangle below
        } else {
            // Adjust the triangle position to point downwards
            tooltip.find('.triangle').css('top', 'auto').css('bottom', '100%'); // Position triangle above
        }

        // Set the adjusted vertical position
        tooltip.css('top', topPosition + 'px');
    }, function() {
        // Clear the tooltip content
        $(this).attr('data-tooltip', '');
    });
});