Multiple exposed elements

[arturoribes]

I have been experimenting with Trip.js but I am missing a functionality which can come handy in some use cases. For example, "exposing multiple options in a menu". I see that if you use a class shared by many elements, only the first one gets exposed.

I have edited the code in two parts, namely the methods showExposedElements and hideExposedElements

For showExposedElements I did the following change (just convert the oldCSS object to an array of objects using $.map):

if ($sel.get(0) !== undefined) {

    var oldCssArray = $sel.map(function(i, v) {
        return {
            position: $(v).css('position'),
            zIndex: $(v).css('z-Index')
        };
    });
    var overlayZindex = this.settings.overlayZindex;
    var newCssArray = oldCssArray.map(function(i,oldCSS) { 
        return {
            position: (function() {
                // NOTE: issue #63
                // We can't direclty use 'relative' if the original element
                // is using properties other than 'relative' because
                // this would break the UI.
                if (['absolute', 'fixed'].indexOf(oldCSS.position) > -1) {
                return oldCSS.position;
                }
                else {
                return 'relative';
                }
            }()),
            // we have to make it higher than the overlay
            zIndex: overlayZindex + 1
        }
    });

    $.each($sel, function(i, elem) {
        $(elem)
        .data('trip-old-css', oldCssArray[i])
        .css(newCssArray[i])
        .addClass('trip-exposed');
    });
}

And an equivalent change in hideExposedElements:

if ($exposedSel.get(0) !== undefined) {
    $.each($exposedSel, function(i, elem) {
        var oldCSS = $(elem).data('trip-old-css');

        $(elem)
            .css(oldCSS)
            .removeClass('trip-exposed');
    });
}

I have not addressed the issue of positioning of the trip element, which currently is relative to the first element of the exposed elements array.
Hope it is useful to somebody and/or it can get included in next updates.

[EragonJ]

interesting, if you want to expose multiple items at the same time, where should Trip.js put the hint ?

[arturoribes]

That is the key question. Let me introduce some background. This feature arose from my need of exposing a few menu options, implemented as <li> elements.
Usually, you would wrap all the elements with e.g. a <div> element, and expose that element, but that is not very advisable because a) you potentially introduce too much changes in the UI and b) some elements cannot be wrapped (like the <li> element stated above).

In that case, the solution I proposed in this thread comes in handy, and the hint could be put relative to the bounding box of the exposed elements. If it is the case that the exposed elements are not "together" (like in the case of menu items), then you could fall back to screen coordinates, which makes more sense if exposed elements are spread in various locations, or even add an extra option of which element to place the hint relative to.