Difference between revisions of "User:Wookipan/Sandbox/Page.js"

From Team Fortress Wiki
Jump to: navigation, search
(Add comments with brief explanations, add "hasLink" function to handle tooltips with links on handheld devices)
m (Minor adjustments, increase target width to accommodate the wiki's odd container width)
Line 4: Line 4:
  
 
         if ($tooltips[0]) {
 
         if ($tooltips[0]) {
             $tooltips.each(function () {
+
             $tooltips.each(function() {
 
                 var $this = $(this);
 
                 var $this = $(this);
  
Line 12: Line 12:
 
                 if (edgeRect - widthRect > $this.width()*0) {
 
                 if (edgeRect - widthRect > $this.width()*0) {
 
                     $this.css('left', '');
 
                     $this.css('left', '');
                     $this.css('right', '10px');
+
                     $this.css('right', '0');
 
                 }
 
                 }
  
Line 19: Line 19:
 
                     $this.closest('a').removeAttr('title');
 
                     $this.closest('a').removeAttr('title');
  
                     if (widthRect <= 820) {
+
                     if (widthRect <= 1000) {
 
                         wikiTooltip.hasLink($this);
 
                         wikiTooltip.hasLink($this);
 
                     }
 
                     }

Revision as of 22:09, 4 September 2023

var wikiTooltip = {
    init: function() {
        var $tooltips = $('.wiki-tooltip .wiki-tooltip-content');

        if ($tooltips[0]) {
            $tooltips.each(function() {
                var $this = $(this);

                // Prevent tooltips from overflowing the viewport
                edgeRect = $this.width() + $this.offset().left;
                widthRect = $(window).width();
                if (edgeRect - widthRect > $this.width()*0) {
                    $this.css('left', '');
                    $this.css('right', '0');
                }

                // Check for links and handle them on handheld devices
                if ($this.closest('a').attr('href') !== undefined) {
                    $this.closest('a').removeAttr('title');

                    if (widthRect <= 1000) {
                        wikiTooltip.hasLink($this);
                    }
                }
            });
        }
    },
    hasLink: function(tooltip) {
        var $a = $('<a>');
        var url = tooltip.closest('a');
        var href = url.attr('href');

        $a.attr('href', href);
        url.attr('href', 'javascript:void(0);');
        tooltip.append($a);
        tooltip.css('pointer-events', 'auto');
    }
};
$(wikiTooltip.init);