reverse navlinks in xenforo.js

[Weppa333]

Hi

I'm trying to custimize xenforo.js ; because I think the responsive way to hide the navbar is wrong : the navtabs (dark blue on this site) are hidden in a way that makes sense ( the one at the left is always visible) but the navlinks ( light blue here) are hidden the other way ( the one at the right is kept last )

This is handled by

        updateVisibleNavigationLinks: function()
        {
            var $linksList = $('#navigation').find('.navTab.selected .blockLinksList');
            if (!$linksList.length)
            {
                return;
            }

            var    $links = $linksList.find('> li'),
                listOffset = $linksList.offset(),
                $hidden = $links.filter('.navigationHidden'),
                $firstHidden = false;

            $links.show();
            $hidden.hide();

            if ($linksList.is('.showAll'))
            {
                return;
            }

            var hiddenForMenu = [],
                $lastLink = $links.filter(':not(.navigationHidden)').last(),
                hideOffset = 0,
                hasHidden = false,
                lastCoords,
                $link;

            if (!$lastLink.length)
            {
                return;
            }

            do
            {
                lastCoords = $lastLink.coords();
                if (lastCoords.top > listOffset.top + lastCoords.height)
                {
                    $link = $links.eq(hideOffset);
                    $link.hide();
                    hiddenForMenu.push($link);
                    hideOffset++;

                    if (!hasHidden)
                    {
                        hasHidden = true;

                        if (!$hidden.length)
                        {
                            $hidden = $('<li class="navigationHidden Popup PopupControl PopupClosed"><a rel="Menu" class="NoPopupGadget">...</a><div class="Menu blockLinksList primaryContent" id="NavigationLinksHiddenMenu"></div></li>');
                            $linksList.append($hidden);
                            new XenForo.PopupMenu($hidden);
                        }
                        else
                        {
                            $hidden.show();
                        }
                    }
                }
                else
                {
                    break;
                }
            }
            while (hideOffset < $links.length);

            if (hasHidden)
            {
                if (hideOffset < $links.length)
                {
                    var coords = $hidden.coords();
                    if (coords.top > listOffset.top + coords.height)
                    {
                        $link = $links.eq(hideOffset);
                        $link.hide();
                        hiddenForMenu.push($link);
                    }
                }

                var $hiddenList = $('<ul />');
                $(hiddenForMenu).each(function() {
                    $hiddenList.append(
                        $('<li />').html($(this).find('a').clone())
                    );
                });
                $('#NavigationLinksHiddenMenu').html($hiddenList).xfActivate();
            }
        },

I tried reversing $linkslist, which helps, but the entire logic to HIDE the links (bottom of the script) has to be rewritten I think...
Or maybe there's a simpler way that is simply out of my understanding

can anyone help ?

 

[refael]

updateVisibleNavigationLinks: function()

{
    var $linksList = $('#navigation').find('.navTab.selected .blockLinksList');
    if (!$linksList.length)
    {
        return;
    }

    var    $links = $($linksList.find('> li').get().reverse()),
        listOffset = $linksList.offset(),
        $hidden = $links.filter('.navigationHidden'),
        $firstHidden = false;

    $links.show();
    $hidden.hide();

    if ($linksList.is('.showAll'))
    {
        return;
    }

    var hiddenForMenu = [],
        $lastLink = $links.filter(':not(.navigationHidden)').first(),
        hideOffset = 0,
        hasHidden = false,
        lastCoords,
        $link;

    if (!$lastLink.length)
    {
        return;
    }

    do
    {
        lastCoords = $lastLink.coords();
        if (lastCoords.top > listOffset.top + lastCoords.height)
        {
            $link = $links.eq(hideOffset);

            if($link.hasClass('navigationHidden')){
                hideOffset++;
                continue;
            }

            $link.hide();
            hiddenForMenu.push($link);
            hideOffset++;

            if (!hasHidden)
            {
                hasHidden = true;

                if (!$hidden.length)
                {
                    $hidden = $('<li class="navigationHidden Popup PopupControl PopupClosed"><a rel="Menu" class="NoPopupGadget">...</a><div class="Menu blockLinksList primaryContent" id="NavigationLinksHiddenMenu"></div></li>');
                    $linksList.append($hidden);
                    new XenForo.PopupMenu($hidden);
                }
                else
                {
                    $hidden.show();
                }
            }
        }
        else
        {
            break;
        }
    }
    while (hideOffset < $links.length);

    if (hasHidden)
    {
        if (hideOffset < $links.length)
        {
            var coords = $hidden.coords();
            if (coords.top > listOffset.top + coords.height)
            {
                $link = $links.eq(hideOffset);
                $link.hide();
                hiddenForMenu.push($link);
            }
        }

        var $hiddenList = $('<ul />');
        $(hiddenForMenu).each(function() {
            $hiddenList.prepend(
                $('<li />').html($(this).find('a').clone())
            );
        });
        $('#NavigationLinksHiddenMenu').html($hiddenList).xfActivate();
    }
},

Diff

 

[Jake B.]

It may also be good to note you probably shouldn't directly edit xenforo.js as your changes will be removed when you update XenForo. You should overwrite the function from another js file

 

[Weppa333]

thanks this is a life saver
I've tried this in debug mode and works as expected.
I tried minifying it but it does not work. It's probably easier to edit (make a diff) on the minified version.
Can anyone who actually knows how to minify properly these scripts share a diff on the minified version ?

 

[refael]

You probably would want to do as Jake suggested and overwrite the function, without editing the original file.
Create a js file with the following content

XenForo&&(XenForo.updateVisibleNavigationLinks=function(){var b=$("#navigation").find(".navTab.selected .blockLinksList");if(b.length){var c=$(b.find("> li").get().reverse()),h=b.offset(),d=c.filter(".navigationHidden");c.show();d.hide();if(!b.is(".showAll")){var f=[],k=c.filter(":not(.navigationHidden)").first(),e=0,g=!1,a;if(k.length){do if(a=k.coords(),a.top>h.top+a.height)a=c.eq(e),a.hasClass("navigationHidden")?e++:(a.hide(),f.push(a),e++,g||(g=!0,d.length?d.show():(d=$('<li class="navigationHidden Popup PopupControl PopupClosed"><a rel="Menu" class="NoPopupGadget">...</a><div class="Menu blockLinksList primaryContent" id="NavigationLinksHiddenMenu"></div></li>'),b.append(d),new XenForo.PopupMenu(d))));else break;while(e<c.length);if(g){e<c.length&&(b=d.coords(),b.top>h.top+b.height&&(a=c.eq(e),a.hide(),f.push(a)));var l=$("<ul />");$(f).each(function(){l.prepend($("<li />").html($(this).find("a").clone()))});$("#NavigationLinksHiddenMenu").html(l).xfActivate()}}}}});

 

[Weppa333]

thanks @rellect ! I added this between <script> tags and the end of the page_container and it works this way, as far as I can see.
Maybe there is a "download timing" issue in putting the script directly in the html ? If so, I'll put it in an external one.

 

[refael]

Should be fine. Move it to file when you'll have more custom scripts. The benefit of a js file is that it can be cached by the browser.