Skip to content

Commit

Permalink
add third debug toolbar to checkbox positioning; change readme to a m…
Browse files Browse the repository at this point in the history
…ore direct and positive formulation and fix typo
  • Loading branch information
Arne Becker committed Feb 6, 2023
1 parent 99b23d1 commit dad4130
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 2 deletions.
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

0 comments on commit dad4130

Please sign in to comment.