Skip to content

Commit ace74aa

Browse files
abhishekxixabhishekxix
authored
Merge pull request #79 from Travelopia/feature/toggle-attribute-non-empty-values
Add case for all non-empty values in toggle-attribute
2 parents 0e55843 + e5827f1 commit ace74aa

File tree

3 files changed

+97
-16
lines changed

3 files changed

+97
-16
lines changed

‎src/toggle-attribute/README.md‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,44 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';
6464
<option value="">Select</option>
6565
<option value="First">First</option>
6666
<option value="Second">Second</option>
67+
<option value="Third">Third</option>
68+
<option value="Fourth">Fourth</option>
69+
<option value="Fifth">Fifth</option>
6770
<option value="All">All</option>
6871
</select>
6972
</tp-toggle-attribute>
7073

7174
<div class="toggle-target-variable" data-toggle-value="First,All">
7275
Toggled First
7376
</div>
77+
<div class="toggle-target-variable" data-toggle-non-empty-value="yes">
78+
<!-- add the data-toggle-non-empty-value="yes" attribute to toggle on with all non empty values. -->
79+
This will be toggled for all non empty values.
80+
</div>
7481
<div class="toggle-target-variable" data-toggle-value="Second,All">
7582
Toggled Second
7683
</div>
7784

85+
<!-- Toggle for non empty values. -->
86+
<p>Toggle with non empty values</p>
87+
88+
<!-- Select value -->
89+
<tp-toggle-attribute target=".toggle-target-non-empty" non-empty-value="yes">
90+
<select>
91+
<option value="">Select</option>
92+
<option value="First">First</option>
93+
<option value="Second">Second</option>
94+
<option value="Third">Third</option>
95+
<option value="Fourth">Fourth</option>
96+
<option value="Fifth">Fifth</option>
97+
<option value="All">All</option>
98+
</select>
99+
</tp-toggle-attribute>
100+
101+
<div class="toggle-target-non-empty">
102+
Toggle for all non empty values.
103+
</div>
104+
78105
<p>Button with click event</p>
79106
<tp-toggle-attribute event="click" target=".button-target">
80107
<button>Toggle using class</button>
@@ -101,12 +128,13 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';
101128

