Created
January 21, 2022 11:07
-
-
Save polarbirke/b37b58871b55c2c482be5dfcc2b66071 to your computer and use it in GitHub Desktop.
Alpine
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <figure x-data="alpine.filter()"> | |
| <div class="padding-double"> | |
| <h2 class="u-text-center u-text-tight"> | |
| <span class="u-text-monospace u-block u-text-bigger">:pseudo-conference 2020</span> | |
| Schedule | |
| </h2> | |
| <form class="margin-top" @submit="preventDefault();"> | |
| {% set filters = [ | |
| { category: 'Day', options: ['Monday', 'Tuesday'] }, | |
| { category: 'Track', options: ['a11y', 'CSS', 'Jamstack', 'Privacy'] }, | |
| { category: 'Location', options: ['Google Meet', 'Zoom'] } | |
| ] %} | |
| <fieldset> | |
| <legend class="u-visually-hidden">Filter talks</legend> | |
| <ul class="filters"> | |
| {% for filter in filters %} | |
| <li class="filter"> | |
| <label for="{{ filter.category|lower }}">{{ filter.category }}</label> | |
| <select class="margin-top-tenth" id="{{ filter.category|lower }}" name="{{ filter.category|lower }}" @change="$nextTick(() => updateResultsCount());" x-model="{{ filter.category|lower }}"> | |
| <option value="">Any</option> | |
| {% for option in filter.options %} | |
| <option value="{{ option|lower }}">{{ option }}</option> | |
| {% endfor %} | |
| </select> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| </fieldset> | |
| </form> | |
| {% set talks = [ | |
| { title: 'How to use 11ty for absolutely everything', day: 'Monday', track: 'Jamstack', location: 'Zoom' }, | |
| { title: 'That <div> should probably be a button', day: 'Tuesday', track: 'a11y', location: 'Google Meet' }, | |
| { title: 'Learn ASS - The Agile CSS methodology without specificity waterfalls', day: 'Tuesday', track: 'CSS', location: 'Google Meet' }, | |
| { title: 'Adventures in GDPR: you can have the cookie and eat it, too', day: 'Monday', track: 'Privacy', location: 'Zoom' }, | |
| { title: 'The power of rarely used CSS selectors', day: 'Monday', track: 'CSS', location: 'Zoom' }, | |
| { title: 'Why "The Last of Us Part II" is such a big deal for Accessibility', day: 'Tuesday', track: 'a11y', location: 'Google Meet' } | |
| ] %} | |
| <ul class="list--unstyled talks margin-top-oneandhalf"> | |
| {% for talk in talks %} | |
| <li class="talk padding-half u-background-white js-talk" x-show="(!day || day === '{{ talk.day|lower }}') && (!track || track === '{{ talk.track|lower }}') && (!location || location === '{{ talk.location|lower }}')"> | |
| <span class="u-text-monospace u-text-small">#{{ talk.track }}</span> | |
| <h3 class="u-text-tight">{{ talk.title }}</h3> | |
| <p class="u-text-small margin-top-tenth">Join us on <b>{{ talk.day }}</b> in <b>{{ talk.location }}</b>.</p> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| <div class="u-text-center" x-bind:class="{'u-visually-hidden': currentCount !== 0}" role="region" aria-live="polite"> | |
| <p x-text="filterNotification"></p> | |
| </div> | |
| </div> | |
| <figcaption> | |
| Demo for a filterable list built with AlpineJS | |
| </figcaption> | |
| </figure> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment