[Form] Added additional data attributes for collection type output #10071

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
5 participants
Contributor

leevigraham commented Jan 19, 2014

Refactored and up to date w/ master version of: #7713

Q A
Bug fix? no
New feature? yes
BC breaks? no
Deprecations? no
Tests pass? yes
Fixed tickets na
License MIT
Doc PR WIP
  • fix the tests as they have not been updated yet
  • submit changes to the documentation

I've added 4 extra data-* attributes to collections in twig and php views for easier js manipulation.

New attributes:

  • data-form-widget='collection': This is a collection and all children are form types
  • data-collection-allow-add: Allow adding of new elements
  • data-collection-allow-delete: Allow deletion of elements (new and existing)
  • data-prototype-name: The prototype name

This should make javascript integration much easier.

Example js:

$('[data-form-widget=collection]').each(function(){

    var $collection = $(this),
        prototypeString = $collection.data('prototype'),
        prototypeName = $collection.data('prototypeName') || '__name__',
        prototypeNameRegx = new RegExp(prototypeName+"(label__)?","g"),
        count = $collection.children().length;

    console.log(this, count, prototypeString);

    var $deleteLink = $("<span />", {
        'class': 'js-delete',
        'text': 'Delete'
    });

    var $addLink = $("<span />", {
        'class': 'js-add',
        'text': 'Add'
    });

    if($collection.data('collectionAllowDelete')) {

        $collection
            .children()
            .append($deleteLink.clone(true));

        $collection.on('click', '.js-delete', function(){
            event.preventDefault();
            $(this).parent().remove();
        });
    }

    if($collection.data('collectionAllowAdd')) {

        $addLink.click(function(event){
            event.preventDefault();
            var newPrototypeString = prototypeString.replace(prototypeNameRegx, count),
                $newPrototype = $(newPrototypeString).append($deleteLink.clone(true));
            $newPrototype.insertBefore($addLink);
            count++;
        });

        $collection.append($addLink);
    }
});

Replaces #7713

Contributor

leevigraham commented Jan 19, 2014

Regarding the docs updates. Currently there are two spots which describe the javascript functionality required to add and remove collection items:

Should both of thee pages be cleaned up moving the examples to the cookbook?

@webmozart webmozart changed the title from Added additional data attributes for collection type output to [Form] Added additional data attributes for collection type output Apr 8, 2014

ignace commented Oct 13, 2014

ping @leevigraham Are you still doing anything with this?

Contributor

webmozart commented Oct 16, 2014

@leevigraham Sorry for the late feedback. What's the status of this PR?

Contributor

leevigraham commented Oct 19, 2014

I'll have to check the PR again and rebase against master. I've been doing a lot of work with collections and forms so I might have to update the PR.

Contributor

jrobeson commented Dec 29, 2014

@leevigraham : ping?

Member

wouterj commented Jun 14, 2015

Now we are in the dev phase of 2.8 & 3.0, do you have some time to look at this PR again @leevigraham ?

Contributor

leevigraham commented Jun 15, 2015

@wouterj I'm about to start on a big form based project in the next few weeks. I'm sure there will be some updates.

I'm thinking these will need to be 3.0 updates as they will probably break BC.

Contributor

webmozart commented Jun 16, 2015

@leevigraham Ok, sounds good! I'm closing this PR for now. Please open a new one when you have your updates ready.

@webmozart webmozart closed this Jun 16, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment