3

GM 脚本：MediaWiki 脚注 tooltip

 3 years ago
source link: https://blog.lilydjwg.me/2012/1/10/gm-script-mediawiki-tooltip-for-cites.31699.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

GM 脚本：MediaWiki 脚注 tooltip

本文来自依云's Blog，转载请注明。

MediaWiki 使用脚注插件后就多了脚注功能。可无奈这插件把网页当成纸质书了，脚注得点击跳转后才能看到内容。我不胜其烦，遂作此脚本。只对我自己的 wiki 和英文维基百科启用了，因为另一个常去的 MediaWiki 站点——中文维基百科有个导航Popup小工具更好用。我还是一如既往地没有使用 jQuery。

mediawiki_tip.user.js
// ==UserScript==
// @name           MediaWiki 脚注 tip
// @namespace      http://lilydjwg.is-programmer.com/
// @include        http://localhost/wiki/*
// @include        https://en.wikipedia.org/wiki/*
// ==/UserScript==
var showTip = function(evt){
var el = evt.target;
var left = el.offsetLeft;
var top = el.offsetTop;
var tip = document.getElementById('gm-tip');
//not el.href here; we need the original one
var tipTextEl = document.getElementById(el.getAttribute('href').substring(1));
tip.innerHTML = tipTextEl.textContent.substring(2);
tip.style.top = (top+5) + 'px';
tip.style.left = (left+25) + 'px';
tip.style.display = 'block';
};
var hideTip = function(){
var el = document.getElementById('gm-tip');
if(el){
el.style.display = "none";
}
};
var cites = document.querySelectorAll('.reference > a');
// var cites = document.querySelectorAll('a[href^="#cite_note-"]');
for(var i=0, len=cites.length; i<len; i++){
cites[i].addEventListener("mouseover", showTip, false);
cites[i].addEventListener("mouseout", hideTip, false);
}
var setup = function(){
el = document.createElement('div');
el.setAttribute('id', 'gm-tip');
el.style.display = 'none';
el.style.position = 'absolute';
el.style.zIndex = '100';
el.style.border = '1px #1e90ff solid';
el.style.backgroundColor = 'rgba(115, 201, 230, 0.75)';
el.style.padding = '0.2em 0.5em';
var parentEl = cites[0].offsetParent;
parentEl.appendChild(el);
};
if(cites.length > 0){
setup();
}

发送到 Kindle

评论 (0)

[取消回复评论]

昵称 登录 E-mail: *
Web:
Twitter:
当有新评论通过 E-mail 通知我

loading captcha image...
(输入验证码)

or Ctrl+Enter


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK