Kirby 2.2 - how to check if "panel" is loaded?

Kirby 2 Solved ✅
1

Just migrated a (test) site to Kirby 2.2

I noticed that some plugins / custom-fields in the new panel are not working anymore.

They use this snippet, to fire their functions once the “app” (Kirbies panel) is loaded and ready (on both page-load and page-save);

(function($) {
    $(document).ready(function() {
        if (app && typeof app == 'object') {
            $(app.main).on('view:load', function () {

// do some stuff

It seems that $(app.main).on('view:load', function () { ... is not triggered anymore - I can delete it, and the plugin / custom-field will function without trouble.

But when I save the page, it is not activated again, so both plugins and custom-field will break after a save.

Is there a new routine / option in stead of $(app.main).on('view:load') that I can call once the panel is (re-) loaded?

2

No ansers, yet :stuck_out_tongue:

I am trying to “hook” the panel with a Javascript-function, everytime the page is loaded, saved or / and ready.

I used to do that with the above code (when "app" is "loaded" .. do some stuff).

But this is not working, with Kirby 2.2 any longer.

When I jsonfy the apps-status, I can still see an app-array with the ‘main’ selector- but somehow this is not fired.

So after digging in the code, I decided to hook / extend the loader-function (the loading-status on top of the page);

NProgress.done = (function()
  {
var NProgressDone = NProgress.done;
  return function()
    {
  var result = NProgressDone.apply(this, arguments);
  setTimeout(function(){MY_EXTRA_FUNCTION();},10);
  return result;
    };
  }());

This way, I extend the loader-function with MY_EXTRA_FUNCTION(); (which is stored in a field-asset).

It works… but I am still wondering; how can we check if the “app” is ready / loaded after pressing the “save button” (doing that, an AJAX call is made and I think it should return a call, like on success or set the new status of the app).

3

Okay, because many plug-ins (both .php and .js depended) were broken after the Kirby 2.2.1 update, I ended up with this snippet;

$(document).ajaxSuccess(function()
  {
Your_Custom_Function();
  });

Using this snippet, you can easily set-up a custom JS-function on the panel, everytime the page is loaded or saved.

Please note, the snippet will trigger Your_Custom_Function() on every successful AJAX-request (everytime you save a page, it returns two AJAX-calls, so your script is also executed twice).

1 Like
4

The easiest way is to write a jquery plugin for your field:

$.fn.myfield = function() {}

then add a data-field attribute to the element that needs to get caught by the plugin:

data-field=“myfield”

Kirby will take care of the rest.

More docs will follow soon.

1 Like
5

This works perfect! (even better than hooking the universal AJAX-call, which was (maybe) some .ms faster).

For those who are interested, I solved it by extending the default brick for my field;

$.fn.myNewField = function()
  {
/* do whatever you want to do (or call a new function) */
  }

public function input()
  {
  $input = new Brick('input', null);
  $input->addClass('input');
  $input->addClass('myNewFieldClass');
  $input->attr(array(
    'type'         => $this->type(),
    'name'         => $this->name(),
    'placeholder'  => $this->i18n($this->placeholder()),
    'id'           => $this->id(),
    'value'        => '',
    'data-field'   => 'myNewField' /* <<-- I extended the brick */
  ));

  if(!is_array($this->value())) {
  $input->val(html($this->value(), false));}
  return $input;
  }
}
6

A better way to extend the input:

public function input() {
  $input = parent::input();
  $input->addClass('myNewFieldClass'); 
  $input->data('field', 'myNewField');
  return $input;
}
2 Likes
7

Awesome - now it acts like a sibling from his parent.

I have much to learn :slight_smile: