Accordion and SequenceWidget

[Ezka77]

Mixing accordion exemple with SequenceWidget and Select2Widget leads to some strange behaviour:

• accordion of the first element work, the others can't be opened/closed
• css of Select2Widget inside the accordion seems have some issues.

version: deform==2.0.4

Here some code to illustrate:

choices = (('test1', 'Test 1'),
                   ('test2', 'Test 2'),
                   ('test3', 'Test 3'))

## Inside the accordion
class ClipParameterSchema(colander.Schema):
    not_available_for = colander.SchemaNode(
                colander.Set(),
                validator=colander.Length(max=10),
                widget=deform.widget.Select2Widget(
                    values=choices,
                    multiple=True),
                missing=[]
                )
    only_available_for = colander.SchemaNode(
                colander.Set(),
                validator=colander.Length(max=1),
                widget=deform.widget.Select2Widget(
                    values=choices,
                    multiple=True),
                missing=[],
                )
    until = colander.SchemaNode(
                colander.Date(),
                missing=colander.drop
                )

## Schema with an accordion
class ClipSchema(colander.Schema):
    upload = colander.SchemaNode(
            deform.FileData(),
            widget=deform.widget.FileUploadWidget(tmpstore)
            )
    parameters = ClipParameterSchema(
                        title="Clip parameters",
                        widget=deform.widget.MappingWidget(
                        template="mapping_accordion",
                        open=False))

## Sequence of schema with  an accordion
class ClipSequence(colander.SequenceSchema):
    upload = ClipSchema()

And a screen shot here:

[rw-moore]

This is quite a coincidence! I just ran into this problem myself and was actually coming here for the first time to post a fix. The problem is that the 'a' tag in the header of the mapping_accordion template uses a fixed value for the ID of the field which does not work inside a sequence since each new item is created with a dynamic ID.

It seems that deform is smart enough to go through the ID elements of the sequenced template to update these but this misses the "#collapse-${field.oid}" in the href element of the 'a' tag in the header of the mapped object. My fix is to add an ID to the 'a' tag of the form:

'button-collapse-${field.oid}'

and then add a simple javascript function, 'idgoto', which updates the href element of the tag using the ID of the element when the tag is clicked. Since the ID element is correctly updated this then updates the href element to point to the correct link and the collapse/expand functionality will then work for added items in the sequence.

The patched version of mapping_accordion.pt is attached below. The 'idgoto' function should be put inside the deform JS file so it only gets loaded once instead of repeated for each mapping template but this dirty hack allows me to leave the installed deform library alone and just fix it with my own template (note - I had to change the extension from .pt to .txt to get it to attach - you will need to switch it back!).

mapping_accordion2.txt

[maxim-s-barabash]

--- in/deform.js
+++ out/deform.js
@@ -61,6 +57,7 @@
         var $htmlnode = $(html);
         var $idnodes = $htmlnode.find('[id]');
         var $namednodes = $htmlnode.find('[name]');
+        var $controls = $htmlnode.find('[aria-controls]');
         var genid = deform.randomString(6);
         var idmap = {};

@@ -87,6 +84,16 @@
             $node.attr('name', newname);
             });

+        // replace aria-controls and href a containing ```deformField`` like we do for ids
+
+        $controls.each(function(idx, node) {
+            var $node = $(node);
+            var oldid = $node.attr('aria-controls');
+            var newid = oldid.replace(fieldmatch, "deformField$1-" + genid);
+            $node.attr('aria-controls', newid);
+            $node.attr('href', "#" + newid);
+            });
+
         $htmlnode.insertBefore(before);

         $(deform.callbacks).each(function(num, item) {

[stevepiercy]

I would accept a PR that resolves this issue with tests and a signed https://github.com/Pylons/deform/blob/master/CONTRIBUTORS.txt. Please let me know what I can do to help move this forward.