Content ratings addon

Discussion in 'SimpleSVG Support' started by Case, Jan 28, 2018.

  1. Case

    Case Member

    Hi Arty

    Great work with SimpleSVG

    I'm trying to get it to work with Xon's Content Rating add-on for xF2: https://xenforo.com/community/resources/content-ratings-for-xf2.5600/

    In the add-on options you have the option to enter a CSS class for a rating icon, which works fine with Font Awesome as this comes with xenForo.

    I'd like to use some of the icons from the EmojiOne v2 (Monotone) set. Would that be possible if all I can do is enter an icon class?

    As I understand it, I would need to be able to edit the code so I can enter the data-icon

    Obviously the following doesn't work but that's what my icon code through the add-on looks like at the moment...

    Code:
    <i class="sv-rating-type-icon  sv-rating-type-icon4 sv-rating-type-icon--css emojione-monotone:face-with-tears-of-joy" title="Funny" aria-hidden="true"></i>
     
  2. Arty

    Arty Administrator Designer

    Can you enter more than one icon class? For example "emojione-monotone icon--face-with-tears-of-joy"?

    If you can, you can use SimpleSVG plugin functions to add custom icon class. Add this JavaScript after including SimpleSVG:
    Code:
    SimpleSVG.addFinder('emojione-monotone', {
        selector: '.emojione-monotone',
    
        icon: function (element) {
            var i, item;
    
            for (i = 0; i < element.classList.length; i++) {
                item = element.classList[i];
                if (item.slice(0, 6) === 'icon--') {
                    return item.replace('icon--', 'emojione-monotone:');
                }
            }
    
            return '';
        }
    });
    
     
  3. Case

    Case Member

    Yes, that works great. Thanks

    So is that available as a plugin like the Font Awesome one? ie. Update the code to be something like:

    Code:
    <script src="//cdn.simplesvg.com/js/?plugins=emojione-monotone"></script>
    Or is it only possible by adding the code you posted after including SimpleSVG?

    Just wondering if it's possible to tidy it up a bit.
     
  4. Arty

    Arty Administrator Designer

    That code is outdated, see https://simplesvg.com/docs/simplesvg-in-pages/

    Script should be included from code.simplesvg.com, not cdn.simplesvg.com and point to specific version instead of "latest". Unfortunately I can't edit thread on xenforo forum to fix code, but I did post a reply somewhere with new code.

    To tidy it up you can put it in external file and load it. Since you are using it with some add-on, maybe append it to that add-on's js file (if it has one).

    Or you can copy SimpleSVG js file to your server, append that code to it and include it instead of including file from my server.
     
    Case likes this.
  5. Case

    Case Member

    Thanks.

    I noticed that the class name of the icon flashes up as text before the icon loads. Assume this is just part of loading icons this way?
     
  6. Arty

    Arty Administrator Designer

    No, it shouldn't flash anything. Probably default icon of that add-on is rendered before its replaced with SVG.
     
  7. Arty

    Arty Administrator Designer

  8. Case

    Case Member

    Hmm, that code doesn't seem to fix it. I'm possibly not adding it correctly for my specific case though. I can PM my test site?
     
  9. Arty

    Arty Administrator Designer

    Sure, send me link
     
  10. Arty

    Arty Administrator Designer

    Fixed in 1.0.0-beta4.

    Flicker was caused by long loading page. SimpleSVG was waiting for DOM to be ready before replacing icons. New version starts replacing icons immediately while document is loading, speeding up things. For faster replacement put script in <head> section instead of footer.

    Also added alternative syntax that uses class names instead of data- attributes, so plugin posted above is no longer needed.
    Documentation: https://simplesvg.com/docs/simplesvg-in-pages/
    Icon finder: https://simplesvg.com/icon-sets/

    In icon finder after selecting icon select "<span> with class names" option and it will generate code without attributes.
     
    Case likes this.