"Minimize" mode

[lkraav]

I'm looking to replicate https://docs.hotjar.com/docs/how-do-hotjar-polls-work Hotjar widget dynamics with boxzilla.

There would be some kind of a px value X for "minimized" mode control element. So "close" would not completely hide the box anymore, but transition to max-height: X.

When minimized once (cookie is set), box could use this info to start in minimized mode from thereafter.

Automatic focus to form inputs inside the box needs to be disabled, because autofocus moves the field into the viewport of the limited max-height, creating confusion.

@dannyvankooten what are your thoughts on what the easiest way for this is? It looks like I'd have to write my own custom Box.prototype.toggle function. How would I assign this to the box, any example simple snippet you can think of?

Is this really a https://github.com/ibericode/boxzilla.js issue instead?

[lkraav]

Should Animator be exposed as window member? Makes it easier to use from custom override functions.

[lkraav]

I implemented this without Animator for now. Override logic is quite tricky, because have to account for all sorts of parameter combinations, but it works nicely. Upstream could probably augment a few things to make this sort of thing easier, I'll send a debrief later.

[dannyvankooten]

Hey @lkraav,

Nice, glad to hear you git all working already. I'm a little hesitant to add such a thing to Boxzilla itself because of the styling issues it would introduce (people use Boxzilla for so many different things) but I'd love to hear what we can do to make this easier.

Right now we're pretty much referring people to MailChimp Top Bar for a much more constrained top or bottom bar which stays partially visible when minimized.

Autofocus will be removed in today's update, it was causing more issues on mobile browsers & seems a bit obtrusive anyway.

[arnelap]

Another request for this: https://secure.helpscout.net/conversation/465095310/12253?folderId=491449

[lkraav]

We have it successfully running at https://gotravel.ee

You're welcome to use the implementation as a prototype. See https://gotravel.ee/wp-content/themes/gotravel/script.js search for "boxzilla minimized mode".

[arnelap]

@lkraav I've copied the code here: https://github.com/ibericode/boxzilla-snippets

The only config is
var boxzillaSlug = "your-slug-here"; is that right?

Thanks for sharing!

[lkraav]

@arnelap I can't recall whether https://github.com/ibericode/boxzilla.js/issues/14#issuecomment-312223249 affected this or not, as we've stayed put on 3.1.13. I'll get back to you about this once we have time to upgrade and take a look.

[ofmarconi]

Hello,

I did not understand how to install this Snippets, could you explain me better?

Thank you

[ofmarconi]

I managed,

But it is not hiding when you click on the X, do you have to implement with CSS? Or just stick this JS? Only change from X to Arrow.

@lkraav do you have any idea how I can animate the entrance and exit of this box?

It would not be simpler to switch between the classes: "boxzillaminimized" and "boxzillaopen"?

[lkraav]

@ofmarconi good point, there's definitely CSS involved, I forgot about that. Check the LESS below, and try to replace some of the used variables with your own values where necessary.

.boxzilla.boxzilla-vota-uhendust { @border-radius: 0.25em; @font-size: 0.75rem; background-color: transparent !important; border-top-left-radius: @border-radius; border-top-right-radius: @border-radius; box-shad
ow: 0 0.5em 0.5em #0006; left: 0; margin: auto; padding: 0; right: 0; transform: translateZ(0); z-index: 2147483647 /* #scroll-up */;

    &.boxzilla-bottom-right {
        @media @small { left: auto; right: @grid-unit; }
    }

    a { border-bottom: none; color: white; }

    .boxzilla-close-icon { background-color: @orange; color: @white; font-size: 1em; opacity: 1; padding: @font-size ( @font-size * 1.33 );
        &:active { background-color: white; color: @orange; }
    }

    .boxzilla-content { background-color: black; }

    .mobile-safari & { position: fixed };

}

[ofmarconi]

@lkraav @arnelap

Disappearing as soon as it loads, what could be causing it?

I'm guessing it's conflict with Jquery from Slider Revolution.

How do I solve this?

in Firefox https://qpainel.institutoqualibest.com/

[lkraav]

Disappearing as soon as it loads, what could be causing it?

Unfortunately we have no time for tech support on this.