Toggle Attribute Component

src/toggle-attribute/README.md

@@ -0,0 +1,79 @@
+# Toggle Attribute
+
+<table width="100%">
+	<tr>
+		<td align="left" width="70%">
+        <p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
+		</td>
+		<td align="center" width="30%">
+			<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
+		</td>
+	</tr>
+</table>
+
+## Sample Usage
+
+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.
+
+Example:
+
+```js
+// Import the component as needed:
+import '@travelopia/web-components/dist/toggle-attribute';
+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>
+</tp-toggle-attribute>
+
+<!-- Target based on value of the trigger -->
+<tp-toggle-attribute target="#toggle-target">
+	<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">
+	<select>
+		<option value="">Select</option>
+		<option value="Yes">Yes</option>
+		<option value="No">No</option>
+	</select>
+</tp-toggle-attribute>
+
+<!-- Example target -->
+<div id="toggle-target" data-toggle-value="Yes" data-toggle-group="my-group">
+	Yes
+</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                                                        |
+| 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                         |
+| 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`.                                  |
+
+## Events
+
+| Event       | Notes                                          |
+|-------------|------------------------------------------------|
+| triggered   | When the trigger is fired, before any toggling |
+| toggled     | When the target is toggled                     |
+| toggled-on  | When the target is toggled on                  |
+| toggled-off | When the target is toggled off                 |

src/toggle-attribute/index.html

@@ -0,0 +1,100 @@
+<!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">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Web Component: Toggle Attribute</title>
+
+	<link rel="stylesheet" href="../../dist/toggle-attribute/style.css" media="all">
+	<script type="module" src="../../dist/toggle-attribute/index.js"></script>
+
+	<style>
+		[id] {
+			display: none;
+			padding: 10px;
+			margin: 10px 0;
+			border: 1px solid red;
+		}
+
+		[toggled] {
+			display: block;
+		}
+	</style>
+</head>
+<body>
+	<main>
+
+		<p>Nested radio inputs</p>
+		<tp-toggle-attribute trigger="input[type='radio']" value="Yes" target="#toggle-target">
+			<label>
+				<input type="radio" name="test" value="Yes" />
+				Yes
+			</label>
+			<label>
+				<input type="radio" name="test" value="No" />
+				No
+			</label>
+		</tp-toggle-attribute>
+
+		<p>Select with targeted value</p>
+
+		<!-- Select 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>
+		</tp-toggle-attribute>
+
+		<div id="toggle-target">
+			Toggled
+		</div>
+
+		<p>Select with variable value and a target</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>
+			</select>
+		</tp-toggle-attribute>
+
+		<div id="toggle-target-variable" data-toggle-value="Yes">
+			Toggled
+		</div>
+
+		<p>Select with variable value targeting a group</p>
+
+		<!-- 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>
+
+		<div id="yes-target" data-toggle-value="Yes" data-toggle-group="my-group">
+			Yes
+		</div>
+
+		<div id="no-target" data-toggle-value="No" data-toggle-group="my-group">
+			No
+		</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
+		</div>
+
+	</main>
+</body>
+</html>

src/toggle-attribute/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Styles.
+ */
+import './style.scss';
+
+/**
+ * Components.
+ */
+import { TPToggleAttributeElement } from './tp-toggle-attribute';
+
+/**
+ * Register Components.
+ */
+customElements.define( 'tp-toggle-attribute', TPToggleAttributeElement );

src/toggle-attribute/style.scss

@@ -0,0 +1,3 @@
+tp-toggle-attribute {
+	display: contents;
+}