1. 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

Discussion in 'XenForo Development Discussions' started by Weppa333, May 22, 2015.

  1. Weppa333

    Weppa333 Active Member

    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 ?
     
  2. rellect

    rellect Well-Known Member

    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
     
    Weppa333 likes this.
  3. Jake B.

    Jake B. Well-Known Member

    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 ;)
     
  4. Weppa333

    Weppa333 Active Member

    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: May 22, 2015
  5. rellect

    rellect Well-Known Member

    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()}}}}});
     
  6. Weppa333

    Weppa333 Active Member

    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.
     
  7. rellect

    rellect Well-Known Member

    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.
     

Share This Page