Using jquery-ui in Plone 5?

Plone Support Add-on Development
1

Is there a problem using jquery-ui in Plone 5?

I need to use https://github.com/mar10/fancytree within Plone 5 however it depends
on jquery-ui. Or is there something comparable (feature-wise) in Mockup? I doubt it.

Andreas

2

I guess that's a AMD thing.
I am not sure, but something like this could be the problem:

  • fancytree is not AMD aware,
  • jqueryui is AMD aware
  • Plone provides requirejs
  • so jqueryui is declared the AMD way, hence fancytree cannot find it
3

@zopyx,
I have some notes on that here:

to account for fancytree look at this stackoverflow: http://stackoverflow.com/questions/13168816/loading-non-amd-modules-with-require-js

4

What means AMD?

5

translates to: there is yet another edgecase in the Plone resource registry story.

-aj

6

Asynchronous Module Definition (AMD).
A Javascript way of providing a form of module loading, it works best when the module you're working with is AMD compatible. Jquery UI is AMD compatible, fancytree apparently is not.

7

This should work (best educated guess).

<script>
require.config({
  // 3rd party script alias names
  paths: {
     "jquery-ui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min",
    "fancytree": "pathto/fancytree",
  },
  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {
  "fancytree": {
      "exports": "fancytree"
  }
}
});

require([ "jquery", "jquery-ui" ,"fancytree"], function( $ ) {
       // your custom code that uses fancytree
});
</script>

Important.... I'm not 100% sure about the fancytree export.

1 Like
8
9

Update... it turns out that fancytree does have AMD support.
See documentation here:

More than likely the following should be enough to get it working (but check the docs):

<script>
require.config({
  // 3rd party script alias names
  paths: {
     "jquery-ui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min",
    "fancytree": "pathto/fancytree",
  }});

require([ "jquery", "jquery-ui" ,"fancytree"], function( $ ) {
       // your custom code that uses fancytree
});
</script>
1 Like
10

There is: https://github.com/collective/pat-fancytree
This was created by @jensens and @agitator at the Plone conference in Bucharest last year. It's nearly ready - only more options and maybe initialization is necessary.
I'm in the process of integrating another pattern into a Plone 5.1 based project (based on coredev). It was actually a hassle, but now it looks like I have all the bits sorted out and it works.

Github for plone.patternslib : https://github.com/plone/plone.patternslib/pull/6
The Plone integration is in a private repo.

I added pat-leaflet there.
Fancytree is a good canditate to add to plone.patternslib too, IMO

If all the resources are registered properly and acessible, one can then use for example the existing plone.js bundle resource file, copy it, register it, and add pat-leaflet to it's dependencies. Then you need a bundle recompilation - and that should be it.

There are of course a thousand obstacles to take on the way. Or maybe no more...

1 Like
11

I think you meant "feature branch", no? This: plone.patternslib/thet-refactor/.

Btw, great work! Thanks for paving the way. Also I'm completely in favor of including pat-fancytree in plone.patternslib as well.

12

Oh, I meant the code, where my custom plone.js lives. But that's not so interesting - basically a custom configuration for the plone bundle it's resources:

  • plone.js, which just includes the the wanted patterns in the define dependencies list
  • plone.less, which includes all necessary css and less files
  • plone-compiled.min.js
  • plone-compiled.min.css
13

Just to be clear, @zopyx, the AMD thing is not an edge case for the new resource registry, it's the whole point of it. It allows for sane dependency management between javascript libraries. See the AMD section in the Plone Resource Registry documentation for an explanation (and let me know what more could be said to help clarify)