Feature request with next/prev buttons

[kafeltz]

Hello.

I think it would be nice the buttons prev/next would not be rendered with canGoPrev/canGoNext is false.

I tried this: $tripBlock.find('.trip-prev').html(prevLabel).toggle(showNavigation && !this.isFirst() && this.tripData[this.tripIndex]);

It almost work, be it shows the button and quickly fade it out. Not good.

An workaround I'm doing is on init params: onTripStart : function(tripIndex, tripObject) { if (!tripObject.canGoPrev) { $('.trip-prev').hide(); } },

I think what we need is a behavior settings, for example, what the plugin does with canGoPrev/canGoNext? Option 1: do or do not go Option 2: display or not the button

Any thoughts?

[EragonJ]

I think what you need is this - https://github.com/EragonJ/Trip.js/blob/master/src/trip.core.js#L886

And about the option, I think it can be updated here if you have any better idea !

[71FIL]

I have had a similar issue. I didn't just want to disable navigation buttons, I wanted them not be shown at all. I added a new setting "hideDisabledNavigation" which hides prev/next buttons according to canGoPrev/canGoNext.

    var $prevButton = $tripBlock.find('.trip-prev');
    if (!this.canGoPrev() && this.settings.hideDisabledNavigation) {
      $prevButton.toggle(false);
    }
    else {
      $prevButton
        .toggleClass('disabled', !this.canGoPrev())
        .html(prevLabel)
        .toggle(showNavigation);
    }

    var $nextButton = $tripBlock.find('.trip-next');
    if (!this.canGoNext() && this.settings.hideDisabledNavigation) {
      $nextButton.toggle(false);
    }
    else {
      $nextButton
        .toggleClass('disabled', !this.canGoNext())
        .html(this.isLast() ? finishLabel : nextLabel)
        .toggle(showNavigation && !o.nextClickSelector);
    }

I can provide the change if it can be useful.

[EragonJ]

@kafeltz @71FIL I think this is really a good time to think about how to handle these UI things. For my case, I use customized CSS to handle that part in my side project because right now there are too many options and this may be confusing for users (even me)

But for flexibilities, it is supper easy to disable them because you just need to set that option without adding more extra CSS. It's hard for me to make the decision about which one is right and which one is wrong. (this is not a yes/no question though)

After thinking a while, I think it would be nice that we can use a well-defined option for all UIs like

{
  disabledUI: {
    navigation: true,
    closeButton: true // ... etc
  }
}

This is just a rough idea and need more discussions, so any comments / options would be helpful, thanks !!

[71FIL]

I ended up removing the trip-prev button - just as I did with the trip-skip button - from my customized trip-block.

[EragonJ]

@71FIL customized tripBlock is the ultimate solution for all cases, so that's why I left such flexibilities there :) But still waiting for the response of this discussion thread haha