• Resolved mikeldev

    (@mikeldev)


    I realised that the site I am working with has jQuery enabled when I don’t use it at all, so I disabled. I found out everything worked but no inline SVG where added.

    The SVG Support javascript svgs-inline-min.js located at /wp-content/plugins/svg-support/js/min/svgs-inline-min.js use jQuery functions.

    What about providing an option to enable a jQuery free plugin version?

    The final script would be bigger but still smaller than jQuery script.

    The non minified code is:

    jQuery(document).ready(function ($) {
    
    	// 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
    	var target  = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
    
    	$(target).each(function(index){
    		var $img = jQuery(this);
    		var imgID = $img.attr('id');
    		var imgClass = $img.attr('class');
    		var imgURL = $img.attr('src');
    
    		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-'+index;
    					$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-'+index);
    			}
    
    			// Remove any invalid XML tags as per http://validator.w3.org
    			$svg = $svg.removeAttr('xmlns:a');
    
    			// Replace image with new SVG
    			$img.replaceWith($svg);
    
    			$(document).trigger('svg.loaded', [imgID]);
    
    		}, 'xml');
    	});
    
    });
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mikeldev

    (@mikeldev)

    I did myself.

    
    // IE9+
    function onready(fn) {
    	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    		fn();
    	} else {
    		document.addEventListener('DOMContentLoaded', fn);
    	}
    }
    
    onready(function(){
    	var target  = 'img.style-svg';
    	var images = document.querySelectorAll(target);
    
    	// IE9+
    	images.forEach(function(image, index){
    		var imgID = image.getAttribute('id'); // IE8+
    		var imgClass = image.getAttribute('class'); // IE8+
    		var imgURL = image.getAttribute('src'); // IE8+
    
    		if (!/.svg$/g.test(imgURL)) {
    			return;
    		}
    
    		// IE9+
    		var request = new XMLHttpRequest();
    		request.open('GET', imgURL, true);
    
    		request.onload = function() {
    			if (request.status < 200 || request.status >= 400) {
    				console.log('Target server reached but it returned an error');
    			} else {
    				// Get the SVG tag, ignore the rest
    				var svgWrapper = document.createElement("div");
    				svgWrapper.innerHTML = request.responseText;
    				var svg = svgWrapper.querySelector('svg');
    
    				// Add replaced image's ID to the new SVG if necessary
    				if(!imgID) {
    					var svgID = svg.getAttribute('id');
    					if(!svgID) { 
    						imgID = 'svg-replaced-'+index;
    						svg.setAttribute('id', imgID);
    					} else {
    						imgID = svgID;
    					}
    				} else {
    					svg.setAttribute('id', imgID);
    				}
    
    				// Add replaced image's classes to the new SVG
    				if(imgClass) {
    					svg.setAttribute('class', imgClass+' replaced-svg svg-replaced-'+index);
    				}
    
    				// Remove any invalid XML tags as per http://validator.w3.org
    				if (svg.hasAttribute('xmlns:a')) {
    					svg.removeAttribute('xmlns:a');
    				}
    
    				// Replace image with new SVG
    				image.outerHTML = svg.outerHTML; // IE8+
    
    				// Custom Trigger, IE9+
    				if (window.CustomEvent) {
    					var event = new CustomEvent('svg.loaded', [imgID]);
    				} else {
    					var event = document.createEvent('svg.loaded');
    					event.initCustomEvent('svg.loaded', true, true, [imgID]);
    				}
    
    				document.dispatchEvent(event);
    			}
    		};
    
    		request.onerror = function() {
    			console.log('There was a connection error of some sort');
    		};
    
    		request.send();
    	});
    });
    
    Plugin Author Benbodhi

    (@benbodhi)

    Hi @mikeldev,

    I’m so sorry for the late reply! I didn’t get an email notification for some reason.

    I just got your email with the code attached though and as mentioned will be looking into this for you as soon as I have time 🙂

    Thanks so much for your support and suggestion.

    Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    After some deliberation, I’m still trying to decide whether including this is necessary. I like the idea, but it’s hard to tell how useful it will be for the extra code in the plugin package’s overall footprint.

    I think the best thing to do would be how you’ve implemented it, registering your own version of the script (although I would do it in a little custom plugin).

    function bodhi_svgs_enqueue_script_no_jquery() {
    	wp_deregister_script( 'bodhi_svg_inline' );
    	wp_register_script( 'bodhi_svg_inline', get_stylesheet_directory_uri() . '/js/inline-svg-no-jquery.js', null, null, true );
    	wp_enqueue_script( 'bodhi_svg_inline' );
    }
    add_action( 'wp_enqueue_scripts', 'bodhi_svgs_enqueue_script_no_jquery' );

    For others interested in this, please note, that this function would require you to add the new JS file in your child theme, inside a js directory for example:
    wp-content/themes/yourchildtheme/js/inline-svg-no-jquery.js.
    I would recommend using a plugin as this isn’t really theme related.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Version without jQuery?’ is closed to new replies.