Skip to content

Commit d06782e

Browse files
abhishekxixabhishekxix
authored
Merge pull request #70 from Travelopia/feature/toggle-attribute
Toggle Attribute Component
2 parents c5fd433 + ad02ee9 commit d06782e

File tree

6 files changed

+450
-0
lines changed

6 files changed

+450
-0
lines changed

‎src/toggle-attribute/README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Toggle Attribute
2+
3+
<table width="100%">
4+
<tr>
5+
<td align="left" width="70%">
6+
<p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
7+
</td>
8+
<td align="center" width="30%">
9+
<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
10+
</td>
11+
</tr>
12+
</table>
13+
14+
## Sample Usage
15+
16+
This is a versatile component to turn an attribute on a target component on and off based on changes on a trigger. This is useful to hide or show things, or just change a state on a target.
17+
18+
Example:
19+
20+
```js
21+
// Import the component as needed:
22+
import '@travelopia/web-components/dist/toggle-attribute';
23+
import '@travelopia/web-components/dist/toggle-attribute/style.css';
24+
```
25+
26+
```html
27+
<!-- Target based on an explicit value -->
28+
<tp-toggle-attribute target="#toggle-target" value="Yes">
29+
<select>
30+
<option value="">Select</option>
31+
<option value="Yes">Yes</option>
32+
<option value="No">No</option>
33+
</select>
34+
</tp-toggle-attribute>
35+
36+
<!-- Target based on value of the trigger -->
37+
<tp-toggle-attribute target="#toggle-target">
38+
<select>
39+
<option value="">Select</option>
40+
<option value="Yes">Yes</option>
41+
<option value="No">No</option>
42+
</select>
43+
</tp-toggle-attribute>
44+
45+
<!-- Toggle based on a value of the trigger, but toggle other members of the same group off -->
46+
<tp-toggle-attribute group="my-group">
47+
<select>
48+
<option value="">Select</option>
49+
<option value="Yes">Yes</option>
50+
<option value="No">No</option>
51+
</select>
52+
</tp-toggle-attribute>
53+
54+
<!-- Example target -->
55+
<div id="toggle-target" data-toggle-value="Yes" data-toggle-group="my-group">
56+
Yes
57+
</div>
58+
```
59+
60+
## Attributes
61+
62+
| Attribute | Required | Values | Notes |
63+
|------------------------|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
64+
| target | Maybe | <selector or the target> | This is required if group is not mentioned |
65+
| group | Maybe | <name of the group> | The group name. Will be looking for the `data-toggle-group` attribute on targets |
66+
| attribute | No | <attribute key> | The attribute to toggle. Default: `toggled` |
67+
| attribute-value | No | <attribute value> | The attribute value when its. Default: `yes` |
68+
| 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 |
69+
| 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 |
70+
| 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`. |
71+
72+
## Events
73+
74+
| Event | Notes |
75+
|-------------|------------------------------------------------|
76+
| triggered | When the trigger is fired, before any toggling |
77+
| toggled | When the target is toggled |
78+
| toggled-on | When the target is toggled on |
79+
| toggled-off | When the target is toggled off |

‎src/toggle-attribute/index.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Web Component: Toggle Attribute</title>
8+
9+
<link rel="stylesheet" href="../../dist/toggle-attribute/style.css" media="all">
10+
<script type="module" src="../../dist/toggle-attribute/index.js"></script>
11+
12+
<style>
13+
[id] {
14+
display: none;
15+
padding: 10px;
16+
margin: 10px 0;
17+
border: 1px solid red;
18+
}
19+
20+
[toggled] {
21+
display: block;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<main>
27+
28+
<p>Nested radio inputs</p>
29+
<tp-toggle-attribute trigger="input[type='radio']" value="Yes" target="#toggle-target">
30+
<label>
31+
<input type="radio" name="test" value="Yes" />
32+
Yes
33+
</label>
34+
<label>
35+
<input type="radio" name="test" value="No" />
36+
No
37+
</label>
38+
</tp-toggle-attribute>
39+
40+
<p>Select with targeted value</p>
41+
42+
<!-- Select value -->
43+
<tp-toggle-attribute target="#toggle-target" value="Yes">
44+
<select>
45+
<option value="">Select</option>
46+
<option value="Yes">Yes</option>
47+
<option value="No">No</option>
48+
</select>
49+
</tp-toggle-attribute>
50+
51+
<div id="toggle-target">
52+
Toggled
53+
</div>
54+
55+
<p>Select with variable value and a target</p>
56+
57+
<!-- Select value -->
58+
<tp-toggle-attribute target="#toggle-target-variable">
59+
<select>
60+
<option value="">Select</option>
61+
<option value="Yes">Yes</option>
62+
<option value="No">No</option>
63+
</select>
64+
</tp-toggle-attribute>
65+
66+
<div id="toggle-target-variable" data-toggle-value="Yes">
67+
Toggled
68+
</div>
69+
70+
<p>Select with variable value targeting a group</p>
71+
72+
<!-- Select with variable value -->
73+
<tp-toggle-attribute group="my-group">
74+
<select>
75+
<option value="">Select</option>
76+
<option value="Yes">Yes</option>
77+
<option value="No">No</option>
78+
</select>
79+
</tp-toggle-attribute>
80+
81+
<div id="yes-target" data-toggle-value="Yes" data-toggle-group="my-group">
82+
Yes
83+
</div>
84+
85+
<div id="no-target" data-toggle-value="No" data-toggle-group="my-group">
86+
No
87+
</div>
88+
89+
<p>Button with click event</p>
90+
<tp-toggle-attribute event="click" target="#button-target">
91+
<button>Toggle</button>
92+
</tp-toggle-attribute>
93+
94+
<div id="button-target">
95+
Button Target
96+
</div>
97+
98+
</main>
99+
</body>
100+
</html>

‎src/toggle-attribute/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Styles.
3+
*/
4+
import './style.scss';
5+
6+
/**
7+
* Components.
8+
*/
9+
import { TPToggleAttributeElement } from './tp-toggle-attribute';
10+
11+
/**
12+
* Register Components.
13+
*/
14+
customElements.define( 'tp-toggle-attribute', TPToggleAttributeElement );

‎src/toggle-attribute/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
tp-toggle-attribute {
2+
display: contents;
3+
}

0 commit comments

Comments
 (0)