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

Fix outside modifier #425

Merged
merged 3 commits into from
Dec 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -4,4 +4,8 @@

### Changed

- Changed the `data-attributes` attribute to `data-attr`.
- Changed the `data-attributes` attribute to `data-attr` ([#422](https://github.com/starfederation/datastar/issues/422)).

### Fixed

- Fixed the outside modifier so that elements contained within it are ignored ([#425](https://github.com/starfederation/datastar/issues/425)).
16 changes: 8 additions & 8 deletions bundles/datastar.js

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions bundles/datastar.js.map

Large diffs are not rendered by default.

9 changes: 1 addition & 8 deletions library/src/plugins/official/dom/attributes/on.ts
Original file line number Diff line number Diff line change
@@ -118,17 +118,10 @@ export const On: AttributePlugin = {
if (testOutside) {
target = document
const cb = callback
let called = false
const targetOutsideCallback = (e?: Event) => {
const targetHTML = e?.target as HTMLElement
if (!targetHTML) return
const isEl = el.id === targetHTML.id
if (isEl && called) {
called = false
}
if (!isEl && !called) {
if (!el.contains(targetHTML)) {
cb(e)
called = true
}
}
callback = targetOutsideCallback
4 changes: 2 additions & 2 deletions sdk/go/consts.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions site/routes_examples.go
Original file line number Diff line number Diff line change
@@ -101,6 +101,7 @@ func setupExamples(ctx context.Context, router chi.Router, signals sessions.Stor
{ID: "templ_counter"},
{ID: "form_data"},
{ID: "custom_validity"},
{ID: "click_outside"},
},
},
}
2 changes: 1 addition & 1 deletion site/routes_home.templ
Original file line number Diff line number Diff line change
@@ -291,7 +291,7 @@ templ TodoInput(i int) {
input.value = '';
`, i) }
if i >= 0 {
data-on-click.outside:capture={ datastar.PutSSE("/api/todos/cancel") }
data-on-click__outside={ datastar.PutSSE("/api/todos/cancel") }
}
/>
}
31 changes: 31 additions & 0 deletions site/static/md/examples/click_outside.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
## Click Outside

## Demo

<div data-signals-open="false" data-on-click__outside="open.value ? open.value = false : null" >
<div data-show="open.value" class="p-10 bg-green-700">
<div class="p-10 bg-red-700">
Click anywhere outside the green box to close
</div>
</div>
<button data-on-click="open.value = true" data-show="!open.value" class="btn btn-primary">
Open a box
</button>
</div>

## Explanation

The `__outsite` modifier is used to listen to clicks outside the element.

```html
<div data-signals-open="false" data-on-click__outside="open.value ? open.value = false : null" >
<div data-show="open.value" class="p-10 bg-green-700">
<div class="p-10 bg-red-700">
Click anywhere outside the green box to close
</div>
</div>
<button data-on-click="open.value = true" data-show="!open.value">
Open a box
</button>
</div>
```
1 change: 1 addition & 0 deletions site/static/md/reference/attribute_plugins.md
Original file line number Diff line number Diff line change
@@ -176,6 +176,7 @@ Modifiers allow you to modify behavior when events are triggered. Some modifiers
- `.noleading` - Throttle without leading edge.
- `.trail` - Throttle with trailing edge.
- `__window` - Attaches the event listener to the `window` element.
- `__outsite` - Triggers when the event is outside the element.
- `__prevent` - Calls `preventDefault` on the event listener.
- `__stop` - Calls `stopPropagation` on the event listener.

Loading