mNo edit summary |
No edit summary |
||
Line 10: | Line 10: | ||
var _img = $( this ).find( 'img' ).attr( 'src' ), |
var _img = $( this ).find( 'img' ).attr( 'src' ), |
||
_l = $( this ).find( 'a' ).attr( 'href' ), |
_l = $( this ).find( 'a' ).attr( 'href' ), |
||
− | _t = $( this ).attr( 'data-text' ) |
+ | _t = $( this ).attr( 'data-text' ), |
+ | _id = 'canvas_tml_' + _i; |
||
− | $( this ).append( '<canvas id=" |
+ | $( this ).append( '<canvas id="' + _id + '" style="display: inline;"></canvas>' ); |
− | var _can = document.getElementById( |
+ | var _can = document.getElementById( _id ), |
_ctx = _can.getContext( '2d' ); |
_ctx = _can.getContext( '2d' ); |
||
Line 22: | Line 23: | ||
_img1.addEventListener( 'load', function() { |
_img1.addEventListener( 'load', function() { |
||
_img2.addEventListener( 'load', function() { |
_img2.addEventListener( 'load', function() { |
||
− | _can.width = 90; |
+ | _can.width = _can.height = 90; |
⚫ | |||
_ctx.globalAlpha = 1.0; |
_ctx.globalAlpha = 1.0; |
||
Line 33: | Line 33: | ||
_ctx.strokeStyle = "black"; |
_ctx.strokeStyle = "black"; |
||
_ctx.fillStyle = "white"; |
_ctx.fillStyle = "white"; |
||
− | _ctx.strokeText( _t, |
+ | _ctx.strokeText( _t, 7, 17 ); |
− | _ctx.fillText( _t, |
+ | _ctx.fillText( _t, 7, 17 ); |
}); |
}); |
||
_img2.src = _img; |
_img2.src = _img; |
||
Line 40: | Line 40: | ||
_img1.src = _b_img; |
_img1.src = _b_img; |
||
+ | // If link (_l) is not image: |
||
⚫ | |||
− | + | if ( !/(.+)\/\/(vignette|img|images)/.test( _l ) ) { |
|
− | + | _can.style.cursor = 'pointer'; |
|
+ | |||
− | window.location = _l; |
||
⚫ | |||
⚫ | |||
⚫ | |||
+ | }); |
||
⚫ | |||
+ | $( this ).find( 'a' ).remove(); |
||
+ | |||
_i = _i + 1; |
_i = _i + 1; |
||
}); |
}); |
Revision as of 11:53, 19 November 2017
/* Any JavaScript here will be loaded for all users on every page load. */
!function( $ ) {
if ( !$( '.can-template-body' ).length ) return;
var _b_img = 'https://images.wikia.nocookie.net/clashofclans/images/1/12/AvailableBuildingsBackground.png',
_i = 1;
$( '.can-template-body' ).each( function() {
var _img = $( this ).find( 'img' ).attr( 'src' ),
_l = $( this ).find( 'a' ).attr( 'href' ),
_t = $( this ).attr( 'data-text' ),
_id = 'canvas_tml_' + _i;
$( this ).append( '<canvas id="' + _id + '" style="display: inline;"></canvas>' );
var _can = document.getElementById( _id ),
_ctx = _can.getContext( '2d' );
var _img1 = new Image(),
_img2 = new Image();
_img1.addEventListener( 'load', function() {
_img2.addEventListener( 'load', function() {
_can.width = _can.height = 90;
_ctx.globalAlpha = 1.0;
_ctx.drawImage( _img1, 0, 0, 90, 90 );
_ctx.drawImage( _img2, 0, 0, 90, 90 );
_ctx.font = "12px 'Clash'";
_ctx.lineWidth = 3;
_ctx.strokeStyle = "black";
_ctx.fillStyle = "white";
_ctx.strokeText( _t, 7, 17 );
_ctx.fillText( _t, 7, 17 );
});
_img2.src = _img;
});
_img1.src = _b_img;
// If link (_l) is not image:
if ( !/(.+)\/\/(vignette|img|images)/.test( _l ) ) {
_can.style.cursor = 'pointer';
_can.addEventListener( 'click', function() {
window.location = _l;
});
}
$( this ).find( 'a' ).remove();
_i = _i + 1;
});
}( jQuery );