Repeater toggle open/close all items

[adrianbj]

Short description of the enhancement

A button (or similar) that would open/close all repeater items at once. Maybe this might be a problem on a page with a LOT of items? Maybe repeaters should be the next fieldtype to support pagination?

Why would the enhancement be useful to users?

Page load is obviously more efficient with items collapsed by default, but if you are using items as a content block builder (especially in RepeaterMatrix) it can be hard to get an idea of the content of entire page without expanding them all.

Conversely, if you choose to have them open by default, it can be difficult to reorder with long blocks or lots of items, so being able to collapse all quickly would be very handy.

[teppokoivula]

One of our projects used to rely on Repeaters for the bulk of content, and pretty much right from the start I had to add this feature to make things bearable.

Definitely makes sense, at least from usability point of view :)

[adrianbj]

One of our projects used to rely on Repeaters for the bulk of content

It doesn't anymore? Just curious if you decided to go with PageTables instead (or some other option)?

[teppokoivula]

We ended up simplifying things a lot and now we're using CKEditor + a bunch of Textformatters.

If Repeater Matrix had been available back then we might've gone with that, but Repeaters just couldn't provide enough flexibility, and regarding PageTable.. well, let's just say that sometimes not seeing the content on the backend right away can indeed be a problem :)

[adrianbj]

let's just say that sometimes not seeing the content on the backend right away can indeed be a problem :)

I agree (which is why I want the open/close toggle for repeaters. I know we are getting OT, but it's an interesting discussion because I have a site that relies completely on PageTableExtended fields (to deal with the issue of not seeing the content), but the need for editing each block in a modal is something I was never very keen on. Now that we have Repeater Matrix, I am contemplating switching that site - I have even built a script that converts a PageTable field (and all its content and templates) to either Repeater or Repeater Matrix based on whether there is 1 or more than 1 template for items. It handles absolutely everything for the conversion so I now have a one click solution for converting, but trying to figure out the pros and cons of making the switch. I am contemplating the feasibility of building a RepeaterMatrixExtended that has a preview/edit toggle so we can have the great preview functionality that PageTableExtended has, but with the inline editing capabilities of Repeaters.

[adrianbj]

pretty much right from the start I had to add this feature to make things bearable.

@teppokoivula - just wondering if you'd consider submitting a PR with this functionality? Maybe you wrote it before repeaters had the ajax loading option, so maybe it wouldn't be that simple. I was just noticing that @ryancramerdesign is working a lot on repeaters the last couple of days, so thought it might be timely :)

[teppokoivula]

It was indeed before AJAX loading, and Repeaters have changed quite a bit since then. I may revisit this at some point, but currently this is very near the bottom of my (very long) todo list, so.. I wouldn't hold my breath :)

[LostKobrakai]

@adrianbj maybe you can copy some things together from the new "delete all" option.

[adrianbj]

Hey @teppokoivula - no problem - I was just thinking it would be timely if you had working code. It's not at the top of my list right now either. Thanks for the suggestion @LostKobrakai - I haven't even looked into what would be required yet, but I might have the need for this again in the new year and I'll look into it then.

[ryancramerdesign]

This feature has been added. To use it, double click the on/off icon for any repeater item (the icon directly to the left of the trash icon). If the repeater item happens to be collapsed, it'll trigger an open all. If it's already open, it triggers a collapse all. Both use a confirm box just to make sure that's the intention.

[adrianbj]

Thank @ryancramerdesign - seems to be working great. I know you must have a reason, but I honestly don't understand why this double-click behavior isn't connected to the "Toggle open/close" arrow icon - wouldn't that be more appropriate?

Btw, I love have the title attributes so that users will learn about the double-click options. I am getting OT, but would you mind adding them to file/image fields as well so users can know about it there also?

Thanks again!

[ryancramerdesign]

Thank @ryancramerdesign - seems to be working great. I know you must have a reason, but I honestly don't understand why this double-click behavior isn't connected to the "Toggle open/close" arrow icon - wouldn't that be more appropriate?

I knew that would be the next question, and I debated whether or not to pre-answer it earlier. :) I did actually try to get it working, for like 2 hours. Rather than spend all day, I decided to compromise. The trouble is that dblclick events also trigger click events first, and there are already click events on that that trigger open/close. Further, they are native to all Inputfields. Trust me, it causes all kinds of random havoc, depending on how fast things got clicked, how far open the Inputfield got before the dblclick was detected, and on and on. So the "all" toggle had to be tied to something else. I didn't want to add yet another icon or link somewhere because the feature didn't seem like something one would need every day – I don't want it taking up more real estate. It's just a handy shortcut for those rare times when you need it... a poweruser feature. The on/off toggle turned out to be perfect in a technical sense, because a double click on it is backwards compatible since it merely toggles back to the same state on double-click, without manipulating anything in the DOM.

Btw, I love have the title attributes so that users will learn about the double-click options. I am getting OT, but would you mind adding them to file/image fields as well so users can know about it there also?

Next time I'm making updates in there I'll add that. Will probably add the confirm box as well. It might be that I'm using this finicky apple magic mouse, but I'm prone to unintended double clicks.

[adrianbj]

Sorry to make you explain - I knew you must have had a reason :) Trouble is I do think that the current behavior will be confusing and honestly I don't really think it's really a power user feature - I actually think it's pretty critical, especially with RepeaterMatrix fields - when using them as a block builder tool, I think the editor needs to be able to quickly see what content is where. Also, I know it's subtle, but seeing the on/off toggle flip off and then back on again when double-clicking is disconcerting and shows a lack of polish to the interface in my mind. I am certainly not a UI/UX guru, but I am particular when it doesn't feel quite right.

Here's an idea for you - I know you said you didn't want more buttons, but I think this could work for files/images as well - what about an icon to the left of the field's main toggle open/close down/right facing arrow icon? I think for repeaters there could be a delete all icon and a toggle open/close all icon. I don't really like the double-click action on the web at all (maybe it's just me, but it feels wrong and not an obvious thing to try). I think the delete all icon could also make its way into all fields that have multiple values - table/multiplier/repeatermatrix/repeater and maybe even easily implemented by other field types like @kongondo's matrix, your events example, etc.

I know it's not easy and I really appreciate you adding this feature and the hassles with the double-click, which is why I think it might not be the best solution. I hope you take my comments in the spirit they are intended :)

It might be that I'm using this finicky apple magic mouse

That thing was the worst $80 I ever spent - ditched it very quickly!

[adrianbj]

@ryancramerdesign - just a further thought on my idea for the delete all and toggle open/close all buttons - these would fit perfectly where I suggested in the header/label bar of the field. They would be similar to the existing buttons on an image field: