您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Display MTG cards in tooltip when hovering over Gatherer and Autocard links
// ==UserScript== // @name HoverCard: BoardGames.SE MTG Gatherer Card Link Rollover // @namespace https://greasyfork.org/users/38387 // @description Display MTG cards in tooltip when hovering over Gatherer and Autocard links // @grant none // @match *://boardgames.stackexchange.com/questions/* // @match *://meta.boardgames.stackexchange.com/questions/* // @match *://boardgames.meta.stackexchange.com/questions/* // @version 1.0.10 // ==/UserScript== var userscript = function($) { var hoverCss = '\ #hoverCard { \ position: fixed; \ z-index: 1; \ display: none; \ width: 223px; \ height: 311px; \ background: #191919; \ background: linear-gradient(to bottom,#191919 0%,#282828 100%); \ border-radius: 11px; \ overflow: hidden; \ box-shadow: 0 0 7px #333; \ } \ #hoverCard::before { \ position: absolute; \ bottom: 0; \ width: 100%; \ height: 50px; \ color: #999; \ text-align: center; \ font-weight: bold; \ text-shadow: 0 -2px 2px #191919, 0 1px 1px #444; \ content: "Gathering..."; \ } \ #hoverCard img { \ position: absolute; \ } \ '; var hoverCard = { selectors : function() { // THIS METHOD IS NO LONGER USED AS OF v1.0.6. Added lines 56,60-72 to fix this. // Chrome no longer seems to like [... i] selectors for case-insensitive matching. // This makes the code a bit more clunky because I can no longer filter the // selectors directly, but must match ALL hyperlink anchors and see if they match // any of the MTG urls below after forcing them to lowercase. var urls = [ '://www.wizards.com/magic/autocard.asp' , '://gatherer.wizards.com/Pages/Card/Details.aspx' , '://gatherer.wizards.com/Pages/Search/Default.aspx' , '://gatherer.wizards.com/Handlers/Image.ashx' ]; //return 'a[href*="' + urls.join( '" i], a[href*="' ) + '" i]'; return urls; }, imageUrl : 'http://gatherer.wizards.com/Handlers/Image.ashx?type=card&', extractCard : function( href, key ) { var match = false; var urls = this.selectors(); urls.forEach( function( url ) { if( href.toLowerCase().indexOf( url.toLowerCase() ) > -1 ) { match = true; return; } }); if( !match ) { return { success : false }; } var query; if( href.indexOf( '#' ) == -1 ) { query = href.substring( href.indexOf( '?' ) + 1 ); } else { query = href.substring( href.indexOf( '?' ) + 1, href.indexOf( '#' ) ); } query = query.split( '&' ); var result = {}; result.success = false; for( var i = 0; i < query.length; ++i ) { var pair = query[ i ].split( '=' ); if( pair[ 0 ].toLowerCase() == 'name' || pair[ 0 ].toLowerCase() == 'multiverseid' ) { result.success = true; result.key = pair[ 0 ]; result.value = encodeURIComponent( decodeURIComponent( pair[ 1 ] ).replace( /\]\+\[/g, ' ' ).replace( /[\+\[\]]/g, '' ) ); break; } } return result; }, initDom : function() { var styleHead = $( '<style>' ).attr( 'id', 'mtg-hovercard' ).text( hoverCss ), popupHtml = '<div id="hoverCard"></div>'; $( 'head' ).append( styleHead ); $( '#mainbar' ).append( popupHtml ); }, calcPos : function( anchor ) { var popupWidth = 223, popupHeight = 311, popupMaxWidth = $( '#mainbar' ).width(), anchorWidth = $( anchor )[0].offsetWidth, anchorHeight = $( anchor )[0].offsetHeight, anchorPosRel = $( anchor )[0].getBoundingClientRect(), contentPosRel = $( '#mainbar' )[0].getBoundingClientRect(); var offsetTop = anchorPosRel.top + anchorHeight + 8, offsetLeft = ( popupMaxWidth / 2 ) - ( popupWidth / 2 ); if( offsetTop > ( document.documentElement.clientHeight - popupHeight - 8 ) ) { offsetTop = offsetTop - popupHeight - anchorHeight - 16; } if( popupWidth < popupMaxWidth ) { var leeway = popupMaxWidth - popupWidth - offsetLeft - 1 + ( anchorPosRel.left - contentPosRel.left ), anchorCenter = anchorPosRel.left + ( anchorWidth / 2 ), popupCenter = offsetLeft + ( popupWidth / 2 ); var nudgeRight = anchorCenter - popupCenter; nudgeRight = nudgeRight > leeway ? leeway : nudgeRight; offsetLeft = offsetLeft + nudgeRight; } offsetLeft = offsetLeft < 0 ? anchorPosRel.left : offsetLeft; offsetLeft = anchorWidth > popupMaxWidth * 0.7 ? anchorPosRel.left : offsetLeft; return { left : offsetLeft, top : offsetTop }; }, showCard : function( anchor ) { var card = hoverCard.extractCard( $( anchor ).attr( 'href' ) ); if( !card.success ) { return false; } var html = '<img src="' + hoverCard.imageUrl + card.key + '=' + card.value + '" />'; var pos = hoverCard.calcPos( anchor ); $( '#hoverCard' ).stop().hide().html( html ).fadeTo( 350, 1.0 ).css({ left : Math.floor( pos.left ), top : Math.floor( pos.top ) }); }, hideCard : function() { $( '#hoverCard' ).stop().fadeTo( 350, 0.0, function() { $( this ).hide(); }); } }; StackExchange.ready( function() { hoverCard.initDom(); $( 'body' ).on( 'mouseenter mouseleave', 'a', function( e ) { if( e.type == 'mouseenter' ) { hoverCard.showCard( this ); } else if( e.type == 'mouseleave' ) { hoverCard.hideCard(); } }); }); }; var el = document.createElement('script'); el.type = 'text/javascript'; el.text = '(' + userscript + ')(jQuery);'; document.head.appendChild(el);