• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

reverse navlinks in xenforo.js

Weppa333

Active member
#1
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

Code:
        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 ?
 

rellect

Well-known member
#2
Code:
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.

Well-known member
#3
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

Active member
#4
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 ?
 
Last edited:

rellect

Well-known member
#5
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
HTML:
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

Active member
#6
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.
 

rellect

Well-known member
#7
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.