Drag n drop to sort SVG images in panel causes jquery errors

Kirby 2 Issues 🐛
,
1

using kirby and panel 2.2.1. in safari on mac. drag n drop to sort images in panel causes jquery errors. it suggests a script gets called before jquery is loaded. the error appears once for every image in the files thumbs view.

jquery-1.11.0.min.js:3:23640 TypeError: null is not an object (evaluating 'a.style.cssText="float:left;opacity:.5"')
jquery.js:2:17897 TypeError: null is not an object (evaluating 'e.style.opacity')
google.js:47 ReferenceError: Can't find variable: $

removed all panel fields/extensions but same error. EDIT: did not. my custom field was still there.
the sortable flag has been set for the blueprint. https://getkirby.com/docs/panel/blueprints/file-settings#sortable-files

2

Does the problem persist with an update to 2.2.3?

3

its still there in 2.2.3 but it seems its my fault. my custom field was still there. maybe i am adding my jquery calls incorrect.

the multiselect plugin for example, they do add a ‘jquery helper’ (line 185) around their calls.
https://github.com/distantnative/multiselect/blob/master/assets/js/multiselect.js#L185

i just used the document.ready call.
http://learn.jquery.com/using-jquery-core/document-ready/

can you tell me what ‘technique’ the multiselect plugin uses is called, so i can do some research? and why it is needed?

probably i am just stuck at creating a valid panel plugin/field. :wink:

4

https://learn.jquery.com/plugins/basic-plugin-creation/

5

Basically, you need to do two things:

You need to assign a data-field attribute to your custom field input, e.g.

$input->data('field', 'fancyfield');

Then wrap your JS accordingly:

(function($) {

  $.fn.fancyfield = function() {

    return this.each(function() {

      // YOUR CODE

    });

  };

})(jQuery);

Kirby will then make sure, that it calls the wrapped function at the right time when everything is happy (it tries to call the functions of all data-field attributes).

6

hi @distantnative and @texnixe,

thanks for the help. i managed to create a proper jquery plugin and panel field now. but the issue is still there. maybe its a problem with my svg files. if i have them in the file thumb preview the error appears. once for every svg image. i attached one for you to test.
http://bnomei.com/test/test.svg