SVG color updating script doesn’t work on desktop but works on mobile

My javascript (and pretty much all my coding skills) knowledge is terrible but I’m working on an application built with Symfony using Sonata Admin Bundle.

My problem is I just discovered a bug that seems to only affect desktop browsers.

I have a field that displays an image and the image colors are changed according to user selections.

This works fine on mobile right now and always worked (last checked a week ago) but for some reason stopped working on desktops.

Here is the code responsible for changing the colors in the images:

<script>
    $(document).ready(function () {
        var logos = {};
        {% for image in images %}
            var image{{ image.id }} = '{{ image.content|raw }}';
            logos['logo-' + {{image.id}}] = image{{ image.id }};
        {% endfor %}
        $('.target').parent('div').append("<div id='image_preview'></div>");
        var container = $("#image_preview");
        {# apply selected colors to image preview #}
        function applyColors() {
            $('.defaul_image_color').each(function () {
                if ($(this).val() != 'FFFFFF') {
                    $('path.' + $(this).data('param')).css('fill', $(this).val())
                }
            })
        }
        {# display image and apply colors #}
        function displayImage() {
            if ($('.target option:selected').val()) {
                container.html(eval('image'+$('.target option:selected').val()));
                applyColors();
            } else {
                container.html('');
            }
        }
        displayImage();

        {# trigger on color or image change #}
        $('.defaul_image_color, .target').on('change', function () {
            displayImage();
        });

        $('#select2-results-5').bind('DOMSubtreeModified', function () {
           $('#select2-results-5 li .select2-result-label').each(function () {
               if (logos[$(this).text()] != undefined && !$(this).has('svg').length) {
                   $(this).prepend('<span class="svg_list">' + logos[$(this).text()] + '</span>');
               }
           })
        });
    });
</script>

I’m not trying to be lazy but I don’t know where to start troubleshooting this problem so you can log into my test account to inspect the problem firsthand:

http://adminstage.3w1.website/admin/admin-customer-theme/167/edit
user: [email protected]
pw: 1234

The problem is with the rendering of the selected logo image.
Settings->Theme->edit theme->logo tab

Thanks for any help with this.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *