$focus.first()) }"
@keydown.space.prevent="if (activeDropdown !== 'what') { activeDropdown = 'what'; $nextTick(() => $focus.first()) }"
@keydown.arrow-down.prevent="if (activeDropdown !== 'what') { activeDropdown = 'what'; $nextTick(() => $focus.first()) }"
@keydown.escape.prevent="activeDropdown = null"
x-data="{
displayText: 'Any event',
anyChecked: false,
anyIndeterminate: false,
totalOptions: 4,
updateDisplayText() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what;
if (selected.includes('any') || selected.length === 0 || selected.length === this.totalOptions) {
this.displayText = 'Any event';
} else {
const labels = {
'phpx': 'PHPx',
'laravel-meetup': 'Meetup',
'laravel-live': 'Live',
'laracon': 'Laracon',
};
const maxItems = 'What' === 'Where' ? 2 : 3;
const displayItems = selected.slice(0, maxItems).map(val => labels[val] || val);
if (selected.length > maxItems) {
displayItems.push(`+${selected.length - maxItems} more`);
}
this.displayText = displayItems.join(', ');
}
},
updateAnyState() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what.filter(item => item !== 'any');
this.anyChecked = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what.includes('any') || selected.length === this.totalOptions;
this.anyIndeterminate = !window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what.includes('any') && selected.length > 0 && selected.length < this.totalOptions;
},
selectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what = ['any', 'phpx','laravel-meetup','laravel-live','laracon'];
this.updateDisplayText();
this.updateAnyState();
},
unselectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').what = [];
this.updateDisplayText();
this.updateAnyState();
},
handleAnyChange(event) {
if (event.target.checked) {
this.selectAll();
} else {
this.unselectAll();
}
}
}"
x-init="$watch('$wire.what', () => { updateDisplayText(); updateAnyState(); }); updateDisplayText(); updateAnyState()"
>
What
Any event
Use arrow keys to navigate options, space or enter to toggle selection, escape to close
$focus.first()) }"
@keydown.space.prevent="if (activeDropdown !== 'where') { activeDropdown = 'where'; $nextTick(() => $focus.first()) }"
@keydown.arrow-down.prevent="if (activeDropdown !== 'where') { activeDropdown = 'where'; $nextTick(() => $focus.first()) }"
@keydown.escape.prevent="activeDropdown = null"
x-data="{
displayText: 'Anywhere',
anyChecked: false,
anyIndeterminate: false,
totalOptions: 8,
updateDisplayText() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where;
if (selected.includes('any') || selected.length === 0 || selected.length === this.totalOptions) {
this.displayText = 'Anywhere';
} else {
const labels = {
'africa': 'Africa',
'asia': 'Asia',
'europe': 'Europe',
'latin-america': 'Latin America',
'middle-east': 'Middle East',
'north-america': 'North America',
'oceania': 'Oceania',
'remote': 'Remote',
};
const maxItems = 'Where' === 'Where' ? 2 : 3;
const displayItems = selected.slice(0, maxItems).map(val => labels[val] || val);
if (selected.length > maxItems) {
displayItems.push(`+${selected.length - maxItems} more`);
}
this.displayText = displayItems.join(', ');
}
},
updateAnyState() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where.filter(item => item !== 'any');
this.anyChecked = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where.includes('any') || selected.length === this.totalOptions;
this.anyIndeterminate = !window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where.includes('any') && selected.length > 0 && selected.length < this.totalOptions;
},
selectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where = ['any', 'africa','asia','europe','latin-america','middle-east','north-america','oceania','remote'];
this.updateDisplayText();
this.updateAnyState();
},
unselectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').where = [];
this.updateDisplayText();
this.updateAnyState();
},
handleAnyChange(event) {
if (event.target.checked) {
this.selectAll();
} else {
this.unselectAll();
}
}
}"
x-init="$watch('$wire.where', () => { updateDisplayText(); updateAnyState(); }); updateDisplayText(); updateAnyState()"
>
Where
Anywhere
Use arrow keys to navigate options, space or enter to toggle selection, escape to close
Anywhere
Select all where
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('africa') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Africa
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('asia') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Asia
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('europe') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Europe
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('latin-america') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Latin America
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('middle-east') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Middle East
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('north-america') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
North America
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('oceania') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Oceania
item !== 'any'); updateAnyState(); }"
tabindex="0"
aria-checked="false"
x-bind:aria-checked="$wire.where.includes('remote') ? 'true' : 'false'"
@keydown.enter.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
@keydown.space.prevent="$el.checked = !$el.checked; $el.dispatchEvent(new Event('change', { bubbles: true }))"
>
Remote
$focus.first()) }"
@keydown.space.prevent="if (activeDropdown !== 'when') { activeDropdown = 'when'; $nextTick(() => $focus.first()) }"
@keydown.arrow-down.prevent="if (activeDropdown !== 'when') { activeDropdown = 'when'; $nextTick(() => $focus.first()) }"
@keydown.escape.prevent="activeDropdown = null"
x-data="{
displayText: 'Any time',
anyChecked: false,
anyIndeterminate: false,
totalOptions: 3,
updateDisplayText() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when;
if (selected.includes('any') || selected.length === 0 || selected.length === this.totalOptions) {
this.displayText = 'Any time';
} else {
const labels = {
'this-month': 'This month',
'this-year': 'This year',
'next-year': 'Next year',
};
const maxItems = 'When' === 'Where' ? 2 : 3;
const displayItems = selected.slice(0, maxItems).map(val => labels[val] || val);
if (selected.length > maxItems) {
displayItems.push(`+${selected.length - maxItems} more`);
}
this.displayText = displayItems.join(', ');
}
},
updateAnyState() {
const selected = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when.filter(item => item !== 'any');
this.anyChecked = window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when.includes('any') || selected.length === this.totalOptions;
this.anyIndeterminate = !window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when.includes('any') && selected.length > 0 && selected.length < this.totalOptions;
},
selectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when = ['any', 'this-month','this-year','next-year'];
this.updateDisplayText();
this.updateAnyState();
},
unselectAll() {
window.Livewire.find('hqAnc8ik4IeBCglMRU1B').when = [];
this.updateDisplayText();
this.updateAnyState();
},
handleAnyChange(event) {
if (event.target.checked) {
this.selectAll();
} else {
this.unselectAll();
}
}
}"
x-init="$watch('$wire.when', () => { updateDisplayText(); updateAnyState(); }); updateDisplayText(); updateAnyState()"
>
When
Any time
Use arrow keys to navigate options, space or enter to toggle selection, escape to close