Trigger events

  • Resolved laurosollero

    (@laurosollero)


    9 years, 1 month ago

    Hello, Benbodhi, cheers for the cool plugin!

    I was thinking that you could implement some custom jQuery events so that we know when it’s done loading and changing the images.
    My use case is that I want to JS control the SVG but it will work only after it’s been replaced.

    Not sure if this is the best way to do it but it works and looks nice!

    jQuery(document).trigger('loaded.svg');

    Probably for a best usability you should create and id (if the imgID isn’t there) and pass it along like:

    jQuery(document).trigger('loaded.svg', [imgID]);

    So we can know for sure which image has already loaded.
    On my scripts file I can:

    $(document).on('svg.loaded', function(event, id){
  console.log(id);
});

    Of course I had to change a bit more on the function to ensure that the id existed either on the img or on the svg element.

    https://www.ads-software.com/plugins/svg-support/

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

    (@benbodhi)

    Hey laurosollero,

    Thanks for the support ??
    It sounds like a pretty awesome implementation you’re using there.
    I wouldn’t be able to add an ID because if someone is using multiples on a page, they would all have the same ID (or they could be incremented somehow).

    I would like to see what you’re doing with it.
    If I can add/change something that might help, I can look into it.

    Cheers
    Ben

    Thread Starter laurosollero

    (@laurosollero)

    Hey,
    Yes, I thought that might be the case, so I’ve inserted these lines:

    // Add replaced image's ID to the new SVG
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);
}

    And added this on the .each:

    .each(function(index){

    Here is the svg-inline.js complete:

    jQuery(document).ready(function ($) {
  // Check to see if user set alternate class
  var target  = (cssTarget != 'img.' ? cssTarget : 'img.style-svg');
  jQuery(target).each(function(index){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
      // Get the SVG tag, ignore the rest
      var $svg = jQuery(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');
      }
      // Remove any invalid XML tags as per https://validator.w3.org
      $svg = $svg.removeAttr('xmlns:a');
      // Replace image with new SVG
      $img.replaceWith($svg);
      jQuery(document).trigger('svg.loaded', [imgID]);
    }, 'xml');
  });
});

    Thread Starter laurosollero

    (@laurosollero)

    Removing duplicate…

    Thread Starter laurosollero

    (@laurosollero)

    Here is a use, still in progress…

    https://abfh.nutsaboutbrand.com/apoiadores/

    The JS let me create a click, get info about the state (name and initials)… In other project I will animate a bit the SVG!

    If you don’t want to integrate it to your project, it’s not a problem! I can create a sub project, give you credit, and go on with my life! ??

    Plugin Author Benbodhi

    (@benbodhi)

    This is really cool!
    I have tested it on a bunch of different installations, local and live, and I am happy to swap out the code in that file with yours ??
    I won’t push the update to www.ads-software.com just yet, in case you might need more changes.
    Let me know, otherwise I will make it live in the next day or so.

    Thanks for your input!

    Thread Starter laurosollero

    (@laurosollero)

    Cool, nice to hear! The only change we could do is maybe, just maybe, change the name of the event. I’m fine with that.

    I’ve used the same snippet of code found on the SO on other projects, but letting the user insert the SVG is way cooler!

    Thank you for your project, I’ll try and translate it to Brazilian Portuguese.

    Long live open source! =D

    Plugin Author Benbodhi

    (@benbodhi)

    Feel free to shoot me any changes and I will test and include ??
    Translations would be awesome!
    Thanks man, long live open source indeed!

    Plugin Author Benbodhi

    (@benbodhi)

    Hey man, I have included your code and attributed to you in the readme, so thank you for your contribution. The next version will be available as soon as I can commit it to the repo… I am currently getting an error when trying to commit, but I’m sure it will be resolved soon.

    Plugin Author Benbodhi

    (@benbodhi)

    It started working again today so the latest version 2.2.3 is ready.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Trigger events’ is closed to new replies.