Fixes the mention and tag picker

[tax]

Add callback to create formatted links for tags and mentions

[gyst]

@pilz can you please comment on this? I thought we wanted to keep ploneintranet clean, no javascript, and this kind of stuff should be supported by the pattern directly.

[pilz]

@jcbrand one for you!

[jcbrand]

@gyst yes, all dynamic JS-based functionality should use standard patterns or otherwise be encapsulated in custom patterns.

Looking at this snippet of code from the diff for example:

    $('body').on('submit', 'div.mentions form#items', function(e){
        $('em#selected-users').removeClass('injecting injecting-content');
        e.preventDefault();
        var links = [];
        //Create @ links for user
        $("label.item.user.checked").map(function(i, el){
            var user_id = $(el).find('input').val();
            var username = $(el).find('strong').html();
            var link = '<a href="#' + user_id +'" data-userid="' + user_id + '">@' + username + '</a>';
            links.push(link);
        });
        $('em#selected-users').html(' — ' + links.join(''));
    });

It registers an event handler for when a form is submitted which will then update a DOM element em#selected-users to show the users who were checked in the form.

What this code does can be done with pat-inject.

Please note: I don't know much about the context of this, so I'm going with what I have in this diff.

The Patterns way of doing this would be to put class="pat-inject" on the form and let the form's action point to the same page.

You then specify a "source" for the pattern which points to the element in thepage which you want to have "refreshed" (have content injected into).

    <div class="mentions">
        <form id="items" class="pat-inject"
                  tal:attributes="action here/absolute_url" 
                  data-pat-inject="source: #selected-users">
            <label class="item user checked">
                John Smith
                <input type="checkbox">
            </label>

            <label class="item user">
                Max Musterman 
                <input type="checkbox">
            </label>
        </form>

        <em id="selected-users">
            <tal:loop repeat="view/selected_users">
                <a tal:attributes="href string:#${user_id}; data-userid ${user_id}" 
                      tal:content="@${username}">@User</a>
            </tal:loop>
        </em>
    </div>

The benefit of this approach is that no custom JS is needed and that the page is accessible even if Javascript is disabled.

[tax]

@jcbrand sorry just picked this up again, thanks for explaining really appreciate it.

This is the the updated solution. https://github.com/cosent/plonesocial.core/pull/13