142 lines
3.9 KiB
JavaScript
142 lines
3.9 KiB
JavaScript
|
jQuery(document).ready(function ($) {
|
||
|
|
||
|
let bodhisvgsReplacements = 0;
|
||
|
|
||
|
function bodhisvgsReplace(img) {
|
||
|
|
||
|
var imgID = img.attr('id');
|
||
|
var imgClass = img.attr('class');
|
||
|
var imgURL = img.attr('src');
|
||
|
|
||
|
// Set svg size to the original img size
|
||
|
// var imgWidth = $img.attr('width');
|
||
|
// var imgHeight = $img.attr('height');
|
||
|
|
||
|
if (!imgURL.endsWith('svg')) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
$.get(imgURL, function(data) {
|
||
|
|
||
|
// Get the SVG tag, ignore the rest
|
||
|
var $svg = $(data).find('svg');
|
||
|
|
||
|
var svgID = $svg.attr('id');
|
||
|
|
||
|
// Add replaced image's ID to the new SVG if necessary
|
||
|
if(typeof imgID === 'undefined') {
|
||
|
if(typeof svgID === 'undefined') {
|
||
|
imgID = 'svg-replaced-'+bodhisvgsReplacements;
|
||
|
$svg = $svg.attr('id', imgID);
|
||
|
} else {
|
||
|
imgID = svgID;
|
||
|
}
|
||
|
} else {
|
||
|
$svg = $svg.attr('id', imgID);
|
||
|
}
|
||
|
|
||
|
// Add replaced image's classes to the new SVG
|
||
|
if(typeof imgClass !== 'undefined') {
|
||
|
$svg = $svg.attr('class', imgClass+' replaced-svg svg-replaced-'+bodhisvgsReplacements);
|
||
|
}
|
||
|
|
||
|
// Remove any invalid XML tags as per http://validator.w3.org
|
||
|
$svg = $svg.removeAttr('xmlns:a');
|
||
|
|
||
|
if(frontSanitizationEnabled == 'on' && $svg[0]['outerHTML'] != "") { // Is sanitization enabled?
|
||
|
$svg = DOMPurify.sanitize($svg[0]['outerHTML']); // Sanitize SVG code via DOMPurify library
|
||
|
}
|
||
|
|
||
|
// Add size attributes
|
||
|
// $svg = $svg.attr('width', imgWidth);
|
||
|
// $svg = $svg.attr('height', imgHeight);
|
||
|
|
||
|
// Replace image with new SVG
|
||
|
img.replaceWith($svg);
|
||
|
|
||
|
$(document).trigger('svg.loaded', [imgID]);
|
||
|
|
||
|
bodhisvgsReplacements++;
|
||
|
|
||
|
}, 'xml');
|
||
|
|
||
|
}
|
||
|
|
||
|
// Wrap in IIFE so that it can be called again later as bodhisvgsInlineSupport();
|
||
|
(bodhisvgsInlineSupport = function() {
|
||
|
|
||
|
// If force inline SVG option is active then add class
|
||
|
if ( ForceInlineSVGActive === 'true' ) {
|
||
|
|
||
|
// Find all SVG inside img and add class if it hasn't got it
|
||
|
jQuery('img').each(function() {
|
||
|
|
||
|
// Check if the SRC attribute is present at all
|
||
|
if ( typeof jQuery(this).attr('src') !== typeof undefined && jQuery(this).attr('src') !== false) {
|
||
|
|
||
|
// Pick only those with the extension we want
|
||
|
if ( jQuery(this).attr('src').match(/\.(svg)/) ) {
|
||
|
|
||
|
// Add our class name
|
||
|
if ( !jQuery(this).hasClass(cssTarget.ForceInlineSVG) ) {
|
||
|
jQuery(this).addClass(cssTarget.ForceInlineSVG);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Polyfill to support all ye old browsers
|
||
|
// delete when not needed in the future
|
||
|
if (!String.prototype.endsWith) {
|
||
|
String.prototype.endsWith = function(searchString, position) {
|
||
|
var subjectString = this.toString();
|
||
|
if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
|
||
|
position = subjectString.length;
|
||
|
}
|
||
|
position -= searchString.length;
|
||
|
var lastIndex = subjectString.lastIndexOf(searchString, position);
|
||
|
return lastIndex !== -1 && lastIndex === position;
|
||
|
};
|
||
|
} // end polyfill
|
||
|
|
||
|
// Another snippet to support IE11
|
||
|
String.prototype.endsWith = function(pattern) {
|
||
|
var d = this.length - pattern.length;
|
||
|
return d >= 0 && this.lastIndexOf(pattern) === d;
|
||
|
};
|
||
|
// End snippet to support IE11
|
||
|
|
||
|
// Check to see if user set alternate class
|
||
|
if ( ForceInlineSVGActive === 'true' ) {
|
||
|
var target = ( cssTarget.Bodhi !== 'img.' ? cssTarget.Bodhi : '.style-svg' );
|
||
|
} else {
|
||
|
var target = ( cssTarget !== 'img.' ? cssTarget : '.style-svg' );
|
||
|
}
|
||
|
|
||
|
target = target.replace("img","");
|
||
|
|
||
|
$(target).each(function(index){
|
||
|
|
||
|
// if image then send for replacement
|
||
|
if ( typeof $(this).attr('src') !== typeof undefined && $(this).attr('src') !== false) {
|
||
|
bodhisvgsReplace($(this));
|
||
|
}else{
|
||
|
|
||
|
// look for svg children and send for replacement
|
||
|
$(this).find("img").each(function(i){
|
||
|
|
||
|
if( typeof $(this).attr('src') !== typeof undefined && $(this).attr('src') !== false ){
|
||
|
bodhisvgsReplace($(this));
|
||
|
}
|
||
|
|
||
|
});
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
});
|
||
|
|
||
|
})(); // Execute immediately
|
||
|
|
||
|
});
|