Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add third debug toolbar, reformulate readme #39

Merged
merged 1 commit into from
Feb 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@ In some cases (i.e. when working on non-livewire elements), you'll want to full

By adding an `VITE_LIVEWIRE_OPT_IN=true` entry in your `.env` file an opt-in checkbox will show on the bottom right corner of the webpage, allowing you to enable/disable livewire hot reload. If disabled: a full page reload will be triggered when blade files are changed.

If you're using a debug toolbar other than [Debugbar for Laravel](https://github.com/barryvdh/laravel-debugbar) or [Clockwork](https://underground.works/clockwork/), the checkbox my interfere with it. There is a config option `bottomPosition` to add more spacing to the bottom, to make the checkbox visible again. The value must be a of type number. These two toolbar are taken into account, while positioning the checkbox. No special configuration is needed.
If you're using a debug toolbar like [Debugbar for Laravel](https://github.com/barryvdh/laravel-debugbar), [Clockwork](https://underground.works/clockwork/) or [Laravel Telescope Toolbar](https://github.com/fruitcake/laravel-telescope-toolbar), these are taken into account, while positioning the checkbox. No special configuration is needed.
There may be another (debug) toolbar or something else in your view interfere with the checkbox. Therefore, a config option `bottomPosition` is available to add more spacing to the bottom, to make the checkbox visible again. The value must be of type number and is considered to be pixels.

```js
// vite.config.js
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export default function livewire(config?: PluginConfig | string | string[]): Liv
}

function makeOptInLabel() {
const debugbarHeight = document.querySelector('.phpdebugbar, .clockwork-toolbar')?.offsetHeight ?? 0;
const debugbarHeight = document.querySelector('.phpdebugbar, .clockwork-toolbar, .sf-toolbar')?.offsetHeight ?? 0;
const defaultBottomPosition = ${pluginConfig.bottomPosition};
const calculatedBottomPosition = debugbarHeight + defaultBottomPosition
const label = document.createElement('label');
Expand Down