Support » Plugin: SVG Support » Call inline function via JS

  • Resolved Twig

    (@palpatine1976)


    Hi –

    First, thanks for the great plugin!

    Issue I have is that sometimes I can’t control the classes applied to an SVG image when added via a 3rd-party plugin (Visual Composer, Ubermenu etc.)

    I can easily add the class via jQuery but it doesn’t look like I can call your inlining script myself. Seems like it fires once and once only in document.ready() – and the classes aren’t there yet.

    Is there a reason you couldn’t wrap your inlining function in a public function call so that we can call it again later via $.fn.inlineSVG or whatever?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hey,

    Thanks for your support!

    Honestly, I haven’t needed to do that so I haven’t written it in.

    Feel free to have a play around with the code and see if you can get it to do what you want and if it works, I’ll consider putting it in the next update.

    I’m already working on fixing some warnings and changing a few things, so I could possibly get it in. But personally I don’t have time to put in to writing that right now unfortunately.

    I hope you understand!

    Thread Starter Twig

    (@palpatine1976)

    Hi there- thx for the super quick reply!

    Easiest way would be to just wrap the whole of your svgs-inline.js within an IIFE. Assuming the function name chosen (like “benbodhiInlineSVGs” ) doesn’t collide with another plugin, it should be fine. Should do exactly same as it does today, but make the same function callable again later on via benbodhiInlineSVGs()

    I’ll play around with it and let you know. (The slicker approach would be to make it a very simple jQuery plugin, since it relies on jQ anyway.. but not sure when I’ll get time to check that approach out)

    Plugin Author Benbodhi

    (@benbodhi)

    It makes sense, let me know how you go.
    When I’m working on it again I’ll have a look try and get it in.

    Thread Starter Twig

    (@palpatine1976)

    Hi – sorry for the delay, been busy. Here’s a working version – I just enclosed your entire inline.js with a IIFE called benbodhiInlineSVGs(). Should work just as the current version, but with the benefit that it can be called at-will by the theme. Let me know what you think!

    jQuery(document).ready(function ($) {
    
      // Wrap in IIFE so that it can be called again later as benbodhiInlineSVGs();
      (benbodhiInlineSVGs = 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() {
    
            // 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 : 'img.style-svg' );
        } else {
          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');
    
          // 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-'+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');
    
            // 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]);
    
          }, 'xml');
        });
        
      })(); // Execute immediately
    
    });
    
    Plugin Author Benbodhi

    (@benbodhi)

    This is cool. Thanks for providing it. I’ll test and see if I can get it into the next update.

    Julie

    (@juliejubilee)

    +1 for this, and thanks for the working code Twig! It was exactly what I was looking for.

    Thread Starter Twig

    (@palpatine1976)

    Hopefully this will make it into the next version – I find myself needing it more & more, especially with IE’s weird handling of SVGs in WP.

    Thread Starter Twig

    (@palpatine1976)

    @benbodhi – Any chance of adding this wrapper in to a quick release?

    Plugin Author Benbodhi

    (@benbodhi)

    I’ll see if I can get it in to a quicker update. I have been re-writing the whole plugin but it’s not ready still.

    I should be able to release this in the next week or so.

    Thanks for your patience!

    Thread Starter Twig

    (@palpatine1976)

    Awesome – thanks!

    Plugin Author Benbodhi

    (@benbodhi)

    Hi @palpatine1976 and @juliejubilee,

    I have pushed out an update today that includes this new JS function wrap 🙂

    Enjoy.

    Plugin Author Benbodhi

    (@benbodhi)

    Please note the new JS function name is bodhisvgsInlineSupport();.

    Thread Starter Twig

    (@palpatine1976)

    Looks great – thanks so much for adding that!

    Plugin Author Benbodhi

    (@benbodhi)

    My pleasure!
    It’s something that will be super useful I’m sure.

    Thanks for your suggestion and continued support!

    If you have a minute, maybe you can see my issue with this one 😛
    https://wordpress.org/support/topic/illegal-string-offset-warning-for-height-and-width/
    https://stackoverflow.com/questions/49888613/how-to-fix-illegal-string-offset-warnings-im-using-an-array-or-object-as-a-ke

    Thank you SO MUCH for this update!! It is exactly what I needed.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Call inline function via JS’ is closed to new replies.