Widget implementation issues

As some of you may know, I’m currently about to integrate Google Analytics into the Kirby Panel. During my development I encountered several possible solutions but also some restrictions based on Kirbys architecture.

I planned to generate some Widgets which are configurable on a custom options page. This part and the communication with Google are working fine so far.

To draw some nice charts I need to create JavaScript. Which worked also fine – while the Panel Dashboard is called directly. If I navigate through the Panel and come back to the dashboard, all static widgets are getting loaded properly, expect my Analytics-Widget.

I figured out, Kirby is using Ajax requests to update the DOM while navigating. That is no problem as long as the request makes a hard page reload. In that case, all custom JavaScript are executed properly. But (naturally) if the DOM gets replaced, the custom javascript are not executed again.

There’re no events or callbacks available which I can subscribe to, to (re-)render my widget.

I’ld like to discuss some options with you here. Any suggestions to find a workaround? :slight_smile:

maybe that helps. its about fields, but maybe…

Thanks @bnomei ! But that is not quite what I’m looking for.

In general it works as described… but the field specific jQuery Plugin is loaded only on panel pages which containing those fields. This means in reversal it’s not loaded on the dashboard page.

The thread mentioned some »complete or loaded events« which could be implemented. We could take this a step farther and create some event bus mechanism which throws JavaScript events even for page hooks like panel.page.update or panel.user.update. This would really improve the Kirby Plugin-Eco-System.

I had some similar problems some time ago. I ended up using the jQuery ajaxComplete method. It’s not the right approach to everything but perhaps a point to get started.

$(document).ajaxComplete(function(event, xhr, settings) {
    // do your stuff

Personally I would like to see some more hooks in the Panel itself to react on.