MediaWiki:Common.js: Difference between revisions

From Future Of Mankind
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 41: Line 41:


$(document).ready(function() {
$(document).ready(function() {
    // Create our tooltip element
    var tooltip = $('
', { id: 'tooltip' }).appendTo('body').css({
        position: 'absolute',
        backgroundColor: 'yellow',
        padding: '2px 5px',
        margin: '10px',
        display: 'none'
    });
     $('.WD-Gewalt').hover(function() {
     $('.WD-Gewalt').hover(function() {
         // Set the tooltip content from the data attribute
         // Set the tooltip content from the data attribute
         const tooltipContent = '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.';
         var tooltipContent = '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.';
         $(this).attr('data-tooltip', tooltipContent);
          
 
         tooltip.text(tooltipContent);
        // Position the tooltip
         const tooltip = $(this).find('::before');
        const tooltipWidth = tooltip.outerWidth();
        const tooltipHeight = tooltip.outerHeight();
        const elementOffset = $(this).offset();
        const viewportWidth = $(window).width();
        const viewportHeight = $(window).height();
 
        let left = elementOffset.left + ($(this).outerWidth() / 2) - (tooltipWidth / 2);
        let top = elementOffset.top - tooltipHeight - 10; // 10px above the element


         // Adjust if the tooltip goes off-screen
         $(this).mousemove(function(e) {
        if (left < 0) {
            // Get full size (including padding + margin) of tooltip
             left = 10; // Keep it within the viewport
            var tw = tooltip.outerWidth(true);
        } else if (left + tooltipWidth > viewportWidth) {
            var th = tooltip.outerHeight(true);
             left = viewportWidth - tooltipWidth - 10; // Keep it within the viewport
            var x = e.pageX;
        }
             var y = e.pageY;
            var w = $(document).width();
             var h = $(document).height();


        if (top < 0) {
            // If the tooltip is going to overflow the page, keep it inside
             top = elementOffset.top + $(this).outerHeight() + 10; // Position below the element if it goes off-screen
            if (x + tw >= w) {
        }
                x = w - tw;
             }
            if (y + th >= h) {
                y = h - th;
            }


        tooltip.css({ top: top, left: left });
            // Show the tooltip and set its position
            tooltip.fadeIn('fast').css({ 'left': x, 'top': y });
        });
     }, function() {
     }, function() {
         // Clear the tooltip content
         // Clear the tooltip content and hide it
         $(this).attr('data-tooltip', '');
         tooltip.stop().fadeOut('fast', function() {
            $(this).text('');
        });
     });
     });
});
});

Revision as of 11:22, 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() {
    // Create our tooltip element
    var tooltip = $('
', { id: 'tooltip' }).appendTo('body').css({
        position: 'absolute',
        backgroundColor: 'yellow',
        padding: '2px 5px',
        margin: '10px',
        display: 'none'
    });

    $('.WD-Gewalt').hover(function() {
        // Set the tooltip content from the data attribute
        var tooltipContent = '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.';
        
        tooltip.text(tooltipContent);

        $(this).mousemove(function(e) {
            // Get full size (including padding + margin) of tooltip
            var tw = tooltip.outerWidth(true);
            var th = tooltip.outerHeight(true);
            var x = e.pageX;
            var y = e.pageY;
            var w = $(document).width();
            var h = $(document).height();

            // If the tooltip is going to overflow the page, keep it inside
            if (x + tw >= w) {
                x = w - tw;
            }
            if (y + th >= h) {
                y = h - th;
            }

            // Show the tooltip and set its position
            tooltip.fadeIn('fast').css({ 'left': x, 'top': y });
        });
    }, function() {
        // Clear the tooltip content and hide it
        tooltip.stop().fadeOut('fast', function() {
            $(this).text('');
        });
    });
});