102129
| Attribute | Required | Values | Notes |
103130
|------------------------|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
104-
| target | Yes | <selector or the target> | This is required if group is not mentioned |
131+
| target | Yes | <selector or the target> | This is required if group is not mentioned |
105132
| attribute | No | <attribute key> | The attribute to toggle. Default: `toggled` |
106133
| attribute-value | No | <attribute value> | The attribute value when its. Default: `yes` |
107-
| 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. |
134+
| value | 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. |
108135
| 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 |
109136
| 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`. |
137+
| non-empty-value | No | yes | A boolean attribute that signifies whether or not the targets should be toggled for all non empty values on the trigger.
110138

111139
## Events
112140

‎src/toggle-attribute/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,17 +66,44 @@
6666
<option value="">Select</option>
6767
<option value="First">First</option>
6868
<option value="Second">Second</option>
69+
<option value="Third">Third</option>
70+
<option value="Fourth">Fourth</option>
71+
<option value="Fifth">Fifth</option>
6972
<option value="All">All</option>
7073
</select>
7174
</tp-toggle-attribute>
7275

7376
<div class="toggle-target-variable" data-toggle-value="First,All">
7477
Toggled First
7578
</div>
79+
<div class="toggle-target-variable" data-toggle-non-empty-value="yes">
80+
<!-- add the data-toggle-non-empty-value="yes" attribute to toggle on with all non empty values. -->
81+
This will be toggled for all non empty values.
82+
</div>
7683
<div class="toggle-target-variable" data-toggle-value="Second,All">
7784
Toggled Second
7885
</div>
7986

87+
<!-- Toggle for non empty values. -->
88+
<p>Toggle with non empty values</p>
89+
90+
<!-- Select value -->
91+
<tp-toggle-attribute target=".toggle-target-non-empty" non-empty-value="yes">
92+
<select>
93+
<option value="">Select</option>
94+
<option value="First">First</option>
95+
<option value="Second">Second</option>
96+
<option value="Third">Third</option>
97+
<option value="Fourth">Fourth</option>
98+
<option value="Fifth">Fifth</option>
99+
<option value="All">All</option>
100+
</select>
101+
</tp-toggle-attribute>
102+
103+
<div class="toggle-target-non-empty">
104+
Toggle for all non empty values.
105+
</div>
106+
80107
<p>Button with click event</p>
81108
<tp-toggle-attribute event="click" target=".button-target">
82109
<button>Toggle using class</button>

‎src/toggle-attribute/tp-toggle-attribute.ts‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export class TPToggleAttributeElement extends HTMLElement {
1919
update(): void {
2020
// Get trigger elements.
2121
const triggerSelector: string = this.getAttribute( 'trigger' ) ?? ':scope > *';
22-
const triggers: NodeListOf<HTMLElement> | null = this.querySelectorAll( triggerSelector );
22+
const triggers: NodeListOf<HTMLElement> = this.querySelectorAll( triggerSelector );
2323

2424
// Exit the function if no triggers are found.
2525
if ( ! triggers ) {
@@ -61,7 +61,7 @@ export class TPToggleAttributeElement extends HTMLElement {
6161
// Check if trigger has a value, example: form inputs.
6262
if ( value || '' === value ) {
6363
// Check if we have a value.
64-
if ( this.hasAttribute( 'value' ) ) {
64+
if ( this.hasAttribute( 'value' ) || this.hasAttribute( 'non-empty-value' ) ) {
6565
this.toggleByValueAttribute( value );
6666
} else {
6767
this.toggleByTargetDataValue( value );
@@ -78,22 +78,38 @@ export class TPToggleAttributeElement extends HTMLElement {
7878
* @param {string} value Trigger's value.
7979
*/
8080
toggleByValueAttribute( value: string = '' ): void {
81-
// Get value to listen for.
82-
const values: string[] = ( this.getAttribute( 'value' ) ?? '' ).split( ',' );
83-
8481
// Get the target elements.
8582
const targetElements = this.getTargetElements();
8683

8784
// Check if we can continue
88-
if ( ! ( values.length && targetElements ) ) {
85+
if ( ! targetElements ) {
8986
// We can't.
9087
return;
9188
}
9289

90+
// Initialize values.
91+
let values: string[] = [];
92+
93+
// Get value to listen for.
94+
const valuesAttribute = this.getAttribute( 'value' );
95+
const nonEmptyValuesAttribute = this.hasAttribute( 'non-empty-value' );
96+
97+
// Can we proceed?
98+
if ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {
99+
// Nope.
100+
return;
101+
}
102+
103+
// Do we have the values attribute?
104+
if ( valuesAttribute ) {
105+
// Yes, split it.
106+
values = valuesAttribute.split( ',' );
107+
}
108+
93109
// Toggle the target elements.
94110
targetElements.forEach( ( target ) => {
95111
// Toggle the target's attribute if the target and trigger have the same value.
96-
if ( values.includes( value ) ) {
112+
if ( ( values.length && values.includes( value ) ) || ( nonEmptyValuesAttribute && value ) ) {
97113
this.toggleTargetAttribute( target, 'on' );
98114
} else {
99115
this.toggleTargetAttribute( target, 'off' );
@@ -118,17 +134,27 @@ export class TPToggleAttributeElement extends HTMLElement {
118134

119135
// Toggle the target elements.
120136
targetElements.forEach( ( target: HTMLElement ): void => {
121-
// Get values.
122-
const values: string[] = ( target.getAttribute( 'data-toggle-value' ) ?? '' ).split( ',' );
137+
// Get values and split them. Set an empty array otherwise.
138+
const valuesAttribute = target.getAttribute( 'data-toggle-value' );
139+
const nonEmptyValuesAttribute = target.hasAttribute( 'data-toggle-non-empty-value' );
123140

124-
// Check if we can continue
125-
if ( ! values.length ) {
126-
// We can't.
141+
// Can we proceed?
142+
if ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {
143+
// Nope, bail.
127144
return;
128145
}
129146

130-
// Toggle on element attribute if it matches value.
131-
if ( values.includes( value ) ) {
147+
// Initialize values.
148+
let values: string[] = [];
149+
150+
// Null check.
151+
if ( valuesAttribute ) {
152+
// Assign the values.
153+
values = valuesAttribute.split( ',' );
154+
}
155+
156+
// Toggle on element attribute if it matches value or it does not have a data-toggle-value attribute in which case it will match with all non empty values.
157+
if ( ( values.length && values.includes( value ) ) || ( nonEmptyValuesAttribute && value ) ) {
132158
this.toggleTargetAttribute( target, 'on' );
133159
} else {
134160
this.toggleTargetAttribute( target, 'off' );

0 commit comments

Comments
 (0)