Difference between revisions of "User:Wookipan/Sandbox/Page.js"
< User:Wookipan | Sandbox
m (Change block order to ensure that tooltips containing links are handled before checking the offset, remove unnecessary "pointer-events" applied to link tooltips) |
(Code improvments, add handler function for handling tooltips when resizing the window, add "removeAnchor" function for removing the article link when window is resized back to desktop width) |
||
| Line 6: | Line 6: | ||
$tooltips.each(function() { | $tooltips.each(function() { | ||
var $this = $(this); | var $this = $(this); | ||
| + | function handler() { | ||
| + | // Check for links and handle them on handheld devices | ||
| + | if (!!$this.closest('a').attr('href')) { | ||
| + | $this.closest('a').removeAttr('title'); | ||
| − | + | widthRect <= 1000 ? wikiTooltip.hasLink($this) : wikiTooltip.removeAnchor($this); | |
| − | + | } | |
| − | |||
| − | if (widthRect | + | // Prevent tooltips from overflowing the viewport |
| − | + | edgeRect = $this.width() + $this[0].getBoundingClientRect().left; | |
| + | widthRect = $(window).innerWidth(); | ||
| + | if (edgeRect > (widthRect || $(body).clientWidth)) { | ||
| + | $this.css('left', ''); | ||
| + | $this.css('right', '100%'); | ||
| + | } else { | ||
| + | $this.css('right', ''); | ||
| + | $this.css('left', '100%'); | ||
} | } | ||
} | } | ||
| − | + | $(handler); | |
| − | + | setTimeout(function() { | |
| − | + | $(window).on('resize', handler); | |
| − | + | }, 250); | |
| − | |||
| − | $ | ||
| − | |||
| − | } | ||
}); | }); | ||
} | } | ||
}, | }, | ||
hasLink: function(tooltip) { | hasLink: function(tooltip) { | ||
| − | var $a = $('<a>'); | + | if (tooltip.find('a').length < 1) { |
| + | 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); | ||
| + | } | ||
| + | }, | ||
| + | removeAnchor: function(tooltip) { | ||
var url = tooltip.closest('a'); | var url = tooltip.closest('a'); | ||
var href = url.attr('href'); | var href = url.attr('href'); | ||
| − | + | innerLink = tooltip.find('a').attr('href'); | |
| − | url.attr('href', | + | if (innerLink) { |
| − | + | href = innerLink; | |
| + | url.attr('href', href); | ||
| + | tooltip.find('a').remove(); | ||
| + | } else { | ||
| + | return; | ||
| + | } | ||
} | } | ||
}; | }; | ||
$(wikiTooltip.init); | $(wikiTooltip.init); | ||
Revision as of 17:53, 2 October 2023
var wikiTooltip = {
init: function() {
var $tooltips = $('.wiki-tooltip .wiki-tooltip-content');
if ($tooltips[0]) {
$tooltips.each(function() {
var $this = $(this);
function handler() {
// Check for links and handle them on handheld devices
if (!!$this.closest('a').attr('href')) {
$this.closest('a').removeAttr('title');
widthRect <= 1000 ? wikiTooltip.hasLink($this) : wikiTooltip.removeAnchor($this);
}
// Prevent tooltips from overflowing the viewport
edgeRect = $this.width() + $this[0].getBoundingClientRect().left;
widthRect = $(window).innerWidth();
if (edgeRect > (widthRect || $(body).clientWidth)) {
$this.css('left', '');
$this.css('right', '100%');
} else {
$this.css('right', '');
$this.css('left', '100%');
}
}
$(handler);
setTimeout(function() {
$(window).on('resize', handler);
}, 250);
});
}
},
hasLink: function(tooltip) {
if (tooltip.find('a').length < 1) {
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);
}
},
removeAnchor: function(tooltip) {
var url = tooltip.closest('a');
var href = url.attr('href');
innerLink = tooltip.find('a').attr('href');
if (innerLink) {
href = innerLink;
url.attr('href', href);
tooltip.find('a').remove();
} else {
return;
}
}
};
$(wikiTooltip.init);
