Javascript XWiki augmentation

Development
1

Hi! I’ve been working on XWIKI-20844 on a couple days and my solution is nearly ready for a PR. It relies on a javascript class to handle behavior on some key presses events. I can make it work properly if I just integrate the javascript I created with xwiki.jsfx.use in the vm file with the element I want to enhance, and add a couple lines at the end of the javascript to instantiate my class from a query on the document.

However, this script could be useful in other parts of the interface and I think that’s not the proper way to make it reusable. So I decided to augment the javascript XWiki object with my class and instantiate the class from an already existing <script> balise in the vm file. This way, I can use the class wherever I need it and not hardcode anything into the js file.

However, as you can see on this screenshot, when I tried to test out these changes on my locale instance, it seems like the class is not found. I checked out a similar structure with notification.js and shortcuts.vm, however I can’t find out what I did wrong/different here.

Is this the correct way to implement these changes? Should I just stick with the solution with xwiki.jsfx.use and a hard-coded selector? What did I do wrong when trying to augment the XWiki object?
Thank you in advance for your help :slight_smile:
Lucas

2

As indicated on https://dev.xwiki.org/xwiki/bin/view/Community/DevelopmentPractices#HJavaScriptBestPractices JavaScript code should be organized in modules. What you did, by extending XWiki.widgets, is the old way. But more importantly you shouldn’t use Prototype.js anymore, and Class.create() is Prototype.js API. You should use the standard JavaScript syntax for creating classes Classes - JavaScript | MDN . This means:

define('xwiki-tabList', [...], function() {
  class KeyboardAccessibleTabList {
    ...
  }

  return KeyboardAccessibleTabList;
});

Next you need to publish this module to the global RequireJS configuration so that anyone else can use it:

Once the configuration is published anyone can write:

require(['xwiki-tabList'], function(TabList) {
  let tabList = new TabList();
  ...
});

Hope this helps,
Marius

1 Like