diff --git a/modules/ext.scryfallLinks.less b/modules/ext.scryfallLinks.less index dac63f1..4fabd40 100644 --- a/modules/ext.scryfallLinks.less +++ b/modules/ext.scryfallLinks.less @@ -6,6 +6,7 @@ a.ext-scryfall-link { div.tippy-tooltip.scryfall-theme { padding: 0; background-color: transparent; + height: 340px; } div.tippy-tooltip.ext-scryfall-error { border-radius: 12px; diff --git a/modules/ext.scryfallLinks.tooltip.js b/modules/ext.scryfallLinks.tooltip.js index 2e65886..77afb69 100644 --- a/modules/ext.scryfallLinks.tooltip.js +++ b/modules/ext.scryfallLinks.tooltip.js @@ -24,29 +24,36 @@ $( function () { content = thisPopper.querySelector( '.tippy-content' ), /* eslint no-underscore-dangle: ["error", { "allow": ["_reference"] }] */ target = thisPopper._reference, - cardNameParam = 'exact=' + target.dataset.cardName, - cardSet = target.dataset.cardSet, - cardSetParam = cardSet ? '&set=' + cardSet : '', - cardJSON = 'https://api.scryfall.com/cards/named?' + cardNameParam + cardSetParam; + jsonURI = new URL( 'https://api.scryfall.com/cards/named' ); var rotationClass = 'ext-scryfall-rotate-0'; + jsonURI.searchParams.set( 'exact', target.dataset.cardName ); + jsonURI.searchParams.set( 'set', typeof target.dataset.cardSet === 'undefined' ? '' : target.dataset.cardSet ); if ( tip.loading || content.innerHTML !== '' ) { return; } tip.loading = true; // Hide the tooltip until we've finished loaded the image thisPopper.style.display = 'none'; // fetch() only works on modern browsers - fetch( cardJSON ) + fetch( jsonURI ) .then( response => { if ( !response.ok ) { throw Error( response.statusText ); } return response; } ) .then( response => response.json() ) .then( data => { + const queryURI = new URL( target.href ); + const directURI = new URL( data.scryfall_uri ); + const utm_source = queryURI.searchParams.get( 'utm_source' ); + directURI.searchParams.set( 'utm_source', utm_source ); if ( data.hasOwnProperty( 'card_faces' ) ) { const isSecondface = data.card_faces[ 0 ].name.replace( /[^a-z]/ig, '' ).toUpperCase() !== decodeURIComponent( target.dataset.cardName ).replace( /[^a-z]/ig, '' ).toUpperCase(); if ( data.layout === 'transform' || data.layout === 'double_faced_token' ) { - const i = isSecondface ? 1 : 0; - return data.card_faces[ i ].image_uris.normal; + if ( isSecondface ) { + target.href = directURI.href + '&back'; + return data.card_faces[ 1 ].image_uris.normal; + } else { + return data.card_faces[ 0 ].image_uris.normal; + } } else if ( data.layout === 'split' ) { if ( data.card_faces[ 1 ].oracle_text.startsWith( 'Aftermath' ) ) { if ( isSecondface ) { rotationClass = 'ext-scryfall-rotate-90ccw'; } @@ -55,6 +62,7 @@ $( function () { if ( isSecondface ) { rotationClass = 'ext-scryfall-rotate-180'; } } } + target.href = directURI.href; if ( data.layout === 'planar' ) { rotationClass = 'ext-scryfall-rotate-90cw'; } return data.image_uris.normal; } ) diff --git a/src/Hooks.php b/src/Hooks.php index 2094906..8db0576 100644 --- a/src/Hooks.php +++ b/src/Hooks.php @@ -190,8 +190,8 @@ protected static function outputLink( $card, $set, $anchor ) { $search = '!"' . $card . '"' . $setquery; $output = '' . htmlspecialchars( $anchor ) . ''; + htmlspecialchars( $card ) . '" data-card-set="' . + htmlspecialchars( $set ) . '">' . htmlspecialchars( $anchor ) . ''; return $output; }