Photoswipe: When 'parseVerticalMargin' should be started to listen ?

[ft-harai]

Hello! I have some questions about parseVerticalMargin event handler like:

gallery.listen('parseVerticalMargin', function(item) { 
    item.vGap = { top: 50, bottom: 80};
});

If I want to use an above handler, which of following two codes is correct ?

Code A

gallery.init();
gallery.listen('parseVerticalMargin', function(item) { 
    item.vGap = { top: 50, bottom: 80};
});

Code B

gallery.listen('parseVerticalMargin', function(item) { 
    item.vGap = { top: 50, bottom: 80 };
});
gallery.init();

In the case of Code A, parseVerticalMargin event does not shouted for the first image because it is already shown by init() method.

Then Code B might be nearest to the correct answer, however, after called the function, item.vGap is restored to { top: 0, bottom: 0 }, especially on mobile phone.
After I read carefully the source code, I found it is because an _applyNavBarGaps() method in photoswipe-ui-default.js is also listening parseVerticalMargin event and overwrites values of item.vGap like that:

_applyNavBarGaps = function(item) {
  var gap = item.vGap;
  if( _fitControlsInViewport() ) {
    ...
  } else {
    gap.top = gap.bottom = 0;
  }
}

So I have 2 questions.

1. If I want to set item.vGap = { top: 50, bottom: 80}; for all images, when parseVerticalMargin event handler should be started to listen?
2. Why _applyNavBarGaps() method overwrites item.vGap? Can I comment-out this overwriting?

Thank you in advance.

[dimsemenov]

You may either fork the default UI and modify it directly, it's separated from core so you can make edits to it. Or you may use firstUpdate event to override gap that UI applies (it fires after UI initialization, but before size is calculated), e.g.:

...
gallery.listen('firstUpdate', function() {
  gallery.listen('parseVerticalMargin', function(item) { 
    item.vGap = { top: 50, bottom: 80};
  });
});
gallery.init();

[ft-harai]

Thank you. firstUpdate event handler is very useful for me.

Though _applyNavBarGaps() will set some positive values to vGap when _fitControlsInViewport() is TRUE, my custom event listener afterwards will override the vGap in this time, right?

I can't figure out how _applyNavBarGaps() works but I think the following code might be safe. How about this?

gallery.listen('firstUpdate', function() {
  gallery.listen('parseVerticalMargin', function(item) { 
    // instead of item.vGap = { top: 50, bottom: 80};
    item.vGap.top += 50;
    item.vGap.bottom += 80;
  });
});
gallery.init();