WIP: Added a plugin to filter a list of elements #7816
Conversation
LaurentGoderre
changed the title
|
I'm wondering if this needs to be in an aria-live region |
|
@nschonni I don't think so since no new content is added. Only hidden. The typical flow for a user would be to type in a filter than navigate below in what is left. Of course I plan to get this tested though |
|
@LaurentGoderre what do you think if I add that feature to my PR #7790. Base on your (this) PR, I could add a list filtering feature something similar of what I did for table filtering. What do you think of filtering by using a aside: what is the signification of "WIP"? |
|
@duboisp let's ensure that they are compatible but I don't think they should be the same, because this one allows to filter anyone as long as it can be expressed by CSS selectors. WIP is work in progress |
|
I agree they should not be the same. I was thinking to add a new "action" called "lstfilter" in wb-fieldflow where it will specifically deal with list filtering. I only wanted to highlight the feature similarity. Field flow already deal with the UI. I will work on a demo but I may only able to only deliver in about 3-4 weeks. |
|
I don't think I'm in too much rush but I think I'll have to implement this locally until this lands. I still want ours to be a reflection of what will eventually land. |
|
@LaurentGoderre what kind of user interaction do you need
|
|
THis allows to filter simply by typing and allows to filter any type of content, not just lists. |
|
@duboisp I don't think our plugins aim at doing the same thing. |
|
So you are looking to do something similar like : https://github.com/javve/list.js - http://listjs.com/ |
|
Yep. |
|
@pcwsmith if I recall correctly, you needed something like this for Cannada.ca as well didn't you? |
| ( function() { | ||
| window[ "wb-filter" ] = { | ||
| filterCallback: function( $field, $elm, settings ) { | ||
| var $sections = $elm.find( "section" ), |
There was a problem hiding this comment.
Suggestion:
Include that call back directly in the plugin instead. I think it is common to deal with grouping.
So, instead of targeting directly the section that could be set through config like:
<div class="wb-filter" data-wb-filter='{"group": "section"}'>
[...]
</div>There was a problem hiding this comment.
I suppose we can have one or more default ones but I'm not sure it will be that simple in many cases. Because this can target any content using selectors. I'm trying to be as least opinionated as possible.
There was a problem hiding this comment.
You can still allow to use a custom callback for those complex case.
Is triggering a event could be better than using a call back?
There was a problem hiding this comment.
Better than a callback no. More WET4....maybe. However, the next version of WET needs to shift to using more callback as it's a way more common pattern in the JS world.
|
indeed we have included filter tools for lists in our design patterns for Canada.ca, been hoping that it could get made. |
duboisp
added
Query: Feature Request
State: Work in progress
|
I see this as a very important development to deter pages of lists being written as tables to meet usability requirements. |
|
Hi gang! How close are we to having a first version of this plugin up and running? Any chance I can see a demo of this thing in action? The C&IA team here is very keen on this one, we need it for a couple of different page templates. If the main problem is a lack of manpower to push it across the finish line, perhaps we could help by tracking down a volunteer? We don't have the skils on our team to actively contribute, but if there's any other way we can help, we would jump at the chance :) |
|
@SBleeks can you add your comments of what needs to be fixed accessibility wise for this component? |
|
I can't find a link to the current design here? Can you send me the link? |
TODO: