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.

Sign up for GitHub

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

Refactor tp-toggle-attribute #74

Merged
merged 1 commit into from
Aug 8, 2024
Merged

Refactor tp-toggle-attribute #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 57 additions & 18 deletions src/toggle-attribute/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,47 +25,86 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';

```html
<!-- Target based on an explicit value -->
<tp-toggle-attribute target="#toggle-target" value="Yes">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<p>Nested radio inputs</p>
<tp-toggle-attribute trigger="input[type='radio']" value="Yes" target="#radio-target">
<label>
<input type="radio" name="test" value="Yes" />
Yes
</label>
<label>
<input type="radio" name="test" value="No" />
No
</label>
</tp-toggle-attribute>

<!-- Target based on value of the trigger -->
<tp-toggle-attribute target="#toggle-target">
<div id="radio-target">
Radio Target
</div>

<p>Select with targeted value</p>

<!-- Select value -->
<tp-toggle-attribute target="#select-target" value="Yes">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tp-toggle-attribute>

<!-- Toggle based on a value of the trigger, but toggle other members of the same group off -->
<tp-toggle-attribute group="my-group">
<div id="select-target">
Select Target
</div>

<p>Select with variable value and multiple targets</p>

<!-- Select value -->
<tp-toggle-attribute target=".toggle-target-variable">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="All">All</option>
</select>
</tp-toggle-attribute>

<!-- Example target -->
<div id="toggle-target" data-toggle-value="Yes" data-toggle-group="my-group">
Yes
<div class="toggle-target-variable" data-toggle-value="First,All">
Toggled First
</div>
<div class="toggle-target-variable" data-toggle-value="Second,All">
Toggled Second
</div>

<p>Button with click event</p>
<tp-toggle-attribute event="click" target=".button-target">
<button>Toggle using class</button>
</tp-toggle-attribute>

<tp-toggle-attribute event="click" target="#button-target">
<button>Toggle using ID</button>
</tp-toggle-attribute>

<div class="button-target">
Button Target class
</div>

<div class="button-target">
Button Target class
</div>

<div id="button-target">
Button Target ID
</div>
```

## Attributes

| Attribute | Required | Values | Notes |
|------------------------|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| target | Maybe | <selector or the target> | This is required if group is not mentioned |
| group | Maybe | <name of the group> | The group name. Will be looking for the `data-toggle-group` attribute on targets |
| target | Yes | <selector or the target> | This is required if group is not mentioned |
| attribute | No | <attribute key> | The attribute to toggle. Default: `toggled` |
| attribute-value | No | <attribute value> | The attribute value when its. Default: `yes` |
| value | No | <value to match> | If this is specified, this value is matched with the value of the trigger. If they match, the target is toggled |
| values | No | <comma separated values to match> | If this is specified, these comma separated values are matched with the value of the trigger. If they match, the target(s) is/are toggled. Same goes for having a `data-toggle-value` attribute on a target. |
| trigger | No | <selector of the trigger> | If this is not specified, the direct child is treated as the trigger. If it is mentioned, it looks for this selector within the context |
| closest-ancestor | No | <selector of the closest ancestor> | Default: `body`. If this is specified, the target is searched for within this selector, not on `body`. |

Expand Down
65 changes: 34 additions & 31 deletions src/toggle-attribute/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
Expand All @@ -10,7 +11,8 @@
<script type="module" src="../../dist/toggle-attribute/index.js"></script>

<style>
[id] {
[id],
[class] {
display: none;
padding: 10px;
margin: 10px 0;
Expand All @@ -22,11 +24,11 @@
}
</style>
</head>

<body>
<main>

<p>Nested radio inputs</p>
<tp-toggle-attribute trigger="input[type='radio']" value="Yes" target="#toggle-target">
<tp-toggle-attribute trigger="input[type='radio']" value="Yes" target="#radio-target">
<label>
<input type="radio" name="test" value="Yes" />
Yes
Expand All @@ -37,64 +39,65 @@
</label>
</tp-toggle-attribute>

<div id="radio-target">
Radio Target
</div>

<p>Select with targeted value</p>

<!-- Select value -->
<tp-toggle-attribute target="#toggle-target" value="Yes">
<tp-toggle-attribute target="#select-target" value="Yes">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tp-toggle-attribute>

<div id="toggle-target">
Toggled
<div id="select-target">
Select Target
</div>

<p>Select with variable value and a target</p>
<p>Select with variable value and multiple targets</p>

<!-- Select value -->
<tp-toggle-attribute target="#toggle-target-variable">
<tp-toggle-attribute target=".toggle-target-variable">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="All">All</option>
</select>
</tp-toggle-attribute>

<div id="toggle-target-variable" data-toggle-value="Yes">
Toggled
<div class="toggle-target-variable" data-toggle-value="First,All">
Toggled First
</div>
<div class="toggle-target-variable" data-toggle-value="Second,All">
Toggled Second
</div>

<p>Select with variable value targeting a group</p>
<p>Button with click event</p>
<tp-toggle-attribute event="click" target=".button-target">
<button>Toggle using class</button>
</tp-toggle-attribute>

<!-- Select with variable value -->
<tp-toggle-attribute group="my-group">
<select>
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<tp-toggle-attribute event="click" target="#button-target">
<button>Toggle using ID</button>
</tp-toggle-attribute>

<div id="yes-target" data-toggle-value="Yes" data-toggle-group="my-group">
Yes
<div class="button-target">
Button Target class
</div>

<div id="no-target" data-toggle-value="No" data-toggle-group="my-group">
No
<div class="button-target">
Button Target class
</div>

<p>Button with click event</p>
<tp-toggle-attribute event="click" target="#button-target">
<button>Toggle</button>
</tp-toggle-attribute>

<div id="button-target">
Button Target
Button Target ID
</div>

</main>
</body>

</html>
Loading
Loading